Forem: Stephanie Stimac 🔮 Web Witch

3 ways that understanding design fundamentals can help advance your career

Stephanie Stimac 🔮 Web Witch — Thu, 09 Mar 2023 20:32:47 +0000

Bridging the gap between design and development is key for successful teams building websites or products. “Should designers learn to code?” has been asked many times over the years, but “Should developers learn design?” seems to be much less asked.

You don’t need to become an award-winning designer but if you’re a developer who builds for things that need a UI, learning design fundamentals can help you outside of just being able to make your projects look better.

With design fundamentals you can…

Build your collaboration and communication skills with designers on your team to better understand their process and thinking so you can provide more feedback early in the project. More feedback early on = less back and forth in the development stage if a design isn’t feasible or the code needed to implement a design is going to negatively affect the user experience of a project.
Understand how to improve the user experience of a product with a user-centric approach and identify points where designs may not translate well with code. Communication is key. If you can understand why your designers made certain decisions, you can help to brainstorm other ideas if the design isn’t going to be easy to build.
Stand out in the job market with a diverse skill set. Being able to act as a liaison between design and development teams can help move you into more senior roles as you think about the whole product and not just the development side of things. You don’t have to be an amazing designer, but understanding the “why” behind decisions makes you a stronger candidate to be in a lead role.

Understanding design fundamentals and user experience basics will help you build products that look better but can contribute to the growth of your career in other ways.

If you’re interested in advancing your design skills and learning the basics of visual design and user experience, the book Design for Developers teaches those basics.

Level up today and stay tuned for more tips on how visual design and user experience basics can help advance your skillset and career!

Using time-blocking to increase your productivity

Stephanie Stimac 🔮 Web Witch — Fri, 17 Feb 2023 23:30:53 +0000

So many things have my attention lately that I've been trying to figure out how to handle everything. I saw a product manager's tweet that showed a screenshot of what is (presumably) his calendar or an example of his and every moment of his working day was blocked off.

I sort of brushed the tweet off with a lol and a "I hope my calendar never gets like that" comment...except something kept nagging at me about it. I currently juggle 6 products at work and while I make a daily to-do list of things I'd like to accomplish, everything just wasn't getting done.

Time-blocking for work

So I started placing project focus blocks on my calendar. "Focus time" to tackle my to-do list each day for work. But at the end of the day, sometimes only one or two asks were getting checked off my list. Sometimes I have upwards of 7 things I'm trying to accomplish in a day, both new initiative work and repeating admin work (waves to the multiple backlogs I'm trying to wrangle), on top of meetings, but generalized "focus time" wasn't working.

Enter time-blocking. I started blocking off half hour and hour long chunks of time with a designated project or task to work on in my calendar.

I've seen an improvement but not to the extent I want to. However, I've started to gain a better understanding of why things aren't improving like I want to. I work in a startup and when I start my day with my to-do list and hop on Slack, I have a whole list of things that may need my attention immediately or sometime during the day depending on the severity.

time-blocking does help make time for the things I need to get done but some of those things that need to get done can change day to day so I still feel a bit scattered. But I decided to read a book to see if I could help myself even more.

Time-blocking for your life

I read Time-Blocking: Your Method to Supercharge Productivity & Reach Your Goals by Like Seavers to further help my productivity journey. It gives a good framework for how to time-block your life to maximize productivity and what's important to you. The three things that stuck in my head after reading this book:

Being good at multitasking is a lie
The maximum number of things you should try to accomplish in a day is 3
time-blocking isn't just for work, it's for your whole life

Let's talk about point number one.

Being good at multitasking is a lie

I remember filling out applications for jobs claiming I was a proficient multitasker when I first started working. And I think I was, but I say that because the work I was doing was not like the work I was doing now. I can multitask office work: preparing paperwork, writing receipts, checking rent payments. I cannot multitask high level strategy for 6 different areas of work.

I didn't multitask different design projects at the same time when I was doing design. In fact, I was even time-blocking work then, but in a bit of a different way because I had to keep track of billable hours. But I would focus on one design project for a client and then switch to another project for a different client.

We are simply not designed to multitask no matter what the modern productivity machine would tell you.

Three is the ideal amount of tasks you should focus on in a day

