Category: Frontend

React Server Components: A Practical Guide to RSC in React

📌 Introduction to React Server Components React Server Components (RSC) are one of the most exciting innovations introduced with React 18. They unlock the ability to render components on the server without sending extra JavaScript to the client. This article covers: Let’s dive in. 💡 What Are React Server Components? React Server Components (RSC) allow.

Preact: The Lightweight Alternative to React

When it comes to building fast and lightweight JavaScript applications, Preact emerges as a standout option. With its small size and compatibility with React, Preact is a fantastic choice for developers looking to optimize performance without sacrificing functionality. In this article, we’ll explore what Preact is, how it compares to React, how to get started.

Google reCAPTCHA with React

When building modern web applications, ensuring the security of forms and other inputs is crucial. Google reCAPTCHA is one of the best tools to protect your site from bots and spam. In this guide, we will explore how to integrate Google reCAPTCHA into a React application. By the end of this tutorial, you’ll have a.

Hosting JavaScript Files on jsDelivr

Hosting JavaScript Files on jsDelivr JavaScript is an essential part of modern web development, powering interactive features on websites and web applications. But managing and delivering these scripts efficiently can be challenging. This is where jsDelivr, a free and fast open-source Content Delivery Network (CDN), comes into play. In this guide, we’ll explore how hosting.

Google ReCaptcha

Having Google reCaptcha on your website can really be beneficial in order not get spammed by bots and robots. Let’s see how to implement that the frontend way. Backend Ok, so as a frontend developer, do I need a backend solution for that? The good news is, No. You can only rely on Google APIs.

D3.js Bar Chart

I’ve been playing A LOT with D3.js now and you always feel like it’s so hard, and you are right, it’s kinda tricky, but once you put everything in place, it starts making sense. I will try to walk you through creating a bar chart with D3 and will try to explain every line in.

Lazy Loading Angular Third Party

You are lazy loading everything in your Angular application, and you say … hmmmm, wait, what if I want to lazy load everything, like EVERYTHING !!, you lazy loaded your modules, components, but you’re thinking of lazy loading Angular third party dependencies, well, that’s good, but, even great, but how to do that? First Steps.

Google reCAPTCHA with Angular

You created your Angular app, of course with some forms and contact us forms, and people started to hop over your website and contacting you, some of them are just spam and running bots, you start to realize you need to install Google reCAPTCHA to avoid bots and spams. Let’s Jump Technically Get Google reCAPTCHA.

Angular using Vanilla JavaScript Libraries

Have you ever wanted a component in Angular and you’ve never found it on npm or github for any reason? You keep searching and searching, and you find it, but Oh ! it’s written in javascript, not angular 🥲, What should we do now? You ever thought of how to add vanilla javascript libraries in.

Web Components

When we think of web components, we always jump to our new modern next gen frameworks like, Angular, React, Vue … etc. But what if we can create components, without using a framework. Is it good? Well, should we use a framework in the first place? That’s a tough question, what does a framework give.

Deploying Angular

Deploying Angular can be tricky for a lot of us. We; Frontend Developers kinda throw this shit over Backend Developers and we say, it’s not our shit 💩 and this leads us to not know the whole process and how does things work. But, that’s entirely wrong, we should know the whole process, from the.

Web Sockets and Angular

Using Web Sockets / WebSockets can be very helpful in a lot of nowadays applications/websites. The enormous flow of notifications, data, info, news and push notifications will be best handled by one of two things, either Web Sockets or SSE (Server Sent Events – Will speak about it in a later post). In this article,.

HTTP with Angular Universal

HTTP with Angular Universal is kinda a big deal 😎 have you ever thought, Ok, so Angular Universal Apps are rendered on the server and the resulting HTML is returned to the client .. hmmm, ok .. but that’s for static data. What if, I wanna call an API, get some data from the server,.

Angular SEO

Angular SEO is a big deal, because SEO (Search Engine Optimization) is what will bring visitors to your website, it’s nice to use SPAs (Single Page Applications) but of course it will be bad if you use them and lose your rank in search engines. As we were speaking in the previous post Angular Universal.