DEV Community: Peter Gitonga

Useful CSS Breakpoints for Web Developers

Peter Gitonga — Thu, 11 Jan 2024 05:17:57 +0000

As a web developer, achieving a responsive and visually pleasing layout across various devices can be a daunting task. After grappling with margin-related challenges in my websites with both Tailwind CSS and vanilla CSS, I found out how to strategically implement CSS breakpoints.

Breakpoints are markers that tell your site when to adapt to different screen sizes. Let's hear what each has to say.

1. Small Mobile (e.g. iPhone 4): Up to 320px

Starting at the smallest end, accommodate devices with compact screens like the iPhone 4 to ensure a seamless and visually appealing experience for their users.

2. Mobile: Up to 480px

Expanding the scope slightly, the mobile breakpoint (up to 480px) caters to a broader range of smartphones.

3. Small Devices: 481px - 767px

Navigating through the territory of small devices, this breakpoint can serve devices with typical mobile and tablet dimensions i.e. small tablets or larger smartphones.

4. Tablets: 768px - 991px

As we move to larger screens, the tablet breakpoint (768px - 991px) provides a layout optimized for tablet devices. On top of improving UX, it also enables make the most of the additional screen real estate

5. Large Tablets & Small Laptops: 992px - 1199px

Balancing the transition from tablets to larger screens, 992px - 1199px breakpoint caters to large tablets and small screen laptops.

6. Laptops & Desktops: 1200px - 1919px

For the mainstream computing devices, laptops, and desktops, this breakpoint (1200px - 1919px) optimizes the layout to utilize the increased width. It ensures that your content is elegantly presented without overwhelming the user.

7. Extra Large Screens: 1920px and up

Finally, for users with extra-large screens, the 1920px-and-up breakpoint tailors the design to make the most of the available space.

At a glance

➨ Small mobile e.g. iPhone 4: up to 320px
➨ Mobile: up to 480px
➨ Small devices: 481px to 767px
➨ Tablets: 768px to 991px
➨ Large tablets & small laptops: 992px to 1199px
➨ Laptops & Desktops: 1200px to 1919px
➨ Extra large screens: 1920px and up

In conclusion, implementing these breakpoints not only resolved my struggles with margins but also enhanced the overall user experience across the devices used to access those sites.

Below are the snapshots for setting up these screen breakpoints in Tailwind config and vanilla CSS.

Vanilla CSS

Tailwind - rename the property names

How does your breakpoints' setup look like? Share it on the comments

15 Essential Lessons of 2023 Worth Sharing

Peter Gitonga — Sat, 30 Dec 2023 06:57:04 +0000

→ Know what you want for yourself, and be true to that. Otherwise you'll see things happen to others and suddenly you're envious/jealous of them for something you didn't even want for yourself in the first place.

→ Get comfortable with being uncomfortable. It's either you got into discomfort willingly or discomfort will come to you, either way no escape.

→ There are many future versions of yourself that exist based upon the decisions you make currently.

→ It's easy to end up average if you're interested and distracted by everything, and never commit to anything. Years pass, and you do a lot of things but never stick to any of them long enough to get rewarded.

→ If you want growth, you must prepare to be bored, doubted, failed, rejected and challenged. Learn to handle them.

→ You need 3 daily wins: mental win (create, learn), physical win (running, gym) and financial win.

→ A person who conquers the fear of embarrassment becomes unstoppable.

→ There's no competition if you're confident in who you are.

→ Hardwork improves your optimism, and being truthful boosts your confidence.

→ The longer you stay consistent, the more fine-tuned your skill becomes.

→ Go broke learning, investing, building, creating or launching, not shopping.

→ Doesn't matter how you start, just start.

→ Give whatever you do your best, but discard expectations.

→ Doubt kills more dreams than failure ever will.

→ Once you have accepted your flaws, no one can use them against you.

Optimize Web Applications for Performance: Code-Splitting and Lazy Loading in React

Peter Gitonga — Fri, 29 Dec 2023 05:21:13 +0000

React makes it easy to build small to complex web applications. But the more complex the application gets, the more resources it demands. This makes it necessary to employ various optimization techniques to improve the application’s performance and the overall user satisfaction. In this article, we are going to explore how we can boost performance by code-splitting and lazy loading.

We’ll start with code splitting, then look at lazy loading, later provide a fallback while loading with Suspense() and finally conclude with useTransition().

