#webdev #laravel #php

Mastering Laravel Artisan Commands: Optimize, Tinker, and More

Laravel's Artisan command-line interface is a powerful tool that can significantly enhance your development workflow. Whether you’re clearing caches, optimizing performance, or creating custom commands, understanding and utilizing these commands effectively can streamline your development process and make it more efficient. In this blog post, we’ll explore several essential Artisan commands and their use cases, including clearing and optimizing caches, interacting with your application using Tinker, listing available commands, and creating custom commands.

👉 Read article

@webdev_trends

#webdev #laravel #php

Learn how to create custom Facades in Laravel

Laravel Facades are a fantastic feature of the Laravel framework, providing convenient access to services via a simple interface. One thing that confused me when I was first learning Laravel was the facade accessor method.

Once you understand that facades are a convenient way to access underlying services in Laravel's service container, you can easily track the service behind ANY facade. Each facade provides a getFacadeAccessor() method that points to the registered service name.

👉 Read article

@webdev_trends

#webdev #HTML #jQuery #tutorial

How to Convert HTML to Excel File using jQuery

Hello, web developers! In this article, we'll see how to convert HTML to Excel using jQuery. Here, we'll use the jQuery plugin to convert HTML to an Excel file. You can click on the download button and Excel file download from the HTML.

Recently, I needed to convert an HTML table to an Excel file for a project I was working on. After some research and experimentation, I found an easy way to do it using jQuery and a library called SheetJS. Here's a step-by-step guide on how I did it.

SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets.

👉 Read article

@webdev_trends

#webdev #react #javascript #typescript

How to Build a React Hook That Handles Sequential Requests

When you need to respond quickly to user actions and fetch the latest data from the backend, you might require a React Hook that supports sequential requests. This hook can cancel previous requests if they are still ongoing and only return the most recent data. This not only improves performance but also enhances the user experience.

👉 Read article

@webdev_trends

#webdev #javascript

The Differences Between `export default xx` and `export {xx as default}`

A comprehensive guide to understanding the differences between export default and named exports in JavaScript

👉 Read article

@webdev_trends

#webdev #javascript #tutorial

🌍💻 Unleashing the Power of the Navigator Object in JavaScript

Have you ever wondered how websites know so much about your browser and device? 🤔 Meet the navigator object in JavaScript—a versatile tool that acts as a bridge between your web application and the user’s environment. Whether you're looking to gather insights about the user's browser or tap into device-specific features, navigator is your go-to resource. In this post, we’ll dive deep into the essential properties and methods of the navigator object, revealing how it can help you build more dynamic, personalized, and interactive web experiences.

👉 Read article

@webdev_trends

#webdev #javascript #react #redux #tutorial

The Evolution of React State Management: From Local to Async

This article presents an overview of how State was managed in React Applications thousands of years ago when Class Components dominated the world and functional components were just a bold idea, until recent times, when a new paradigm of State has emerged: Async State.

👉 Read article

@webdev_trends

#webdev #javascript #beginners #tutorial

Optional Chaining and Nullish Coalescing

Let’s say you have an object representing a user, and you want to access their address.

👉 Read article

@webdev_trends

#webdev #javascript #blockchain #tutorial

Let's Build a Blockchain with JavaScript! A Beginner's Guide

Ever heard of Bitcoin, Ethereum, or NFTs? These are all powered by blockchain technology, a revolutionary way to manage and share information securely and transparently.

But how does it work? It might seem complicated at first, but trust me, it's not as intimidating as it sounds! This guide will make blockchain development feel accessible, even if you're just starting out.

👉 Read article

@webdev_trends

#webdev #javascript #tutorial

Understanding Tree Shaking in JavaScript: A Quick Guide

As modern web applications grow in complexity, so does the need to optimize their performance. One powerful technique that has gained popularity in recent years is tree shaking. If you’ve heard the term but aren’t quite sure what it means or how it works, this post is for you.

👉 Read article

@webdev_trends

#webdev #css #tutorial

12 Simple and Effective CSS Transition Effects for Your Website

CSS transitions are a great way to add subtle animations to your website, improving the user experience and adding a touch of interactivity. Below are 12 CSS transition effects you can easily implement in your projects.

👉 Read article

@webdev_trends

#webdev #javascript #TypeScript #tutorial

15 TypeScript Features That Will Make You a Better JavaScript Developer

If you're a JavaScript developer, you've probably heard the buzz around TypeScript. It's more than just a trend—TypeScript is a powerful tool that enhances your JavaScript code by adding static typing, which helps catch errors early, improves code readability, and makes your projects more scalable.

👉 Read article

@webdev_trends

#webdev #javascript #tutorial

How To Add Auth With Lucia To Your React/Next.js App - A Step By Step Guide

