Javascript Remove an outer array in JavaScript with the flat method If you're working with nested arrays and need to return just a singular array, reach for the Array.flat() method.
TailwindCSS Tip #33: Automatically add ellipsis with the truncate utility When working with large blocks on text on the frontend we sometimes want to truncate that text with an ellipsis (the three ...). Today, I'll show you how to use the truncate utility.
Frontend Tip #32: Improve images by using the picture tag In the previous tip I talked about optimizing your images using the loading attribute. Continuing with the theme, I want to talk about using a newer HTML tag called picture to build better-optimized images from an SEO standpoint.
Frontend Tip #31: Improve image performance by using lazy loading Today, I want to talk about improving image performance via something called lazy-loading.
HTML Tip #30: Make your external links secure with the rel attribute Did you know that your a carry inherit security risks? It's kinda weird but it's true, a naked a tag that doesn't define a rel attribute is considered "unsecure" by the Google Lighthouse audit and will be flagged by crawlers as unsafe.
TailwindCSS Tip #29: Debug your CSS with a ??? utility In JavaScript we can easily debug our code using console.log. Unfortunately, we don't have a console.log function in CSS, but that doesn't mean we can't build something with a similar functionality.
TailwindCSS Tip #28: Use containers properly in TailwindCSS with padding Today I'm showing you how to properly use containers in TailwindCSS with paddings.
Frontend Tip #27: Build simple sliders with scroll snapping in TailwindCSS Today I'll show you how to build simple flick sliders using HTML and TailwindCSS.
Frontend Tip #26: Use clamps to build fluid typography systems Fluid typography is one of those concepts in web design that I feel like is still in its infancy. Not many people know about or use it but it's actually among the most powerful tools for building better responsive websites.
Frontend Tip #25: Fix z-index issues using relative positioning One of the most annoying things in HTML/CSS is bug-fixing a z-index issue. Lucky for you, I'll show you an effective trick to fix z-indexing 99% of the time and it's actually really simple.
TailwindCSS Tip #24: Use arbitrary variants in TailwindCSS to style headless CMS content Got a bunch of raw HTML coming in from a headless CMS. Want to style all of it with TailwindCSS only? Don't want to use an extra CSS file? Introducing TailwindCSS's arbitrary variants.
HTML Tip #23: Always define width and height attributes for images When working with images on the web, it's extremely important that you define the width and height attributes on that image if you know its size before-hand.
TailwindCSS Tip #22: Build price tables with flex-box Let's learn how to build stellar price tables in TailwindCSS using flex-box. Price tables are an awesome way to quickly learn and master flex-box for those just starting our in more advanced frontend development.
Javascript Tip #21: Add confetti effects to your website with confetti.js One of the best effects on the web today is a burst of confetti that gets triggered when a user clicks a button or completes a task.
TailwindCSS Tip #20: Use transforms to build wavy section dividers Today I'll show you how you can build a wavey section divider using TailwindCSS and CSS transformations.
Frontend Tip #19: Use containers and padding to build responsive websites aking websites responsive is a skill learned through repetition and experience. Over the years, I've learned that a key aspect of making a website responsive is to use max-width containers along with padding. This isn't to make websites mobile response, but rather, desktop responsive instead.
TailwindCSS Tip #18: Add TailwindCSS to any project with npx Let's say your working on a custom boilerplate or you have an older project that needs a migration and you want to use TailwindCSS. You can very easily add TailwindCSS to any project thanks to the npx command.
Frontend Tip #17: Use the scroll-behavior property to set smooth scrolling Back in the old days, I used to use a jQuery script for adding smooth-scrolling to anchors on my websites. Nowadays, we have a native CSS property that can do that for us (hooray for less JS 🎉).
HTML Tip #16: Use article tags correctly The article tag is supposed to be used whenever you're linking to a blog post or some sort of content (either internal or external) somewhere on your page.
TailwindCSS Tip #15: Build buttons using inline-flex Button-building is somewhat of an art and certain people have certain preferences on how to build a good, re-usable button component.
Frontend Tip #14: Change the text highlight color with ::selection Notice how, by default, the browser applies a sort of blue-ish tint as the background color? You can actually customize what this background color is to any color you want (yes, even your brand color!).
Javascript Tip #13: Use Date to add the current year to your copyright claim Typically at the bottom of websites you'll see something along the lines of "© Website Name 2023. All Rights Reserved". While you can hard-code this piece of content in your footer, I recommend you actually inject the year using a small amount of JavaScript.
Frontend Tip #12: Augment your browser console logs with CSS Did you know you can use CSS when using console.log on the browser? That's right, you can change the font color, font size, padding, margin, and more to give your logs a lot more flare.
TailwindCSS Tip #11: Push elements to the bottom of their containers with flex-grow Picture this: you're working on a price table section that uses cards and each card has a different length list of features and a call-to-action button to purchase the plan below the list, you find that after implementing all the content, the section looks something like this:
TailwindCSS Tip #10: Use divides in TailwindCSS to quickly add borders Got a list? Want to add borders in between in each item? You can do that really quickly using TailwindCSS's divide-* utility.
