30 Frontend Tips by Kitty Giraudel
January 20, 2022
These tips on front-end development by Kitty Giraudel are spot-on and relatable. So much wisdom in each of these lessons!
More about...
January 20, 2022
These tips on front-end development by Kitty Giraudel are spot-on and relatable. So much wisdom in each of these lessons!
More about...
May 24, 2020
These past few weeks, I took part in Smashing Magazine’s first-ever online workshops. I’ve been a Smashing fan for a while, and thanks to my agency, I attended Resilient Web Systems with CSS & Sass led by Miriam Suzanne.
Miriam is a core contributor/expert on tools I use daily (Sass and W3C CSS working group). The workshop was a deep-dive into CSS and covered advanced topics such as core fundamentals of CSS, modern and intrinsic web layout, CSS architecture, maintainable design systems, new tools in CSS and Sass, and more.
The experience was truly fantastic and outdid my learning expectations. Attendees were invited to chat and ask questions, slides were well-presented, and the environment was refreshingly friendly and intimate given the virtual format. I found myself many times during the workshop amazed at how useful and applicable the information was. For my professional goals this year, both the technical details and takeaways from this workshop will undoubtedly come in handy.
I want to share just a selection of takeaways from Miriam’s workshop. I took many pages of detailed notes, but these high-level concepts will surely stick with me. I’m also looking forward to SmashingConf Live in a few weeks!
On the first day of the workshop, Miriam covered the history and theory behind CSS as well as core concepts like the cascade. Since I only briefly learned this information in school and on the job, it was fascinating to hear in depth.
CSS was designed around accessibility and user control, which makes it radically different from other programming languages or design tools. It relies on meaning and intent (semantic markup and purposeful declarations) and the language is contextual, adapting to change.
Pixel-perfect web design isn’t attainable, nor is it worth aiming for. Many times during the workshop, this idea was brought up, and it’s important for everyone who works with the web to understand.
Because the web is a flexible, resilient medium compared to print, the best we can do as programmers is describe intent—providing hints & suggestions for things like sizes, flow, typography, and color. The browser will interpret our intent across different canvases, for unknown content.
This unpredictability is a fact—it’s the reality and power of the web. When we let go of trying to make the web experience match Photoshop comps perfectly, we leverage the medium in exciting ways.
And instead of limiting ourselves with the 12-column grid system which is everywhere these days, we can be inspired by graphic design history, which has always used interesting and different types of grids.
Browser support is a common thing we face when developing websites, with feature support always in flux. The current mindset in our industry of supporting a certain percentage or set of browsers is frustrating—and it just doesn’t work.
Instead of re-writing code for each instance, progressive enhancement should be used to build from basic to advanced implementations. If the content is there in an accessible manner, it’s good. We can support everyone possible by supporting more browsers with lower standards.
Moving forward, we’ll be able to use features as they are available without concern for legacy browsers like IE 11. This idea of evergreen browsers exists today, and through practices like progressive enhancement, we can take advantage of it.
Working with built-in tools like the cascade in CSS, we can stop programming against the grain and begin working in harmony with our platform. Whether we’re using new techniques like custom properties or managing design systems, we should consider fundamental CSS principles along every step of the process.
The best tools are ones that encourage you to use best practices and consistency, and get out of your way to focus on what matters. Automating parts of our system or using integrated documentation is smart in this respect. And when we have time to do the important work, that’s always a great situation to be in!
It’s important to find or build tools that fit to you, not just what’s working for someone else. We’re all dealing with similar problems, but we all have unique constraints.
And if design systems are not communicated, they don’t exist. At the end of the day, it’s about communication between people & teams.
Design systems can be complex endeavors, sometimes spanning huge teams, applications, and platforms. By starting small with what we know and what has the most reach, we can aim for accurate and maintained over complete. Getting one piece right is the important step.
Continuous integration means it’s fine to go back and adapt—it’s an iterative process and it will take time to figure it out.
Clear semantics is the basis for everything on the web. This helps browsers, users, and other developers because it makes code intuitive to read, understand, and maintain. For users, well-written code forms accessibility, which is a human right.
More about...
CSS Design Systems Goals Sass SmashingConf Web Design Web Development
April 6, 2020
I came across this intriguing two-part series of articles on learning code by Paul Hanaoka for Smashing Magazine. There are a lot of tips and tricks here, and some things I wish I would’ve known sooner. Part 2 was most useful for me as I’m discovering aspects of programming/engineering principles through my job currently.
New areas of learning, such as tokens and components, have changed how I think about design. I believe coding is a beneficial skill for designers to have, not only so you can code, but also so you can apply the types of thinking that coding requires into your design practice.
More about...
January 23, 2020
Love this article by Brad Frost about the parallels between music and web design/development. Who knew there were so many?
I hope we in the web field will arrive at the same realization that I did as a musician: complexity is not synonymous with quality. Not everything needs to be At Scale. Not everything requires ultra-hydrated isomorphic architecture. We don’t have to shred like Yngwie Malmsteen on every project we work on. There’s a ton of power in simplicity, and I absolutely think there’s the web equivalent of a solid, grooving bassline.
More about...
January 23, 2020
Wonderful interactive article giving the lowdown on the CSS cascade:
We style our websites using CSS, which stands for Cascading Style Sheets, but what does Cascading really mean? To save ourselves from future angst, let’s take a step back and learn this thing for real.
More about...
January 10, 2020
2019—my first full year at Brokaw—was marked by tremendous professional growth. I learned a lot about teamwork and communication from being immersed in a collaborative agency environment. And by working hard on web projects big and small, I improved my skills in many areas, from design and coding chops to broader knowledge in advertising as a whole.
I’m excited about where I pushed myself beyond day-to-day expectations, too:
In 2020, I’ll be working toward a creative goal and a handful of technical objectives. My manager and I developed these goals to leverage my strengths in places where there are opportunities to grow. Goal-setting for professional development is new to me, but I’m looking forward to all the ways I’ll be helping our company while learning new things in the process. Check out the full goals/descriptions below:
Creative
My creative goal is to improve my abilities in web design by leveraging my existing branding skills. Applying a brand’s look & feel to a website and focusing solely on visual design (not code or interactivity) is a valuable skill. By understanding the clients we work with more deeply—their values, products, and goals—I can deliver more nuanced, effective designs.
Some actionable ideas I might use to make progress toward my goal this year are:
SCSS
This first technical area includes many sub-goals that will directly improve the websites our team builds. SCSS/Sass is something I learned on the job, but it has proved to be an immensely useful and time-saving language for coding stylesheets. This year, I’ll be:
Efficiencies
Notion was just the beginning of becoming more organized and efficient in our projects and workflows. This second technical area focuses on ways to streamline everyday tasks. I’ll be working on the following for our team:
Knowledge Base
In our team, there’s an abundance of information that gets passed around and learned in a given year. The idea behind this third technical area is to centralize and document what we know and where we’re going—our systems, processes, resources, and inspiration. For our knowledge base, I’ll be:
As I work on these goals, I’ll also be sharing my learnings and progress right here on this blog. So for more insights, follow my latest posts by bookmarking this page!
More about...