--- title: Best HTML posts — July 2023 | daily.dev description: The most upvoted HTML posts from July 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/html/best-of/2023/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/html/best-of/2023/07 og:type: website og:site_name: daily.dev og:title: Best HTML posts — July 2023 | daily.dev og:description: The most upvoted HTML posts from July 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of HTML — July 2023 1. 1 [](https://daily.dev/posts/javascript-playground-a-no-fuss-pure-javascript-playground-with-a-live-feedback-loop-04z7olcju "JavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop") Article Community Picks · 3y JavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop JavaScript Playground is a small web application that provides a JavaScript playground for free. You can think of it as a tiny editor for you to quickly test any JavaScript supported by your browser. It functions pretty much like a REPL, where you are given immediate feedback on the Console screen as you change your code. 159 12 2. 2 [](https://daily.dev/posts/the-case-against-self-closing-tags-in-html-0s7fgyjyl "The case against self-closing tags in HTML") Article Jake Archibald · 3y The case against self-closing tags in HTML JakeArchibald.com: The case against self-closing tags in HTML. 86 10 3. 3 [](https://daily.dev/posts/how-to-write-faster-html-and-css-code-using-emmet-3pcs2fk4c "How to Write Faster HTML and CSS Code Using Emmet") Article freeCodeCamp · 3y How to Write Faster HTML and CSS Code Using Emmet Emmet is an essential development tool that helps you quickly create repetitive structures like lists, tables, or ordered elements with minimal typing. It is more like a shorthand that translates to multiple lines of HTML or a CSS attribute. In this tutorial, we will learn some Emmet shortcuts that generate HTML and CSS quickly. 83 5 4. 4 [](https://daily.dev/posts/adding-dark-mode-to-your-website-using-a-single-line-of-html-aaj5mgb0g "Adding Dark Mode to Your Website Using a Single Line of HTML") Article Hacker Noon · 3y Adding Dark Mode to Your Website Using a Single Line of HTML Using a Single Line of HTML, I wanted to explore how I can add dark mode to my website. I decided to keep it simple, and use the system-wide preference for the colour mode. 73 8 5. 5 [](https://daily.dev/posts/how-to-use-the-javascript-fullscreen-api-kw6lxa3eq "How to Use the JavaScript Fullscreen API") Article freeCodeCamp · 3y How to Use the JavaScript Fullscreen API Fullscreen API is a browser web API that allows you to enable fullscreen mode for HTML elements. It saves you the stress of using CSS and JavaScript to implement fullscreen functionality. The use cases of fullscreen API are numerous because of the increased complexity of today's websites. 72 4 6. 6 [](https://daily.dev/posts/exploring-the-trending-web-designs-of-2023-8kfcljtux "Exploring the Trending Web Designs of 2023") Article Hacker Noon · 3y Exploring the Trending Web Designs of 2023 The Trending Web Designs of 2023 are all about exploring and experimenting. We have curated the ultimate list of the top 10 web design trends 2023 Edition. The top 10 Web Design Trends 2023 edition has been curated by HackerNoon. 65 3 7. 7 [](https://daily.dev/posts/mobile-first-approach-with-html-and-css-pwc6eu50k "Mobile-first approach with HTML and CSS") Article asayer · 3y Mobile-first approach with HTML and CSS The mobile-first approach is a design and development approach focusing on creating a user-friendly experience for mobile devices like smartphones and tablets. This article will explain the principles and benefits of mobile- first design and implementing specific strategies with HTML and CSS so you can apply the methodology. 53 5 8. 8 [](https://daily.dev/posts/css-wrapping-made-easy-cww3oayb0 "CSS wrapping made easy") Article asayer · 3y CSS wrapping made easy CSS wrapping may be relied on when it comes to regulating how items are displayed and wrapped within a container. It emphasizes content readability and adaptability to any screen size, particularly smaller screens. CSS has several properties for managing how to make text wrap; the two most common properties are and. 46 9. 9 [](https://daily.dev/posts/creating-svg-animations-using-tailwind-css-931he1pdt "Creating SVG Animations Using Tailwind CSS") Article Semaphore · 3y Creating SVG Animations Using Tailwind CSS SVGs are a vector-based graphics file format that allows graphics to be displayed at any size without losing quality. For the use of illustrations, icons, and logos on websites and applications, SVGs have proven to be an invaluable resource. For this tutorial, we will use a heart SvG icon from Hero icons. 35 2 10. 10 [](https://daily.dev/posts/vrite-editor-open-source-wysiwyg-markdown-editor-emz6tzg00 "Vrite Editor: Open-Source WYSIWYG Markdown Editor") Article Community Picks · 3y Vrite Editor: Open-Source WYSIWYG Markdown Editor Vrite Editor is an open-source, minimalistic WYSIWYG Markdown editor to easily create and export Markdown and HTML content on the go. Vite Editor comes with many features to make editing a breeze. TipTap provides extensions for supporting Table formatting, the UI is a different story. 31 2 11. 11 [](https://daily.dev/posts/next-js-app-router-7g6u7otaj "Next.js App Router") Article Community Picks · 3y Next.js App Router Next.js App Router implements React Server Components, a new feature introduced in React 18\. To support the App Router, currently all components and hooks from MUI libraries are exported with the directive. Using Material UI with the default theme, you can add Material UI components to Next.js routing files without any additional configuration. 29 12. 12 [](https://daily.dev/posts/frontend-creative-coding-brrytdswi "Frontend & creative coding") Article Community Picks · 3y Frontend & creative coding An event that tracks those pesky gray bars 19\. Jun 2023 Simple colorful logging in Node.js is an easy way to add some color to your node scripts. Mar 2023 Draw SVG rope using JavaScript 23. 28 2 13. 13 [](https://daily.dev/posts/what-is-nodejs-the-javascript-engine-and-runtime-explained-for-beginners-mx7zy3htm "What is NodeJS? The JavaScript Engine and Runtime Explained for Beginners") Article freeCodeCamp · 3y What is NodeJS? The JavaScript Engine and Runtime Explained for Beginners JavaScript is a programming language based on the ECMAScript language standard. It's not a language or a framework. It's simply an environment that allows you to write JavaScript that interacts with different parts of the outside world. The JavaScript engine still implements specific rules, ensuring consistency when executing your code. 26 14. 14 [](https://daily.dev/posts/doppio---html-to-pdf-image-api-ls0lwbpql "Doppio - HTML to PDF/Image API") Article Product Hunt · 3y Doppio - HTML to PDF/Image API Doppio.sh is a collaborative approach and understands the value that comes with different perspectives. We're particularly interested in your thoughts on our Product Experience, Pricing, Branding, and Documentation. We're eager to hear your thoughts and feedback. 26 15. 15 [](https://daily.dev/posts/how-to-build-error-free-html-forms-szuckaaxc "How to Build Error-Free HTML Forms") Article freeCodeCamp · 3y How to Build Error-Free HTML Forms When I first started creating HTML forms, I would often use as the label and id's attribute. This all changed when I started using WAVE’s accessibility checker to learn how to make my code more accessible. In this article, I will show you three things I have learned in surviving, I mean making HTML forms error-free. 26 2 16. 16 [](https://daily.dev/posts/deno-1-35-a-fast-and-convenient-way-to-build-web-servers-bpvh2mfsc "Deno 1.35: A fast and convenient way to build web servers") Article Deno · 3y Deno 1.35: A fast and convenient way to build web servers Deno 1.35: A fast and convenient way to build web servers is now stable. This release also includes many other improvements and bug fixes. The long awaited new web server API, which allows developers to set up a web server using a single line of code. 25 1 17. 17 [](https://daily.dev/posts/hono-htmx-cloudflare-is-a-new-stack-kojd1kgao "Hono + htmx + Cloudflare is a new stack") Article Community Picks · 3y Hono + htmx + Cloudflare is a new stack Hono JSX Middleware Hono- a JavaScript framework for edges - includes JSX middleware. Hono's Zod Validator Middleware integrates with Hono, allowing us to easily get the types of validated values. It’s already fast and perfectly suitable for Proof of Concept (PoC) projects. 23 2 18. 18 [](https://daily.dev/posts/how-to-create-a-personal-webdev-ide-in-next-js-tndlafqya "How to Create a Personal WebDev IDE in Next.js") Article Hacker Noon · 3y How to Create a Personal WebDev IDE in Next.js We'll explore the process of building a functional web development Integrated Development Environment (IDE) using React within a Next.js application. We'll focus on creating an IDE that offers support for HTML, CSS, and JavaScript. Subsequently, we'll enhance the IDE by adding the capability to execute our code. 19 1 19. 19 [](https://daily.dev/posts/understanding-the-differences-between-real-dom-virtual-dom-and-shadow-dom-il2c8oslx "Understanding the Differences Between Real DOM, Virtual DOM, and Shadow DOM") Article Hacker Noon · 3y Understanding the Differences Between Real DOM, Virtual DOM, and Shadow DOM The HTML tree of a website is represented by an object called. In this object, there is a model of the HTML tree's elements, conveniently accessible by. DOM (Document Object Model) document object dot notation. You can also use this dot notation to manipulate the DOM. 19 20. 20 [](https://daily.dev/posts/top-20-must-know-tips-for-web-accessibility-2xiqwiglu "Top 20 Must-Know Tips for Web Accessibility") Article This is Learning · 3y Top 20 Must-Know Tips for Web Accessibility We'll uncover the secrets of creating clear descriptions for images, explore the world of navigating using only the keyboard, and much more, so that everyone can browse your site like a pro. This third part of the series aims to provide you with essential principles (not all of them), practical advice, and examples for creating accessible websites. 17 2 21. 21 [](https://daily.dev/posts/qwik-the-post-modern-framework-eutznwil9 "Qwik – The Post-Modern Framework") Article This is Learning · 3y Qwik – The Post-Modern Framework Qwik is based on the HTML first framework's philosophy: make the fastest possible time-to-interactive (to do it faster by doing nothing) The framework delays the invocation of the javascript as much as possible and invokes it only what is absolutely needed. The focus is on the first load. 17 2 22. 22 [](https://daily.dev/posts/how-to-manipulate-html-and-css-using-javascript-cfisoavip "How to Manipulate HTML and CSS Using JavaScript") Article freeCodeCamp · 3y How to Manipulate HTML and CSS Using JavaScript The HTML DOM (Document Object Model) represents the structure and content of an HTML document as a tree-like structure. In it, each element, attribute, and text node is represented as a node in the DOM tree. In this article you're going to learn how to use that structure to more effectively control the way your HTML elements behave. 16 23. 23 [](https://daily.dev/posts/how-to-start-learning-javascript-bd4zkm66t "How to Start Learning JavaScript") Article freeCodeCamp · 3y How to Start Learning JavaScript JavaScript is a powerful programming language that provides significant value in web development. There isn't any technical connection between JavaScript and the Java programming language. In this article I'm going to show you how you can incorporate JavaScript into your HTML code. You can include JavaScript code in your HTML web pages in a couple ways. 16 2 24. 24 [](https://daily.dev/posts/how-to-use-css-selectors-7rdfo5o1j "How to Use CSS Selectors") Article freeCodeCamp · 3y How to Use CSS Selectors CSS selectors target HTML elements based on their tag names, attributes, classes, IDs, or their position in the document structure. The shape of the background coloring applied to tags and the border color of the text input field are controlled by these two styles. You can also control content behavior using custom or styles, pseudo classes, and inheritance. 16 25. 25 [](https://daily.dev/posts/the-power-of-react-s-virtual-dom-a-comprehensive-explanation-tyexy584n "The Power of React’s Virtual DOM: A Comprehensive Explanation") Article Syncfusion · 3y The Power of React’s Virtual DOM: A Comprehensive Explanation The Power of React's Virtual DOM: A Comprehensive Explanation Modern JavaScript frameworks have entirely changed the way web development is done. They have provided a great abstraction by addressing common issues in browsers and enhancing performance using methodologies that were not possible through plain JavaScript. This article will discuss the virtual DOM and how it works. 16 [See all HTML archives](/tags/html/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/html/best-of/2023/07#page","url":"https://daily.dev/tags/html/best-of/2023/07","name":"Best HTML Posts — July 2023","description":"The most upvoted HTML posts from July 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/html/best-of/2023/07#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/javascript-playground-a-no-fuss-pure-javascript-playground-with-a-live-feedback-loop-04z7olcju","name":"JavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/the-case-against-self-closing-tags-in-html-0s7fgyjyl","name":"The case against self-closing tags in HTML"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-to-write-faster-html-and-css-code-using-emmet-3pcs2fk4c","name":"How to Write Faster HTML and CSS Code Using Emmet"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/adding-dark-mode-to-your-website-using-a-single-line-of-html-aaj5mgb0g","name":"Adding Dark Mode to Your Website Using a Single Line of HTML"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-use-the-javascript-fullscreen-api-kw6lxa3eq","name":"How to Use the JavaScript Fullscreen API"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/exploring-the-trending-web-designs-of-2023-8kfcljtux","name":"Exploring the Trending Web Designs of 2023"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/mobile-first-approach-with-html-and-css-pwc6eu50k","name":"Mobile-first approach with HTML and CSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/css-wrapping-made-easy-cww3oayb0","name":"CSS wrapping made easy"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/creating-svg-animations-using-tailwind-css-931he1pdt","name":"Creating SVG Animations Using Tailwind CSS"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/vrite-editor-open-source-wysiwyg-markdown-editor-emz6tzg00","name":"Vrite Editor: Open-Source WYSIWYG Markdown Editor"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/next-js-app-router-7g6u7otaj","name":"Next.js App Router"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/frontend-creative-coding-brrytdswi","name":"Frontend & creative coding"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/what-is-nodejs-the-javascript-engine-and-runtime-explained-for-beginners-mx7zy3htm","name":"What is NodeJS? The JavaScript Engine and Runtime Explained for Beginners"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/doppio---html-to-pdf-image-api-ls0lwbpql","name":"Doppio - HTML to PDF/Image API"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-to-build-error-free-html-forms-szuckaaxc","name":"How to Build Error-Free HTML Forms"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/deno-1-35-a-fast-and-convenient-way-to-build-web-servers-bpvh2mfsc","name":"Deno 1.35: A fast and convenient way to build web servers"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/hono-htmx-cloudflare-is-a-new-stack-kojd1kgao","name":"Hono + htmx + Cloudflare is a new stack"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-create-a-personal-webdev-ide-in-next-js-tndlafqya","name":"How to Create a Personal WebDev IDE in Next.js"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/understanding-the-differences-between-real-dom-virtual-dom-and-shadow-dom-il2c8oslx","name":"Understanding the Differences Between Real DOM, Virtual DOM, and Shadow DOM"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/top-20-must-know-tips-for-web-accessibility-2xiqwiglu","name":"Top 20 Must-Know Tips for Web Accessibility"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/qwik-the-post-modern-framework-eutznwil9","name":"Qwik – The Post-Modern Framework"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-manipulate-html-and-css-using-javascript-cfisoavip","name":"How to Manipulate HTML and CSS Using JavaScript"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-start-learning-javascript-bd4zkm66t","name":"How to Start Learning JavaScript"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-use-css-selectors-7rdfo5o1j","name":"How to Use CSS Selectors"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/the-power-of-react-s-virtual-dom-a-comprehensive-explanation-tyexy584n","name":"The Power of React’s Virtual DOM: A Comprehensive Explanation"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"HTML","item":"https://daily.dev/tags/html"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/html/best-of"},{"@type":"ListItem","position":5,"name":"July 2023"}]}]} ```