Last week we were lucky enough to have Tiffany Brown join us on the SitePoint forums for her live Q&A on CSS Animations.
I think it’s fair to say that with over 2,200 views, it was pretty successful! In case you missed it, I’ve compiled the highlights from the event for your reading pleasure.
Tiffany is a freelance developer based in Los Angeles. She’s the author of CSS Master and co-author of Jump Start HTML5. Before becoming a freelance developer, she was part of the Opera Developer Relations team and has worked in small agencies within Atlanta. Tiffany now spends her days educating the world in web development through her written books, blog, and articles.
Getting Started
Q: I am an instructor at a community college. I have been asked to research and lay out a web development AAS (2-year degree) for web development. There are so many things to choose from, that I am overwhelmed when trying to lay out the curriculum. Any advice on a path for students to learn Web Development? I thought:
- HTML/CSS
- JavaScript/jQuery
- SQL
The main problems are which tools to use, frameworks, CMS, etc?
Kelle (staff): Hi Suzy, I can only really offer advice on the front-end side of things but I would think that basic HTML and CSS are an excellent place to start. With JavaScript, I think it’s always better to learn vanilla JavaScript first, and then introduce libraries so that students understand the difference between a language feature and library functionality.
Also helpful is pointing them towards the right resources, MDN is a great API reference I wish I’d had when I started out, for example.
Tiffany: I think that’s a good path. HTML and CSS. I’d say teach JavaScript fundamentals rather than jQuery (or teach jQuery as part of JavaScript). SQL is still widely used, so that’s a good addition. I’d also add a server-side programming language:
- Ruby and its Rails framework,
- Python and Django, and/or
- PHP + the Laravel framework.
It’s also helpful to teach basic server configuration: Nginx or Apache. Roll a version management tool into the curriculum, ideally as part of a class on something else.
Q: Thank you so much. Vanilla JavaScript is a fantastic idea. How do you feel about Angular, Ember and Backbone?
Kelle (staff): Ember and Backbone are tricky because they require a pretty decent JS background to use them well, in my opinion.
Angular is quite good for beginners, especially if they’ve taken the time to understand the fundamentals of the language beforehand. One of the good things about Angular (or bad depending on your perspective, but good for learning purposes), is that it comes bundled with a bunch of helpful things that ease people into some of the more important ideas in modern front-end development.
At SitePoint we use React almost exclusively, so I’m pretty biased about view frameworks; it’s definitely a steeper learning curve however!
Guest: Fantastic Advice. I am so grateful. Thank you for responding. Do you have a recommendation for a version management tool?
Tiffany: I’d recommend Git or Mercurial. SVN is another option, but it isn’t a pleasant one. There are services that offer one or more of them, and students can sometimes get free plans. Do a Google/DuckDuckGo search for hosted Git or hosted Mercurial and you’ll find a bunch.
Q: This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all. CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (jQuery most of the time), so it looks to me that if you want to learn one, you have to learn the other.
Tiffany: You can definitely write CSS animations or transitions that work independently of JavaScript. Animations and transitions can be triggered by :hover, :focus, or :checked states. In many cases, however, you’ll need to add or remove a class name in order to trigger an animation/transition. So, yes, you’ll need to learn at least a little bit of JavaScript (but just a little bit).
Library Recommendations
Q: What CSS animation libraries do you recommend? I use Animate.css
Tiffany: Animate.css is the best-known, and furthest along, so that’s what I recommend. I am keeping an eye on Effekt.css though. It’s part of the HTML5 Boilerplate project. In my projects though, transitions have generally been enough.
Q: Hi, would you recommend using Hover.css? Or why not?
Tiffany: Hover.css is a library that I haven’t looked at closely enough to have an opinion about. It’s good that each item is self-contained. It let’s you cherry pick which parts to use and it has some clever animations too. I’m neither for nor against it.
Animation Performance
Q: Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?
Tiffany: You can use animation on any device with a browser that supports it. If the device has a slower processor, you could conceivably run into some issues. But that’s something that (hopefully) you’ll discover during testing.
Now, if your audience includes a lot of Opera Mini users, do make sure that your animations and transitions use a fallback. Opera Mini doesn’t support transitions or animation of any kind, whether CSS or JavaScript.
Continue reading %Animation Advice from a CSS Master%
by Angela Molina via SitePoint
No comments:
Post a Comment