DEV Community: fruntend

Top-10 Posts for FE (Week 2, Aug 2023)

fruntend — Tue, 15 Aug 2023 10:00:54 +0000

Here are the top 10 posts from the past week that will be useful to front-end developers and beyond. The selection was made on the basis of their interestingness, uniqueness, presentation, usefulness and subjective assessment of the author.

What is API Integration?

This article explains what API integration is, its benefits including increased efficiency, scalability, cost savings, and reduced errors, and provides examples of how API integration is used in various industries such as news and media, social media, healthcare, and chatbots.

Customizing the Default HTML5 Video Player with Pure CSS Properties without JavaScript

This article guides readers through the process of customizing the default HTML5 video player using CSS, covering aspects such as player dimensions, play button styling, progress bar customization, volume and fullscreen control design, and the addition of unique overlay elements to enhance the user experience and align the player with a website's design.

Add Authentication to Any Web Page in 10 Minutes

This article provides a comprehensive guide to adding authentication to JavaScript Single Page Applications (SPAs) using Authgear, covering configuration, login, and logout processes, and offering a step-by-step walkthrough of setting up an Authgear application and integrating its Web SDK to enhance security and user experience.

Enhancing focus visibility - focus-within or has(:focus)?

This article explores how to style a parent element based on the focus state of its child element using CSS pseudo-classes, specifically focusing on the :focus-within and :has() pseudo-classes, discussing their applications, benefits, and performance considerations.

The Ultimate Guide to Web Design

This article provides guidance on enhancing web design skills by exploring several essential principles, including user-centered design, effective typography, color psychology, high-quality imagery, and more, to create visually appealing and user-friendly websites that leave a lasting impression on users.

The Evolution of JavaScript: From Vanilla to Modern ES2023 Features

The article is a journey through the evolution of JavaScript, starting from its early days as "vanilla" JavaScript, progressing through key developments like ES5, ES6, and ES2023, highlighting the benefits of embracing these changes, and emphasizing how it enhances coding for beginners, making code more readable, efficient, and adaptable for building cutting-edge web experiences.

Preventing the Layout Shift Caused by Scrollbars

This article addresses the issue of layout shift caused by scrollbar appearance/disappearance, presenting multiple methods to prevent it, including using scrollbars always, utilizing the scrollbar-gutter property, shifting content to the right using padding, and positioning elements within a 100vw width parent.

A guide to the 4 new Array.prototype methods in JavaScript

This article introduces four new array methods in ECMAScript 2023: toReversed(), toSorted(), toSpliced(), and with(). It explains their behaviors, such as reversing and sorting arrays without mutation, and how they interact with sparse arrays and array-like objects, highlighting their benefits in preserving data and supporting functional programming practices.

Demystifying JavaScript Scoping and Hoisting

This article provides a comprehensive explanation of JavaScript's scoping and hoisting mechanisms, delving into how variables and functions are defined, accessed, and hoisted within different scopes. It emphasizes the importance of understanding these concepts for writing efficient and organized JavaScript code.

52 Frontend Interview Questions - JavaScript

This article provides a compilation of 52 questions and answers in a "question:answer" format for frontend developers, focusing on topics relevant to junior and mid-level developers, covering aspects such as JavaScript data types, equality operators, variable declaration, scoping, functions, template literals, Set and Map, object manipulation, DOM, event loop, recursion, ES6 features, micro and macro tasks, and more.

Top-10 Posts for FE (Week 1, Aug 2023)

fruntend — Mon, 07 Aug 2023 12:21:42 +0000

Chrome Debugger is easier to use than you might think

This article introduces and demonstrates the usage of the Chrome Debugger for efficient web application debugging, covering features like breakpoints, conditional breakpoints, logpoints, event listeners, and various navigation controls.

Focus or focus visible? A guide to make your focus state accessible

This article explores CSS techniques for enhancing the focus state of interactive HTML elements, including the use of :focus and :focus-visible pseudo-classes, to create accessible and visually appealing navigation experiences for users across different devices.

Serialization and Deserialization in JavaScript

This article explains the concepts of serialization and deserialization, focusing on their meaning, practical use in JavaScript with JSON, and other formats like BSON and EJSON for efficient data storage and transmission.

