umma.dev

🎨 Front End

  • Biometric Authentication in Web Apps

    A different way to authenticate users.

  • Streaming API Responses

    Looking at chunking API responses in front-end applications.

  • React Query + Zustand

    State management and data handling in modern React apps.

  • Framer Motion in React Apps

    Small guide on Framer Motion.

  • Next.js 15

    A placeholder post for when it becomes stable.

  • TypeScript 5.5

    A few things from TS 5.5 worth noting for development.

  • React Complier

    A working document of React Complier.

  • React 19

    A working documents to keep track of everything coming in React 19.

  • Million Lint

    The focus is on improving the performance of React applications.

  • Using Signals in React Apps

    Why it might be time to let go of useEffect and start looking into Signals instead.

  • Auth with Next.js and Supabase

    Getting started with setting up sign up and log in/log out.

  • Bun

    Short guide to Bun.

  • Random Useful TypeScript Bits

    Snippets of combining types, utility types and advanced types.

  • NextJS Server Actions

    A short introduction to how to use NextJS Server Actions.

  • Zod

    A few examples of use cases for validation using Zod.

  • Colour Spaces

    Here I look at different colour spaces; what they are, how they are currently being used and the future of them within development.

  • Dynamic Routes with Next.js

    How to set up dynamic routes in a Next.js application.

  • Astro

    Here I go through how to set up a blog using Astro and how to integrate SSR into an Astro application.

  • Regular Expressions

    What are regular expressions and when would you need to use them? Here I go into methods used for regular expressions.

  • Building a Habit Tracker App with Remix

    Steps on how to build a habit tracker via remix.

  • React Native Notes

    Getting a React Native app up and running.

  • Voice Recognition in a React App

    A very basic overview of Web Speech API, along with an example.

  • Setting Up Sanity CMS

    Looking at two ways of setting up Sanity CMS with React applications.

  • TypeScript: Part Three

    Generics in TypeScript can be helpful for building reusable components within applications.

  • Algorithms + Data Structures: Stacks and Queues

    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.

  • TypeScript: Part Two

    A deep dive into TypeScript interfaces and how types are linked.

  • Building a Music App with Next.js

    This is a working document of a music app I am creating.

  • TypeScript: Part One

    Here I look into types within TypeScript. What they are, when to use them and how to use them in applications.

  • Algorithms + Data Structures: Dynamic Programming

    Dynamic programming requires solving problems by breaking them apart. Here I discuss Dynamic Programming patterns and how to solve problems.

  • Algorithms + Data Structure: Heaps

    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.

  • Algorithms + Data Structures: Graphs

    Looking at the implementation of graphs. Covering searching graphs, famous graph algorithms and problem sets.

  • Algorithms + Data Structures: Recursion

    Recursion is what recursion says it is on the tin.

  • Algorithms + Data Structures: Binary Search and Binary Search Tree

    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.

  • Setting Up a NodeJS Proxy

    A proxy can has a number of different use cases. Here I discuss how to set up a NodeJS proxy.

  • State Management in React

    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!

  • Algorithms + Data Structures: Sorting

    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.

  • Algorithms + Data Structures: Strings

    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.

  • Setting Up ESLint

    Steps to take to add ESLint to JavaScript projects."

  • Promises in JavaScript

    Looking into JavaScript promises; what they are and how to implement them.

  • React Hooks

    React hooks code snippets.

  • A11y

    Looking at what a11y is, why it is important and techniques that could be implemented into a web application.

  • JavaScript Event Handlers

    Code Snippets of DOM event handlers.

  • Vite/es-build/Webpack/Parcel/rollup.js

    Looking into how JavaScript bundlers differ and which one would be the most benefical when creating an application.

  • PNPM? NPM? And What Happened to Yarn?

    Comparing PNPM, NPM and Yarn. Looking at what each one offers and what differentiates one from the other.

  • Container Style Queries: A Working Document

    Container style queries are still in their infancy. Supported by Chromium and Safari, it's one I'll be keeping an eye on.

  • Algorithms + Data Structures: Linked List

    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.

  • Cookies in JavaScript Applications

    Here I give a brief overview of cookies. Discussing what the difference is between sessions, cookies and local storage.

  • Playwright

    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.

  • What's WebKit?

    The web browser engine used by Safari, Mail, App Store and many other apps on macOS/iOS/Linux.

  • Remix

    Another day, another front-end framework!

  • GraphQL

    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.

  • Rome

    You're probably heard of es-lint and prettier. Rome is new and similar to both of these.

  • Algorithms + Data Structures: Arrays

    I'm going to attempt to teach you (and myself) how Algorithms and Data Structures are weaved into web applications!

  • Next.js 13 Notes

    Notes on Next.js new release to go back on.

  • Relearning CSS: Part Five

    In this post I look at flexbox/css grid, styling forms and responsiveness.

  • Storybook

    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.

  • Relearning CSS: Part Four

    Here is the penultimate post of the Relearning CSS series!

  • Relearning CSS: Part Three

    In this post I deleve into styling images, z-index + positioning, and when to use !important.

  • New in React

    A place for notes on React changes I'm keeping an eye on.

  • Relearning CSS: Part Two

    As promised, here is part two covering sizing units, the box model and links.

  • Chakra UI

    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.

  • Next.js

    Here I explain the features of Next.js and a few reminders to myself when building with it.

  • React Query

    A small introduction to React-Query with example code.

  • Relearning CSS: Part One

    I'm starting a new series, in which I go through and look at different aspects of CSS.

  • Clean Javascript/ReactJS

    Writing cleaner/easier-to-read code in ReactJS

  • Resources: December

    Articles, libraries and other resources accumulated throughout December front-end newsletters.

  • Redux Alternatives

    Alternatives that can be used in place of Redux in React applications. 🙌

  • Resources: November

    Articles, libraries and other resources accumulated throughout November front-end newsletters.

  • Resources: October

    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!

  • Custom Fonts in Tailwind

    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.

  • Config in Front End

    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

    Bit component Library is a cloud based website, which enables users to share components across multiple teams and projects.

  • Design Patterns in Front-end Frameworks

    Looking into how ReactJS, Angular and jQuery all differ when it comes to design patterns.

  • Dark and Light Mode in React

    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.

  • Redux-Thunk or Redux-Saga?

    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 in Front End

    Caching is a way of storing data, usually through cookies on a website, which leads to better performing websites.

  • Web Security

    A few notes on security vulnerabilities within JavaScript applications.

  • MobX to Redux

    MobX enables you to cut out a lot of code that is used in Redux however Redux is a popular choice for state management.

  • Dates and Times in Javascript

    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.

  • Yarn, Npm or Npx?

    There are a variety of different package managers you can choose from but what makes them different from each other?

  • Auditing a React App

    There are a number of ways to improve the performance of an app; debugging, accessibility or running an audit on your app.

  • Higher Ordered Components vs. Hooks

    High Ordered Components are used in traditional Redux via `connect`. Hooks do not usually incorporate HOCs.

  • Map/Filter/Reduce Arrays

    This post outlines how .map(), .filter() and .reduce() differ, with examples for each method.

  • Data Requests with Hooks and Redux

    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.

  • Charting Libraries in React

    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.

  • Suspense and Lazy Loading in React

    Integrating Suspense and Lazy Loading into a React app can make the app a lot more efficent.

  • Using Ionic with React

    Ionic is a cross-platform UI component library for both the web and mobile. Ionic recently released a stable version for React.

  • Utilising Tailwind

    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.

  • Components and API Calls in Vue

    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.

  • Starting with Vue.js

    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.

  • Fundamentals of TypeScript

    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.

  • Atomic Design in React

    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.

  • Hooks vs Lifecycles

    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.

  • State and Props

    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.

  • ARIA

    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.

  • ES6 Syntax and More

    ES2019 is the latest version of Javascript. ES6 is commonly used amongst developers and also gets called JavaScript 6... sometimes.

  • APIs in Front End Applications

    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!

  • Building a React Native App

    Reactive Native enables you to be able to program an app for both ios and android. It incorporates both React and Native platform capabilities.

  • Let's Discuss Redux

    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.

  • Front End Testing

    Testing ensures the application is functioning correctly and allows you to be able to find bugs within the application before it goes into production.