#webdev #javascript #jsx #typescript #webcomponent

Build Reactive Web Components with SSR

Traditional way of writing Web Components is not very SSR (Server Side Rendering) friendly. In this post, I show you how you can build reactive Web Components that work with SSR and with any JavaScript framework (Vue, React, Svelte, Solid, Brisa) or Vanilla JS.

👉 Read article

@webdev_trends

#webdev #javascript #typescript #beginners

Mastering TypeScript Generics: Enhancing Code Reusability and Type Safety

TypeScript has revolutionized the way we write JavaScript, bringing static typing and enhanced tooling to our development process. One of its most powerful features is generics, which allow us to create reusable components that work with a variety of types. In this post, we'll dive deep into TypeScript generics, exploring how they can improve your code's flexibility and type safety.

👉 Read article

@webdev_trends

#webdev #javascript #beginners

A basic Introduction to JavaScript

JavaScript was introduced in 1995 to add programs to web pages in the Netscape Navigator browser. The language has since been adopted by all other major graphical web browsers. It has made modern web applications possible, with which you can interact directly without doing a page reload for every action. JavaScript is also used in more traditional websites to provide various forms of interactivity and cleverness.

👉 Read article

@webdev_trends

#webdev #javascript #beginners

Mastering JavaScript Functions: Your Guide to Normal vs. Arrow Functions

In JavaScript, functions are a fundamental building block of the language, allowing developers to define reusable blocks of code. Two primary types of functions in JavaScript are normal functions and arrow functions. While they may seem similar at first glance, they have distinct differences in terms of syntax, behavior, and use cases. This article will delve into these disparities step by step, providing detailed examples and covering all scenarios to help you grasp the nuances between normal functions and arrow functions effectively.

👉 Read article

@webdev_trends

#webdev #frontend #css #TailwindCSS #Tailwind #tutorial

How to use Tailwinds `safelist` to handle dynamic classes

Tailwind CSS is a popular utility-first CSS framework that allows developers to create custom designs quickly and efficiently. By default, Tailwind CSS generates a wide range of utility classes, which can lead to large file sizes. To address this issue, Tailwind CSS comes with a built-in feature called PurgeCSS that removes unused styles from the production build, making the final CSS file smaller and more performant. However, this automatic removal may sometimes cause issues when certain styles are used dynamically or conditionally in your application. In this article, we'll dive deep into the safelist feature in Tailwind CSS, learn how to whitelist specific styles, and explore various scenarios where using safelist can be helpful.

👉 Read article

@webdev_trends

#webdev #frontend #JavaScript #clipboard

Writing to the Clipboard in JavaScript

In my last article, I showed you how to enable your website to read a visitor’s clipboard. Now I’m going to follow up that guide with a look at writing to the clipboard. It goes without saying that in any use of this type of functionality, you should proceed with care and, most of all, respect for your visitors. I’ll talk a bit about what that means later in the article, but for now, let’s look at the API.

👉 Read article

@webdev_trends

#webdev #database #MySQL #sql

Basic MySQL Queries: A Comprehensive Guide

MySQL is one of the most popular relational database management systems (RDBMS) used for web applications and other data-driven applications. Whether you’re a beginner or someone looking to brush up on your MySQL skills, understanding the basic queries is essential. This blog will walk you through some fundamental MySQL queries that you can use for database operations, table manipulations, and data management.

👉 Read article

@webdev_trends

#webdev #tutorial #docker #nginx #github

Setting Up a VPS with Nginx, Docker, and GitHub Actions

In this article, we'll be walking through setting up a VPS using Nginx, Docker and Github Actions.

This setup will allow you to deploy your web projects seamlessly as soon as you push code to Github repos.

👉 Read article

@webdev_trends

#webdev #php #tutorial

How to Build Your First PHP Package

If you want to create a PHP package from scratch and share it with other PHP developers, Composer is a dependency manager that makes the process easy! Thanks to Composer, PHP has one of the top package ecosystems. Let's dive in together and walk through the steps to create a PHP package.

👉 Read article

@webdev_trends

#webdev #laravel #php #tutorial

Laravel 11 Add Chart to PDF Using html2canvas

Hello, laravel web developers! In this article, we'll see laravel 11 add chart to pdf using html2canvas. Here, we'll use echart.js for the bar chart and install the dompdf composer package to generate a PDF file in laravel. and we'll use the html2canvas jQuery plugin to create an image of a chart.

In this guide, we'll show you how to add dynamic Echart bar charts to PDF documents in a Laravel application.

By converting HTML content, including charts, into images using HTML to canvas, and then generating a PDF, you can easily include charts in your reports.