Coding Magic: Unleashing CSS Pseudo Elements

This article delves into the world of CSS pseudo-elements, exploring their uses, syntax, and creative possibilities to enhance web design and user interfaces, along with practical examples, responsiveness, performance optimization, and browser compatibility considerations.

JavaScript Under The Hood: The typeof Operator and Data Types Demystified

This article explores JavaScript's typeof operator and fundamental data types, aiding front-end developers in technical interviews and enhancing their comprehension of the language's core concepts.

How to upload files using JavaScript

This guide explains how to create a powerful file uploader using JavaScript, including features like file validation, drag-and-drop functionality, progress tracking, and a user-friendly interface, while also introducing Uploadcare Blocks as an alternative solution for advanced file handling.

Getting started with Pico CSS

The article discusses Pico CSS, a minimal CSS framework for semantic HTML, demonstrating its features and guiding the creation of a React to-do app with dark mode and custom theming.

Styling the HTML5 Tag with CSS and WebKit Properties

The article explains how to style the HTML5 <audio> tag using CSS and WebKit properties to customize the appearance of the audio player and its controls for a more visually appealing design on web pages.

Understanding TypeScript “as” Keyword

The article explains the usage of the as keyword for type assertion in TypeScript, allowing manual specification of variable data types to prevent compiler inference and provides guidance on its proper use, drawbacks, and design considerations.

Getting started with accessibility? Embrace the power of HTML

The article provides 10 tips for improving the accessibility of HTML content, focusing on using semantic elements, correct heading structure, clear link text, alternative text for visuals, associated labels for inputs, keyboard navigation, and utilizing attributes to enhance accessibility.

Top-10 Posts for FE (Week 4, Jul 2023)

fruntend — Mon, 31 Jul 2023 09:28:22 +0000

Fluid vs. responsive typography with CSS clamp

The article explores the concept of fluid typography, using modern CSS techniques like the clamp function to create responsive and adaptable font sizes that adjust to different screen sizes while considering accessibility and container queries.

How to Change a Webpage UI with a Chrome Extension

The article explains how to create a Chrome extension using content scripts to modify and enhance the user interface of web pages, demonstrated through the example of the OpenSauced.ai chrome extension that adds helpful elements and features to GitHub to improve productivity for open-source maintainers and contributors.

Enum in javascript

The article explains how to create "enum-like" structures in JavaScript and highlights the advantages of using TypeScript enums for type safety, readability, and better tooling support.

API's and Web Development: The Ying to the Yang

The article provides a comprehensive introduction to web APIs, explaining what APIs are, how they work, and their importance, with a focus on web development and the usage of JavaScript browser APIs.

HTML Vs CSS: What Are The Major Differences?

The article is about the fundamental technologies of web development, HTML and CSS, their roles, functionalities, and how they work together to create visually appealing and functioning websites.

Mastering JavaScript Shorthands

The article is about JavaScript shorthands, which are concise techniques that can make code more elegant and efficient, and it provides examples of various shorthands and how to use them in different scenarios.

Benchmarking String Literal vs Template Literal - using Performance.now()

The article compares String Literal and Template Literal in JavaScript, providing performance test results for different scenarios and explaining when each is more suitable for use in coding projects.

101 JavaScript Concepts You Need to Know

The article covers over 100 crucial concepts in JavaScript, including variables, functions, prototypes, modules, async programming, and web APIs, providing a comprehensive guide for developers.

Understanding Shadows in Web Development

This article is a beginner-friendly guide to understanding shadows in web development, exploring their types, properties, and how to implement them effectively to enhance the visual appeal and user experience of a website.

How to be a web accessibility practitioner in two days

This article is about the author's journey of learning and implementing web accessibility within a short period of two days, sharing insights, tools, and examples to improve the accessibility of web projects.

Top-10 Posts for FE (Week 3, Jul 2023)

fruntend — Mon, 24 Jul 2023 11:55:50 +0000

The web has been waiting for HTMX

This article discusses the need to embrace modern web features, let go of bloated JavaScript libraries/frameworks, and explores underrated features available in modern browsers to enhance web development.

