Looking at chunking API responses in front-end applications.
State management and data handling in modern React apps.
Small guide on Framer Motion.
A placeholder post for when it becomes stable.
A few things from TS 5.5 worth noting for development.
A working document of React Complier.
A working documents to keep track of everything coming in React 19.
The focus is on improving the performance of React applications.
Why it might be time to let go of useEffect and start looking into Signals instead.
Getting started with setting up sign up and log in/log out.
Short guide to Bun.
Snippets of combining types, utility types and advanced types.
A short introduction to how to use NextJS Server Actions.
A few examples of use cases for validation using Zod.
Here I look at different colour spaces; what they are, how they are currently being used and the future of them within development.
How to set up dynamic routes in a Next.js application.
Here I go through how to set up a blog using Astro and how to integrate SSR into an Astro application.
What are regular expressions and when would you need to use them? Here I go into methods used for regular expressions.
Steps on how to build a habit tracker via remix.
Getting a React Native app up and running.
A very basic overview of Web Speech API, along with an example.
Looking at two ways of setting up Sanity CMS with React applications.
Generics in TypeScript can be helpful for building reusable components within applications.
Stacks and Queues are similar but data retrieval is different. Here I discuss how they are different and how to approach questions are round these two topics.
A deep dive into TypeScript interfaces and how types are linked.
This is a working document of a music app I am creating.
Here I look into types within TypeScript. What they are, when to use them and how to use them in applications.
Dynamic programming requires solving problems by breaking them apart. Here I discuss Dynamic Programming patterns and how to solve problems.
Delving into Heaps as part of the Algorithms and Data Structures series. Like the other posts, this post follows a similar format with explanations and problem sets at the end.
Looking at the implementation of graphs. Covering searching graphs, famous graph algorithms and problem sets.
Recursion is what recursion says it is on the tin.
As part of the Algorithms and Data Structures series, I am covering Binary Search and Binary Search Tree. I go into detail about the difference between each, and when to recognise which one to use when faced with a question.
A proxy can has a number of different use cases. Here I discuss how to set up a NodeJS proxy.
Rememeber Redux and MobX? Well guess what, there are even MORE choices to pick from when it comes to implementing global state within React applications!
Next up in Algorithms and Data Structures is Sorting. There are a number of ways you can sort the data you are given. Depending on the complexity, type of data and how much of it you have, will depend on the most efficient sorting technique used.
As part of the Algorithms and Data Structures series, this part covers strings. Here I give examples of functions used for strings and how to use them when solving problems.
Steps to take to add ESLint to JavaScript projects."
Looking into JavaScript promises; what they are and how to implement them.
React hooks code snippets.
Looking at what a11y is, why it is important and techniques that could be implemented into a web application.
Code Snippets of DOM event handlers.
Looking into how JavaScript bundlers differ and which one would be the most benefical when creating an application.
Comparing PNPM, NPM and Yarn. Looking at what each one offers and what differentiates one from the other.
Container style queries are still in their infancy. Supported by Chromium and Safari, it's one I'll be keeping an eye on.
In this post I cover the basics of a Linked List, and dive into the differences between a singly, doubly and circular Linked Lists. Looking at the structure for each and problem sets.
Here I give a brief overview of cookies. Discussing what the difference is between sessions, cookies and local storage.
Playwright Test enables you to take out end-to-end testing on applications written in Node.js, Python, Java and .Net. It supports Chromium, WebKit and Firefox.
The web browser engine used by Safari, Mail, App Store and many other apps on macOS/iOS/Linux.
Another day, another front-end framework!
GraphQL is a fast and efficient query language for APIs. When compared to REST, it is known for it's performance when retrieving data and easiness for implementation. It can be incorporated into many tech stacks.
You're probably heard of es-lint and prettier. Rome is new and similar to both of these.
I'm going to attempt to teach you (and myself) how Algorithms and Data Structures are weaved into web applications!
Notes on Next.js new release to go back on.
In this post I look at flexbox/css grid, styling forms and responsiveness.
If you're building a web application, you're probably using a framework. And frameworks use components. Storybook enables you see and edit these components.
Here is the penultimate post of the Relearning CSS series!
In this post I deleve into styling images, z-index + positioning, and when to use !important.
A place for notes on React changes I'm keeping an eye on.
As promised, here is part two covering sizing units, the box model and links.
There are numerous CSS frameworks out there; all have their own uses, advantages and disadvantages. Here I delve into Chakra UI and look at some of the features which sets it apart from the others.
Here I explain the features of Next.js and a few reminders to myself when building with it.
A small introduction to React-Query with example code.
I'm starting a new series, in which I go through and look at different aspects of CSS.
Writing cleaner/easier-to-read code in ReactJS
Articles, libraries and other resources accumulated throughout December front-end newsletters.
Alternatives that can be used in place of Redux in React applications. 🙌
Articles, libraries and other resources accumulated throughout November front-end newsletters.
I've decided to set up a monthly round up of all the resources from the front-end newsletters that I have been neglecting for many months. This is for my own personal use but if it helps someone else then that's great too!
Typography in Tailwind has been tricky however recently a new plugin was launched! You no longer have to disable the default fonts on Tailwind or come up with a creative solution to manage fonts with Tailwind.
There are many small ways to ensure a front-end project is kept consistent amongst developers. Prettier is one way of ensuring code is formatted correctly. Files such as .nvmrc and .npmrc help lock the node version and ensure there are no conflicts with the version of the Node used with NPM packages.
Bit component Library is a cloud based website, which enables users to share components across multiple teams and projects.
Looking into how ReactJS, Angular and jQuery all differ when it comes to design patterns.
Dark mode has become a popular option when it comes to picking a theme for a website. Here I discuss my findings of Dark Mode and implmenting them wit React and Tailwind, and briefly look at alternative options to Tailwind.
There are two types of middleware that can be used when dealing with Redux. This post outlines the differences between the two and when you might choose to use one over the other.
Caching is a way of storing data, usually through cookies on a website, which leads to better performing websites.
A few notes on security vulnerabilities within JavaScript applications.
MobX enables you to cut out a lot of code that is used in Redux however Redux is a popular choice for state management.
Date formats/ timestamps can be tricky to handle in JavaScript, especially when it comes to time zones. This post explains how I deal with converting timestamps and the libraries I use in React.
There are a variety of different package managers you can choose from but what makes them different from each other?
There are a number of ways to improve the performance of an app; debugging, accessibility or running an audit on your app.
High Ordered Components are used in traditional Redux via `connect`. Hooks do not usually incorporate HOCs.
This post outlines how .map(), .filter() and .reduce() differ, with examples for each method.
This post covers programming data requests via fetch, axios, JavaScript promises etc. using Redux. Redux can now be configured with hooks; allowing you to remove connect from components.
There are an array of charting libraries that can be used in React projects. Here are three examples of charting libraries which are easy to use.
Integrating Suspense and Lazy Loading into a React app can make the app a lot more efficent.
Ionic is a cross-platform UI component library for both the web and mobile. Ionic recently released a stable version for React.
Tailwind is a utility-first CSS framework. Unlike libraries like Bootstrap, you are able to customise things like buttons, navbars, margins, colours etc. all through a config file. Tailwind is similar to Bootstrap in that it takes a mobile first approach and allows you to set screen sizes to enable the app to be responsive.
Vue components are split into three parts, template, script and style. This post explains how to import components, the general structure of vue apps and how to get data in the front-end via an API.
I decided it was time to dabble in a new JavaScript framework and picked Vue.js! This blog post is a basic guide to set up a project and will be updated as I start learning more about the framework.
TypeScript is a typing language that is almost like a subset of JavaScript. What is a typing language? Languages such as Java and C++ are known as typing langauges because you declare the variable type when initialising it. In this post I will give a brief introduction and a few examples of how you can apply TypeScript to your code.
The Atomic Design Pattern is very useful for large projects. It is a design pattern used widely in industry and helps you organise your code and components in a logical way.
The React team at Facebook announced Hooks earlier this year. React lifecycles enable you to manipulate data within components. With the recent addition of hooks, you can now replace repetitive code within your components.
Props and state are a fundamental part of the way ReactJS works. They enable you to pass data within a component or between components. It is important to gain a solid understanding of states and props when learning React.
Accessibility is important on the web. ARIA is there to help you program your application or website to help those who may need to use a screen reader to access the Internet.
ES2019 is the latest version of Javascript. ES6 is commonly used amongst developers and also gets called JavaScript 6... sometimes.
Ever needed to show some data in your React component but never understood how to? Below shows a simple example of how you can do this!
Reactive Native enables you to be able to program an app for both ios and android. It incorporates both React and Native platform capabilities.
Redux allows you to deals with the complexity of data within your application. In ReactJS this might be some computational data or data from a third party, like an API.
Testing ensures the application is functioning correctly and allows you to be able to find bugs within the application before it goes into production.