Top-10 Posts for FE (Week 2, Aug 2023)
Tags: javascript, css, webdev, html
Published: 2023-08-15 10:00:54

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?](https://dev.to/newsdataio/what-is-api-integration-4661https://dev.to/newsdataio/what-is-api-integration-4661)

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](https://dev.to/sh20raj/customizing-the-default-html5-video-player-with-pure-css-properties-without-javascript-3m1o)

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](https://dev.to/bobur/add-authentication-to-any-web-page-in-10-minutes-jo8)

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)?](https://dev.to/mayashavin/enhancing-focus-visibility-focus-within-or-hasfocus-5em0)

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](https://dev.to/mohiyaddeen7/the-ultimate-guide-to-web-design-rules-and-best-practices-creating-exceptional-user-experiences-35oe)

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](https://dev.to/digitalpollution/the-evolution-of-javascript-from-vanilla-to-modern-es2023-features-5bj0)

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](https://dev.to/rashidshamloo/preventing-the-layout-shift-caused-by-scrollbars-2flp)

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](https://dev.to/logrocket/a-guide-to-the-4-new-arrayprototype-methods-in-javascript-2mej)

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](https://dev.to/cliff123tech/demystifying-javascript-scoping-and-hoisting-140a)

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](https://dev.to/m_midas/52-frontend-interview-questions-javascript-59h6)

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.

---

[![More News on channel t.me/fruntend_news](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qyxv1b74oody1eb0k10.jpg)](https://telegram.me/fruntend_news)[![By me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zir1erzg7v28nvyuue09.jpg)](https://www.buymeacoffee.com/fruntend)