From frontendmasters.com
1 1
This API, which you can use entirely in HTML, allows you to open an element on top of *everything* despite where it lives in the DOM and without any particular styling.
on May 1
From frontendmasters.com
Handling Paste Events in JavaScript – Frontend Masters Boost
0 0
This concludes our three-part series on working with clipboard data. With pasting, we have some control over the type of data we want to use.
on Thu, 10AM
From frontendmasters.com
Reminder that @scope and HTML style blocks are a potent combo – Frontend Masters Boost
0 1
There is an entirely web-platform way of injecting scoped CSS styles into the DOM. It's requires zero tooling. Will we see it being used more, once Firebox support is there?
on Oct 10
From frontendmasters.com
Web Components are Bad, Good, and OK – Frontend Masters Boost
0 0
There is a meta conversation of “Web Components are very definitely going to be around 10 years from now while any JavaScript framework today will not” is worth considering, but pits the two directly against each other when we really don’t need to.
on Oct 4
From frontendmasters.com
Chris Coyier – Frontend Masters Boost
0 0
Frontend Masters Boost is a blog about web development. It's written by the team at Frontend Masters, course instructors from the industry, and curated guest authors. The goal is to help you on your path to becoming a senior developer, or to be an even better one.
on Oct 2
From frontendmasters.com
Web Components | Learn to Create Web Components
0 0
Create custom, reusable HTML elements with the Web Components API! Learn to create custom Web Components using JavaScript and the Lit library.
on Oct 1
From frontendmasters.com
What’s the Difference Between HTML’s Dialog Element and Popovers? – Frontend Masters Boost
0 2
They are pretty similar in both look and functionality, but are have some important differences, slightly different APIs, and functionality. The use cases are also a bit different, so let's have a look!
on Oct 1
From frontendmasters.com
You Might Not Need that Framework – Frontend Masters Boost
0 0
There are big tradeoffs, naturally, but vanilla JavaScript is very powerful, usable everywhere, lightweight, and high-performance. Learn it and use it when it's the best choice.
on Sep 28
From frontendmasters.com
Arrival of Animate to Auto – Frontend Masters Boost
0 0
I’m on Chrome 129 and this animate to auto stuff is working for me with no special flags, so color me pleased. Would love to see this go into Interop 2025, as submissions are open.I’m using inline-size and max-content there, but it could be height and auto or block-size and min-content or...
on Sep 25
From frontendmasters.com
Keeping Pixely Images Pixely (and Performant!) – Frontend Masters Boost
0 0
With CSS' `image-rendering: pixelated;` we can keep HTML images that have pixelated look anyway quite sharp looking, and possibly more performant to boot.
on Sep 24
From frontendmasters.com
Gradient Text with a Drop Shadow – Frontend Masters Boost
0 0
Gradient text is pretty easy to do these days with `background-clip: text;` — but it kills your ability to use `text-shadow`. SVG to the rescue.
on Sep 21
From frontendmasters.com
Introducing TanStack Router – Frontend Masters Boost
0 0
TanStack Router is a comprehensive JavaScript framework for client-side applications, emphasizing type-safe routing and navigation. It includes nested layouts and efficient data loading.
on Sep 20
From frontendmasters.com
Selecting Previous Siblings – Frontend Masters Boost
0 0
Selecting the *next* element in CSS can be done easily with the + combinator. Selecting the *previous* element used to be impossible, but now can be like :has(+ .el), and can be extended in either direction.
on Sep 17
From frontendmasters.com
Java Optionals – Frontend Masters Boost
0 0
The post discusses the drawbacks of null references in programming and introduces the Optional type as a solution, particularly in Java. The Optional type helps avoid null reference exceptions by allowing safe interaction with absent values using methods like ifPresent, ifPresentOrElse, map, and flatMap.
on Sep 15
From frontendmasters.com
What Does Hydration Mean? – Frontend Masters Boost
0 0
Hydration refers to JavaScript frameworks making server-side rendered HTML interactive.
on Sep 14
From frontendmasters.com
Split Effects with no Content Duplication – Frontend Masters Boost
0 0
The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we'll expand on some existing ideas, improving them by not requiring any content duplication.
on Sep 13
From frontendmasters.com
Backgrounds for the Box Model (and why it can be useful) – Frontend Masters Boost
0 0
You can limit how far the background-image of an element applies by using background-clip. That means you can apply *different* backgrounds to, say, the padding and border.
on Sep 8
From frontendmasters.com
A Complete Guide to Beginning with JavaScript – Frontend Masters Boost
0 0
This guide serves as an introduction to learning JavaScript, covering necessary prerequisite knowledge and addressing common obstacles. It highlights JavaScript’s origins, essential concepts, and practical applications across different environments.
on Sep 7
From frontendmasters.com
Exploring the Possibilities of Native JavaScript Decorators – Frontend Masters Boost
0 1
Native support for decorators is inevitable! It simplifies augmenting class methods, which can help with things like logging, memoization, debouncing, and dependency injection.
on Sep 1
From frontendmasters.com
The Dialog Element with Entry *and* Exit Animations – Frontend Masters Boost
0 2
Now that we're starting to see better support for @starting-style and the allow-discrete keyword, we've got a pretty straightforward way for defining *different* entry and exit states.
on Aug 30
From frontendmasters.com
AI in Chrome – Frontend Masters Boost
0 1
Chrome is experimentally shipping with Gemini Nano, their smallest Large Language Model (LLM) baked right in, then offer APIs to use it. In Chrome, these APIs are built to run inference against Gemini Nano with fine-tuning or an expert model. Designed to run locally on most modern devices,...
on Aug 30
From frontendmasters.com
What Skills Should You Focus on as Junior Web Developer in 2024? – Frontend Masters Boost
0 0
These are our recommendations for those of you early in your web developer journey. This is about tech and the real world stuff around it that you'll need.
on Aug 29
From frontendmasters.com
Writing to the Clipboard in JavaScript – Frontend Masters Boost
0 1
The most basic use case, writing a bit of text to the user's clipboard, is mercifully easy. But there is plenty more to know. Did you know writing image data to the clipboard ONLY works with PNG?
on Aug 28
From frontendmasters.com
The CSS contain property – Frontend Masters Boost
0 0
CSS containment is used for optimization and opening styling possibilities by isolating elements from the rest of the page. Different contain values (size, paint, layout, etc.) provide various benefits and tradeoffs.
on Aug 23
From frontendmasters.com
Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations – Frontend Masters Boost
0 1
We'll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.
on Aug 23
From frontendmasters.com
Letting iOS “Text Size” Setting Affect Font Size on the Web – Frontend Masters Boost
0 0
On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear:As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned you […]
on Aug 23
From frontendmasters.com
0 1
I mentioned lazygit the other day, a project I find to have a tremendously well done interface for being entirely at the command line. As frustrated as I get with tmux sometimes (the scrolling and the copying text, ughgkh), I still find it to be useful and impressive that “UI” can exist at all in […]
on Aug 16
From frontendmasters.com
Fine-Grained Reactivity in Svelte 5 – Frontend Masters Boost
0 1
Svelte is already quite lightweight and fast, but Svelte 5 still overs big improvements in fine-grained reactivity, meaning re-rendering as absolutely little as possible.
on Aug 14
From frontendmasters.com
Relative Color Syntax — Basic Use Cases – Frontend Masters Boost
0 0
Support for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.
on Aug 13
From frontendmasters.com
It’s Time To Talk About “CSS5” – Frontend Masters Boost
0 1
Brecht De Ruyte has a good rundown of what’s up with future named versions of CSS. You might remember “CSS3” and how hot of a buzzword that is. JavaScript still has successful “ES202X” naming that groups features into useful buckets. But CSS hasn’t benefited from named groups since CSS3. I’ve...
on Aug 12
From frontendmasters.com
Figma Typography Variables – Frontend Masters Boost
0 1
Figma has support for variables, and they work with the various typography features you may want to set. For instance, you could create a variable called
on Aug 11
From frontendmasters.com
Snippets in Svelte 5 – Frontend Masters Boost
0 0
Out with slots, in with snippets.
on Aug 8
From frontendmasters.com
Reading from the Clipboard in JavaScript – Frontend Masters Boost
0 0
While it's a bit more common to *write* to the clipboard, JavaScript can also read from it. Plain text is pretty simple, while multimedia content is a bit more complex.
on Aug 6
From frontendmasters.com
What if you used Container Units for… everything? – Frontend Masters Boost
0 2
I said to myself I said what if I used container units for every single unit in a design? I was wondering, partially because I thought the answer might be well, everything will probably scale really nicely then. Container units, in case you haven’t heard of them, are unit (like px or rem, but more […]
on Aug 3
From frontendmasters.com
0 0
JavaScript Frameworks generally do a lot of DOM handling for you, but doing it yourself can be the most performant option, and there are quite a few best practices.
on Aug 1
From frontendmasters.com
0 1
I’m a fan of just chucking SVG icons right into the HTML where you need them:This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). But, putting your SVG icons in CSS can be advantageous too....
on Jul 29
From frontendmasters.com
Clip Pathing Color Changes – Frontend Masters Boost
0 0
Let's look at a cool animated nav effect (from a recent post by Emil Kowalski) that uses CSS `clip-path` to move the highlighted nav item around. It's an interesting look at this CSS feature and adds a lot of polish to a simple idea.
on Jul 27
From frontendmasters.com
How to Get the Width/Height of Any Element in Only CSS – Frontend Masters Boost
0 0
Unlike JavaScript, there is no simple built-in method in CSS to access an element's width and height. But using some (call it hacky) modern CSS techniques, we can get our hands on the number and even use it.
on Jul 27
From frontendmasters.com
Introducing Svelte 5 – Frontend Masters Boost
0 0
Svelte 5 introduces significant improvements in reactivity, state management, and prop handling, maintaining its user-friendly Developer Experience (DX).
on Jul 25
From frontendmasters.com
Build a Responsive Portfolio Site | HTML, CSS, Flexbox & Grid
0 0
Create a personal portfolio website from scratch using HTML and CSS. Master responsive design techniques, CSS layout tools, and best practices for showcasing your work across devices.
on Jul 22
From frontendmasters.com
::details-content Looks Helpful – Frontend Masters Boost
0 0
The HTML for a <details> element is generally something like:See how I put two <p> elements in there? That’s totally fine. Everything that isn’t the <summary> is visually hidden until the <details> is open, either via the open attribute or the summary is clicked/tapped. So if you’re trying to...
on Jul 20
From frontendmasters.com
The Pitfalls of In-App Browsers – Frontend Masters Boost
0 4
You should know that in-app browser can and do literally inject JavaScript into the websites you visit with them with tracking scripts from the app you're inside of. And that's just one thing that sucks about them.
on Jul 18
From frontendmasters.com
Notes On “Microfeatures I Love in Blogs and Personal Websites” – Frontend Masters Boost
0 0
Danila Fedorin's article about unique UX features in blogs is fun. Here's some extra thoughts, resources, and opinions.
on Jul 16
From frontendmasters.com
Style Queries are Almost Like Mixins (But Mixins Would Be Better) – Frontend Masters Boost
0 0
Having a named block of styles to apply in CSS can be useful, and newfangled Style Queries are pretty close to that. We look at one use case here, how Sass did mixins better, and hope for a native solution.
on Jul 12
From frontendmasters.com
Single-Directionally Allowed Overflow – Frontend Masters Boost
0 0
CSS allows setting different overflow behaviors for x and y directions. It doesn't actually work with the `hidden` value, but it does with `clip`!
on Jul 12
From frontendmasters.com
One of the Boss Battles of CSS is Almost Won! Transitioning to Auto – Frontend Masters Boost
0 0
The experimental CSS function `calc-size(auto)` allows transitions from zero to a specified value. Animating elements from zero to their intrinsic size has long been desired by CSS developers.
on Jul 11
From frontendmasters.com
Figma for Developers: Using Constraints, Auto Layout, Components & CSS Variables Generation
0 0
Learn to use Figma's developer-friendly features like constraints, auto layout, component properties and CSS generation to efficiently build and translate designs to code. Bridge the gap between design and development.
on Jul 10
From frontendmasters.com
How Keyboard Navigation Works in a CSS Game – Frontend Masters Boost
0 1
The navigation in this game works with the arrow keys, which is made possible with scroll driven animations, faked collision detection, and maintaining state with CSS custom properties.
on Jul 8
From frontendmasters.com
Script Integrity – Frontend Masters Boost
0 0
Polyfill.io recently served malicious code, redirecting users to inappropriate sites. Subresource Integrity (SRI) can help prevent such issues by verifying script integrity.
on Jul 6