Geoff Graham Read, write, coffee, web, repeat.
I was working on a personal project this past week and got a weird error when I tried to compile my Sass files. Unfortunately, I did not screenshot the exact error, but was something along the lines of this:
Failed to write to location cssmin: style.css EACCESLet's say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each application?
It can be quite useful to get a "full page" screenshot in a browser. That is, not just the visible area. The visible area is pretty easy to get just by screenshotting the screen. A full page screenshot captures the entire web site even if it needs to be scrolled around to see all of it. You could take individual screenshots of the visible area and use a photo editing program to stitch them together, but that's a pain in the but. Nevermind the fact that it's extra tricky with things like fixed position elements.
Fortunately browsers can help us out a bit here.
I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment.
They're not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows.
What caught me was the fact that I can name these lines. (more…)
Tyler Sticka shared a slick technique for breaking out content in a CSS Grid layout, but Rachel Andrew goes the extra mile to explain why the technique works:
When you name lines, you can optionally name them as *-start and *-end and this gives you a little more grid magic. We get a named grid area of the main name used. Sounds odd? Take a look at the diagram below, it shows 4 named grid lines, main-start and main-end both for columns and rows. The area marked out by the intersection of these lines can now be referenced by the name main. If we had named the lines foo-start and foo-end then we would have a named area called foo.
We're not going to be looking at CSS in this post but we are going to talk about tricks for taking paid vacations when no one is paying you to take time off. I suspect that there are a number of us in the front-end development community who face similar situations and addressing is one way we can figure it out together and hopefully glean ideas that make our work-life balance much healthier.
I have been asked to lead product development on a team. This is somewhat of a new journey for me because I'm generally used to calling myself a web designer rather than a product manager or strategist.
The toughest part of this job for me has been organizing my thoughts. I've written an executive summary for the product we're building, done some competitive research and even dusted off my limited MBA education for a SWOT analysis. Oh yeah, now it looks like I know what I'm doing!
Many of us who read CSS-Tricks with any sort of regularity likely have to think strategically to do our jobs, whether it's in design, development, or both. What I've found, however, is that thinking strategically is a whole lot different than acting strategically. (more…)
Let's say you manage a WordPress site. You chose, purchase, and install a pre-made theme. Say you added a few items you came across in the WordPress plugin directory to add some advanced features to the site. This is the awesomeness that is the WordPress ecosystem. It's relatively easy for anyone with light technical chops to get a website off the ground and wrangle together something powerful without having to build everything from scratch. It just works great and your website looks wonderful.
Until it doesn't.
Let's say you created a lovely vector illustration in Adobe Illustrator. Or you’ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG.
There are several different ways of getting SVG out of Illustrator, each one a bit different. Let’s take a look.
TL;DR: Exporting, like File > Export > Export As... SVG then optimizing is your best bet for the web.