Although authentication is one of the most common web app features, there are so many different ways to go about it, which makes it a very non-trivial task. In this post, I will share my personal experience using Lucia - a modern, framework-agnostic authentication library that has been getting, deservedly so, a lot of love from the community in recent months.

👉 Read article

@webdev_trends

#webdev #javascript #tutorial

Make your life easier with Set Compositions

Finally! When Set was introduced in the past it already made our lives better. We were able to easily generate unique lists, but also have better performance on finding and setting items on those lists.

That was great, but we were still missing several things that other languages had. And this is true, because we were. With the new composition methods added to Set in 2024, we will finally be able to do union, intersection, difference, and more with simple calls.

👉 Read article

@webdev_trends

#webdev #javascript #tutorial

TDD vs. BDD: Understanding the Differences and Choosing the Right Approach

In software development, testing plays a crucial role in ensuring that the code meets its requirements and functions as expected. Two popular testing methodologies—Test-Driven Development (TDD) and Behavior-Driven Development (BDD)—offer structured approaches to writing high-quality, maintainable code. Though both TDD vs BDD focus on testing, they differ significantly in their approach and philosophy. This post explores the differences between TDD vs BDD, helping you understand when to use each methodology.

👉 Read article

@webdev_trends

#webdev #javascript #react #tutorial

Using React Hot Toast as a Notification Provider for CRUD apps

Building data-intensive enterprise web applications entails coalescing numerous features that have proven to be cumbersome to develop.

An effective notification system ensures proper feedback for changes throughout your application, effortlessly improving the user experience, which has become a hallmark for modern applications.

Javascript libraries like React simplify the difficulty of building data-intensive web applications with their innovative architecture and developer-friendly syntax in an ever-evolving ecosystem. There's only so much React can do to provide a foolproof solution for building these kinds of applications. This is where frameworks like Refine come into play.

👉 Read article

@webdev_trends

#webdev #css #frontend #tailwind #tailwindcss #heroicons

Using Heroicons with TailwindCSS

Heroicons are SVG-based icons packaged by the creators of TailwindCSS. They come in two size variants, 20, which is suitable for small buttons and form elements, and a 24 size, that is useful for primary navigation buttons like call to action and hero sections. 24 size comes as solid and outline.

A Heroicon is a React component that returns an <svg> element with props passed to it. We are able to set values for the properties of the <svg> element, such as className, stroke, and fill, by passing them to the Heroicon component.

👉 Read article

@webdev_trends

#webdev #css #frontend #tailwind #tailwindcss #react #javascript

Tailwind Flex for Responsive React Components

TailwindCSS is a robust CSS framework that provides numerous utility classes for layout, sizing, colors, typography, etc. One of the most powerful capabilities Tailwind provides is responsive variants of utility classes for all screen sizes. Tailwind also supports variants for an element's states like hover, focus, active, and so on.

CSS Flexbox is supported by TailwindCSS with Flex classes that are initiated with flex and further styled with intuitive and easy to remember placement classes like justify-start, justify-center, items-start, items-center, and the like. Layout direction is manipulated using classes named flex-col and flex-row.

👉 Read article

@webdev_trends

#webdev #css #frontend

The CSS contain property

The purpose of CSS’ contain property (“CSS containment”) is twofold:

1. Optimization
2. Styling possibilities

When we apply contain to an element we’re isolating it (and it’s descendents) from the rest of the page, and this isolation what opens those possibilities. There are different types of containment which all do different things, and we’ll be getting into each of them.

👉 Read article

@webdev_trends

#webdev #css #frontend

RTL Styling 101

A couple of weeks ago I was super excited about publishing my first CSS-Tricks post: “Letter Spacing is Broken. Forget about that though, what’s important is the post’s topic: letter spacing is broken and doesn’t work as the CSS Specification says it should. In a nutshell, instead of spacing the characters evenly, it leaves an unpleasant space at the end of the element.

While this inconsistency between the web and the spec is just a quirk for a Spanish/English speaker like me, for speakers of right-to-left (RTL) languages like Arabic or Hebrew, an annoying space is left at the start or end of a word. Firefox (Gecko) kinda fixes it and rearranges the unnecessary space at the end (in the reading order), but Google and Safari (Blink and Webkit) leave it at the start.

👉 Read article

@webdev_trends

#webdev #javascript #frontend

All About JavaScript Loops

Every programming language has loops. Loops perform an operation (i.e., a chunk of work) a number of times, usually once for every item in an array or list, or to simply repeat an operation until a certain condition is met.

JavaScript in particular has quite a few different types of loops. I haven’t even used all of them, so for my own curiosity, I thought I’d do a high-level overview of them. And as it turns out, there are pretty good reasons I haven’t used at least a couple of the different types.

👉 Read article

@webdev_trends