Search

Nalezeno "weird": 220

Here’s How I Solved a Weird Bug Using Tried and True Debugging Strategies


Remember the last time you dealt with a UI-related bug that left you scratching your head for hours? Maybe the issue was happening at random, or occurring under specific circumstances (device, OS, browser, user action), or was just hidden in one of the many front-end technologies that are part...

What does 100% mean in CSS?


When using percentage values in CSS like this… .element { margin-top: 40%; } …what does that % value mean here? What is it a percentage of? There’ve been so many times when I’ll be using percentages and something weird happens. I typically shrug, change the value to something else...

Dark Ages of the Web


A very fun jaunt through the early days of front-end web development. They are open to pull requests, so submit one if you’re into this kind of fun chronicling of our weird history! That CSS3 Button generator really hits home. 😬 Direct Link to Article — Permalink… Read...

Position Vertical Scrollbars on Opposite Side with CSS


Fair warning: I can’t say I recommend this in general because it breaks a very strong expectation of where scrollbars are, which are useful for a lots of folks, not to mention, a core accessibility feature for many. But it is a fascinating CSS trick and the web is a big place with...

How to Build a Chrome Extension


I made a Chrome extension this weekend because I found I was doing the same task over and over and wanted to automate it. Plus, I’m a nerd during a pandemic, so I spend my weird pent-up energy building things. I’ve made five Chrome extensions with that energy, yet I still find it hard...

Equal Width Columns in CSS Grid are Kinda Weird


Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you’d have equal-width columns, but that’s a rare day. What you usually mean is three columns of equal fluid width. We’ve got fractional units for that, like grid-template-columns:...

Can JavaScript Detect the Browser’s Zoom Level?


No, not really. My first guess was that this was intentionally not exposed in browsers because browsers intentionally don’t want us fighting it — or making well-intentioned but bad-outcome decisions based on that info. But I don’t see any evidence of that. StackOverflow answers paint...

Wide Gamut Color in CSS with Display-P3


Here’s something I’d never heard of before: Display-P3 support in CSS Color Module Level 4 spec. This is a new color profile supported by certain displays and it introduces a much wider range of colors that we can choose from. Right now the syntax looks something like this in CSS: header...

Auto-Growing Inputs & Textareas


By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always...

CSS2JS


To add inline styles on an element in JSX, you have to do it in this object syntax, like: <div style={{ fontSize: 16, marginBottom: "1rem" }}Content </div That might look a little weird to us folks who are so used to the CSS syntax, where it is font-size (not fontSize), margin-bottom...

Currying in CSS


Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I came across some CSS they show off that looked like this: :root { --fluid-max-negative: (1 / var(--fluid-max-ratio)...

Searching the Jamstack


Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site: <form action="https://www.google.com/search" method="get"<input type="search" name="q"...

The Best Color Functions in CSS?


I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it. hsl(120, 100%, 40%) Hue isn't intuitive, but it's not that weird. You take a trip around the color wheel from...

Motion Paths – Past, Present and Future


Cassie Evans has a great intro to motion paths. That is, being able to animate an element along a path. Not just up/down/left/right, but whatever curvy/wiggly/weird path you want. It's an interesting subject because there are so many different technologies helping to do it over time. SMIL...

Techniques for Rendering Text with WebGL


As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering… they are all damn hard to do well in WebGL. Isn’t that weird? WebGL doesn't have a built-in function for rendering text. Although text seems like...

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