Code Splitting

Your React application runs from a single JavaScript bundle file that grows as the application grows.

The code from individual component files is imported to the application’s top-most file to make up a complete web page or application. That whole code is the "bundle".

So bundling is the process of following these imported files and combining them to make a single file that can be included on a webpage to load the entire app at once, thanks to a tool like Webpack.

When you code-split or simply split your code, you break down your code into multiple individual bundle chunks. These individual bundles might be single components in the application or name-exported functions etc.
Splitting the code is achieved by the use of dynamic imports.

Now on regular imports, you import components on component call, and they look like:

import ComponentName from "./Pathname.js"

But dynamic imports are different, they are imported only when requested for, or when they reach expression. Look like so:

const ComponentName = import("./Pathname.js")

React lazy

React lazy loading is a website optimization technique aiming to boost the site's performance by loading bundles of code on demand.

This enables avoid issues like increased initial load time, more consumption of bandwidth and system resources, overworking the browser and bad user experience, that may arise as a result of loading the entire application’s code at once.

It renders components with dynamic imports just like the regular ones except this dynamically imported component’s bundle only loads when the component is rendered.

React.lazy() accepts a function that calls a dynamic import. The dynamic import returns a promise resolving to a module with a default export containing a React component.

const AnotherComponent = React.lazy(() => import("./Pathname.js"))

React Suspense

When you lazily load a component in your application, you need to let React know of it, so it sets up what can be used as placeholder while that lazy component loads on request or during "suspense".

Suspense() is a component that wraps around your lazy component/s and accepts a DOM element fallback prop that will be show on the DOM while the lazy component is being loaded.

On markup:

<Suspense fallback={<YourPageLoader />}>
    <Outlet />
</Suspense>

startTransition()

With Suspense(), the DOM is updated with the fallback prop you provided until the next lazy component is rendered. Sometimes you don’t want to totally replace the old UI while waiting for the new UI. To achieve this, use startTransition().

It freezes the current appearance until the next requested component is rendered, only then the switching takes place.

One use case is when you want to have a loading spinner above a blurred current UI’s background while the transitioning occurs.

Example: show the "lazy" dashboard when the showDashboard state is true – toggled by "see board" button on UI

import {useState, useTransition, lazy} from “react”;

const Dashboard = lazy(() => import(“./DashboardPath.js”));

const Home = () => {
  const [showDashboard, setShowDashboard] = useState(false);
  const [isPending, startTransition] = useTransition();

  return (
    <div>
      <button onClick={e => {
startTransition(() => {
setShowDashboard(prev => !prev)
})
}}>see board</button>
      <div>
{isPending && <Dashboard /> }
      </div>
    </div>
  )
}

In conclusion, React lazy() is a website optimization technique that renders the split code in dynamic imports on demand. React Suspense() offers a fallback element that shows while the newly requested lazy component loads. React useTransition() helps preserve the current UI until the component is rendered. When used, it improves the application's performance and the user experience.

Understanding PostgreSQL and MongoDB Databases: Know When to Use Each

Peter Gitonga — Fri, 22 Dec 2023 16:51:05 +0000

When it comes to database management systems (DBMS), PostgreSQL and MongoDB will often find themselves in the spotlight. But choosing any of them depends on the specific requirements of your project. In this article we are going to explore them, understand what they are and where each applies best.

I have seen posts saying "Which is your go-to database?" then goes ahead and lists about four different databases. I don't have a problem with that if it's one's hobby project, or if they're trying to learn. But beyond this, you'll have to fetch from the toolbox the right tool for the job.

Before we proceed, let's understand the terms you might come across:
Data model - an informal description of a database
Schema - a blueprint or a formally implemented structure in use by the database e.g. in Postgres, names of tables, names of columns in a table and their corresponding data types.
Mapper - high-level package helping connect to databases and perform database operations

PostgreSQL

PostgreSQL or simply Postgres(because no one has time for syllables) is a relational database management system (RDBMS) that follows a structured and tabular (with rows and columns) data model.

Postgres enforces a predefined schema requiring well-defined structures of the tables that ensures data consistency and integrity.

It uses SQL (structured query language), a standardized language for managing relational databases, to command the server.

It's structure consists of records which are rows containing data and tables which are groups of rows and columns. Column names are used as keys when querying for records.

