Top-10 Posts for FE (Week 3, May 2023)
Tags: javascript, webdev, css, html
Published: 2023-05-29 15:51:10

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's your CSS level? Take a CSS Quiz!](https://dev.to/afif/whats-your-css-level-take-a-css-quiz-5g9i)

The article is about a collection of CSS quizzes that cover topics like selectors, flexbox, transforms, and gradients, challenging readers to test their CSS knowledge and achieve a perfect score for a chance to win a prize.

![What's your CSS level? Take a CSS Quiz!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3meojst6jmnqbvcyxl62.jpg)

## [What’s new in CSS and UI: I/O 2023 Edition](https://dev.to/trinhcamminh/whats-new-in-css-and-ui-io-2023-edition-3oe)

This article showcases five exciting new features in web UI, including style queries, the :has() selector, advanced nth-child syntax, dynamic viewport units, and CSS nesting, with examples and explanations.

![What’s new in CSS and UI: I/O 2023 Edition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pymh7gao4ec6em3na4ac.png)

## [CSS-in-JS: Why is this bad?](https://dev.to/xantregodlike/css-in-js-why-is-this-bad-36cn)

This article discusses CSS-in-JS, its goals, implementation mechanics, challenges, and suggests utility CSS (e.g., Tailwind) as an alternative.

![CSS-in-JS: Why is this bad?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb1whlwqclejw5s6v277.png)

## [Journey to Front-End Web Development](https://dev.to/bealecs/journey-to-front-end-web-development-333l)

This article provides advice and insights on starting a career in web development, emphasizing the importance of mastering the basics, creating projects, immersing oneself in the industry, networking, and addressing imposter syndrome.

![Journey to Front-End Web Development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tphlthx0yb3x0gsk3csr.jpg)

## [From Idea to Design for Non-Designers](https://dev.to/abbeyperini/from-idea-to-design-for-non-designers-m6d)

This article provides practical tips for developers who want to add minimum styling to their projects without having extensive knowledge of design, covering topics such as goals, inspiration, layout, colors, typography, buttons, links, and putting everything together.

![From Idea to Design for Non-Designers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/we20k2jvlg47p8drgtdi.png)

## [Progressive Web Apps](https://dev.to/anuradha9712/progressive-web-apps-1dd9)

This article explores the concept of Progressive Web Apps (PWAs), including their advantages and step-by-step instructions for creating one using HTML, CSS, and vanilla JavaScript.

![Progressive Web Apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebboaxy7xr7zn8ao7zlg.png)

## [Converting between strings and numbers in JavaScript](https://dev.to/bybydev/converting-between-strings-and-numbers-in-javascript-3b5m)

This article explains how to convert values between strings and numbers in JavaScript, covering methods, pitfalls, and the importance of choosing the right approach for each use case.

![Converting between strings and numbers in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z9c8mh6onnsdiaqy1hn.png)

## [Write better code by following these JavaScript best practices](https://dev.to/dawsoncodes/write-better-code-by-following-these-javascript-best-practices-25mp)

This article provides comprehensive guidance on JavaScript best practices, covering topics such as coding style, variable naming, shorthand usage, commenting, separation of concerns, avoiding global variables, loop optimization, and more, to help improve your JavaScript skills.

![Write better code by following these JavaScript best practices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5aptpntlrdk539cjoo1.png)

## [The difference between traditional functions and arrow functions in javascript](https://dev.to/ernanej/a-diferenca-entre-funcoes-tradicionais-e-arrow-functions-no-javascript-7e3)

The article discusses the differences between traditional functions and arrow functions in JavaScript, focusing on syntax, the use of the 'this' keyword, access to arguments, usage with the new operator, and parameters with duplicate naming.

![The difference between traditional functions and arrow functions in javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4xtmi4yho9axusk8p2u.png)

## [HTML Document Structure](https://dev.to/laksidesvibe/html-document-structure-l7n)

The article provides an introduction to the HTML document structure/template commonly used in web development, explaining the purpose and usage of various HTML elements such as doctype, html tag, head tag, meta tags, title tag, CSS stylesheet, script tags, and body tag.

![HTML Document Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpo5w4jqa31jnjjog35u.png)


---

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