はてなブックマーク

This Part 1 (of a 2-part series) is a practical, hands-on, applicable approach to database indexes. We’ll cover what B Trees are with a focus on deeply understanding, and internalizing how they store data on disk, and how your database uses them to speed up queries. This will set us up nicely for part 2, where we’ll explore some interesting, counterintuitive ways to press indexes into service to a

There’s a whole layer of CSS that lives just below the surface of most interfaces. It’s not about layout, spacing, or typography. It’s about shape. About cutting through the default boxes and letting your UI move in new directions. This series is all about one such family of features, the kind that doesn’t just style your layout but gives you entirely new ways to shape, animate, and express your i

Understanding CSS corner-shape and the Power of the Superellipse The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border-radius, this seemingly small addition unlocks a world of new possibilities tha

I recently made an experiment about Proximity Reactions. The idea was to create an interactive effect according to the mouse position relative to elements. Then I made a less JavaScript, more CSS version where the only thing JavaScript does is to pass the mouse position into a couple of CSS custom properties. That’s it. All the heavy lifting happened inside the CSS itself, safely away from the Jav

There is a way to apply a stroke to web text across all browsers: .stroke-text { -webkit-text-stroke: 5px red; }Code language: CSS (css) Despite the vendor prefix there, it works across all browsers. But I’ve never liked it… until recently. I’m not sure if I’ve ever spelled out exactly why, so first let me do that. Here’s a nice R from Roslindale. Which is made up of vector points like all fonts:

TanStack Router is an incredibly exciting project. It’s essentially a fully-featured client-side JavaScript application framework. It provides a mature routing and navigation system with nested layouts and efficient data loading capabilities at every point in the route tree. Best of all, it does all of this in a type-safe manner. What’s especially exciting is that, as of this writing, there’s a Ta

Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief Overview When you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer tools “Elemen

TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube> Web Component is more like 100k, does share resources, and sacrifices no functionality. You can put a YouTube video on any website. They help you do it. Under the Share menu right on youtube.com there is an option to <> Embed and you’ll see bit of HTML with an <iframe> in it. <ifra

Can it be done? This plucky front-end developer intends to find out. We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while m

This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and

My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understanding of them and could use a plain language explanation of what it is, why they

“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We must respond to user inputs, communicate with servers, log, perform, etc.

Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s

Course DescriptionLearn a suite of design patterns to improve the code architecture of your web apps! You’ll get an overview of more traditional design patterns with JavaScript, such as the Singleton and Proxy patterns. Then see React patterns such as the Hooks and Higher Order Component patterns. Lastly, we’ll cover Performance patterns and Rendering Patterns. This course and others like it are a

In 2018 expect... Nothing will change or slow the usage or popularity of React for many years to come. GraphQL will replace a lot of REST API's this year. The web will continue to become more native-like with offline capabilities and seamless mobile experiences. HTML 5.3 is coming. Keep an eye on turbo, a blazing fast NPM client. Expect to learn and use CSS transforms 3d, CSS transitions, CSS flex

Course DescriptionDive into the core pillars of the JavaScript language with Kyle Simpson, author of the popular, You Don't Know JS, book series. You'll learn JavaScript's types, how to convert between them, and compare them with == and ===. You'll also learn lexical scope and closure. As well as the objects oriented system (this, prototypes and classes). This course and others like it are availab

Course DescriptionLearn Vue, one of the most popular and approachable JavaScript frameworks! Get hands-on experience building with flexible components using directives, props, lifecycle hooks, and slots. You'll use Vue Router for routing and Pinia for state management. By the end of the course, you will have the skills and knowledge to create a Vue project from start to finish, deploy it to produc

The Complete Intro to React CourseLearn to build real-world apps with React 18 and React 19. Use tools like Vite, ESLint, and Prettier to scaffold a project and the latest React and TanStack features to build a complete e-commerce application.

Master the Full Stack: Frontend to BackendYour Path to Senior Developer and Beyond Learn the Tech Top Companies Rely OnFrom JavaScript and React to Go, Docker, and backend systems taught by engineers who work with these technologies at scale Learn From the Best TeachersAt Frontend Masters, we pride ourselves on offering courses designed and taught by leading experts actively employing their skills