Best of Web Development — April 2023
- 1
- 2
Community Picks·3y
Introducing the TERN stack and how to migrate from MERN to TERN
Introducing the TERN stack and how to migrate from MERN to TERN. MERN is a web technology stack consisting of MongoDB, Express.js, React, and Node.js. This tutorial will assume you're using Tigris Cloud or a self-hosted instance of Tigris.
- 3
- 4
Advanced JavaScript Concepts To Write High-Quality Code That Scales
Learn about advanced JavaScript concepts including closures, `this`, prototypal inheritance, asynchronous programming, hoisting, type coercion, and destructuring. Master these concepts to build robust and high-quality JavaScript applications.
- 5
- 6
Skeleton — UI Toolkit for Svelte + Tailwind
Skeleton is a UI toolkit for Svelte and Tailwind that allows for the creation of adaptive and accessible interfaces for web apps. It integrates directly with Svelte and SvelteKit's best features and offers interactive components, image filters, and more.
- 7
Josh W Comeau·3y
The “const” Deception
The keyword in JavaScript is used to declare a constant. This is a core concept in JavaScript, and so many things make more sense when you have a clear understanding of this distinction. When we create a constant with, we can be 100% sure that the variable will never be re-assigned, but no promises are made when it comes to mutation.
- 8
- 9
Advanced JavaScript Console Logging for Developers
Learn how to use advanced console logging in JavaScript for debugging and troubleshooting applications. Topics covered include finding the Console Tool in your browser, basic console logging methods, filtering and grouping console messages, tracing messages, displaying messages as tables, formatting log messages, preserving log messages, measuring execution time, and using console utilities. Discover how Bugfender can help you gather logs from customer devices remotely for better application performance insights.
- 10
- 11
The future of Chakra UI
Chakra UI is transitioning into a design system infrastructure by addressing challenges such as a runtime CSS-in-JS, adding more complex components, and supporting more robust theming solutions. The approach includes breaking the monolith into smaller projects such as zero-runtime CSS-in-JS (Panda), state machines for components (Zag), and a headless component system (Ark). A design token platform (Ultra) is also being developed. Users should choose between Zag.js, Ark, or Chakra based on their specific project requirements.
- 12
Fly.io·3y
Fly.io ❤️ JS
Fly.io is a great place to run fullstack applications. For most programming languages, there is a defacto default fullstack framework. For Ruby, for Elixir, for Phoenix, for Laravel, for Python, for Django. Fly has a number of community contributed templates for a small number of Node frameworks.
- 13
- 14
- 15
Medium·3y
How JavaScript's Fetch API works under the hood
Fetch API is a modern web API that provides a way to fetch resources asynchronously over the network. It is based on the Promise API and uses the XMLHttpRequest object to send HTTP requests and receive responses from the server. Fetch API supports various HTTP methods, headers, and other features, making it a popular choice for fetching data and resources in web applications.
- 16
ITNEXT·3y
Angular 16 is huge
angular 16 is just the first release candidate version of v16. There are a lot of features/changes coming with this version. It is still experimental and some more performance related improvements and optimisations are to be made. It already enables a much faster startup time (at least 2 times) than webpack implementation.
- 17
Tuts+·3y
Learn Functional Programming in JavaScript
Learn functional programming with JavaScript, covering concepts like first-class functions, immutability, composing functions, currying, and working with the DOM. Set up your development area and learn about composition, handling events, and working with arrays.
- 18
System Weakness·3y
Deploy your React app using GitHub pages
Learn how to deploy your React app using GitHub Pages with easy steps. GitHub Pages is a free hosting service that allows you to easily deploy and share your web projects. Prerequisites include having a GitHub account, Git installed, and Node.js installed. Create a repository on GitHub for your React app, clone it to your local machine, and create your React app using Create React App. Add the necessary dependencies and configuration to your app, build the app, and deploy it using the 'npm run deploy' command. Commits and pushes to GitHub are also explained. Deploying to GitHub Pages is a simple and easy way to share your React app with the world.
- 19
- 20
The Most Common Mistakes When Using React
Common mistakes when using React, such as setting incorrect initial state, directly modifying the state, forgetting that setting state is asynchronous, including non-primitive objects in hook dependency arrays, excessively using useCallback and useMemo, adding separate onChange handlers for each input, unnecessarily using useEffect.
- 21
Codrops·3y
Building a WebGL Carousel with React Three Fiber and GSAP
Building a WebGL Carousel with React Three Fiber and GSAP. The article will be divided into four parts: Generating a 3D plane with a texture and adding a zoom effect to the plane. Implementing post-processing effects to enhance the carousel experience.
- 22
The Perils of Hydration
The Perils of Hydration: Understanding how Gatsby/Next manage server-side rendering and hydration Introduction I ran into the strangest issue recently. In production, the bottom of my blog was doing something… unintended: A bit of digging into the Elements tab in the devtools revealed the culprit… My React component was rendering in the wrong spot.
- 23
- 24
Svelte For Beginners
Svelte is a JavaScript framework that aims to solve the problem of abundance of JavaScript on the web while delivering a delightful developer and user experience. It is compiled, meaning it's more of a language than a traditional JavaScript framework, resulting in less code and a smaller bundle size. Svelte is comparable to React and Vue for building single page applications, but also has SvelteKit for more complex applications with routing and server-side rendering.
- 25
Beginner's Guide: Get Started with TypeScript for JavaScript Developer
A comprehensive guide to getting started with TypeScript for JavaScript developers, including setting up TypeScript, basic concepts, using it with frameworks and libraries, best practices, decorators and mixins, asynchronous code, and testing frameworks.