7 open-source projects you should contribute to in 2023

The article showcases innovative open-source libraries for GIF sharing, password management, SQL query building, feature flags, container management, developer news aggregation, and status page creation.

How to simplify form styles using CSS accent-color

The article discusses how to simplify form control styling using the accent-color CSS property, which allows customization of accent colors for checkboxes, radio buttons, range sliders, and progress bars without the need for external UI libraries.

Enhance Your Web Apps: Best JS Libraries

The article introduces useful JavaScript libraries for full-stack web developers, covering Nano ID for unique ID generation, Zod and Joi for schema validation, React Markdown Editor for rendering markdown content, Next Js TopLoader for displaying a top-loading bar, and Husky for improved commit workflows.

Security Concerns with Cookies

The article explains the security concerns related to cookies, including Man-in-the-Middle attacks, Cross-Site Scripting attacks, and Cross-Site Request Forgery attacks, along with mitigation strategies, while also mentioning alternative approaches like SessionStorage, LocalStorage, and Token-Based Authentication.

Top Skills for Frontend Development

The article explores essential skills for frontend success, covering HTML, CSS, CSS frameworks, JavaScript, responsive design, JavaScript libraries, version control, testing, debugging, and knowledge of design principles, emphasizing the importance of continuous learning in this rapidly evolving field.

The Power of React Dom For Front-End Development

The article introduces React, an open-source JavaScript library for building user interfaces, highlighting its key features, such as Virtual DOM, component reusability, one-way data binding, and the benefits it offers to developers in creating dynamic, responsive, and user-friendly interfaces.

Introduction to Javascript Canvas Drawing

The article explains how to use the HTML5 canvas element and its context object to draw various shapes, lines, and text on a web page, providing examples and tips for creating graphics and animations.

Mastering Object-Oriented Programming with TypeScript: Encapsulation, Abstraction, Inheritance, and Polymorphism Explained

The article introduces Object-Oriented Programming (OOP) in TypeScript, covering principles like encapsulation, abstraction, inheritance, and polymorphism, along with creating classes and interfaces for structured and reusable code.

What Does CSS Animation Do?

The article discusses CSS animation, its mechanics, benefits, different types, best practices, and common mistakes, empowering web developers to create visually engaging and interactive websites for an enriched user experience.

Top-10 Posts for FE (Week 2, Jul 2023)

fruntend — Mon, 17 Jul 2023 14:17:00 +0000

JavaScript Debounce, Easiest explanation

This article explains the concept of debouncing and how to implement it in JavaScript, providing examples and real-life use cases to demonstrate its usefulness in optimizing web applications.

Introduction to CSS Grid: A Comprehensive Guide

This article is a comprehensive guide to CSS Grid, explaining its key concepts and providing practical code examples, enabling readers to create complex and responsive web layouts with ease.

Qwik – The Post-Modern Framework

This article introduces Qwik, a high-performance framework that focuses on "doing less" by delaying the invocation of JavaScript and implementing resumability and prefetching techniques, along with Qwik City, a meta-framework designed for Qwik.

Web File API deep dive

This article provides a guide on working with file inputs in web applications, covering topics such as handling file selection, accessing file data, reading files with the FileReader API, creating object URLs, and sending files to a server.

Using Mixins with SCSS to Create Breakpoints

This article explains how to use SCSS mixins to create breakpoints for responsive designs, allowing for layout changes at specific screen sizes, and providing an optimized user experience across devices.

Top 20 Must-Know Tips for Web Accessibility

This article provides essential principles, practical advice, and examples for creating accessible websites, covering topics such as screen readers, ARIA attributes, semantic HTML, keyboard navigation, outlines, images, icons, buttons, links, forms, captions for videos, transcripts for audio, iframes, downloads, and bypass blocks.

Let's dive in to Cross-Origin

This article explains CORS, SOP, and provides solutions to fix CORS errors, helping developers overcome cross-origin resource sharing issues in web development.

15 Advanced TypeScript Tips for Development

