Well boy howdy. The 13th birthday of CSS-Tricks has rolled around. A proper teenager now, howabouthat? I always take the opportunity to do a bit of a state of the union address at this time, so let’s get to it!
Design
Technically, we’re still on v17 of the site design. This was the first design that I hired first-class help to do, and I’m still loving it, so I haven’t had much of an itch to do massive changes … Read article “The Thirteenth Fourth”
The post The Thirteenth Fourth appeared first on CSS-Tricks.
Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card:
For now, let’s say this image is not semantic content, but only decoration. That’s a good use for background-image. And because in this context the image contains an object, we can’t allow any parts to be cropped out when it’s responsive, so we’d pick background-size: contain.
Here’s where … Read article “Fluid Images in a Variable Proportion Layout”
The post Fluid Images in a Variable Proportion Layout appeared first on CSS-Tricks.
One of the things I like about Jamstack is that it’s just a philosophy. It’s not particularly prescriptive about how you go about it. To me, the only real requirement is that it’s based on static (CDN-backed) hosting. You can use whatever tooling you like. Those tools, though, tend to be somewhat new, and new sometimes comes with issues. Some pragmatism from Sean C Davis here:
I have two problems with solving problems using the newest, best tool every
… Read article “Settling down in a Jamstack world”
The post Settling down in a Jamstack world appeared first on CSS-Tricks.
Today, we’ll briefly discuss why it’s important to write automated tests for any software project, and shed light on some of the common types of automated testing. We’ll build a to-do list app by following the Test-Driven Development (TDD) approach. I’ll show you how to write both unit and functional tests, and in the process, explain what code mocks are by mocking a few libraries. I’ll be using a combination of RTL and Jest — both of which come pre-installed in any new project created with Create-React-App (CRA).
Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger.
Puppeteer is an Node library for spinning up a copy of Chrome “headlessly” (i.e. no UI) and controlling it. People use it for stuff like taking a screenshot of a website or running integration tests. You can even run it in a Lambda.
Another use case is running synthetic (i.e. not based … Read article “Some Performance Links”
The post Some Performance Links appeared first on CSS-Tricks.
The new design for Sidebar is lovely. I like how it goes even deeper with the sticky elements than the last design.
But even more notably, Sacha Greif has been posting five links per day to Sidebar since 2012. That’s a remarkable achievement.
Direct Link to Article — Permalink… Read article “Refreshing Sidebar for 2020”
The post Refreshing Sidebar for 2020 appeared first on CSS-Tricks.
We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn’t have enough room for the next word in a line, it breaks it and moves down to the next line and repeats that process.
Well, that’s how it works when words are separated by spaces or other whitespace. As far as CSS goes, there are … Read article “When a Line Doesn’t Break”
The post When a Line Doesn’t Break appeared first on CSS-Tricks.
JavaScript currently has three types of applications that you can build with: Single Page Applications (SPAs), pre-rendering/static generated sites and server-side rendered applications. SPAs come with many challenges, one of which is Search Engine Optimization (SEO). Possible solutions are to make use of Static Site Generators or Server-Side Rendering (SSR).
In this article, I’m going to explain them alongside listing their pros and cons so you have a balanced view.
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 that background color to stretch to the right edge of the browser window even though the grid itself is width-constrained. Tricker.
CodePen Embed Fallback
Direct Link to … Read article “How-to guide for creating edge-to-edge color bars that work with a grid”
The post How-to guide for creating edge-to-edge color bars that work with a grid appeared first on CSS-Tricks.
“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface.
The post A Complete Guide to Dark Mode on the Web appeared first on CSS-Tricks.
We are living in a world exploding with information, but how do we find what is relevant to us at the time that we need it? I believe that good information architecture is key to helping us navigate through the mountains of data and information we have created for ourselves. In this article, we will first describe what information architecture is, why it’s important, and approaches to effective implementation. Then we explore ideas around the broader view of the information age, how we use information, and how it impacts our world and our lives.
Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.
Again, this is an experimental feature. Not only does that mean it’s still in progress, but it means you’ll have to enable it to start using it in DevTools.
- Open up DevTools (
Command+Option+
… Read article “New in Chrome: CSS Overview”
The post New in Chrome: CSS Overview appeared first on CSS-Tricks.
The title of this Sara Soueidan article speaks to me. I’m a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I’m less interested in how that is done and more interested in just seeing that conceptual approach used in some fashion.
Sara details an approach where components don’t have too much styling by default, but have CSS custom properties applied to them that are ready to … Read article “Global and Component Style Settings with CSS Variables”
The post Global and Component Style Settings with CSS Variables appeared first on CSS-Tricks.
The smell of rain after a hot day, watching the moon rise on a summer night’s sky, going for a swim — often it’s the simple experiences that inspire us and that we treasure most. No matter what July will have in store for you this year, our new batch of wallpapers is bound to cater for some colorful inspiration along the way.
More than nine years ago, we started out on this wallpapers adventure to bring you beautiful and inspiring wallpapers every month.
Today, we’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? I spoke to its creator, Andy Bell, to find out.
Show Notes CUBE CSS Piccalilli Learn Eleventy From Scratch - save 40%! Andy Bell and Piccalilli on Twitter Note: Listeners of the Smashing Podcast can save a whopping 40% on Andy’s Learn Eleventy From Scratch course using the code SMASHINGPOD.
Notifications have become a stable part of the web nowadays. It’s not uncommon to come across sites asking for permission to send notifications to your browser. Most modern web browsers implement the push API and are able to handle push notifications. A quick check on caniuse shows that the API enjoys wide support among modern chrome-based browsers and Firefox browser.
There are various services for implementing notifications on the web.
Website design for a client gets only successful if you follow their instructions and cooperate with them. Web designers start with asking the ideas in the client’s mind about their project, and their preferences. Basically, now web designers prefer to work on custom web designs so that they can make a perfect web design according to clients’ […]
The post 10 Best Prototyping Tools for UI/UX Designers appeared first on Web Developer Juice.
With one or two occasional exceptions, I’ve spent the past twenty-two years designing for countless clients. A few of these projects lasted a year, some several months, but the majority for no more than a few weeks.
Being completely absorbed for a few weeks or months in designing a product interface or a website can be a thrill. It often starts with the gratification which comes from winning the work.
Django websites involve a lot of files. It’s not just source code for the configuration, models, views, and templates, but also static assets: CSS and JavaScript, images, icons. As if that wasn’t enough already, sometimes users come along and want to upload their own files to your website. It’s enough to make any developer incredulous. Files everywhere!
Here’s where I wish I could say (without caveats): “Don’t worry, Django has your back!
In this article, I’m going to introduce you to a React testing tool named Jest, along with the popular library Enzyme, which is designed to test React components. I’ll introduce you to Jest testing techniques, including: running tests, testing React components, snapshot testing, and mocking. If you are new to testing and wondering how to get started, you will find this tutorial helpful because we will start with an introduction to testing.
As much as I’ve always loved the experience of going out to eat and ordering in takeout, it’s very rare that I enjoy visiting a restaurant’s website. But I get it. The restaurant industry tends to run on very slim profit margins, so it’s hard to justify spending money on a professionally designed website when all they want it to do is list their hours of operation and menu.
SWR is a lightweight library created by Vercel (formerly ZEIT) that allows fetching, caching, or refetching data in realtime using React Hooks. It’s built with React Suspense which lets your components “wait” for something before they can render, including data. SWR ships also with great features such as dependent fetching, focus on revalidation, scroll position recovery, and so on. It’s also a very powerful tool since it’s backend agnostic and has good support for TypeScript.
The entire Smashing team has been doing its very best to bring you live sessions with real experts — people with practical experience who love to share what they have learned throughout their careers. We organized Smashing Meets on three days — events that were open to everyone in the web community. With sessions on performance, CSS, GraphQL, and creative courage, we made sure to leave plenty of time for Q&A, networking, competitions and prizes.
There’s no escaping the ancient masters. Their shadows loom large over philosophy, literature, architecture, warfare, and… web design? Believe it or not, yes. Although Plato infamously omitted CSS Grid from from the final draft of The Republic, there is nonetheless plenty the old heads can teach us about web development.
Today’s lecture is about architecture, and how some of its core tenets apply to the worldwide web. Architectural terms are not unusual in web development, and for good reason.
I’ve seen a lot of confusion online regarding Web development with Flutter and, often, it’s sadly for the wrong reasons.
Specifically, people sometimes confuse it with the older Web-based mobile (and desktop) cross-platform frameworks, which basically were just Web pages running within browsers running within a wrapper app.
That was truly cross-platform in the sense that the interfaces were the same anyway because you only had access to the interfaces normally accessible on the Web.
According to a recent study, the experts revealed that people aged between 18 to 34 years old reportedly purchased products through the social media platform. For most of the online sellers, these statistics are vital as similar to millennials. The age series assessed by experts is an essential part of the population to concentrate on […]
The post Social Media Marketing: Strategy To Boost Ecommerce-Traffic appeared first on Web Developer Juice.
One of my favorite quotes about software testing is from the Flutter documentation. It says:
“How can you ensure that your app continues to work as you add more features or change existing functionality? By writing tests.” On that note, this last part of the Mirage JS Deep Dive series will focus on using Mirage to test your JavaScript front-end application.
Note: This article assumes a Cypress environment. Cypress is a testing framework for UI testing.
Before jumping on answering the question, let me first walk you through what Flutter is and the factors that affect Flutter mobile app development costs. Flutter Framework Explained Powered by Google, Flutter is one of the most sought-after open-source app development frameworks with cross-platform capabilities. It is used to develop web, desktop and mobile apps […]
The post How Flutter Can Help Reduce Overall Mobile App Development Cost? appeared first on Web Developer Juice.