--- title: Best HTML posts — July 2022 | daily.dev description: The most upvoted HTML posts from July 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/html/best-of/2022/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/html/best-of/2022/07 og:type: website og:site_name: daily.dev og:title: Best HTML posts — July 2022 | daily.dev og:description: The most upvoted HTML posts from July 2022, 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 2022 1. 1 [](/posts/learn-game-development-with-javascript-sg0jattk7 "Learn Game Development with JavaScript") Article freeCodeCamp · 4y Learn Game Development with JavaScript You will learn to make 2D games with HTML, CSS & plain vanilla JavaScript, using no frameworks and no libraries. Frank Dvorak has created many popular JavaScript courses on a variety of platforms. He will teach you to use everything you learned to make a single final game. 436 14 2. 2 [](/posts/the-pros-and-cons-of-tailwindcss-hieo-qjhl "The Pros and Cons of TailwindCSS") Article Hashnode · 4y The Pros and Cons of TailwindCSS Tailwind is a front-end CSS framework that has taken off more than any other recently. Instead of creating a set of selectors and bespoke classes to style your code, you use a large set of single-purpose utility classes. In essence, you add nearly all your style right into your frontend HTML, React, or Vue code. 154 9 3. 3 [](/posts/build-your-own-web-framework-vercel-zw4igsfdw "Build Your Own Web Framework – Vercel") Article Vercel · 4y Build Your Own Web Framework – Vercel ReactDOM Server exposes a method called renderToString, which takes a React component and returns the corresponding HTML output. To support static pages, we first have to implement a transpilation step that turns React-based pages into static HTML. To hydrate dynamic components, we can export a string literal that our bundler eventually uses to create a custom hydration script for individual pages. 107 2 4. 4 [](/posts/tabler-tabler-tabler-is-free-and-open-source-html-dashboard-ui-kit-built-on-bootstrap-tx2tjcpod "tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap") Article Hacker News · 4y tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap Tabler is a premium and open source dashboard template with a responsive and high-quality UI. Preview Tabler is fully responsive and compatible with all modern browsers. The only requirement is basic HTML and CSS (and some Liquid) knowledge. 81 2 5. 5 [](/posts/coding-an-extension-that-blocks-social-media-websites-with-html-css-and-js--xcmt0vxsg "Coding an extension that blocks Social Media Websites with HTML, CSS and JS.") Article Community Picks · 4y Coding an extension that blocks Social Media Websites with HTML, CSS and JS. Social Media Blocks is a Google Chrome extension that will block social media websites like Twitter: Facebook, Instagram, LinkedIn, WhatsApp, Reddit etc. Add this extension into your browser and achieve better productivity. Create the project using the CodePen playground or setup your own project on Visual Studio Code with the following file structure. 81 1 6. 6 [](/posts/locofy-ai---turn-figma-designs-into-code-react-react-native-html-css--gaoe2cbjx "Locofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+") Article Product Hunt · 4y Locofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+ Locofy.ai helps builders launch 3-4x faster by converting designs to production ready code. Try Figma to React, React Native, HTML-CSS, Next.js, Gatsby in FREE BETA! Tag responsive designs, make components, get a live-prototype & export code or direct deploy. 70 1 7. 7 [](/posts/html-avoid-displaying-a-broken-image-if-the-image-is-not-found-7vz07gnhn "HTML, avoid displaying a broken image if the image is not found") Article Flavio Copes · 4y HTML, avoid displaying a broken image if the image is not found The technique I used is this: this inside an inline event handler in HTML refers to “this element” That’s a workaround that uses the platform features because I know I might not pay attention to that as I’m a solo developer and I might have a broken image visible for weeks before I realize. 64 8 8. 8 [](/posts/introduction-to-web-components-api-h-rtahmxu "Introduction to Web Components API") Article codeguru · 4y Introduction to Web Components API Web components are HTML elements that leverage the power to create new HTML tags and extend existing tags. They can be easily created using the browser’s API and do not have a dependency on any third-party library or framework. Web components are non-intrusive and have their styling and structure. The power of web components lies in their API. 60 1 9. 9 [](/posts/tailwind-css-my-experience-in-2022--8mqi-zeh "Tailwind CSS: My experience in 2022") Article DEV · 4y Tailwind CSS: My experience in 2022 Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It's been 5 years since Tailwind's launch, and it's officially been five years since it was launched. Tailwind has been an interesting experience for me, and I'm here for every bit of it. 48 3 10. 10 [](/posts/using-em-vs-rem-in-css-fzbml0sz9 "Using em vs. rem in CSS") Article LogRocket · 4y Using em vs. rem in CSS Within CSS, em and rem are both scalable units that also specify values of properties. Em and rem meet web accessibility standards, and, unlike px , scale better. Consequently, they are more suited for responsive design. We’ll also go over code examples to demonstrate how they work and their difference. 37 1 11. 11 [](/posts/typescript-tutorial-go-beyond-hello-world--fgo6pjwpe "TypeScript Tutorial: Go beyond ‘Hello, World!’") Article The New Stack · 4y TypeScript Tutorial: Go beyond ‘Hello, World!’ The entire first section defines our function that will add the values of x and y that we’ll define in the next line that looks like this. The results of running the app will print out 13.14 (because we added 3.14 to 10) This is great. What about taking input from a user? That’s possible as well as using the parseInt function. You’re on fire! 28 12. 12 [](/posts/web-scraping-with-rust-expwpjky3 "Web scraping with Rust") Article LogRocket · 4y Web scraping with Rust Web scraping refers to gathering data from a webpage in an automated way. The details of web scraping highly depend on the page you’re getting the data from. 22 1 13. 13 [](/posts/stop-using-ids-and-classes-in-every-html-element---iv55owin "Stop Using IDs and Classes in Every HTML Element!") Article Community Picks · 4y Stop Using IDs and Classes in Every HTML Element! CSS :pseudo-classes helps you single out an HTML element by its particular state. :first-child and :last-child apply the style to a children element with a particular position in a group of sibling elements, e.g., the third 'p' in every div. The difference is ONLY the occurrence of the element in the container/parent element. 20 [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/2022/07#page","url":"https://daily.dev/tags/html/best-of/2022/07","name":"Best HTML Posts — July 2022","description":"The most upvoted HTML posts from July 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/html/best-of/2022/07#items","numberOfItems":13,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/learn-game-development-with-javascript-sg0jattk7","name":"Learn Game Development with JavaScript"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/the-pros-and-cons-of-tailwindcss-hieo-qjhl","name":"The Pros and Cons of TailwindCSS"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/build-your-own-web-framework-vercel-zw4igsfdw","name":"Build Your Own Web Framework – Vercel"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/tabler-tabler-tabler-is-free-and-open-source-html-dashboard-ui-kit-built-on-bootstrap-tx2tjcpod","name":"tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/coding-an-extension-that-blocks-social-media-websites-with-html-css-and-js--xcmt0vxsg","name":"Coding an extension that blocks Social Media Websites with HTML, CSS and JS."},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/locofy-ai---turn-figma-designs-into-code-react-react-native-html-css--gaoe2cbjx","name":"Locofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/html-avoid-displaying-a-broken-image-if-the-image-is-not-found-7vz07gnhn","name":"HTML, avoid displaying a broken image if the image is not found"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/introduction-to-web-components-api-h-rtahmxu","name":"Introduction to Web Components API"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/tailwind-css-my-experience-in-2022--8mqi-zeh","name":"Tailwind CSS: My experience in 2022"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/using-em-vs-rem-in-css-fzbml0sz9","name":"Using em vs. rem in CSS"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/typescript-tutorial-go-beyond-hello-world--fgo6pjwpe","name":"TypeScript Tutorial: Go beyond ‘Hello, World!’"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/web-scraping-with-rust-expwpjky3","name":"Web scraping with Rust"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/stop-using-ids-and-classes-in-every-html-element---iv55owin","name":"Stop Using IDs and Classes in Every HTML Element!"}]},{"@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 2022"}]}]} ```