This article highlights various TypeScript features such as optional chaining, nullish coalescing operator, type assertion, generics, keyof operator, type guards, intersection types, mapped types, string literal types and union types, decorators, index signatures, type inference with conditional statements, readonly properties, type aliases, and type guards with classes.

CSS: The Good Parts

This article provides an overview of the evolution of CSS, from its early days of basic styling to its current state as a powerful tool for web design, including topics such as CSS selectors, the cascade and specificity, media queries, animations and transitions, CSS variables, layouts with flexbox and grid, and upcoming features in CSS.

What is the Future of a Web Developer?

This article provides an overview of various trends and technologies that are shaping the future of web development, including voice search, motion UI, API-first approach, artificial intelligence (AI), quantum computing, progressive web apps (PWA), and blockchain.

Top-10 Posts for FE (Week 1, Jul 2023)

fruntend — Mon, 10 Jul 2023 13:24:37 +0000

How to Debug CSS (using CSS)

This article provides two approaches, using borders and background colors, to manually debug CSS issues that are not easily identifiable through Dev Tools, helping to identify and resolve problems with overlapping elements, inconsistent margins, and horizontal scrolls.

JavaScript's Immutable Arrays Revolution

This article introduces four new JavaScript array methods (with(), toSorted(), toReversed(), and toSpliced()) that allow for modifying arrays without changing the original.

30 Best Web Development Frameworks for 2023: A Comprehensive Guide

This article provides a curated list of the 30 best web development frameworks for 2023, along with their pros and cons, to help developers choose the right framework for building efficient, scalable, and visually stunning websites.

Increasing productivity: Best practices for React beginners

This article offers fundamental practices for beginners in React.js development to write clean, maintainable, and scalable code while avoiding common pitfalls and mistakes.

Understanding JavaScript's Single-Threaded Nature

This article explains that JavaScript is a single-threaded programming language and discusses the implications of its single-threaded nature for web developers, including potential performance issues and techniques to mitigate them.

These Simple CSS Tricks Will Take Your Website to the Next Level

This article explores some small and subtle CSS details that can enhance the appearance and interactivity of a website, including cursor customization, opacity effects, button click simulations, and border styling.

Is Lighthouse a misleading performance tool?

This article examines the challenges and potential misunderstandings surrounding Google's Lighthouse tool, raising questions about its scoring system, score variability, mobile performance requirements, and the need for clearer performance evaluation.

Main advantages and disadvantages of html

This article explores the advantages and disadvantages of HTML, highlighting its availability, simplicity, cross-browser compatibility, SEO benefits, flexibility, but also its limitations in interactivity, styling options, learning curve, semantic constraints, and security considerations.

Mobile-first approach with HTML and CSS

This article explains the principles and benefits of the mobile-first approach in web design and development, emphasizing the use of HTML and CSS to create a user-friendly and responsive design for mobile devices, ensuring a seamless cross-device experience.

Why Server Components - A Brief History of Web

This article provides an overview of Next.js Server Components, explaining their role in web development, comparing them to client components, discussing different rendering solutions, and highlighting the benefits and drawbacks of server-side rendering.

Top-10 Posts for FE (Week 5, Jun 2023)

fruntend — Mon, 03 Jul 2023 14:38:57 +0000

Is Code Generation a Bad Idea?

This article discusses the benefits and challenges of code generation, specifically in the context of ZenStack, a full-stack development toolkit that simplifies backend web app development using a schema-first approach and code generation for access control-enabled APIs and front-end queries.

JavaScript DOM Explained: A Practical Beginner’s Tutorial

This article provides a beginner's guide to understanding the Document Object Model (DOM) in JavaScript, covering its structure, how to access and alter DOM elements, and how to handle DOM events, emphasizing its importance for creating dynamic and interactive web pages.

Tailwind cheatsheet

This article provides a cheatsheet for Tailwind CSS utility classes, covering various aspects such as layout, typography, colors, spacing, flexbox, grid, borders, display, sizing, positioning, shadows, interactivity, and miscellaneous properties, offering a quick reference for styling web applications efficiently.

Mastering HTML Tables

This comprehensive blog post explores the creation, styling, and optimization of HTML tables using the <table>, <tr>, <th>, and <td> tags, providing code examples and detailed explanations to help you effectively present structured data.

