Top-10 Posts for FE (Week 4, Jun 2023)
Tags: javascript, css, webdev, html
Published: 2023-06-26 07:53:47

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.

## [We can use :has, finally!](https://dev.to/tomquinonero/we-can-use-has-finally-2f91)

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.

![We can use :has, finally!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3kugx8gza5tvge213on.png)

## [Authentication vs. Authorization](https://dev.to/philip-ainberger/authentication-vs-authorization-olf)

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.

![Authentication vs. Authorization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4tcjt3ep5iijg5likqc.jpg)

## [Top 10 Websites Every Developer Needs to Know About](https://dev.to/j471n/top-10-websites-every-developer-needs-to-know-about-f5j)

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.

![Top 10 Websites Every Developer Needs to Know About](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3zwcffuxgytliegjhic.png)

## [Know these HTML Tags and Unlock the True Potential of Web Development](https://dev.to/gloscode/know-these-html-tags-and-unlock-the-true-potential-of-web-development-15n3)

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.

![Know these HTML Tags and Unlock the True Potential of Web Development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryicrlkub2uw8ieg303n.png)

## [9 Ways to Implement Vertical Alignment in CSS with Examples](https://dev.to/alakkadshaw/9-ways-to-implement-vertical-alignment-in-css-with-examples-53ig)

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.

![9 Ways to Implement Vertical Alignment in CSS with Examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6t2ucl3iegdty2yhxmy.png)

## [CSS in Micro Frontends](https://dev.to/florianrappl/css-in-micro-frontends-4jai)

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.

![CSS in Micro Frontends](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjk3s518yg88aa3qoxnp.jpg)

## [Best Practices for Creating a Folder and File Structure for a React Application](https://dev.to/wolfflucas/best-practices-for-creating-a-folder-and-file-structure-for-a-react-application-3k1)

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.

![Best Practices for Creating a Folder and File Structure for a React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fa5yal5wlhdj8tackny.png)

## [A Comprehensive Guide to Common Responsive Device Sizes in CSS](https://dev.to/faridteymouri/a-comprehensive-guide-to-common-responsive-device-sizes-in-css-5hcg)

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.

![A Comprehensive Guide to Common Responsive Device Sizes in CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw8icqispv7vw347867s.png)

## [Converting JavaScript codebase to TypeScript](https://dev.to/documatic/converting-javascript-codebase-to-typescript-1852)

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.

![Converting JavaScript codebase to TypeScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6692ngx0pdwdug608lw.png)

## [DOM vs Virtual DOM: How React is Revolutionizing Web Development](https://dev.to/roktim32/dom-vs-virtual-dom-how-react-is-revolutionizing-web-development-2g6g)

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.

![DOM vs Virtual DOM: How React is Revolutionizing Web Development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yqoncvim3dosmxfwm07.jpg)


---

[![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)