Award-winning speaker. Sr. Developer Advocate, Microsoft. Writer, CSS-Tricks. Cofounder of Web Animation Workshops
October 4th 2017, 6:00 pm
Ask me about:
- Web designing
- SVG Animations
- UX Tips
- Getting started advice
- Web animations and more
This AMA session is over but you can still ask questions to Sarah Drasner on their Hashnode profile.
Message from the host 💬
I'm so impressed with the quality of the questions you all asked me today! This was so much fun and am honored that people took the time to stop by and participate. I love our community and I owe you all so much.
Best wishes, everyone! 🌮 (tacos are the highest esteem of emojis that I can give)
Hi, Sarah! What are your thoughts on Vue vs React? What makes you prefer Vue?
Oof, you're here for the dicey questions huh? I give you props. Get it? Props? Ok anyways...
Vue is elegant as all get out. I feel like because Vue came after React, it's right behind it in terms of community at the moment (following the same trajectory), but what they gained in coming a bit later was to pervue the landscape of frameworks and take all of the best bits of everything. You'd think that this might make it clunky and disorganized but Evan You has a brilliant mind in this way. It feels seamless to work with.
It's possible to be productive so quickly because so much is available to you and you don't have to reinvent the wheel for common problems. What's crazy awesome about it is that sometimes when you find frameworks with these nice abstractions, they sometimes fail because you need to do a thing it can't do. Here's what's cool: they still give you access to all the lower level stuff, too. Not only can you do things like build custom directives, you can also hook directly into the reactivity system with things like watchers that give you a distinct opportunity. Computed properties allow you to quickly cache data that won't update until something changes in it's dependencies. This is HUGE. When I work with Vue, I feel like everything I need is right at my fingertips, along with some extra candy that I didn't even expect but love working with too.
I've used both of these tools in large production sites, and I can recommend using either one of them. It's true, Vue fits me better and I prefer working with it, but I can clearly see why anyone would prefer React, and I think it will mainly come down to a matter of personal preference, as both of these tools continue to grow and learn from one another.
Hi, Sarah! It's so nice to see you on Hashnode! :)
Over the course of giving many talks, what tips do you have to share with your fellow developers so that they can better deliver a talk on their chosen topics!
Could you tell us about your process of preparation before giving a talk? Thanks! :)
Ooo this is a good one! Yeah totes! I've divided this up into two sections for each of your questions:
Ok, so the first piece of advice I'd give is to pick a topic that you yourself are interested in. When I think about my professors in college, my favorite professors didn't necessarily teach what I was interested, they taught what they were interested in. Enthusiasm can be sensed by the audience, and if you're into it, I think other people will get there too :) I LOVE the tech I talk about.
I would also say that I've heard a lot of people comment whether someone should be a speaker by whether or not they get nervous. It's ok to be nervous! That means you care! Some of the best speakers I know in the world were chattering backstage and some of the worst weren't nervous one bit. If you get nervous, you still belong on the stage. Join us! You're in some great company.
Also, it's worth saying: your body will react strangely. This is ok too :) Breathing exercises and the "power pose": https://www.ted.com/talks/amy_cuddy_your_body_language_shapes_who_you_are sound cheesy but they actually do help with this.
When I write a talk, I study for days. I read a ton of books, I watch other talks, I learn, learn, learn. I also make demos along the way if I don't have them already, both to learn and to show how the tech works. This also validates if the thing works the way I think it does (sometimes it doesn't! specs and docs are incorrect sometimes!)
Then I sit down to write an outline.
Then I put the slides in, and just like my answer above with the articles, I try not to interrupt my flow with looking up resources- I highlight in red any content I need to fill in later that I don't have at my fingertips.
Then I comb through the content, adding the resources and doing editing, writing any clarifying notes to myself.
Then I practice, edit, practice, edit, practice, edit, many times!
The last step is to make it all work offline. Sometimes for slide decks with a ton of demos this is a great deal of work, even if I'm just making videos of the demos. Make sure you leave time for this step because you should never depend on conference wifi.
The last thing I'll say is- my talk isn't the best the first time. I usually don't land the jokes perfectly, I haven't quite figured out the timing because I speak differently on the stage no matter how much I practice. Some people don't like it when speakers give the same talk repeatedly, but you're definitely giving it better every time because you know the cadence of the talk better. If you can give your talk first at a meetup, and then for a conference, that's probably going to make your conference talk that much better :)
Hope that helps!
Fantastic job out there on the internet! 👏👏
The country I live in, doesn't have more girls who code. What initiatives should one take to attract more girls to code in developing countries? Initiatives that won't cost much.
Hi Joy! Thanks so much for coming by ☺️ I love your name.
This is a REALLY great question, but unfortunately one I don't feel qualified to answer. Aside from simply being a woman, I don't devote my life's work to these efforts like other people or groups. I think Women Who Code, for instance, or @fox on twitter, or Black Girls Code are actively working on these initiatives and I try to support them monetarily and would point you to their efforts out of respect for what they do. Anything else would be me waxing poetic about something I am not qualified to speak on :)
I will say this from my own experience: I've seen firsthand a lot of women who are my peers drop out of tech due to harassment and disrespect to explore other fields. I myself have undergone harassment. I think until we make more efforts towards keeping people from feeling unwelcome, guiding women in will never see it's full returns. Women are interested in technology. So are young girls. I'd love to feel like once they invest the energy in building their careers here, we're not welcoming them to a hostile environment. As Alisha Ramos said in her css conf talk: https://www.youtube.com/watch?v=PtKOzKNJF-s "The strongest pipeline in the world does no good if it leads directly into the sewer"
I apologize if that's not the answer you wanted, but it's the best answer I have.
Hey Sarah, Thanks for doing this AMA. I have a couple of questions for you.
What motivated you to write a book on SVG animation and what challenges do you face while writing it?
Wow these questions are all so good. Thanks for stopping by Dylan.
Well, O'Reilly asked me if I wanted to create some learning materials for SVG Animations, particularly Meg Foley, who is an awesome person and awesome editor. I think I might not have thought of making something on my own at that point, but was really excited about the opportunity.
The biggest challenge I faced was that it takes an enormous amount of time and energy, and on top of my full-time job, wanting to contribute to CSS-Tricks, and still be active on codepen, not to mention my real-life human relationships, the balance for me was pretty tough. I'd have to carve out time to work on it, and I definitely had months where I didn't do as much as I wanted to on it so it felt a little like a monkey on my back, that I asked to jump on my back.
I also didn't realize that writing the book was only really a smaller fraction of the effort. Taking the time to incorporate the feedback of 4 technical editors, copyeditors, and the like, meant going through my book with a fine-toothed comb many times. It was a long process, but the book is so much better for it. I also had to promote it. That's a bit hard because it's difficult for me to tell where the line is between "hey I made this thing" and "hey I'm really annoying about this thing I made". I definitely stumbled on my way there. The last thing you want is to spend a few years full of sacrifice writing a thing and for people to be like "what? I didn't know you did that." But you also don't want to spam people either.
All in all, it was a really good experience for me and I learned a lot! If you're interested in writing a book, it's nice to work with other people that nudge you along when you start to lose steam, like Meg Foley did for me. Without her, the book wouldn't have been possible.
What dev tools and products you can't live without?
This is a great question! I rely heavily on my code editor and it's extensions, or the ability to extend it myself. I work with VS Code (believe it or not, I was switching over before I took the job at Microsoft) and, like a lot of people, I use Prettier, which helps me keep consistent formatting without having to comb back through myself.
I also use snippets pretty heavily when I'm developing, because if it's code I write again and again, I can't tell you how much I love speeding this process up.
As you may know, I use codepen to demo small bits of code, but the sneaker hit of codepen for me is working in isolation. I have literally THOUSANDS of pens because I have worked on some really large codebases, and it's really important that I figure out what's causing an error. If I bring it into codepen to isolate, I can confirm it's just the bit of code I'm working on or if something else that's fishy in the system is at play.
I love CLI tools like Vue CLI, and especially Nuxt. Nuxt allows me to spin up the base of an entire application with server side rendering, routing, and I can even quickly make a Vuex store, all with one command. This has been one of the most productive development tools I've ever worked with, and I'm just so happy working with it :)
What about you?
Hi Sarah, Thanks for the AMA.
How did you get into the web development? What was your first project and why/how did you do it?
Hi Karan! Thanks for dropping by!
I used to be a Scientific Illustrator at the Field Museum of Natural History. I was drawing snakes and lizards for encyclopedias for a living. The reason they needed drawings was because cameras have an aperture and there's a depth of field. Some parts, for small specimens, would always be out of focus with a camera.
Welp, turns out, about a year into me working there, they invented a camera that solved for this. It composited many sharp images into one. So they no longer needed me for that work. Thankfully, I had a good relationship with my coworkers and they wanted to keep me on.
Oh, and I made my own site at the same time just for kicks as a place I could experiment and mess up away from the institution.
Ever since, I've learned incrementally, teaching myself things with whatever resources were available, or pair programming- both in the teaching role and learning role. I have no formal education, though.
Hi Sarah. What's your favorite taco at Torchy's?
Excellent question, Ryan.
If queso was a taco, I would give that as my answer because I'm the kinda lady that would just put my full fist in there and eat it off my knuckles, it's that good.
For tacos, I'm a big fan of the Democrat. From the menu: SHREDDED BEEF BARBACOA, FRESH AVOCADO, COTIJA CHEESE, CILANTRO, ONIONS & A LIME WEDGE WITH TOMATILLO SAUCE ON A CORN TORTILLA.
Sorry to yell, I don't know why the menu is in ALL CAPS!
Big fan! What is your process for writing? Creating content that is understandable by a large audience can't happen by accident.
Thanks so much for stopping by! Here's what I try to do, (but it's not a hard and fast rule)
I try to write the content right at the point where I'm coming out of learning it with fresh eyes and moving into deeper understanding. If I know a subject really deeply, it can be hard for me to remember the basic stuff I got stuck on. That said, I also write fast and furiously on things I have deeper knowledge on as soon as 1) it's been sitting in my brain rattling around, poking me for a while, or 2) enough people have asked me about it on twitter/at conferences that I feel like I'd be letting people down without giving them a deeper resource
I try to make the demos first- I try to make things that will be exciting for people to play around with because it's easier to learn that way. Emotion attaches to the limbic system and makes it easier to recall information. I try to play off that because sometimes that's the thing that will keep you going through the learning process
Then I sit down to write, and I usually try to write without interrupting myself. By that I mean, any images to be inserted, any word I can't remember, any resource I have to look up, I highlight in red. That way I can keep my train of thought and fill in the gaps later.
The biggest thing I try to do is to look at the article from the point of view of someone trying to learn the material, instead of thinking what an expert might think of it. Experts will always disagree on how to teach a subject, and you can second guess yourself a lot by tuning your brain into this radio station. Turn the knob until you get to a station for people who need the help.
Hope that's helpful!
First of all, I love your work. I'm a front end dev and I think you are a big inspiration for all of us. Thank you!
Well, now my questions!
1) How is to work for Microsoft as a front end developer / designer. What kind of challenges you have to face in your daily life in one of the most innovative companies in the world?
2) Which resources would you recommend to someone that has prior coding experience but wants to start learning SVG animations from scratch?
Thanks for your answers!
Hi Camilo! Thanks for stopping by!
1) Working for Microsoft has been a dream so far (I'm about two months in). I had been taking note more and more of some of the things coming out of MS as they started to turn around, in my eyes, on their way of embracing open source and community- two things that matter a lot to me. The rise of VS Code and Typescript caught my attention, and as I explored Azure more deeply I realized that there was a lot I wasn't fully aware of that's really cool to work with. The big thing I heard from them was a change in the way they did business- when I started talking to them about the position, they were saying things to me about "meeting developers where they are", which hadn't been my previous impression of the company. I had noticed they were really doing this with their actions of late and seemed more my style.
They have given me a lot of space to learn, to create things that interest me, and to figure out what I'm genuinely enthusiastic about. This means it's a pretty perfect fit for me because I'd say I'm naturally a curious person, and have a lot of drive on my own, but do get bored if it's not something I'm not totally jiving on.
My challenge right now to be quite honest is time in the day. I'm speaking a lot, and I'm also ramping up on their products and features in a deeper way, while still trying to find a balance. I think this will come easier in November when I get back from a big conference trip, but my biggest hurdle right now is simply managing my own schedule, as my eyes are always bigger than my stomach.
2) Resources for SVG. Good question! Well, I spent a lot of time making some for you if you're interested :) I wrote that O'Reilly book on SVG Animations that was two years in the making. It doesn't assume prior knowledge. https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation/dp/1491939702/
I also made a metric ton of open source demos! My codepen is littered with things that you can fork and play with, different techniques to discover. My pens: https://codepen.io/sdras/ Collection of SVG Resources: https://codepen.io/collection/DkNQaP/
I think this pen by Anthony Dugois is really nice if you're confused about what SVG paths do: https://codepen.io/anthonydugois/pen/mewdyZ
My workshop materials are also open source: https://github.com/sdras/svg-workshop
Hope that helps!
What are the few misconceptions you have heard about SVGs? 😀
Oof, so many. I hear that SVG isn't well supported https://caniuse.com/#search=svg
I hear that you can't animate more than 10 SVG nodes without the whole thing tanking ...pfft I can do at least a hundred if not more, they're probably not animating it properly
I hear that they can't be accessible https://css-tricks.com/accessible-svgs/
I hear that you can't use them in an img tag Well, that's just not true
I hear that you have to learn the whole syntax in order to work with them. Also not true, you don't even have to learn all the elements in order to animate them. You could theoretically just slap a class on a path and move it around.
There are more I'm sure, but those are the ones that I'd love to not hear about anymore 😉
Thanks for stopping by!
Thanks for being awesome! I hope you're having a fun night.
Q: Should developers design? And where should a curious developer start?
Great question! I don't think anyone should do anything they aren't interested in. That said, I think it's a good idea to try on your own projects, for a couple of reasons:
1) If you want to get some idea you have out there, it's really nice to be a one stop shop. It's fun to collaborate, but it's also nice if you don't feel like you have to depend on anyone else to see your idea realized. Other people will inevitably bring their own thoughts and opinions to the table. This can be deeply enriching, and make things much better. This can also slow down a project and if you have a strong desire to see it realized a particular way, you now can.
2) It gives you more understanding for what the people you're collaborating with go through to make something. Design is no more "magic" then development. It's tough. It's especially tough to make something that seems like it was easy to make. Working out a design on your own gives you a better perspective and can help you be a better coworker. (granted that you don't use your experience to hold it over their heads, no one likes that ;) )
Here's a tip on how to start: you don't have to make everything from scratch. Go on dribbble or coolors and steal a palette. Go on shutterstock or freepik and download someone else's UI Kit or template or SVG or whatever and tear it apart or weld some together. These resources exist for a reason. You're not "cheating" by using them, you're being resourceful. If you ever feel you're pulling from them too directly, you cite them as a resource. (Don't steal the work from someone on dribbble, though, that's people's portfolios, not an asset foundry).
I learn from messing up. You probably learned development by messing up until you were more fluent in it. Same thing applies :)
When you want to go deeper, there are podcasts, books, and online schools and all sorts of resources. But I wouldn't overcomplicate things to start. I'd just get cracking.
Hope that helps! Can't wait to see what you make!
Hey, Sarah! I am a college student from India. So I would like to ask, what was your way of learning things and new techs when you were in college together with the courses they teach us there? Also, what advice would you like to give to budding developers like me about what should I learn in order to be compatible with the ongoing industry?
Well, first I want to congratulate you because you're asking the exact right question, and I think this is probably the most important one in all of your career, or at least it has been in mine.
I didn't go to college for web development even though I do have my masters. Teaching myself tech has been the single most important part of my career development and growth, and will continue to be. We work in an area with amazing developments constantly, and we have to always be learning. We have to consider very carefully the ways we learn the best. If you don't do this, tech will eventually outgrow you, no matter your background.
Ok so here's my answer: it's not just one way. I tend to follow people on twitter and read newsletters to figure out what things are trending or what sounds interesting to me.
I've figured out that I learn best by building things. I can read any book or watch any course but I'll only catch a fraction of what they're saying if I don't also make something out of it on the side. When I'm first learning, I try not to copy paste code or use snippets so that I'm typing everything out and committing it to memory. Once I've got it down a bit more and find I'm writing the same code a lot, then I'll allow myself to copy or make myself some snippets.
So, those are the two best steps I have: follow people you respect and pay attention to what they're talking about. Find technology and tools that genuinely excite you if you can, you're more likely to stick with it that way. And code along with whatever you're using to learn. There are tons of free resources, but investments like code school and frontend masters and egghead really pay off in dividends. I try not to count those expenses as entertainment, but rather as investments in my future self. It's definitely been worth it.
Hi Sarah, Is using SVG Images good for any website’s performance?
Hi James Franko, great name.
This is a really interesting question and I usually don't deal in absolutes because the web is a really big tent and we're all building vastly different things for vastly different reasons.
So I'll say this: almost definitely.
Why almost definitely? Because there's a high chance you're using an icon, or a flat logo, or an image that could possible be in vector format somewhere on your site.
SVGs, when built properly, can reduce your HTTP requests, in fact you can have no HTTP requests because you can write them inline. They can be tiny, because when built appropriately, we're dealing in sizes like 1KB or 3KB rather than several hundred KB or even MB.
SVGs can even reduce the size of bitmaps. Check out this tool from Shaw: https://codepen.io/shshaw/full/LVKEdv
Can SVGs be built or used improperly? Definitely. Just like any other format or tool. You can't just use an SVG and pat yourself on the back and call it a day. If you don't want to muck around with it too much, tools like SVGOMG will get you a lot of the way there, though: https://jakearchibald.github.io/svgomg/
Are there images that shouldn't be SVG? Also definitely. An image with a ton of tonal variation isn't a good candidate for vector, probably even with Shaw's tool.
That said, SVG is an incredibly powerful format and if you want to level up your skills as a competent developer or create performant sites you can be proud of, it's worth taking a minute to learn about them.
Any tips for marketing yourself? Also, spaces or tabs?
Haha hi Denny!
Why did the marketer get off the trampoline? They were worried about their bounce rate!
1) Ok so I think the thing I try to keep to is to be genuine. Sounds cheesy, I know, but it's true. I don't talk about stuff that doesn't interest me, I try to put out there or signal boost stuff that I myself would want to see. If you do that, you're probably pretty likely to gather some likeminded folks or people that are interested in the same stuff that you're into. If you put out tweets that you yourself would hate seeing, wellllll... let's just say, you're not going to attract people you can even get along with.
2) Ok so here's the thing that I think is so funny about the spaces vs tabs thing. Nowadays, we all use these editors that, for the most part, are parsing things to be consistent for us.
So people who say they're spaces people are writing a tab to equal two spaces.
People who say they're into tabs are writing a tab, and that equals two spaces.
...do you see what I'm getting to? I think at this point in the game, a lot of us are just doing the same thing and arguing because we like the debate :)
Hey Sarah, thanks for doing this AMA - fellow Microsoft employee here!
What advice do you have on submitting talks to conferences to help a talk stand out among the rest? - Especially to someone (ok it's me :) ) who is only getting started with respect to giving talks.
Oh man, you would think I'd be better at this. Actually I really suck at it. Here's what I mean.
Two years ago I submitted 5 talks. All of them were rejected but one, to CSS Conf in Boston. They took a chance on me. If you look at the analytics for my site, it was a flatline until that event. I had under 1000 followers then. That talk kicked things off for me and I started being invited to events.
The following year I submitted 5 talks again. All were rejected. But I was invited to speak at something like 25 conferences.
This year I submitted to two conferences. Both were rejected. But I was invited to speak at over 50. I think you get the drift.
I think I'm actually probably really bad at writing CFPs, but thankfully, I'm a much better speaker.
Marcy Sutton is really good at submitting though, and she did a writeup full of suggestions. She's an excellent speaker and is often selected so I'd take her advice over mine any day: https://marcysutton.com/writing-winning-talk-abstracts/
When and what was your first big failure?
Hiya back! Oh I like this one.
I have millions of failures of course, anything you see from me probably has it's weight in failures behind it.
One big failure comes to mind. It wasn't my first, but I'm not sure I remember my first either.
Long before I worked for CSS-Tricks, I used CSS-Tricks as a resource. I was trying to find a way to better cache our favicon for this big company's site I worked on, and Chris had posted this snippet that allowed you to do so by updating the .htaccess (this was a wordpress site, which was a bit more ubiquitous at the time).
Well, I grabbed that there snippet and slapped it in, really proud of myself. It worked! BUT I did it too quickly and only realized after that the URL for the favicon snippet wasn't relative... but absolute. And now it was cached. I had just cached CSS-Trick's star favicon for my companies website for the next 3 months!! 😳 Nothing I could do could change this.
Luckily for me, the CSS-Tricks star is a pretty general image (not like, say, a company's name or something). Only a few people noticed. But it was pretty damn embarassing just patiently waiting and refreshing the page every day until eventually my mistake was written over with the correct image.
I really enjoyed your introduction to Vue.js series on FrontendMasters.com! Any chance we'll be seeing a new set of videos covering more advanced topics? If so, any topics in particular that you intend to cover?
As a follow-up, are there any resources you'd recommend for Vue.js users looking to bone up on architecture and patterns for larger Vue.js projects?
Hi Danny! Thanks so much! I worked pretty hard on that course so that feedback means a lot to me ☺️
I have a course on "Animating in Vue" that needs a little spiffying, but I really enjoy giving because it's nice to do a deep dive into the subject so that people can become animation superheroes in one day.
That's all I have on the table right now, but as I'm working on more Azure stuff, I'm getting pretty into Serverless, so it's possible that someday I'll do a course on Serverless with Vue :)
Good question on the architecture and patterns. The Vue team and I have talked about some more involved demos that could feasibly be part of the docs site. If you haven't already checked out the styleguide that they put out this week, definitely do so: https://vuejs.org/v2/style-guide/ Chris Fritz has been a hero with his efforts there.
Blake Newman is someone I believe to have really strong experience with larger Vue system architecture. I've looked up to his work with Vuex, and when I've worked on scaling, he's been extremely helpful with suggestions and examples. Definitely follow him if you aren't already doing so and pay attention to any resources he develops :)
Hi Sarah, I'm new to Vue and was wondering if you could pls provide any good resources online, for learning Vue? Thanks. Rgds, Tony.
Hi Tony! I made quite a lot of these to aid you in learning!
Here's a guide on CSS-Tricks (I have more articles on Vue on here as well): https://css-tricks.com/guides/vue/ Here's a course on Frontend Masters: https://frontendmasters.com/courses/vue/ Here's a repo full of learning materials: https://github.com/sdras/intro-to-vue
The Vue Guide itself is actually a wonderful resource. You could also go through that in an afternoon and get a taste: https://vuejs.org/v2/guide/
Hope that helps!
Love your work btw! Did you ever learn design in general or interaction design?
I love your work too! So, I don't have any formal training in design, I have more formal training in interaction design (in a way) because I took animation classes in college. Though that was more about the history of animation and cel animation than it was computer animation.
I have both my bachelor's and my master's degrees in fine art and I was a college professor for art for four years in the Greek Islands.
Art and design, though similar, are not the same at all, so I would say the things I worked on before have some impact on how I design a thing but I would still not call myself a designer. I have been doing web development for about 15 years so I feel more comfortable saying I'm a web developer even though I don't have formal training in that, either :)
Hi Sarah! What do you do in your leisure time?
My leisure time lately seems like total extremes. I'm giving a lot of talks this year so at least half or more of the time I'm traveling, and when I am, my leisure time is spent running around whatever city I'm in with fellow speakers, exploring or going out to nice dinners/drinks. That's so fun because the other speakers I have met have come to be really good friends. I have so much respect for them and a lot of them are funny as all get out. Except for Val Head.
The other half of the time, I'm chilling out with my fiance and our dog, half the time we have his three kids around and I love them to pieces. We'll do things like go to the park, or watch movies and code. I love to watch movies and code, that's how I recharge my batteries. I'm really quite good at chilling out, it's something I've had to cultivate for real.
Hi Sarah, thank you so much for doing this AMA.
A quick background story about my struggle with CSS:
I've always believed that given the right introduction and the correct set of tools, one can always pick up anything software engineering related and that's how I picked up backend engineering.
My journey with CSS, however, hasn't been quite the same. Truth be told, I just jumped into the code and started tweaking things. And, honestly, when I started I found it really hard and it used to piss me off when my designer told me to move items 10 pixels to the left and right, over and over again and I left CSS for good (perhaps a very juvenile decision as a young engineer back then).
Now, getting to the actual question: Right now, I am a full-fledged backend engineer and I look at all the UI engineers with pure amazement (and a little bit of jealousy :P).
I would love to do UI engineering as well at some point, so what would you recommend me to do to get started with it?
I would want to do it in a very systematic way, but I haven't really found the right tutorial and there are so many solutions to the exact same problem. Centering a div, for instance. It could be done in so many ways and I never figured out which is the right one. What would you recommend me to do?
Hi! Great question!
It's actually interesting because if you dig into your question here, you might find there's a contradiction- you want to learn systematically but have so far tried to learn by jumping in by tweaking things.
I'm not at all pointing this out to get on you, but because I think this is actually super common. The idea is that CSS is easy, and that it's a toy language. So people don't invest the time to learn it they did other programming languages and indeed, it doesn't even fit the same set of patterns for a lot of the programming languages we're all familiar with. So then people inevitably fail.
It would be a bit like learning React without learning what an object is. You can use any number of properties, but you need these fundamentals for any of it to really click.
Here is how I learned CSS (and when I say this, I'm not at all saying it was easy or that I just skipped through a field of daisies sprinkling display: block on them and singing to myself. Not even in a bumblebee costume - if you're old enough to get that Blind Melon reference.)
There's a lot of blind memorization that comes with time, and that's the low hanging fruit. It's font-size, not text-size. Stuff like that probably won't get in your way but you do have to commit to memory to be fluent.
In order to learn layout, the one single most important thing I've learned is to think like the browser. All too often when we're poking at CSS, we're responding to what the browser looks like it's doing. Why'd it go over there? Why did that wrap to another line? Why aren't the text and divs acting the same! Arrrgh! That kind of debugging will rightly drive you crazy and won't get you very far.
Learn the difference between a block level element and a span. They behave totally differently, and for good reason.
Learn the difference between different kinds of positioning. Learn what it means to leave something in, or to take it out of the document flow. Learn that position: absolute; on it's own is different from an absolutely positioned element inside of a relative container.
The sooner you dig into these mechanics, the less you will fight the browser, and the sooner you will make it bend to your will. Use the devtools heavily. Read resources from smart people like Chris Coyier, Rachel Andrew, Jen Simmons, Nicole Sullivan, Lea Verou, and Jonathan Snook.
Soon you'll see the order in the chaos. You won't see it the way that it appears on your screen, but the way that it's interpreted. This is the key.
I cheated and have 2 questions in one!
How's sudo? 🐕
What's a non technical skill/practice that has helped you the most in your career? (that fellow devs often don't realise/ignore)
Haha I don't mind the cheating
1) Sudo is fantastic and is the best puppy in the whole wide world and I'm not biased at all. Lately her farts have been terrible and the doctor thinks I'm feeding her too much cheese.
She's also startttttting to listen to commands so her name is kiiiiinda working so I'm excited for that!
And her bad haircut is growing out and she's back to looking like a little teddy bear. I'll tweet out a photo later :)
2) Ohhh good question. I would say that it's a good idea to do people favors. If someone needs help and you have the resources for it, try to help them. Aside from it being the "good human thing to do" thing, they will help you back if you need it most of the time. You never know when that will come in handy. We all get better from helping eachother. Also I think it makes seratonin or dopamine boost because I definitely feel better after. Maybe not during, depending on the task haha (I've helped people move before and nearly died) but always after.
1) With the introduction of Nuxt, what are your thoughts on Vue rendering everything that's template driven both on the Client side and the Server side? Possibly replacing twig, blade etc..
2) Any thoughts on how close Nuxt is to being production ready?
1) I'm two mimosas deep now so I'm going to cut to the chase: I LOVE NUXT! My thoughts are: it's awesome! I love working with it! Routing without ever stepping out of a vue file? Simple server side rendering? Everyone party down 🎉
2) Nuxt just reached 1.0 pretty recently. I've used it in production but I would say that it might be a little young for a giant system. I don't say that because it lacks integrity but rather because I think there are edge cases that people haven't made resources for yet or stack overflow questions to still be asked. All that said, I use it on a regular basis, and think it's worth kicking the tires on. I wouldn't be surprised if it becomes a major driving force in web development and a key player.
How do you work in animation to serious content? I work in the financial sector and I find it difficult to add animations to my work.
Excellent question! First of all, I think it's really key that animation be a core piece of the experience of the site that you're building, and not sugar on top. How can you use animation to guide your users? How can you use it to hide information that's not important, so that they don't need to visually grok everything at once, and then make it come when called?
I've written a few articles on exactly this subject because I really believe strongly in this: https://css-tricks.com/the-importance-of-context-shifting-in-ux-patterns/ https://24ways.org/2016/animation-in-design-systems/
I also gave a talk that dives into depth on the subject: https://www.youtube.com/watch?v=HaD5z2KqcGk
I hope that helps you on your way!
Hi Sarah. What do you honestly think of BEM? Both now, and in let's say... 2 years.
Hi Dave! Good question!
I don't use BEM much myself but I definitely see the value in it. It seems like you're spending a lot of time on naming but having rules for naming structure that points to the architecture means you actually have to spend less time deciding what to name things, not more. And that people can look at your class name and all of a sudden understand a lot of information. That's great naming. That said, I was more a fan of OOCSS approaches so that I wasn't typing quite as long and making use of mixins and nested classes for scoping and reuse.
I think some of the reasons we developed BEM have worked themselves out with some of the tools we have available to us. Personally, I've been super jiving on scoped styles in Vue. I'm still writing styles in a way that feels really comfortable to me, and they automatically exist with the same structure that BEM was somewhat abstractly creating with names.
If I had to make a bet, (and all this is is a bet), I would guess that people's interest in BEM itself will decrease, but it will become the foundation for some other tools or principles that will be very popular.
Hey Sarah, thanks for answering!
I pretty much think the same. We have a guy in at the moment who is so convinced about it, but all I see is a sledgehammer to crack a nut.
Loads of drawbacks for really very little gain IMHO, and yes, that's why I asked - I think it will be replaced pretty soon with better tools that play to CSS and HTML's (and now JS's!) strengths!
Thanks, take care
Hey Sarah! Thanks for being a great guide for all things VueJS! Really love your articles on css-tricks :) I had a question related to usage of icons: Which is the better approach for icons, font icons or SVG icons? Also, in case the latter, what would be the ideal tools for using SVG icons with VueJS?
Hi Sushant! Thanks for stopping by!
I definitely think SVG icons are a better choice than font icons, and I wrote out my thoughts about that recently:
- Icon fonts are hard to make accessible. SVG has the ability to add title and ARIA tags, which provide a huge boon to accessibility, particularly in cases when the icon is alone and a single source of informative navigation. Think: blind people, dyslexic people, the elderly (You will be elderly too someday, hopefully, so if you're not the kind of dev to care about this subset, do it for the karma! But seriously, care for the elderly.)
- Icon fonts aren’t as crisp on some displays. You can avoid this by doing some fancy font-smoothing in CSS, but here’s one caveat I’ve noticed: it’s difficult to override without turning font-smoothing off entirely. SVGs are more crisp in general, drawing is what they’re built for.
- Icon fonts fail a good amount of the time. Most developers I know have run into scenarios with missing glyph X in a box, there are a lot of ways that icon fonts can fail where SVGs do not. Be it CORS problems or Opera mini, it’s a headache.
- Icon fonts are difficult to position. They’re an image that you’re positioning with font styles. ‘Nuff said. You can’t animate pieces of them without hacky stacking. SVGs offer a navigable DOM to animate parts of an icon, or colorize sections. Not everyone would want to do this, but it sure is nice to have the option.
My typical way of working with them in Vue.js is to create them directly inline and make them their own component. I will add currentColor to the fill as the default but also expose this as a prop. This does a few things: 1) If they are inline, I'm saving an HTTP request 2) If they are inline, I can work with them with animation or interaction if I so desire 3) the currentColor fill will make it easy to style, as it will pick up the color of the text its surrounded by 4) exposing it in props means I can change the color of the icon easily as I need to. I can also add props for things like width and use the same image in different places, adjusting the size as necessary
I hope that's helpful! Let me know if you need any clarifications.
Thank you so much for such a comprehensive answer!
I totally got why I should use SVGs over font-icons. Easier positioning and browser compat (aka Opera Mini et all) are really good reasons (As is accessibility. I am going to get older someday..)
About the second part of your answer, creating them inline and making them their own component would result in tens of components, right? So how would you organise these? Or if not, am I missing something here?
Would there be some resource, article/codepen/etc. that I can refer to?
Hi Sarah. I have been enjoying following your work. I'm wondering what you see as some of the biggest challenges or pitfalls that come with the new kinds of UIs that are emerging, such as VR and AR? Are there lessons that VR and AR UI designers can learn from web UI developers?
This is a great question, a hard one to answer, so if you don't mind, I'll answer it in reverse. I definitely think that there are things that VR and AR designers can learn from web developers, partially because I think that all disciplines have things to learn from one another, but also because these two disciplines are so close that I think there's going to be a ton of crossover. If you haven't already been following the work of Josh Carpenter and his team, first at Aframe at Mozilla and now at Google, you should do so, because he's doing a lot of really great things breaking the barriers here. Aframe in specific is a wonderful tool for developers to have a low barrier to entry to for web developers to experiment in this space.
Because there are a lot of crossover, I think some of the mistakes we will inevitably make is trying to shoehorn a 2D experience into a 3D one, or simply bevel out the way that we think in 2D. It's not great, because 3D has so much to offer, but we have to give people this time, because we stand on our shoulders and it's difficult for us to imagine outside of what's come before.
Another big challenge will be inventing rules that protect people's privacy. If we already feel like we're being violated when someone hacks our information, or harasses us in two dimensions, what does that look like in three dimensions? I think there was a study done on this that actually caused someone real emotional harm. That's a thing. We're going to have to be aware of it as we move forward.
Yet another challenge is making it so that these experiences aren't limited to the priveleged. Whether that means progressive enhancement from 2D to 3D or building better devices so that using google cardboard didn't mean feeling sick because of low framerates, that will be something we'll have to pay attention to. Otherwise companies won't build 3D experiences because it won't reach a wide enough audience.
All that said, it's an incredibly exciting time for us. There's literally a whole world we just got access to. We haven't even hit the tip of the iceberg with it. We have uneven territory ahead, but I for one, welcome our new weirdly masked faced overloads.
Have you ever felt discriminated in this software development industry just for being a woman?
Hey, Sarah! Tremendous respect for the work you've been doing. Love from India. Any tools from the recent past that you're totally freaking out over?
Great question! There's another question somewhere in there about the tools I find really valuable. I think the one I've been like "this is so cool" about on a regular basis has been Nuxt. I love spinning up the basis of a whole application with server side rendering, routing, code splitting, without ever stepping outside of a vue file, all within a single terminal command. Pretty sweet! 🏆
You would have come across these #beginners question, Sarah.
1) What will be your suggestion/advice for a beginner in data viz?
2) Where to start as a data visualization developer?
3) What will be your recommendation on the learning resources for D3 for beginners apart from the official GitHub docs ;) ?
4) SVG or CANVAS? #futurePrespective
5) is D3 alone enough for dataWiz?
All awesome questions for getting started.
1) What will be your suggestion/advice for a beginner in data viz? Welcome! I would say my biggest suggestion is to learn what SVG elements are and what they do. Without that knowledge, you'll always be fumbling around with other people's visualizations instead of being able to abstract and create your own.
2) Where to start as a data visualization developer? I would say, work on a variety of small projects to start. It's easy to master one way of working, but at the get, building a lot of smaller things gives you a better sense of the abstractions you are using
3) What will be your recommendation on the learning resources for D3 for beginners apart from the official GitHub docs ;) ? You should check out Shirley Wu's d3 course on Frontend Masters? She's an excellent teacher, and she does a great job of really honing in on what's important to get you started. I also really loved this O'Reilly book, but I think it's being updated to v4 at this moment: https://www.amazon.com/Interactive-Data-Visualization-Web-Introduction/dp/1491921285/
4) SVG or CANVAS? #futurePrespective SVG and canvas, they both do different things. SVG are vector, so they are really wonderful for building and drawing shapes that are crisp on any display. Canvas are bitmaps, and are really great at a ton of data, or a lot of movement. I reach for each tool separately. Do I need it to be responsive and accessible? SVG. Do I want to make particles fly across the screen? Canvas. This is a generalization, but you get the drift 😉
5) is D3 alone enough for dataWiz? I think when you're starting out, D3 is just fine. D3 is an incredibly powerful library and it's become synonymous with data visualization for a good reason. Eventually, you'll learn the tools deeply enough that you can start to build it without D3 if you wish, or use other abstractions on top of it. I would, however, suggest learning GreenSock in parallel, because while D3 is great at transitioning some data from one form to another, there are some more sophisticated animation effects and tooling that GreenSock offers that D3 does not, and they play really nicely together.
I hope that helps!
You do a great job covering a wide variety of subjects and come across as immensely passionate about your work. Do you sleep?
Just asking, because... you know, got to watch out for the sneaky robot uprising.
This is a really great question. I would love to answer with something like "yes I'm a perfectly balanced individual and my body chemistry is in perfect harmony" ✌️
The real answer is that I'm a bit of an insomniac. If I start a project I'm really into, I won't sleep or I won't sleep well. I just kind of can't shut off my brain once it gets trained to a problem, which has served me well but has also, as you might imagine, been a problem. Especially when I know I really should get to bed and it would be more healthy for me.
This is definitely something I could stand to be better at :)
What advice would you give to your younger self?
Hmm, excellent question. This is going to be a weird one so bear with me. It won't sound like it's about development but it actually is.
For a long time I held on to relationships in my life that weren't the best thing for me. They were friendships that I had had for a long time, and I think when they started out, they were great! But over time they eroded. I was friends with people who were, at times, not very supportive of my career or my interests, and I made a lot of excuses for why I continued investing in them.
Finally, one day, I wrote down a list of all of the places I was putting my energy, and what I was getting in return. What I discovered from this exercise was that I was putting an uneven amount of investment in some people and projects that weren't investing back in me. I also found that there were a whole slew of opportunities that I was passing up! There were a bunch of relationships/efforts that were much more balanced and had far more even quantities of respect and growth.
I tried something. I tried investing in the things that were more equally weighted. I reduced the energy of the things that weren't.
My career turned into a rocket ship. I went from dreaming about all the projects I could make and all the conferences I could speak at to actually doing these things.
I don't mean to oversimplify this because life is really not that simple and you can't follow someone else's map. But for me personally, I wish I could go back in time and tell myself to do this exercise sooner. That the pain of letting something go is sometimes greater than trying to hold on to something that isn't right for you. Energy is finite, and we should be respectful of our own time. It gives proper weight to the people and projects that do deserve it.
With technologies such as Amazon Polly, how do you see voice and speech recognization influence the future of web apps?
Hi Emil, that's a great question. This particular technology has a lot of really great applications for people who are blind, or are differently abled.
In terms of using it for ease of use, I currently have a hard time with it. I'm freaked out about who can listen to me so tech like this gives me the real heebie-jeebies. But, I also prefer going to a real checkout person at the grocery store rather than the automated ones, so I might be the wrong person to ask. I think there's potential! And some potential that is pretty important.
All that said, I was skeptical of CSS when it came out. I just didn't understand the need for any styling of any kind. Soooo like, take what I say with a grain of salt.
Hey I dont know if you've already Bernard asked, but are you coming tout the web conf un april 2018 in Lyon, France ? Thanks
I can only reply to my own question so I hope you'll see this!
Here's the link: https://www2018.thewebconf.org/about/
I hadn't heard about it until recently but it seems to be something big, but it looks like it's more research oriented. I can't really tell as they are still looking for contributions and haven't given information about the content.
Also I just re read my first question and I realised my phone doesn't like when I type in english sorry about that :p
Big fan! Just wanted to know where do you get the inspiration to make such kickass SVG animations?
Also, if you had to choose one the best frameworks in terms of ease of learning, adaptability and super performance which one would you prefer?
PS. I'm very much biased towards Vue but I'd like to know your thoughts on all "big" 3.
Thanks for stopping by! My SVG Animations come from all over the place, but I would say, I'm usually interested in the technical aspect, so I'm trying to demo or try out some way of working with them. After I follow that curiousity carrot, the design just follows as whatever will get the point across either in the most clear way, or the most playful way, or both :)
In terms of the framework question, the first question in the thread kind of addressed this. I really love working with Vue as well and I think it's great for beginners but there are a lot of reasons to choose React as well. I haven't worked with Angular at all, and that's kind of intentional- less as a "this doesn't interest me" way and more in a "there's only so many hours in the day and if you want to learn something deeply you have to make a choice somewhere" kinda way.
Hope that helps!
Can a solo developer make and sell a Niche Saas products?
Damn straight. Most niche SaaS products began as glimmer in someone's eye, whether it be a developer or a product manager or what. Eventually you may find that there are only so many hours in the day and you have to scale your business. The emails themselves will do you in. Not to mention that if you hire or partner with people who have backgrounds parallel to your own, you'll cover more ground. But keeping lean at the start is smart, you'll be able to adapt quickly that way. Just be sure you have some people you can at least bounce ideas off of, you need sanity checks now and again.
Hi Sarah, thanks for doing an AMA!
Thanks for your time!
SVGs can indeed be more performant than bitmap animations such as .gifs, in fact, you can save many many megabytes by switching to SVG, and they can be accessible to boot. Heather Migliorisi wrote a great article on SVG accessibility for CSS-Tricks, you should definitely check it out!
Hello Sarah! Is it possible to build a native application with Vue.js GSAP + SVGs? If so, where would I start? Is there anything like create-react-app? What would be used to handle native gestures for sidebars and other animations?
So, it's totally possible to incorporate GSAP and SVGs into an application! Or even have them play a key role in your development. But they aren't a framework, they're an image format, and an animation API, respectively. The SVGs that you use will depend on what you want your site to look like, and this is one aspect of creating a site that most people will want to be quite different, so a template is less useful.
There's a lot you can do to create some native gestures on the web by pairing hammer.js and GreenSock, or using GreenSock's draggable. That said, I usually try to keep the thing that triggers the animation pretty simple, and leave the complex/beautiful part to the animation itself, partially because that's what really interests me and partially because I think that's what people really notice. (But I might just think that because it's what really interests me)
Thanks for stopping by!
What's your opinion on "everyone should learn to code" theory?
I think there's a lot of things to do with our limited time on this planet. Some things will interest you, some things will not. I don't think anyone should learn to code if it's not their thing. I do, however, think that some things that we think aren't are thing might be more up our alley than we think, given the right teacher and right environment. People will sometimes make false dichotomies of interests- if you're good at x, you can't do y. If you look at the history of people who have achieved great things, you'll find a trend that a lot of them didn't think this way. So it's good to check in with yourself and ask if you're staying away from something out of honesty or fear. I try to never make fear-based decisions.
I also think it's good to try your hand at whatever the job you're collaborating with. Not so that you can master it, but so that you can understand it well enough to speak the same language and get on the same page with people who need you to understand them. Whether that means learning some code or learning how things work, it can never hurt.
Have a great evening!
Sarah is an award-winning Speaker, Sr Cloud Developer Advocate at Microsoft, and Staff Writer at CSS-Tricks. She has given Frontend Masters workshops on Vue.js and Advanced SVG Animations.
The all-in-one cloud platform developers & their teams love. Get started free for 60 days.Learn more