JavaScript console methods: A deep dive.

The article explores different methods in JavaScript's console object and provides examples of their usage.

Node.js Development: All You Need to Know

This article provides a comprehensive overview of Node.js, including its features, use cases, installation guide, and frequently asked questions, helping developers understand and make informed decisions about using Node.js for server-side development.

7 Secret JavaScript Web-APIs That You Don't Know

This article explores seven lesser-known JavaScript Web APIs that can enhance the functionality and user experience of web projects, including the Notifications API, Speech Recognition API, Geolocation API, Web Bluetooth API, Battery Status API, Vibration API, and Payment Request API.

Floats in 2023

The article explores the role of floats in web layouts, their limitations, and provides practical use cases and solutions for optimizing their usage in modern web design.

Understanding The Main and Cross Axes in Flexbox

This article explains the main and cross axes in flexbox and how they influence the behavior of four specific CSS flexbox properties, providing insights into aligning and positioning flex items on a webpage.

Let's Talk About Node Packages

This article provides a transcription of a video discussing dependency types, versioning, problematic packages like TypeScript and React, and the module systems in the Node package ecosystem, along with recommendations for tools like Deno and Vite.

Top-10 Posts for FE (Week 4, Jun 2023)

fruntend — Mon, 26 Jun 2023 07:53:47 +0000

We can use :has, finally!

The article discusses the introduction of the :has pseudo-class in CSS, which allows developers to select elements based on their content, and explores its usage as a parent selector, with combinators and other pseudo-classes for more advanced effects.

Authentication vs. Authorization

The article explains the difference between authentication and authorization in web applications, where authentication is about proving one's identity, while authorization determines the actions and resources a user can access within the system.

Top 10 Websites Every Developer Needs to Know About

The article highlights a collection of websites that can greatly assist developers in their daily work, including code search engines, file converters, image editing tools, code beautifiers, automation platforms, and more, with the aim of improving productivity and saving time.

Know these HTML Tags and Unlock the True Potential of Web Development

The article explores lesser-known HTML tags that can enhance web development skills, including <datalist> for interactive forms, <figure> and <figcaption> for image captions, <mark> for highlighting text, <bdo> for text directionality, and <template> for reusable HTML content.

9 Ways to Implement Vertical Alignment in CSS with Examples

This article explores various methods of implementing vertical alignment in CSS, including flexbox, position: absolute, display: table, CSS grid, line-height, padding, display: inline-block, CSS calc() function, and margin: auto, providing examples and use cases for each method.

CSS in Micro Frontends

This article explores strategies for handling CSS in micro frontends, addressing the challenges of styling conflicts and offering solutions such as shadow DOM, naming conventions, CSS modules, CSS-in-JS libraries like Emotion and Styled Components, and CSS utility libraries like Tailwind.

Best Practices for Creating a Folder and File Structure for a React Application

This article provides guidance and suggestions on organizing the folder structure of a new application, emphasizing the importance of reflecting the project's unique requirements, scalability, and maintainability, while presenting a recommended folder structure for small to medium-sized projects.

A Comprehensive Guide to Common Responsive Device Sizes in CSS

This comprehensive guide explores responsive web design and provides CSS code snippets for creating layouts that adapt to different device sizes, including mobile devices, tablets, desktops, and high-resolution displays.

Converting JavaScript codebase to TypeScript

This article is a step-by-step guide that explains how to convert a JavaScript React app to TypeScript, highlighting TypeScript's benefits, conversion process, and best practices.

DOM vs Virtual DOM: How React is Revolutionizing Web Development

This article explores the difference between DOM and Virtual DOM, highlighting how React leverages Virtual DOM technology to improve web performance, enhance user experience, and simplify complex applications.

Top-10 Posts for FE (Week 3, Jun 2023)

fruntend — Mon, 19 Jun 2023 09:29:47 +0000

Tips on Creating a Responsive Design

This article provides tips and tricks for creating responsive web designs using CSS, including setting widths in percentages, avoiding fixed heights, using the auto-fit property for grid layouts, utilizing flex-wrap for flex layouts, and making typography responsive with the clamp method.

