The peculiar magic of flexbox and auto margins css-tricks.com The peculiar magic of flexbox and auto margins In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty,...

Stuff you can do with CSS pointer events codepen.io Stuff you can do with CSS pointer events Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within). Here's how I reasoned it out to myself: You know how if...

Sometimes `sizes` is quite important. css-tricks.com Sometimes `sizes` is quite important. Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of "responsive websites," srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where...

WDRL — Edition 237: HTTP Not Secure in Chrome, PWA Retrospective, Page Lifecycle API, And Plastic Roads wdrl.info WDRL — Edition 237: HTTP Not Secure in Chrome, PWA Retrospective, Page Lifecycle API, And Plastic Roads Hey, My Twitter timeline sometimes results in an interesting mix between various topics from the tech industry, politics and human or environmental matters. Today I had such a moment when I scrolled and two tweets made a great connection without the authors knowing about it. First, I read that...

Create the Google Button Effect with CSS davidwalsh.name Create the Google Button Effect with CSS I always found Google’s branding simple but grew to realize that was the beauty in their design; there’s something about “just enough” that is the perfect balance between bland and over the top.  GMail’s design grew old over the years and Google just got around...

Teaching Your Clients How to Use The Website You Built Them mediatemple.net Teaching Your Clients How to Use The Website You Built Them I share my own thoughts on how you might go about educating someone you just built a site for. But it turns out I had a lot of fun putting together a ton of other people's thoughts as well. I tweeted about it and got a flood of responses, so this article is an amalgamation of all that. Direct...

Recent Videos! css-tricks.com Recent Videos! I've recorded a decent number of videos lately, most of which are pairing with someone and digging into a topic as I glean as much information as I can! Several of these are sponsored, in that they are a part of an advertising package. Hopefully, you know me well enough that I don't work with...

Collective #436 feedproxy.google.com Collective #436 Page Lifecycle API * Keyframes * Rockstar * Terminalizer * Malvid * Callback Exercises * DOM-wait * Pure CSS Stack * Weird things variable fonts can do Collective #436 was written by Pedro Botelho and published on Codrops

Solved with CSS! Logical Styling Based on the Number of Given Elements css-tricks.com Solved with CSS! Logical Styling Based on the Number of Given Elements This post is the third in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds Dropdown Menus Logical Styling Based On the Number of Given Elements (this post) Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical...

Visual. Intuitive. Unlike Anything Else. synd.co Visual. Intuitive. Unlike Anything Else. (This is a sponsored post.) monday.com is a team management tool that’s found favor with more than 34,000 teams, including teams of two to teams of 2,000+, teams working for startups, and teams working on projects for Fortune 500 companies like AOL, Adidas, Samsung, and the Discovery Channel...

Motion Reveal Slideshow feedproxy.google.com Motion Reveal Slideshow A simple image slideshow with a motion reveal effect when navigating between slides and a fullscreen details view. Motion Reveal Slideshow was written by Mary Lou and published on Codrops

Build Firefox Faster with Artifact Builds davidwalsh.name Build Firefox Faster with Artifact Builds Working on Firefox DevTools has always been a dream of mine, mostly because it feels like the ultimate way to give back to the development community and those that helped me become a success.  And when I explain who Mozilla is and people ask “Oh, so you work on Firefox?!”, I can finally...

Build a state management system with vanilla JavaScript css-tricks.com Build a state management system with vanilla JavaScript Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help...

Did you know that style and script tags can be set to display: block? css-tricks.com Did you know that style and script tags can be set to display: block? The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that...

Realtime Cryptocurrency Rates API with coinlayer davidwalsh.name Realtime Cryptocurrency Rates API with coinlayer Last year when cryptocurrencies were gaining massively in value each month, I badly wanted to create a personal web project which would let me quickly buy and sell crypto outside of brokers like Coinbase; the problem I ran into was not having a reliable API for doing so.  I recently discovered...