Anything more than that probably won't be quality work. This is perhaps where I struggle. I cannot dedicate 3 big chunks of time in my day to only 3 tasks. So while I try to put a cap on what I say I can accomplish in a day...it's not three things. It's still in the 5+ range. But the book also talked about determining what your essentials are so perhaps I need to revisit what those essentials in my life are.

Time-block for all the important things in your life

I appreciated Seavers' view of time-blocking. It shouldn't just be something you do for work. You should also time-block for the important things in your personal life. time-block for family time, for a workout, etc so those important things outside of your work are accounted for.

I personally like this. It helps to keep things in perspective and helps you be accountable to your personal goals. This is probably important to me because I've worked on some aspect of the web for the last 7 years in a way that creeps into my personal time. When I'm not PMing for API Developer Tools, I'm learning and writing about new web platform features. One of my hobbies is being online...so I'm online. A lot. time-blocking for the things that aren't online helps me ensure I'm stepping away from the computer.

I keep a habit tracker in my bullet journal as well to keep track of how often I work out, go for a walk, practice German, and read.

What's the point of time-blocking?

Time-blocking ensures you're productive (and yes, spending time with your family is productive) and spending time doing the things that roll up to your high-level goals. The core of time-blocking is that you're scheduling blocks of time to help you work toward something. Whether it is spending more time with your family, improving your health, writing a book, or accomplishing projects at work, time-blocking is one methodology to help you allocate time.

Luke Seavers details a rather good blueprint on how to lay out your goals so that you ensure your sub-tasks track back up to high level goals.

Honestly it's like OKRs for your personal life which I'm finding helpful to put some direction in place after a chaotic international move, all the travel I do, and all the side projects I've got bouncing around in my head.

Resources for time-blocking

Aside from books, there are daily planners that can help you time-block. I use my own bullet journal that I draw up every week because I find it quite meditative before diving into the digital world for the week. There are many options for planners available online already.

Cheers and happy time-blocking!

Greater styling control over type with the `initial-letter` CSS property

Stephanie Stimac 🔮 Web Witch — Mon, 16 Jan 2023 16:00:00 +0000

Today we're taking a look at another new addition to CSS that's about to land in browsers: initial-letter. This property is still experimental with support in Safari but it is supported in Chromium Canary browsers. It is a bit buggy at times and I encountered issues with DevTools crashing on me so it's still obviously experimental.

What is `initial-letter` and what does it do?

The CSS property initial-letter brings more control and styling over the first letter in a block of text...meaning we can get a little bit more fancy with our typography without hacky tricks.

Initial-letter is a property that applies to the pseudo element ::first-letter. It lets you control the size of the first letter with a number that indicates how many lines tall the letter should be, and another value, an integer that can be added to indicate how many lines down the letter should sink.

For example, let's say we want our letter to be 3 line lengths tall. We would write the following:

p::first-letter {
  initial-letter: 3;
}

And in turn this would render the letter 3 lines tall:

Let's bring in the second value to change where the letter is. The letter will still be 3 lines tall, but we want it to sink to the fourth line.

p::first-letter {
  initial-letter: 3 4;
}

Pretty neat and it only takes a line of code!

What does this solve for developers?

The power of this property lies in the ability to remove hacks around styling and positioning the first letter of a block of text. There's no wrapping of your first letter in a <div> or anything like that. The ability to size based on line height scales the letter nicely too.

More examples

Let's look at a more styled demo. You can find the source code on my demo page: CSS initial-letter demo.

Technically we are able to size the first letter based on line height with font-size: 2lh; or however many lines you'd like the letter to be tall. But we get the following with that declaration:

It doesn't quite look right especially when I want to create a really illustration focused first letter. The same thing happens if I try a value of 4lh...

It may be 4 lines high but it continues to create a massive gap below the first line. It doesn't align well with the rest of the type either.

When I use initial letter to handle my sizing though, I get the following design with a letter that aligns nicely to the left of the normal sized text and is actually positioned as 4 lines tall.

The important bits of CSS for the above display are as follows:

  initial-letter: 4 6;
  padding: 2.2rem 2.6rem;
  font-weight: 900;
  margin-right: .5rem;

I've added some padding and font weight to control the styling of the first letter a bit more.

You can inspect the demo for the full set of styles. I would like to note that outlining your letter doesn't appear to work if you have initial-letter applied, which seems like a miss in functionality. I've achieved the outline effect with a text shadow for this demo.

I added an SVG background for the illuminated text treatment, and there's probably some neat animation effects that you could apply.

