Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the big fancy companies that use some product. Putting the logos into squares is a decent way of handling it, as it forces some clean structure … Read article “A Grid of Logos in Squares”
The post A Grid of Logos in Squares appeared first on CSS-Tricks.
Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code to a production server often requires paid services. With GitHub Actions, Continuous Deployment is free for everyone. Let’s explore how to set that up.
DevOps is for everyone… Read article “Continuous Deployments for WordPress Using GitHub Actions”
The post Continuous Deployments for WordPress Using GitHub Actions appeared first on CSS-Tricks.
In this tutorial, I’ll demonstrate how to create your own blog using Hugo and deploy it on Firebase for free. Hugo is an open-source static site generator and Firebase is a Google platform that offers resources and services used to augment web and mobile development. If you’re a developer who does not have a blog yet but is interested in hosting one, this article will help you create one. To follow these steps, you need to know how to use Git and your terminal.
You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.
You’ll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick to “duplicate” the text using text-shadow.
Nice to see prefers-reduced-motion in there stopping the effect when it should be.
Direct Link to Article — Permalink… Read article “CSS-Only Marquee Effect”
The post CSS-Only Marquee Effect appeared first on CSS-Tricks.
I just can’t stop bookmarking great links related to typography. I’m afraid I’m going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy.
I know there are lots of good reasons to be excited about variable fonts. The design possibilities of endless variations in one file is chief among them. But I remain the most excited about the performance benefits. Having a … Read article “Some Typography Links”
The post Some Typography Links appeared first on CSS-Tricks.
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — something not involving a structural change, but rather putting CSS custom properties and even Sass variables to use.
CSS custom properties and JavaScript
Custom properties shouldn’t be all that surprising here. One thing they’ve always been able to do since … Read article “Getting JavaScript to Talk to CSS and Sass”
The post Getting JavaScript to Talk to CSS and Sass appeared first on CSS-Tricks.
It’s good!
I’ve written up my advice (sprinkled with great advice from others), but this is way more straightforward nuts-and-bolts training on technical writing. It’s structured like an actual course, with exercises along the way.
I’m far from an expert here. But between Geoff and I, we end up doing a lot of technical article editing for the sake of clarity.
Comedy writers seek the funniest results, horror writers strive for the scariest, and technical writers aim for the clearest.
… Read article “Google’s Technical Writing Guide”
The post Google’s Technical Writing Guide appeared first on CSS-Tricks.
Ethics is a timely subject for all of us who work on digital products, so it was no surprise The Ethical Design Handbook was well received. There is a real need for practical solutions beyond just complying with the law. The book offers ways to evaluate current practices, create opportunities for change when needed, and embed ethical design into your workflow.
Something Good In The Mail As printed copies started to make their way around the world, we got to see some happy responses and thoughtful reviews:
Austin Gil has kicked off the first in a five-part series about “HTML Forms Right” and to starts with semantics. It’s talking to the “we build our front-ends with JavaScript” crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered through the JavaScript API FormData.
Why is that so vital? Well, no <form> tag, no FormData. Why else use a form (aside from the Enter-key submission):
“But Austin,
… Read article “Accessibility Links”
The post Accessibility Links appeared first on CSS-Tricks.
If you’re looking for a new typeface for that side project of yours then here’s a great website by John D. Jameson that collects a bunch of the latest type specimen websites. Everything is on display here, from the daring and bold, to those that are a bit more professional and reserved.
Not only are there a ton of great typefaces on display and for sale, but the websites for these specimens are fantastic, too. My favorite at the moment … Read article “typespecimens.io”
The post typespecimens.io appeared first on CSS-Tricks.
The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated.
Deprecated. It’s a word we use and see often. But have you stopped to think about what it means in practice? What are some examples of deprecated web elements, and why … Read article “Why Do Some HTML Elements Become Deprecated?”
The post Why Do Some HTML Elements Become Deprecated? appeared first on CSS-Tricks.
Justin Duke asks if treating code comments like footnotes could help us understand the code in a file better. In his mockup, all the comments are hidden by default and require a click to reveal:
What a neat idea! Justin’s design reminds me of the way that Instapaper treated inline footnotes.
Instapaper (circa 2012)
I guess the reason I like this idea so much is that a lot of comments don’t need to be read constantly, — they’re sort of … Read article “Rethinking Code Comments”
The post Rethinking Code Comments appeared first on CSS-Tricks.
Some no-frills approaches to building websites require a developer to write every line of HTML by hand. On the other extreme, commercial no-code site builders create all of the HTML for the user automatically, often at the expense of readability in the resultant code. Templating is around the middle of that spectrum, but closer to hand-written HTML than, say, generating page structure in a single-page application using React or a similar library.
In this tutorial, you’ll learn what Headless CMS is, and the pros and cons of Headless CMS. In the end, youll have built a shopping cart using GraphCMS (a (backend-only content management system). After that, you can go ahead and build any web app of your choice using a headless CMS and React.
To follow along, you need to have Node and npm/yarn installed on your machine. If you do not have that done already, follow these quick guides to install yarn or npm on your machine.
I read an interesting article on Forbes recently about language saturation. Here’s the problem:
Consumers don’t always understand the technicalities of what businesses do or the solutions they’ve created for them. So, copywriters use jargon that translates something like “Internet-connected devices with computing capabilities” into “smartphones”, “smart watches” and “smart speakers”.
Some of these buzzwords spread like wildfire and it soon becomes impossible to find a brand or website that doesn’t use them.
In times like these where our everyday life is pausing and we’re trying to find strategies to cope with this situation we all find ourselves in at the moment, little routines can help give us a sense of security and familiarity — no matter if it’s having a cup of coffee in the midday sun on your balcony, calling an old friend in the evenings, or trying out a new recipe every day.
“Design is not just what it looks like and feels like. Design is how it works.”
— Steve Jobs Like written words are to language, fonts, colors, shapes and icons are to visual design. An effective visual design language not only acts as a communication framework for all stakeholders on a product development team, but unites a brand and its customers to ensure that a company’s brand identity matches a customer’s brand perception.
Sharing the things we have learned is at the heart of everything we do at Smashing. That goes for the team as well as our authors, and Vitaly has been working on a set of checklists to accompany his workshop, Smart Interface Design Patterns. The resulting PDF is 152 pages packed with useful information to help you create better interfaces. And, we’re offering it to you free of charge.
These checklists are based on the work Vitaly has been doing for many years, exploring and examining examples of desktop and mobile interfaces.
Git was released almost 15 years ago. In that time it has gone from underdog to unbeaten champion, git init is often the first command run on a new project. It is undoubtedly an important tool that many of us use on a daily basis, and yet it is often seen as magic: brilliant, but scary.
There’s been a lot written about getting started with git, understanding how git works under the hood or techniques for better branching strategies.
For e-commerce designers, it’s easy to focus on designing the home page, individual product pages as well as the checkout experience because they’re obvious stepping stones along the mobile shoppers’ journey. Based on the following data, though, category pages also have a role to play — as the intermediary between search engines and e-commerce websites.
Jill Kocher Brown, the SEO Director of JumpFly, shared the following research at SMX West 2020:
Literally, tomes have been written on version control. Nevertheless, I will start by sharing a brief explanation and other introductory content to whet your appetite for further study.
Version control (not to be confused with version history) is basically a way for people to collaborate in their own environments on a single project, with a single main source of truth (often called the “master” branch).
I’ll go over today is the bare minimum you’ll need to know in order to download a project, make a change, and then send it to master.
In this episode of the Smashing Podcast, we’re talking about the user experience around converting site visitors into customers. Can our selling techniques leave customers feeling cheated? And how can that be avoided? I spoke to conversion optimisation specialist Paul Boag to find out.
Show Notes More about the book Click! How To Encourage Clicks Without Shady Tricks Paul on Twitter The Boagworld UX Show Paul’s consultancy Boagworks Weekly Update “Implementing Infinite Scroll And Image Lazy Loading In React,” by Chidi Orji “How Indigo.
We had to postpone our SmashingConf in San Francisco until 10th–11th November 2020 and, like so many of you, our team will be staying firmly put at home for the next month or more. However, we know that many of you are still hoping to develop your skills, and we had workshops ready to go. We decided to find a way to bring the workshops to your home office, trying to keep as much of the live experience as possible.
For the past few years, books about HTML and CSS have almost vanished from my studio bookshelves. I replaced them with books on art direction, editorial, and graphic design.
Recently, I was browsing a new addition to my library and was captivated by one magazine spread. I loved the way its designer has playfully combined images and typography to create a design which was full of energy and movement. To remind myself to take another look at this design, I snapped a picture of it with my iPhone.
Table sorting has always been a pretty hard issue to get right. There’s a lot of interactions to keep track of, extensive DOM mutations to do and even intricate sorting algorithms, too. It’s just one of those challenges that are hard to get right. Right?
Instead of pulling in external libraries, let’s try to make stuff ourselves. In this article, we’re going to create a reusable way to sort your tabular data in React.
One of life’s pleasures is discovering when some small action taken yields a highly positive, or even a game-changing outcome. A web designer could spend many hours creating a modern website with old tools. A single new tool or a single new service could cut the time required to do so dramatically and produce an […]
The post 15 Effective Tools and Services You Should Pay Attention To appeared first on WebAppers.