Webdev

Webdev posts, videos, courses, and more

Bobby Iliev

1 day ago

View Post

How to get the Laravel Query Builder to Output the Raw SQL Query?

Introduction The Eloquent ORM included with Laravel provides you with an easy way of interacting with your database. This simplifies all CRUD (Create, read, update, and delete) operations and any other database queries. When troubleshooting problems with the Laravel query builder, you might want to see the actual SQL query that...
How to get the Laravel Query Builder to Output the Raw SQL Query?
3
Select One:

Maya Mishra

2 days ago

View Post

10 Questions To Ask Wordpress Developer Before Closing The Deal

Hiring the right WordPress developer who meets all your requirements is indeed challenging, especially if you are doing this job for the first time. The wrong hiring will not only cost you financially, but it will delay your project as well as impact your reputation. In order to make sure you hire WordPress developers that are...
10 Questions To Ask Wordpress Developer Before Closing The Deal
3
Select One:

Bobby Iliev

4 days ago

View Post

How to Quickly Change the Password for a User in Laravel?

Introduction In some cases, you might want to reset the password for your Laravel user quickly. Another reason might be that you could be having problems with your emails, and the reset password email is not being delivered. However, unlike WordPress, for example, where you could simply use MD5 to encrypt your password and updat...
How to Quickly Change the Password for a User in Laravel?
3
Select One:

Kevin Gardner

5 days ago

View Post

8 Tips for Launching a Coding Career

As the world becomes increasingly digital, demand for skilled IT professionals continues to boom. Whether you are a career changer or a new graduate looking for your first job, these six tips can help you launch your coding career. Learn How To Sell Yourself Even if you are relatively new to the world of coding, you probably hav...
8 Tips for Launching a Coding Career
2
Select One:

Bello Noah

6 days ago

View Post

What is React?

This article is sponsored by Flutterwave - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free! React happens to be the most popular JavaScript framework sourced from Stack Overflow Developer Survey (2020). It is the best alternative to...
What is React?
2
Select One:

Sam

1 week ago

View Post

How to convert an Array into a Comma-Separated List in JavaScript

In this article, we'll cover how to convert an array into a comma-separated list in Javascript using either the toString() or join() methods. Let's get it started! toString() We'll go over the toString() method first, which will result in the formation of a string concatenated by commas. Here's what the code looks like: const ar...
How to convert an Array into a Comma-Separated List in JavaScript
2
Select One:

Temani Afif

1 week ago

View Post

Wrapping text inside a circular shape

