Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Next.js Performance Optimization Guide
Web performance has become critical for user experience and SEO rankings. Google Lighthouse measures your site's performance using Core Web Vitals - metrics that directly impact how users perceiv…Effects of Next.js Image Blur on LCP
Largest Contentful Paint (LCP) is a core web vital metric directly affected by the loading behavior of images on a web page—especially when the largest element is an image. Next.js offers built-in im…How to Connect Events on Atomic Design-Based Organism Components to Redux Actions
Building scalable React applications often means striking a balance between a modular UI and robust state management. Atomic Design helps organize UI components into a clear hierarchy—atoms, molecule…Basic Service Worker template
This is a basic service worker template that works with all browser. This was built to enable service worker in iOS 9 on iPad MiniRedux on Web Components using lit-element and no compilation (ESM)
Redux is independent of React and babel. They are not required to build an app. Quickly build an app, cut down all compitation time and publish it directly. Folder Structure index.html assets/ ├─ js/ …How to use custom babel config for jest?
For Scenario where jest setup is not present in current React Project and you want to use a babel config unrelated to current setup, you can do the following setup. jest.config.js module . exports = { …How to setup StoryBook for React, Vue and Angular
Storybook is an excellent starting point to deliver a consistent design system for your project. It is available for most frameworks. Here we are covering three major JS frameworks. If you are starti…Use SystemJS to convert React App to Micro frontend
Setup project if you don't have a pre-existing app Mother App Setup Do create projects create-react-app my-org- mother create-react-app my-org- child1 Eject the configuration file cd my -org-mother npm run …Serial and Parallel Promise in JavaScript
If you have a series of Promises to resolve, consider running them in parallel to save time. Promises in Serial Overall this is sequential and takes 5 second Promises in Parallel This example only take 2…Airbnb Style eslint for React app
Airbnb linting style is the best approach for coding standards for your project To begin with start with a terminal with the following mkdir my-app cd my-app npx create-react-app Add Airbnb linting …Basic offline mode service worker on GitHub Pages
The given example is with reference from https://googlechrome.github.io/samples/service-worker/basic/. This is a simple guide to get start with service worker for your GitHub profile page. What does…Developer's insight into UI and UX
User Experience (UX) and User Interface (UI) concepts comes into designers turf. The turf becomes grey when cost effectiveness comes in play for a project. In general, it is recommended for all fron…DataTables to display MySQL table using CodeIgnitor : Part 1
This blog is 2 part tutorial to help you to display MySQL data using Codeignitor. Previously, before MVC, I use to write loops and pagination of tables from scratch. I use to do that on java in 11t…
Subscribe to:
Posts (Atom)