HTML Text Formatting

This comprehensive guide explains the usage of HTML text formatting tags such as bold, italic, underline, and strikethrough, highlighting their semantic significance and providing tips for effective utilization to enhance the visual appeal and structure of web content.

Different approaches to testing your own packages locally: Relative Deps

This article introduces relative-deps, a tool that enables local testing of packages without the need for publishing to production, simplifying the development and testing process while ensuring the stability of projects.

It's time to replace your axios

The article compares Axios to Alova, highlighting Alova's modern and innovative features such as deep integration with UI frameworks, performance optimization, lightweight size, and intuitive response data types.

How To Secure Your JavaScript Applications

The article provides insights and actionable steps to enhance the security of web applications by focusing on code quality, vulnerability protection, validation, logging, monitoring, and code optimization.

Simplify your lists using CSS Counters

This article introduces the use of CSS counters as an alternative method for creating numbered lists and other interactive elements in HTML, providing step-by-step instructions and examples.

10 Best Ways To Use ChatGPT

This article explores various ways to use ChatGPT for learning purposes while highlighting the importance of being cautious due to the AI's limitations in factual accuracy, citations, and mathematical precision.

A Guide to Coding Standards to Improve Code Quality

This article provides guidelines for implementing coding standards to enhance code quality, readability, and maintainability, emphasizing the importance of following these standards in both individual and team development scenarios.

JavaScript localStorage: The complete guide

The article provides an overview of JavaScript's localStorage and its usage within the Web Storage API, explaining its methods for storing, retrieving, and manipulating data, as well as discussing its differences from sessionStorage and its limitations.

Dynamic font-size using only CSS3

The article introduces dynamic font-size using CSS3's clamp() and calc() functions, allowing text sizes to scale proportionally based on the user's viewport width, with examples and a recommendation for further reading.

Top-10 Posts for FE (Week 2, Jun 2023)

fruntend — Mon, 12 Jun 2023 14:19:54 +0000

Making dialog with HTML Dialog element

This article introduces the dialog element in HTML5 and demonstrates how to create and use dialog components, including their default behavior, styling, accessibility, and form integration.

Say Goodbye to Spread Operator: Use Default Composer

This article presents the "default-composer" library, which simplifies setting default values for nested objects in JavaScript, providing concise and readable code compared to other methods.

Best Practices for Writing Clean and Maintainable Code in JavaScript

The article offers guidelines for writing clean and maintainable JavaScript code, emphasizing consistency, readability, modularity, error handling, performance optimization, unit testing, functional programming, code documentation, and using linters and formatters.

How to calculate CSS specificity of your style rules

In this article, you will learn how to calculate the specificity of CSS selectors to determine the order of style rule precedence and understand how styles are applied to elements.

3 Engineering Mistakes That Kill Startups

This article highlights three critical mistakes made by founders when building their products: misprioritizing feature development, requesting too many features initially, and aiming for engineering perfectionism, and provides insights on how to avoid them.

Understanding and Mastering the CSS Block Formatting Context

This article introduces the concept of Block Formatting Context (BFC) in CSS, explaining its role in visual rendering, its creation methods, and how it can solve common design problems and simplify layouts.

Tokenization in JavaScript

This article explores the concept of tokenization in programming, specifically in JavaScript, highlighting its significance and providing practical examples to help developers understand its essence in code interpretation and execution.

How to Build and Publish Your First React NPM Package

This article provides a step-by-step guide on how to build and publish your first Node Package Manager (NPM) package, specifically focusing on creating a package that capitalizes the first letter of a string in React.

Enhancing Your CSS Skills: Dive into :not, :is, and :where Pseudo-Classes

This article explores how CSS pseudo-classes, specifically :is, :where, and :not, can enhance the readability and maintainability of CSS code by providing concise and expressive selectors.

How to test your app using Docker Containers and Postman

This article provides a comprehensive guide on using Docker containers and Postman to test a CRUD application built with Node.js, Express, and Postgres.

Top-10 Posts for FE (Week 1, Jun 2023)

fruntend — Mon, 05 Jun 2023 15:51:06 +0000

Higher Order Functions explained

