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!

Hi Loic!

I don't think I know this event! Do you have a link? I should say upfront that I'm trying to do a bit less speaking/conference traveling next year, but happy to hear more

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

Hi Sara!

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 Roberto!

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!

Hi Amer!

I'm copy/pasting this directly from my editor, Meg Foley: "Both Google books, and http://ebooks.com offer DRM-Free PDF formats."

Thanks.

Hi Saransh!

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.

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!

Aaarrghhh I haven't gotten to listen to it yet! I will! I will I promise! 🙈

Hi Patrick!

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: css-tricks.com/the-importance-of-context-shifting… 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!

I have no idea what that is! I'm a traditional nerd in that sense I suppose :)

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.

There are a lot of tools like Vue's scoped styles. CSS-in-JS is like this, CSS Modules, it's precursor. All have their place. I think there will probably be some developments in the direction of organizing CSS outside of JavaScript tooling along with what we're making with frameworks, because the web is a big tent and frameworks aren't the right answer for everyone.

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.

Hi Vinayak!

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!

Hi Danny! Thanks for stopping by.

To answer your question: Yep! I sure have. It's a shame, too, because I'd hope that my contributions to the industry would overshadow something as arbitrary as gender. Seems we still have some growing to do.

Hi Tyler!

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: marcysutton.com/writing-winning-talk-abstracts

Hi Siddharth!

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!

Awww Tylerrrrr thank youuuu 💚

Same to you!! 🙌

Hi Nightwalker

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.

Good luck!

Oof, you're here for the dicey questions huh? I give you props. Get it? Props? Ok anyways...

The truth is, I like working with both of them, and I still use React, even though I'm super down with Vue. I think they're both amazing tools for frontend and I feel lucky that as a developer I get to live in an age where JavaScript is a veritable playground. So instead, I'm going to tell you what I think shines most for me about both of them. This isn't even going to be comprehensive, either.

React has an amazing ecosystem and community. Want a React tool? Someone made it. Want to improve that tool? They're looking for contributions. People are so creative with what they make with React, and if you're looking for help, the community is more than happy to answer questions. That's a pretty damn exciting thing to be involved in. React also has done a good job of not getting so far away from the metal- that is to say that there's a lot you're learning about JavaScript itself while you're working with it, and that's valuable.

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 Victor!

I think there's some confusion here. SVG animations are usually using an SVG in tandem with CSS and JavaScript, they aren't separate concerns. SMIL (the native SVG animation spec) doesn't have a good promise of support so people rarely reach for it anymore.

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!

https://css-tricks.com/accessible-svgs/

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. amazon.com/SVG-Animations-Implementations-Respons…

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!

Hi David!

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.

Hi David!

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?