Other notes

This is just the start of initial-letter, per the Chromium issue, there are still items in the works:

Following CSS properties are not implemented yet:

initial-letter-align
initial-letter-wrap

And following features are not implemented yet:

multi-character initial letters (such as for first word or first phrase styling)
inside-positioned ::marker pseudo-elements
inline-level boxes that are placed at the start of the first line
atomic inline

So stay tuned for more to come.

Browser support

As of right now, initial-letter is supported in Safari, though caniuse says the implementation is incomplete, and it is coming soon to Chromium.

I'm working in Edge Canary (Chromium) with the experimental web platform feature flag turned on, and the feature just shipped in the beta version of Chrome 110.

Firefox doesn't appear to be support at all though there was a little bit of movement on the Gecko issue for it, but anything beyond that doesn't seem to be clear. Hopefully it will be prioritized as this feature brings some easy to implement capabilities for good typography on the web.

Resources

Here's my demo page link
A basic codepen
MDN Docs

Want to keep in touch? Sign up for my newsletter to stay up to date with my book, Design for Developers, upcoming projects and events, and other bits about cool things on the web.

This post was originally published on my blog

An Introduction to Trigonometric CSS Functions (Updated Jan 6, 2023)

Stephanie Stimac 🔮 Web Witch — Thu, 05 Jan 2023 16:00:00 +0000

While perusing the December 2022 post from web.dev about what's new in the web platform, the addition of Trigonometric CSS functions in Firefox caught my eye.

Geometry and trigonometry were my two best math areas in school (I am not an Algebra person and generally did not enjoy math class), so I wanted to a quick look at these functions and what problems they solve for the web platform. When would developers use them?

Trigonometric CSS Functions Overview

As of December 2022, Firefox and Safari are the two mainstream browsers that support Trigonometric CSS Functions. These include cos(), sin(), tan(), asin(), acos(). atan(), and atan2().

Support in Chromium is estimated to ship in version 111.

Basic use cases per the MDN documentation

cos(): can be used to keep the size of a rotated box
sin(): can be used to size boxes and as an animation-duration value
tan(): can be used to draw parallelograms
asin(): can be used to rotate elements
acos(): can be used to rotate elements
atan(): can be used to rotate elements
atan2(): can be used to rotate elements and accepts two values as parameters

The MDN docs highlight the differences between the 4 functions for rotating elements. For example, atan() returns the inverse tangent of two values between -infinity and infinity, whereas sin() returns the sine of a number that has a value between -1 and 1.

What problems do they solve for developers?

At first glance, the use cases for these functions don't seem incredibly compelling to me. The MDN documentation use cases for rotating a shape or defining widths of elements don't seem that useful for a developer. We can already do those things and the examples with these functions seem long winded.

So I went and found the CSSWG GitHub discussion to dig into the "why?"

The main takeaway: these additions to CSS mean more complex animations that can be built with CSS and not JavaScript. This animation example from Ana Tudor is a good example. Trigonometric computations are done in JavaScript to achieve a seamless animation effect where the points line up exactly as they rotate and when the orange shapes skew on each rotation.

Another possible use case that came up elsewhere was using these to create charts and graphs in CSS, but this raises a question around responsiveness and scaling those angles and curves, though responsive skewing is mentioned in the GitHub issue.

Update January 6, 2023

This GitHub issue explains some more use cases for trigonometric functions.

I was surprised to see complex layouts on the list, but when discussing this with Jhey he mentioned using sin() to lay things out on a curve which could introduce some interesting layout possibility!

Closing thoughts

The addition of more math functions to CSS reduces some reliance on JavaScript which I view as a win. The primary use case for these seems to be easier shape creation and more options for building complex animations.

If you're building and maintaining an average website, I don't see these being overly useful, but I'd love to know if you have a use case for these functions. Let me know on Twitter or Mastodon.

Resources:

CSS Values and Units Modules Level 4: Trigonometric Functions
Part 1: in CSS and JavaScript: Introduction to Trigonometry by Michelle Barker
Part 2: Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions by Michelle Barker
Part 3: Trigonometry in CSS and JavaScript: Beyond Triangles by Michelle Barker

Want to keep in touch? Sign up for my newsletter to stay up to date with my book, Design for Developers, upcoming projects and events, and other bits about cool things on the web.

This post was originally published on my blog

DevTools Tip: Sync your CSS Edits from the browser to VS Code