This article is about the concept of higher order functions in JavaScript, explaining how they can be used to enhance code by accepting functions as arguments and returning functions as results, and exploring examples and built-in higher order functions in JavaScript.

Mastering CSS Rules and Specificity: A Comprehensive Guide

This guide provides a comprehensive overview of CSS rules and specificity in web development, explaining their importance and practical applications through real-life examples.

Exploring Web Rendering: Isomorphic JavaScript & Hydration

This article is a part of a series that explores web rendering techniques, focusing on isomorphic JavaScript and hydration, and discusses the benefits and challenges of using isomorphic rendering for improved performance and search engine optimization.

Programmers, beware! Designers attack!

This humorous article delves into the world of frustrating design choices that challenge front-end developers, emphasizing the need for collaboration and communication with designers.

How BEM (Block-Element-Modifier) CSS actually Work!

This article explains the BEM (Block-Element-Modifier) naming convention for writing CSS code, emphasizing its benefits of scalability, maintainability, and code organization for web projects.

All About CSS Nesting

This article introduces CSS nesting as a feature that allows for writing nested style rules, making code more organized and readable.

The Complete Guide to OOP In Javascript

The article provides a detailed explanation of Object-Oriented Programming (OOP) in JavaScript, covering concepts like classes, objects, data abstraction, encapsulation, polymorphism, and inheritance, as well as demonstrating the implementation using prototypes and different approaches.

Mastering Git: Top Commands Every Developer Should Know

This article covers important Git commands for version control, collaboration, and managing code repositories effectively.

Pretty for CJK languages

This article explores the challenges and solutions related to styling rubies, small pronunciation hints used in East Asian typography, using HTML and CSS.

World Wide Web Wars

The article explores the evolution of the World Wide Web, from the HTML-centric era to the JavaScript-centric era, and advocates for restoring interoperability and peace in the web platform.

Top-10 Posts for FE (Week 4, May 2023)

fruntend — Mon, 29 May 2023 17:32:15 +0000

Solving the "floating point precision" problem with... floats?

This article explores the problem of representing decimal numbers accurately in binary and discusses various solutions while emphasizing the limitations of fixed-point and floating-point representations.

Building a bidding system with NextJS

This article is a tutorial on building a simple bidding application using Next.js and the new server actions feature, where users can register, add products, place bids, and receive notifications.

The tricky CSS position: sticky

This article discusses the CSS position property and its various values, with a focus on "sticky," providing examples and solutions for implementing sticky elements and achieving scrollable stickiness.

HTML/CSS Concepts

This article covers various topics in web development, including the box model, inline versus block elements, positioning, common CSS structural classes, CSS specificity, CSS responsive queries, Flexbox, Grid, and common header meta tags.

Meet Boxy, Your New AI Coding Assistant

The article announces the beta release of the CodeSandbox AI coding assistant, named Boxy, that offers features like code refactoring, code generation, automatic commit messages, and educational support to enhance productivity and creativity for Pro subscribers.

Learn React The Lazy Way in 2023

The article provides an introduction to React, discusses why it's worth learning in 2023, outlines the benefits of adopting a gradual learning approach, and covers topics such as setting up the development environment, building components, managing state and others.

Functional Programming Principles in JavaScript

The article introduces functional programming, its principles (purity, immutability, disciplined state, first-class functions and higher-order functions, type systems, referential transparency), and explains why functional programming is beneficial and its potential drawbacks.

What's new in ES2023?

The article discusses the new features expected to be introduced in ECMAScript 2023 (ES2023), including finding elements from the last in an array, using hashbang grammar in CLI scripts, using symbols as keys in WeakMaps, and providing some array manipulation methods.

A Comprehensive Guide of React Unit Testing

This article is about unit testing in the React.js framework, covering topics such as setting up a testing environment, writing unit tests for React components, testing and firing events in components, testing states and props, mocking function calls, and testing React hooks.

Top 5 Tailwind Component Libraries

The article provides a comparison of different tailwind-based component libraries, discussing their features, advantages, and drawbacks, with the author ranking them based on their perceived professionalism, customization options, use of JavaScript, and abstraction levels.