Yes, we are going to make a text wrap perfectly inside a circular shape. No JS, no SVG, no external plugin. Only few lines of CSS and a basic HTML structure. {% codepen https://codepen.io/t_afif/pen/dyOWVrr %} Explanation <div class="box"> <i></i> Lorem ipsum .. </div> div.box { --s:450p...
Wrapping text inside a circular shape
3
Select One:

Petre Popescu

1 week ago

View Post

You should always do server-side validation! Always!

Original article with another example on my personal website Web technologies have evolved a lot in the past few years, both on the server-side as well as on the client’s side. There are many web frameworks, UI kits, JavaScript libraries and everything you need to easily and rapidly develop a website or web application. JavaScri...
You should always do server-side validation! Always!
4
Select One:

krissanawat101

1 week ago

View Post

Getting a Start in React Hook Form

We know that forms are an essential component in web apps. They are specially used to interact with the end-users. It helps to collect data from the end-users and perform operations accordingly. They are widely used in Sign-up and Sign-in processes or registering any query. It is a primary component that enables text-based inter...
Getting a Start in React Hook Form
2
Select One:

Vlad Pasca

1 week ago

View Post

5 things you need to do when learning how to code

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on Twitter for more information about web development and how to improve as a developer. 1. You need to be consistent Coding is something new for your brain and it needs to get used to that. How you do this? By exposing it to...
5 things you need to do when learning how to code
4
Select One:

krissanawat101

1 week ago

View Post

Getting Started with React Modal

If you want to display any additional information or feature that does not require to take any extra space in the web/mobile UI screen then what better to use than Modals. Modals are the dialog that helps us with any extra information or feature without having to navigate to another screen. Modals pop up over the same screen whi...
Getting Started with React Modal
1
Select One:

Temani Afif

1 week ago

View Post

3D image with one element

A quick trick to create a 3D illustration using only an <img> tag. No pseudo elements, no extra tag, no SVG, Nothing! Only one tag and few lines of CSS. Here you go {% codepen https://codepen.io/t_afif/pen/NWbdYJE %} Let's dig into the code img { --x:10px; --y:20px; clip-path:polygon( /* 4 */ var(--y)...
3D image with one element
4
Select One:

Kevin Gardner

1 week ago

View Post

6 Tips To Avoid Burnout As a Coding Professional

If you work in a computer-related field, such as professional coding, hours in front of a screen can pass in the blink of an eye. Before you know it, you're feeling achy, frustrated and stressed. To others, a computer coder may appear to have a comfy, pressure-free job. However, when you're the one sitting behind the screen, you...
6 Tips To Avoid Burnout As a Coding Professional
1
Select One:

Vlad Pasca

1 week ago

View Post

Web developer roadmap in 2021 and beyond

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on Twitter for more information about web development and how to improve as a developer. 1. Learn how the internet works Zero to mastery playlist MDN Introduction 2. Learn HTML HTML Crash Course For Absolute Beginners Basic HTML...
Web developer roadmap in 2021 and beyond
1
Select One:

Derek Oware

1 week ago

View Post

Device Detection with the User-Agent

Have you ever wanted to implement a feature for a specific platform or device? Like show a screen or some content to mobile users only or execute a different an action based on the user's device I usually come across contents on sites that are clearly meant for mobile users only while I browse on desktop. The User-Agent can be h...
Device Detection with the User-Agent
Select One:

Temani Afif

1 week ago

View Post

Float an image to the bottom corners

Floating an image to the right or the left? well, this is an easy task but what about floating an image to the bottom left or bottom right. Sounds a bit tricky, we probably need JS to handle this? No, few lines of CSS can do it! {% codepen https://codepen.io/t_afif/pen/JjbEXYm %} Yes I know, it's not easy to get it at first glan...
Float an image to the bottom corners
1
Select One:

Piyush Sinha

1 week ago

View Post

Introduction to Storybook for Web Components

As a frontend software engineer, developing clean and functional user interfaces is a big part of what I do. Building these interface components is a very expensive and effort consuming task. Making sure the UI works flawlessly involves a lot of testing: unit testing, manual testing, cross-browser testing, mobile responsiveness...
Introduction to Storybook for Web Components
2
Select One:

linkish.io

1 week ago

View Post

How to create true cross-browser extensions?

How to name your extension? Firefox has a limit of 50 characters on the add-on title but Chrome allows a bit more than that. To be able to use the same manifest.json file, stick to 50 characters with the name. If you are not an established brand then no one is going to find you just by your product name. Focus on your Unique Se...
How to create true cross-browser extensions?
2
Select One:

Brendan Duffy

2 weeks ago

View Post

Arrays, Loops and Functions as Explained to a Five-Year Old

If I had to explain arrays, loops and functions to a 5-year old this is how it would go. I have a 5-year old daughter so I imagined I was speaking to her when I wrote this. Here goes nothing...no I got this right little dude?!: Arrays, loops and functions are different things inside a computer's brain that help it to think, ma...
Arrays, Loops and Functions as Explained to a Five-Year Old
2
Select One:

krissanawat101

2 weeks ago

View Post

Getting Started With React Table With Fakestore API #4 : Export PDF, Excel, CSV

We managed to make our React table feature-full by adding sorting, filtering, grouping, and pagination features to it. These features will make the information represented in the table easier and efficient to read and analyze. Now in most cases, tables representing a particular set of data may not be only required for virtual vi...
Getting Started With React Table With Fakestore API #4 : Export PDF, Excel, CSV
1
Select One:

krissanawat101

2 weeks ago

View Post

Getting Started With React Table With Fakestore API #3 : Grouping and Pagination

Last time we integrated the Sorting and Filtering functionality to out React table using the react-table package. In this tutorial, we are going to continue to add extra features to the React Table component. We are going to make the table feature full and efficient by adding the Grouping and Pagination feature to it. Grouping e...
Getting Started With React Table With Fakestore API #3 : Grouping and Pagination
2
Select One:

krissanawat101

2 weeks ago

View Post

Getting Started With React Table With Fakestore API

Tables are an essential component in web development. They help to display the data in a clean and structured manner making it easy to understand and filter. It provides a clean and intuitive look to the overall UI and presents the information in concise and precise dimensions. It optimizes the overall user experience in terms o...
Getting Started With React Table With Fakestore API
1
Select One:

krissanawat101

2 weeks ago

View Post

Getting Started on React Toast Notifications

Toast is an easy way to show the pop-up notification in any web application. It is easy and convenient to use as it can be triggered in response to any event in a web app. Showing a toast doesn't distort the overall UI as it appears in front of the overall UI as an overlay. They can be used to show any type of notifications incl...
Getting Started on React Toast Notifications
2
Select One:

Sunil Joshi

4 months ago

View Post

What the heck is Vue Vite?

Vite is a Lightening fast cold server that offers instant hot modules replacement and True on-demand compilation. This tool was created by the Creator of Vuejs, but this doesn’t mean that it can only be used in Vuejs, it could be used by libraries like Reactjs. Vite allows you to serve your code via native ES Module imports duri...
What the heck is Vue Vite?
7
Select One:

Artem

4 months ago

View Post

Getting Started with Static Websites - Learn Hugo

The format for the series is going to be beginner-friendly. Each post covers a single feature or some subset of a feature. It is assumed the reader has familiarity with HTML and CSS. Prior JavaScript experience is beneficial, but it is not a hard requirement. Static vs. Dynamic Websites Why use Hugo? or, you might ask Why use a...
Getting Started with Static Websites - Learn Hugo
7
Select One:

Sunil Joshi

4 months ago

View Post

The Ultimate Vue Cheat Sheet

Vuejs has become one of the most successfully applied, loved and trusted frontend JavaScript frameworks among our community. The Vue3 comes with a whole lot of new features. In this article we will go through all the fundamentals of Vue2 and Vue3. Basically a Vue Cheat Sheet to make your life easier. We will break it down into d...
The Ultimate Vue Cheat Sheet
9
Select One:

Sunil Joshi

6 months ago

View Post

Unit testing react components using Enzyme and Jest testing frameworks

In this tutorial, we will be writing unit test for a basic todo application using jest and react. Let’s get started. Jest Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quick...
Unit testing react components using Enzyme and Jest testing frameworks
8
Select One:

Loading More Content

Back to DevDojo