Search

Nalezeno "window": 90

Comparing Browsers for Responsive Design

1.9.2020
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it’s working across all the viewports in a single glance. They are all very similar. For example, they...

Using Flexbox and text ellipsis together

22.7.2020
You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want to truncate content in the middle? Leonardo Faria details good use cases for this...

How-to guide for creating edge-to-edge color bars that work with a grid

1.7.2020
Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then say you want...

CSS Tips for New Devs

27.5.2020
Amber Wilson has some CSS Tips for New Devs, like: It’s not a good idea to fix shortcomings in your HTML with CSS. Fix your HTML first! And… You can change CSS right in your browser’s DevTools (to open them, right-click the browser window and choose “inspect”...

A “new direction” in the struggle against rightward scrolling

21.5.2020
You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the body to fix that, but that can sometimes wreck stuff like position:...

How I Put the Scroll Percentage in the Browser Title Bar

12.5.2020
Some nice trickery from Knut Melvær. Ultimately the trick boils down to figuring out how far you’ve scrolled on the page and changing the title to show it, like: document.title = `${percent}% ${post.title}` Knut’s trick assumes React and installing an additional library. I’m sure...

Some Little Improvements to My VS Code Workflow (Workspaces, Icons, Tasks)

22.4.2020
I did a little thing the other day that I didn’t know was possible until then. I had a project folder open in VS Code like I always do, and I added another different root folder to the window. I always assumed when you had a project open, it was one top level root folder and that’s...

Override window.alert

11.2.2020
For years the only bit of feedback web developers could get was via alert("{str}") calls. These days we have the web console but, in rare cases, we don’t have a console and alert calls are our only window into a value at a given time. One problem: if an alert sneaks into production code, your...

How Do You Do max-font-size in CSS?

30.1.2020
CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to get tricky. Why would you need it at all? Well, font-size itself can be set in dynamic ways. For example, font-size: 10vw;. That's using "viewport units" to size the type, which will...

Autumn (macOS window manager)

17.1.2020
I love how nerdy this is. Autumn allows you to write JavaScript to control your windows. Get this window, move it over here. Nudge this window over. There are all sorts of APIs, like keyboard command helpers and doing things on events, like waking up from sleep. I love that it exists, but for...

Case Study: lynnandtonic.com 2019 refresh

6.12.2019
Lynn Fisher walks us step-by-step through the redesign process of her latest outstanding personal website. In this design, increasing the width of the browser window will cause the illustrations on the page crack to open and reveal more within them: This case study reminded me that Lynn also has...

The Jim Bell System

2.12.2019
As I write this article on July 3, 2002, I am already hearing out my window the occasional pops of micro-explosives enthusiasts getting a head start on their annual excuse to play with things that go bang and supposedly celebrate their freedom. Tomorrow, libertarians across the country will use...

An Introduction to the Picture-in-Picture Web API

26.11.2019
Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop a video out into a small floating window that stays above all others, so that they can keep watching while doing other things. It’s an idea...

Comparing the Different Types of Native JavaScript Popups

31.10.2019
JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously: alert("Hello, World!"); The UI for this varies from browser to browser, but generally you’ll see a little window pop up front and center in a very show-stopping way that contains the message...

Stop Animations During Window Resizing

14.10.2019
Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they have to do with size of the page or position or padding or something. It doesn't really matter what it is, the fact that the transition...

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