Some of the Postgres ORM's (Object-Relational Mapper) include Sequelize, pg.

Postgres Applications
Use Postgres:

For demanding applications that require complex queries and relationships, advanced data types and indexing options.
Where data integrity is critical i.e data is accurate, consistent and reliable while within the database. Postgres is ACID compliant.
It has a mature ecosystem, guaranteeing support, and a wealth of resources.
Where vertical scalability is more preferred - adding more resources to a single server. Horizontal scaling (distributing servers around the world) in Postgres requires more effort.
Suitable for systems with fixed data models like financial systems, CRM systems.

MongoDB

MongoDB is a NoSQL database that follows a document-oriented data model and stores data in JSON-like BSON documents.

MongoDB allows for dynamic schema or schema-less design making it flexible and agile in accommodating unpredictable future data structure changes, and easy to scale horizontally.

For query language, it leverages on a number of query operators based on JSON-like documents, which works well with semi-structured and unstructured data. The language is also simple and ease to use.

It's structure comprises of documents as data, and collections as groups of related documents.

Some of the MongoDB ODM (Object-Document Mapper) include Mongoose

MongoDB Applications
Choose MongoDB:

If the database requires flexibility in adapting to changing data structures without a predefined schema.
Agility in development is paramount - dynamic/schema less nature of MongoDB makes it agile in development, especially for unpredictable data structures since you won't have to go back adjust a predefined schema for your changes to be acommodated.
Simplicity and ease of use performing database operations since it uses BSON documents that use JSON-like language.
Effortlessly scale horizontally to accomodate growing datasets and high write loads.
Suitable for systems with unrestrictive data models like real-time big data, IOT and CMS systems.

In conclusion, the choice of the database to use relies on the requirements of your project. Use Postgres for data that requires a predefined schema to ensure data integrity and consistency. On the other hand, MongoDB is the best option for the data whose structure keeps changing over time since its dynamic/schema-less nature makes it flexible to accommodate such changes.

Navigable Websites: A Guide to React Pagination Without Packages

Peter Gitonga — Thu, 21 Dec 2023 06:34:08 +0000

Pagination is a crucial element of web development that enhances user experience by breaking down large sets of content into manageable chunks. As a result websites load faster, and the navigation is improved.
Let me show you how to paginate without installing external dependencies in React.

Let's start by creating a functional component called Pagination and importing useState().

We will be working with these sample items, in the allItems array. On markup, each item is displayed on a card.

Now initialize states including currentActivePage that'll keep track of the current page, and itemsPerPage that'll define the number of items we need per paginated page.

With our items array and itemsPerPage defined, we can count the number of pages we'll have by dividing itemsPerPage to the allItems array length. This will be useful when displaying page numbers on the UI.

On markup, using the numberOfPages digit we got, we create an array from its length. The length will be equal to that digit, and the reason we must use an object with length property is because Array.from() accepts an iterable on that first argument, while the numberOfPages digit is just a number (not iterable).
From that generated array, we extract the indexes and make sure they start at 1 then map through the indexes and return a pageNumber that will be passed as argument to the function handling page change, and also will be displayed on the UI as page links.

Going forward we'll see how to create a part of the entire allItems array with each part being shown on its own page.
For us to show a portion of the entire array, we'll need to slice() the original array. To slice() it we'll require the start and end indexes.
We calculate the start index of each page by first subtracting 1 from the current page's number (subtracting since array indexes start at 0, and our currentActivePage state starts at 1) then multiplying the answer by itemsPerPage. For instance, the start index of page 1 with 6 items per page will be 0 >>> (1 - 1) * 6 = 0
The end index is given by adding itemsPerPage to the start index, i.e. the end index of page 1 in the above example will be 6 >>> 0 + 6 = 6
Each page will have it's own start and end index, different from the other.

Now let's slice the original array using our start and end index. This returns an array that is part of the original array within the range specified by the indexes.

On markup, we show the paginated items from the sliced array.

Finally, we will define a function that'll change the current page upon page number click on the UI. Remember when the currentActivePage state changes, new start and end indexes are calculated thus changing the earlier sliced array to a new one that is within the new specified range.

In conclusion, pagination is a great navigation element that helps increase user satisfaction by not overwhelming them with the number of contents displayed, instead it breaks contents into manageable portions, and by loading websites faster since the website will load a section of the entire contents at a time and not as a whole at once.