Finite State Machines with React css-tricks.com Finite State Machines with React As JavaScript applications on the web have grown more complex, so too has the complexity of dealing with state in those applications — state being the aggregate of all the data that an application needs to perform its function. Over the last several years, there has been a ton of great...

Developer Roadmaps css-tricks.com Developer Roadmaps The path to becoming a front-end developer, as looked back upon by anyone who self-identifies that way, is likely a very windy one full of thorn bushes and band websites. Still, documenting a path, even if it's straighter and far cleaner than reality, is an interesting exercise and might just...

View Source css-tricks.com View Source I remember seeing this Tom Dale tweet a while back. It's literally about the browser's ability to look at the HTML of the document you're looking at as it first arrived. Now the tweet is stirring up a new round of conversation. Jonathan Snook has kind of a baby bear take: We have the ability...

Collective #435 feedproxy.google.com Collective #435 ndb * The Future of WebAssembly * Fractional * Farewell, Google Maps * 3D Toggle * Scaling Microservices * Front-End Performance Checklist Collective #435 was written by Pedro Botelho and published on Codrops

Script & Style Show: Episode 16: JavaScript & LEDs with Kristina Durivage davidwalsh.name Script & Style Show: Episode 16: JavaScript & LEDs with Kristina Durivage In this episode:  Todd’s back from an amazing conference and David sees this week’s guest as being the ticket to making his kids thing he’s a super hero.  The amazing Kristina Durivage stops by to talk JavaScript, electrical engineering and unusual uses of LEDs for programming...

Adding Particle Effects to DOM Elements with Canvas css-tricks.com Adding Particle Effects to DOM Elements with Canvas Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects. Before we begin, feel free to grab...

Designing A Usable Contact Page In WordPress: Tips & Trends feedproxy.google.com Designing A Usable Contact Page In WordPress: Tips & Trends Every great website needs a contact page. You can set this up on a static HTML site or a CMS like WordPress which offers a lot of flexibility &... The post Designing A Usable Contact Page In WordPress: Tips & Trends appeared first on Onextrapixel

Your Body Text is Too Small blog.marvelapp.com Your Body Text is Too Small Several years ago, there was a big push by designers to increase the font-size of websites and I feel like we’re living in another era of accessibility improvements where a fresh batch of designers are pushing for even larger text sizing today. Take this post by Christian Miller, for example, where...

Font Playground play.typedetail.com Font Playground This is a wondrous little project by Wenting Zhang that showcases a series of variable fonts and lets you manipulate their settings to see the results. It’s interesting that there’s so many tools like this that have been released over the past couple of months, such as v-fonts, Axis-Praxis...

Weird things variable fonts can do css-tricks.com Weird things variable fonts can do I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that's a common use case. Just check out many of the interactive demos over...

Building “Renderless” Vue Components css-tricks.com Building “Renderless” Vue Components There's this popular analogy of Vue that goes like this: Vue is what you get when React and Angular come together and make a baby. I've always shared this feeling. With Vue’s small learning curve, it's no wonder so many people love it. Since Vue tries to give the developer power over components...

WDRL — Edition 236: Dream Big But Stay Small; Simple,  Correct, Fast; And 4 Days Per Week Work. wdrl.info WDRL — Edition 236: Dream Big But Stay Small; Simple, Correct, Fast; And 4 Days Per Week Work. Hey, Building technology and software has become a very responsible job. We not only need to think about building an inclusive solution but also need to incorporate ethics, reliability and security. As developers we need to stand up for these factors and sometimes even need to stop other from...

CSS: A New Kind of JavaScript medium.com CSS: A New Kind of JavaScript In this wacky and satirical post, Heydon Pickering describes a wild new technology called Cascading Style Sheets that solves a lot of the problems you might bump into when styling things with JavaScript: A good sign that a technology is not fit for purpose is how much we have to rely on workarounds...

Tento web používá k poskytování služeb, zobrazení reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace