Creating an HTML email can feel like stepping back a few years as a web developer. All of our new layout functionality is unavailable to us &mdasj; email clients render the same layout in completely different ways. Just when we think we have it all fixed, another email client shows up with a new set of bugs.
Not too long ago, Rémi Parmentier, an HTML Email developer, ran a session with practical front-end techniques for building modern, cross-client emails.
I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It's weird having top padding based on width, but that's how it works — but only sorta. The 50% is based on the parent element's width, not itself. That's the part that confused me. … Read article
The post Oh Hey, Padding Percentage is Based on the Parent Element’s Width appeared first on CSS-Tricks.
Woah, I didn't see this coming! The HTTP Archive dropped this big "state of the web" report called Web Almanac with guest writers exploring data from 5.8 million websites.
Una Kravetz and Adam Argyle wrote the CSS chapter. The point is to squeeze a digestible amount of insight out of a mountain's worth of data. So there is some irony here with me squeezing in my thoughts about this chapter for an even quicker read, but hey, here we … Read article
The post Thoughts After Looking at the Web Almanac’s Chapter on CSS appeared first on CSS-Tricks.
I recently had an opportunity to try the new Vue Composition API in a real project to check where it might be useful and how we could use it in the future.
Until now, when we were creating a new component we were using Options API. That API forced us to separate the component’s code by options, meaning that we needed to have all reactive data in one place (data), all computed properties in one place (… Read article
The post An Early Look at the Vue 3 Composition API in the Wild appeared first on CSS-Tricks.
Interruptions, administrative tasks, and too many meetings are among the common complaints voiced by today’s professionals. When was the last time someone complained about a canceled meeting? In other words, everyone understands what hinders productivity, right?
Not so fast, says computer scientist Cal Newport. While we all realize that interruptions and fragmented time are troublesome, we fail to recognize:
The frequency of interruptions: We convince ourselves that we are focusing on one task at a time, such as a complex interaction design problem.
Chronicle posts are opportunities for me to round-up things that I haven't gotten a chance to post about yet, rounded up together. It's stuff like podcasts I've had the good fortune of being on, conferences I've been at or are going to be at, happenings at ShopTalk and CodePen, and more.
My talk at JAMstack_conf
We recorded a live episode of ShopTalk Show as well:
A guest on The Product Business Podcast
… Read article
The post CSS-Tricks Chronicle XXXVII appeared first on CSS-Tricks.
As a UI designer, I’m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing user interfaces. But sometimes, I step on a technical landmine.
A few years ago, as the design director of wsj.com, I was helping to re-design the Wall Street Journal’s podcast directory. One of the designers on the project was working on the podcast player, and I came upon Megaphone’s embedded player.… Read article
The post Making an Audio Waveform Visualizer with Vanilla JavaScript appeared first on CSS-Tricks.
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.
- A little flat-color icon? That's clearly SVG territory.
- An interactive console-like game? That's clearly canvas territory.
I know we didn't cover why yet, but I hope that will become clear as we dig into it.… Read article
The post When to Use SVG vs. When to Use Canvas appeared first on CSS-Tricks.
(This is a sponsored post.)
Not every site has an API to access data from it. Most don't, in fact. If you need to pull that data, one approach is to "scrape" it. That is, load the page in web browser (that you automate), find what you are looking for in the DOM, and take it.
You can do this yourself if you want to deal with the cost, maintenance, and technical debt. For example, this is one of … Read article
The post scrapestack: An API for Scraping Sites appeared first on CSS-Tricks.
The formal notion of the Agile software development method is about as old as I am (the Agile Manifesto was published in February 2001). I point this out not to make you feel old, but instead to demonstrate that Agile has had a long time to infiltrate software development. While the methodology advocates for “co-located, dedicated teams,” in its ubiquity Agile is frequently applied to teams partially or fully composed of part-time workers.
We love running our event in New York, and given that it sold out a long way in advance we think that you do too. If you didn’t manage to get a ticket, this post should give you a feel for what happened. We also have the video of the presentations to share with you.
Enjoy this roundup, and if you want to be there in person for one of our events next year, tickets are on sale right now!
You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.
If you:
- Leave that selector empty
- Link it from an external stylesheet (rather than
<style> block)
Selecting text will have no style at all. 😳😬😕
In other words, if you <link rel="stylesheet" ...> up some CSS that includes these empty selectors:
::-moz-selection {
}
::selection {
}
Then text appears to be un-selectable. You actually … Read article
The post A Super Weird CSS Bug That Affects Text Selection appeared first on CSS-Tricks.
You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property.
See the Pen
Animated Pac-Man by Maks Akymenko (@maximakymenko)
on CodePen.
Are you excited? Let’s get to it!
First, let’s bootstrap the project
We only need two files for our project: index.html and style.css. … Read article
The post Pac-Man… in CSS! appeared first on CSS-Tricks.
In this oldie but goodie, Hampus Sethfors digs into why disabled buttons are troubling for usability reasons and he details one example where this was pretty annoying for him. The same has happened to me recently where I clicked a button that looked like a secondary button and... nothing happened.
Here’s another reason why disabled buttons are bad though:
Disabled buttons usually have call to action words on them, like “Send”, “Order” or “Add friend”. Because of that, they often
… Read article
The post Disabled buttons suck appeared first on CSS-Tricks.
As a web designer, you do your best to remove friction from the decision-making process. You place only one CTA above the fold. You keep interactive elements to a minimum. You make the menu only as large as it needs to be.
But what happens when the content itself causes analysis paralysis?
There’s an overabundance of choice all around the web, from e-commerce stores with thousands of products to content generation machines pushing out new posts every day.
It’s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space — as it should — but also one at risk of being unrooted. Every art has its ancient masters. In the case of websites, it’s newspapers.
When you dig into the basic principles of news design, overlaps with the web are frequent and oftentimes indistinguishable.
Web hosting has become cheaper and easier to attain than ever before. Between marketing gurus and flash sales from companies like Bluehost, you can find hosting for $10 a month or less. But that doesn’t mean you should bite on a good deal. Like most things in life, if a product or service is cheap- […]
The post 5 Signs You Need a New Hosting Company appeared first on Web Developer Juice.
The web is full of interfaces that leave people out. Of course, it’s not designers’ malicious intent or developers’ lack of empathy that bring us there. It’s just really difficult to foresee a wide range of situations in which our users might find themselves in. We need to build robust and reliable solutions in a world that’s inherently chaotic and unpredictable. Where do we even start?
Because we often build and deploy under tough deadlines, we tend to break accessibility without even noticing it.
Accessibility can sometimes become an unfortunate afterthought as we race to meet deadlines and search for tips and tricks to meet client demands. We can cause problems for keyboard or screenreader users, and leave our products fragile and potentially vulnerable to legal action from people who find themselves locked out due to their accessibility needs. How can we get better?
One way to find out would be by joining our live stream with Heydon Pickering who will be sharing insights about the relationship between accessibility and design systems, and exploring how to build accessible components, and why he decided to write a book on accessible interface design patterns.
The combination of WordPress’ versatility for managing data (since its database model supports the creation of different content models, easily extensible through meta attributes) and Gutenberg’s rich user interactions provide a powerful mechanism to create, edit and manage content.
In this article, I want to shine some light on these upgraded capabilities, exploring the new tools at our disposition and presenting several new ones to be released sometime in the future.
Any platform that allows for collaborative play between people will be required to have one very particular characteristic: the ability for players to (somehow) talk to each other. That is exactly why our text-adventure engine built in Node.js would not be complete without a way for the party members to be able to communicate with each other. And because this is indeed a text adventure, that form of communication will be presented in the form of a chat window.
In this episode of the Smashing Podcast we take a look a freelancing. What does it mean to be a freelance designer or developer? How do you structure your day? What are the ups and downs? Drew McLellan talks to experienced freelance brand designer Liz Elcoate to find out more.
Show Notes Making Peace With The Feast Or Famine Of Freelancing on Smashing Magazine. Liz is the host of The Elastic Brand podcast, and cohost of The Freelance Web with Sean Johnson.
The new Smashing Podcast is the perfect way to take a little bit of Smashing along with you on your morning commute, when working out at the gym, or just washing the dishes. We’ll be bringing you a new interview with a Smashing expert every two weeks, directly to your podcast player of choice. You can subscribe in your favorite app to get new episodes as soon as they’re ready, or just listen using the player below.
(This is a sponsored post.) If you’ve ever attempted to build a CSV importer before, you know how frustrating it is to dedicate valuable engineering time to this feature, only to watch your customers struggle with it.
In some cases, developers try to improve this experience by providing users with FAQs and tutorials that show them how to correctly use their importer. However, this merely shifts the burden from the product onto the user.
With the single exception of my 94-year-old mother, I don’t know a single person over the age of 65 who doesn’t have a smartphone, computer, or tablet, and usually all three.
I’m well past sixty, and have worked my way through punch cards, a C-64, many versions of Windows, Apple and Linux. I know at least a few people over seventy who have a programming background or who have spent a lot of time doing graphic design and computer music composition on various machines.
Building “magazine-style layouts” by using CSS Grid has become something of a pastime of CSS fans, keen to play with the capabilities of new Grid Layout. It’s something I’ve done myself as well as with people who’ve attended my workshops. However, I always have to pick the layouts carefully because, in truth, there are a number of very common print layout patterns that we can’t currently do on the web.