Best of CSSJune 2021

  1. 1
    Article
    Avatar of hashnodeHashnode·5y

    Tools for Web Developers To Work Smarter and not Harder

    The Web Developer is a browser extension that comes bundled with various web developer tools. Quokka makes prototyping,learning and testing JavaScript and Typescript code blazingly fast. Google Lighthouse is an open-source, automated development tool for testing/improving the quality of your web pages.

  2. 2
    Article
    Avatar of smashingSmashing Magazine·5y

    Useful Front-End Boilerplates And Starter Kits — Smashing Magazine

    We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful.

  3. 3
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·5y

    How to Detect Unused CSS or JavaScript

    Chrome DevTools is a powerful tool provided by Google. It can be used to help developers refactor large code bases. The tool can also be used by developers who have been working on the same codebase for a long time or who are new to the team. To use the tool, right click and inspecting using ‘Inspect’

  4. 4
    Article
    Avatar of rubylaRUBYLAND·5y

    How to Find and Remove Dead CSS

    The most valuable uses for code coverage have nothing to do with testing. The approach in this screencast shows a way to record and combine the code coverage results for our site’s CSS across each web page. Other automated approaches for identifying dead styles exist, but nothing can beat recording coverage while manually resizing and clicking around your custom components.

  5. 5
    Article
    Avatar of freecodecampfreeCodeCamp·5y

    What are Bookmarklets and How to Make Them

    Seth Falco: How to Use JavaScript to Make a Bookmarklet in Chromium and Firefox. What are Bookmarklets? How to use them in your web browser. How to make a bookmarklet for Chrome and Firefox? How do I use them? How can I make a bookmarklet for Firefox?

  6. 6
    Article
    Avatar of webweb.dev·5y

    CSS for Web Vitals

    Cookie notices, particularly those placed at the top of the page, are a common example of this problem. Lighthouse only analyzes a page's performance up until the "page load" event. Cookie banners, ads, and other widgets sometimes do not load until after page load.

  7. 7
    Article
    Avatar of freecodecampfreeCodeCamp·5y

    Complete CSS Grid Tutorial with Cheat Sheet 🎖️

    Joy Shaheb is the author of the popular blog CSS Grid. She has also written a book, CSS Grid: The Ultimate Guide. Her book is available on Amazon.com, and she also has her own blog, CSSgrid.com. For more information on CSS Grid, visit her site.

  8. 8
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·5y

    Let’s Build a CRUD Website with HTML, CSS, JavaScript and an External API

    In this article, we will give you a tutorial for creating a web application with just only basic HTML, CSS and JavaScript. CRUD operations are the four basic operations of manipulating data including Create/Construct, Read, Update and Delete. We will use AJAX (Asynchronous JavaScript And XML) technique to have our web site update asynchronously.

  9. 9
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·5y

    Simple CSS Hack to Reduce Page Load Time

    Simple hack to reduce the impact of CSS on page load time. Use non-Blocking CSS to improve the performance of the application. The property “media=’print’” should be applied to only those CSS elements which do not have any impact during the initial loading of the page.

  10. 10
    Article
    Avatar of dailydaily.dev·5y

    Tailwind CSS from Zero to Hero - Extracting Components and Setting up for Production

    This is the fourth and probably the final piece in the Tailwind Zero to Hero series. This time we will be using some really useful concepts like using components, and getting our entire “Plant-a-holic” project ready for production. The concept is similar to what you might have used in frontend libraries or frameworks like React or Angular.

  11. 11
    Article
    Avatar of phProduct Hunt·5y

    Copy Paste CSS - Find inspiration with a curated list of simple buttons!

    The Product Hunt button is a tool to help you find inspiration for your next button and box-shadow design. You can also find a link to some design systems. Yes, there is the Product Hunt Button. Embed your own button or box in the comments below.

  12. 12
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Detect Unused Classes in… HTML

    Unused CSS is a hard problem because of how hard it is to know for sure know if a ruleset is unused. Robert Kieffer's solution is to load up document.styleSheets and find all the rules (the ones that are classes) Then, use a MutationObserver to watch the DOM for all HTML. If the HTML has a class not found in a stylesheet, report it.

  13. 13
    Article
    Avatar of freecodecampfreeCodeCamp·5y

    Learn Bootstrap 5 and SASS by Building a Portfolio Website

    Learn Bootstrap 5 and SASS by Building a Portfolio Website with Beau Carnes. Beau Carnes is the author of the book, "Bootstrap 5: A Portfolio Portfolio," published by Simon & Schuster. For more information on Bootstrap, visit bootstrap5.com.

  14. 14
    Article
    Avatar of codropsCodrops·5y

    Trigonometry in CSS and JavaScript: Introduction to Trigonometry

    Trigonometric functions allow us to calculate unknown values of a right-angled triangle from known parameters. Sass and JavaScript both include trigonometric functions, and we’ll look at some ways to use these in this article and the following ones. We’re using these in the clip-path property to determine the coordinates of the polygon points, similar to calculating the height of a tree.

  15. 15
    Article
    Avatar of phProduct Hunt·5y

    Razor UI - A cutting edge UI kit for Tailwind CSS

    Designing a consistent component library is difficult, takes a lot of time and is expensive. Save countless of hours and money with interactive components and templates you can drop right in your project. Embed Collect is a modern looking UI kit for Tailwind CSS. We hope you will enjoy using it.

  16. 16
    Article
    Avatar of dailydaily.dev·5y

    Tailwind CSS from Zero to Hero - Responsiveness and Custom Utilities

    This is the third article in the Tailwind CSS series. We will be using the demo from the previous article to make all things happen. We are also going to do a bit of clean-up of our HTML code with the help of some utilities. As always there will be plenty of explanations and code examples along the way.

  17. 17
    Article
    Avatar of dailydaily.dev·5y

    Back-end Guide, Next.js Free Course, CSS for Web Vitals - Picks 183

    Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream. Microsoft’s new version of Windows will launch on June 24 at 11 AM ET. GitLive is a new product that helps developers work together in real-time. Learn how to use CSS correctly to improve your website's performance.

  18. 18
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Positioning Overlay Content with CSS Grid

    With CSS Grid, positioning overlay elements can be built using more logical, readable properties and values. The following are a few examples of where these grid properties come in handy. It will help to read up on grid-template-areas and grid-area properties if you’re not yet familiar with them.

  19. 19
    Article
    Avatar of sitepointSitePoint·5y

    Create a 3D CSS Printer that Actually Prints!

    Create a 3D CSS Printer that Actually Prints! By Jhey Tompkins HTML & CSS June 16, 2021 Share: Free JavaScript Book! Write powerful, clean and maintainable JavaScript. RRP $11.95 Get the book free! grotesquely.

  20. 20
    Article
    Avatar of medium_jsMedium·5y

    Introducing Odom: The Open UI Framework

    Odom is a JavaScript framework for building user interfaces. It aims not to replace any technology, but work with every technology. Odom can render four types of assets to the DOM; components, nodes, markup and text. It can also be easily integrated into existing projects.