Much of the first part of the week was spent testing the K-State Admissions Representatives app (my first Vue app!), which is still not quite ready to go. Hopefully, it will launch early next week.
I spent the rest of the week getting started on the front end for another new Python project. One of the features of this new project is a list of files in various formats. It’s possible to target CSS using link attributes, so I was able to change the file icon and ::after text based on the type of file uploaded. For example:
a[src*=".pdf"] {
background-image: url(pdf-icon.svg);
}
a[src*=".pdf"]::after {
content: " (PDF)";
}
Check out some of the other options.
Podcasts
- ShopTalk Show — 428: This is 40, Code Health, Firefox Follow Up, Accessible Text Labels, and Minifying your Project
- ShopTalk Show — 329: Dan Mall on Building a Portfolio
Links
- Heroicons — An SVG icon set from the makers of Tailwind CSS
- Lawn chairs and kitchen tables: Ergonomics in the involuntary work-from-home era
- Netlify redirects and downloads
- Mind the gap
- Bill Murray’s Face Inserted Into Famous Paintings
- Designing the Unknown: the New Biden-Harris Logo — “How do you create a logo without knowing for certain what the words will say?… The solution, naturally, involves the absurd application of brute force: you just design all the logos you can think of, based on whatever public information you can gather.”
- Wu-Tang Clan’s RZA & Good Humor Partner to Create a New Ice Cream Truck Jingle
- Ukulele Covers of AC/DC, Nirvana, and Guns N’ Roses Hits
- Netflix is testing a ‘Shuffle’ button, because you’re tired of picking what to watch — I’ve been using the shuffle feature in Plex for years, and it’s a pretty great way to pick a movie
- Ikea and Lego built the storage boxes of your dreams
- A Portfolio Hiring Managers Can’t Deny
- Align SVG Icons to Text and Say Goodbye to Font Icons — Alignment seems to be the biggest pain with using SVGs over font icons. This trick seemed to work pretty well for me. The downside is that it requires an extra element to wrap around the SVG.
- Quick Tip: SVG
<use>Style Two Colors — This was the only way I could figure out how to customize an SVG with two colors when using them as symbols for an icon system.