Stephanie Stimac 🔮 Web Witch — Wed, 23 Nov 2022 18:20:00 +0000

In the Myspace and Livejournal days of the web, you could find me altering themes with CSS. I honestly can't remember exactly what led to poking around in CSS but it was most likely seeing custom layouts or styles in Livejournal and then figuring it out from there.

My degree is in web design and I've spent many an hour in the Styles pane in the browser DevTools' Elements tool. When I'm styling a project, my workflow is typically to write the HTML, add some classes I suspect I'll want to use and then start the CSS boilerplate.

Once I've done that, I open the Microsoft Edge Developer Tools and use the Elements tool with the Styles pane to style my elements and design in the browser.

This is the way it's always been for me. As is the unavoidable loss of styles I applied when I accidentally refreshed by browser pane.

Big headache...what styles did I try to add?

The timeless question I asked...until the ability to sync your changes to VS Code was added.

VS Code is my IDE of choice. I have tried atom and another one I've forgotten the name of...and Dreamweaver, ages ago. Maybe working at Microsoft, it was inevitable I use VS Code. I do enjoy using it though.

What I love about it is that I can sync my CSS changes back to my file when I'm adding and removing styles in the browser.

To set this up, go to the DevTools Settings pane > Experiments > Then find "Open source files in Visual Studio Code" in the list. Then re-start DevTools.
When you open a local server or a local project file, you'll be prompted to select the root folder you're working from for your project.
When you go back to the Elements tool and the styles pane, and the file you're working on is located within that root folder you set, you should be able to make edits to your CSS and it will immediately reflect back in your CSS file in VS Code.

If you uncheck styles you've applied in the browser, that also syncs back to VS Code, but instead of removing the style, it just comments it out. So if you don't reapply it, you'll have to do a little code cleanup, but I find this a minimal task.

As someone who designs in the browser, this is one of my core workflows and such a handy feature in the DevTools for CSS.

You can read more about this feature and how to manage a Workspace in the DevTools in the Edge DevTools documentation.

Follow me on Twitter for tech, travel and musings. I blog over on my website at blog.stephaniestimac.com and run The Web We Want, a place for web developers and designers to submit the things they need from browsers and the web platform to make their jobs easier. Author of Design for Developers.

Building better websites with the Chromium DevTools Issues Panel

Stephanie Stimac 🔮 Web Witch — Mon, 07 Nov 2022 00:37:21 +0000

What feels like a very long time ago, I was leading the design, UX and front-end development for the open source project webhint.io. Webhint is a linting tool that helps improve your website’s accessibility, performance, security, and interop between browsers.

Sometime within the last two years, the web UI for webhint was retired, but there’s still a VS Code extension and a CLI tool, it is also the basis for what is now the Issues panel in the Chromium browser DevTools.

Accessing the Issues panel

The browser DevTools are packed full of web development tools beyond the defaults that are shown when you open them up.

To access the Issues panel, find the 3 dots in the UI that open up a new menu. I’m in the Microsoft Edge developer tools, and this icon is located in the upper right hand corner.

Find the “More Tools” menu item and that will bring up a complete list of all the tools available in the browser in alphabetical order. Find the “Issues” panel in the list.

After you click on the Issues tool, it will show up in the bottom pane of the UI and if there’s anything amiss with the code you’re inspecting and it falls under one of the rules the Issues tool is checking for, it’ll appear there.

Filtering issues by severity and browser

In the top toolbar of the lower pane, you can adjust your preferences for what kind of Issues you want to show up and for a handful of desktop and mobile browsers.

The different severity levels you can filter for are tips, info, warnings and errors. And the browsers you can target are Edge, Chrome, Firefox, Safari, Internet Explorer (support may be gone but it still lives on), and Opera on desktop. On mobile you can target Safari iOS, Chrome for Android, Firefox for Android, Samsung Internet, and Android Webview.

Expanding the issue will give you a description of what’s being reported, the resource that’s affected and a link out to some documentation so you can better understand what’s being reported and why you should care about it. It’s up to you to decide from there whether you’d like to fix it or not, but the issues reported on are there to help improve the code you’ve written and make the site a better experience.

Linting in your browser

This tool brings linting straight to your browsers so you can get an idea of what needs to be worked on, if anything, in your codebase. If you need more robust linting though, you can use the webhint.io CLI to customize even further.