👉 Read article

@webdev_trends

#webdev #symfony #php #tutorial

Dynamic Route loading in a non standard Symfony structure

When you divert from Symfonys standard structure there are some things that do not work out of the box anymore. One of it is routing.

👉 Read article

@webdev_trends

#webdev #symfony #php #tutorial

Base entities and behaviors for Doctrine — how I do it.

If you work with Symfony, then you probably work with Doctrine as well. How do you create new entities? I try to make it easy.

I made a package Base Entity Bundle and I am actively using it in my personal / hobby projects.

👉 Read article

@webdev_trends

#webdev #symfony #php #tutorial

Custom Resolver For MapRequestPayload to handle Patch Request in Symfony

What’s up, guys! Today we’re going to talk about Symfony, especially attributes in Symfony and the new features MapRequestPayload and MapQueryParameter. These tools have made handling HTTP requests in our applications much more straightforward.

⚠️ However, while working with PATCH requests, I noticed a gap—keeping unspecified fields from being overwritten with null. This led me to develop a custom resolver, PatchRequestPayloadResolver, to solve that issue.

Let’s begin with some explaination 🤝

👉 Read article

@webdev_trends

#webdev #symfony #php #MySQL #tutorial

Using generated fields in MySQL

Recently I have been working on a migration of data from an old application to a brand spanking new Symfony 7 application. This migration included getting rid of the old Couchbase document database and moving to MySQL. MySQL has for quite some time already had a special JSON field type that is actually pretty cool. And using Doctrine, you don’t even notice it’s JSON, because there are automatic transformations to a PHP array structure.

👉 Read article

@webdev_trends

#webdev #Vue #Vuejs #JavaScript #js #tutorial

Vue.js Computed Properties

Computed properties in Vue.js enable you to carry out dynamic computations and manipulations on the component’s data. They are stored and only refreshed when their required dependencies alter, offering a smart method for handling intricate reasoning within your components.

👉 Read article

@webdev_trends

#webdev #Vue #Vuejs #React #Angular #JavaScript #js

Angular vs. React vs. Vue: Which One is the Best?

In the world of web development, choosing the right front-end technology is crucial for the success of your project. With several options available, Angular, React, and Vue are three of the most popular frameworks/libraries that developers often debate about. Each has its unique features, advantages, and drawbacks. In this article, we will explore these three technologies and help you determine which one is best suited for your needs.

👉 Read article

@webdev_trends

#webdev #React #JavaScript #js

Implementing SOLID Principles in React: A Guide for Scalable Development

In the fast-paced world of web development, building scalable and maintainable applications is paramount. As React developers, we often find ourselves seeking best practices to ensure our codebase remains clean, flexible, and robust as it grows. One set of principles that stands out for achieving this is SOLID.

👉 Read article

@webdev_trends

#webdev #JavaScript #js

How map() and Map are Different in JavaScript.

map() and Map are two of the most commonly confused topics in JavaScript because their names are so similar. However, they serve very different purposes. The map() function is used for iterating over arrays, while the Map object is a data structure that helps organize data in a structured way. Let’s dive into these concepts — I’ll do my best to make them easy to understand with clear examples.

👉 Read article

@webdev_trends

#webdev #Vue #Vuejs #JavaScript #js

5 Vue.js Mistakes You Should Avoid (and How to Fix Them)

Vue.js is one of the most popular JavaScript frameworks for building user interfaces and single-page applications. It offers developers a flexible, efficient, and powerful toolset to create dynamic and interactive web applications. However, like any other technology, Vue.js can be tricky, especially for beginners. Even seasoned developers can make mistakes that lead to suboptimal performance or maintainability issues. In this article, we'll explore five common Vue.js mistakes and provide practical advice on how to avoid and fix them. Whether you're a newbie or a seasoned Vue.js developer, this guide will help you write cleaner, more efficient code.

👉 Read article

@webdev_trends

#webdev #React #JavaScript #js

React : useCallback vs useMemo

These are both optimization hooks in React, but they serve slightly different purposes.

👉 Read article

@webdev_trends

#webdev #React #JavaScript #js

Pure Components in React: Unlocking Performance

In modern React development, performance is often a key focus, especially as applications grow in complexity. One of the most effective ways to optimize performance is by leveraging Pure Components in React. Pure Components offer a powerful optimization technique, reducing unnecessary re-renders and ensuring your applications run faster and smoother. In this blog, we'll dive into what Pure Components are, when and how to use them, and why they are crucial for performance tuning in React applications.

👉 Read article

@webdev_trends