Front end development is an ever-evolving profession with new processes and skills to absorb and implement as the web grows. There are always cool new ways to do things and it’s a community of passionate people sharing great information that can almost be impossible to keep up with at times. No matter how many Twitter lists you make/keep or how many times to you hit refresh on your various devices, it’s just tough (to say the least) to always see and keep up with all the things!
Today, I took a step back and decided to look through my notebook (yes, an actual notebook with paper and ink on it) and pull together a bunch of sites I’d come across in the last couple months that I thought were particularly interesting. These are the ones I found myself actually going back to check out (as opposed to those bookmarks that sometimes fall into the abyss).
Hiding Things with CSS
It’s hard as a front end dev not to constantly scope all the amazing things CSS-tricks has to offer, but sometimes I forget to check out the videos section. They’re obviously much more content and production heavy so they’re not nearly as frequent as the written post content. I found this one particularly on hiding things with CSS interesting because more often than not using display:none is my go-to when I need to hide something from the screen. However, it’s not always the best way to go about it (I’m fully aware), especially when it comes to assistive technology like screen readers for example.
I found this to be an informative and useful alternative for doing things better when it comes to showing and hiding certain content. There is a time and place for display:none, for sure, but not always. Chris Coyier details it all out in this video. Using opacity in combination with visibility is a useful alternative solution for hiding/showing elements, but as always, it depends on exactly what it is you’re trying to accomplish. Definitely worth checking out the video, as well as other articles mentioned in it.
Introducing the U.S. Web Design Standards
At the end of this past September, 18F and the U.S. Digital Service (USDS) released their collaborative effort the U.S. Web Design Standards. It’s a really well done site with lots of really good information. It will serve to help to keep things more consistent across the board, as well as reduce and simplify overly complex situations.
Again, this is a great resource because their are so many parts to account for when building a site and having something like this resource to reference for your own projects and team projects helps serve as both a guide and checklist to make sure you’re including all the important elements and techniques into any website, including accessibility items. I also really like the recommendations outlined here for choosing a front end framework (but that’s a discussion for next time!).
For more information (and to look through all the code!), check out the below to see it all in action:
Bourbon, Neat, and Bitters
Last year when we began incorporating Bourbon/Neat into our wd_s theme, I wrote a getting up and running Bourbon Neat. While certainly still relevant, I stumbled upon this guide from the team over at Git-Tower that has a Bourbon, Neat, and Bitters tutorial. It’s pretty thorough and hands on, and it’san awesome refresher for seasoned developers. It’s also straightforward and easy to follow along for beginner devs as well.
If videos are more your style for learning or if you’d like an additional resource to accompany the one from Git-Tower, definitely checkout this YouTube playlist/code course by PHPAcademy where they go in depth and discuss a number of features. While it’s from last year, it’s still very relevant and worth checking out. It’s a six part series and only takes about forty-five minutes from beginning to end.
Using and Caching 3rd Party JSON with WordPress
This may not sound like a front end resource for some front-end developers, and depending on how you/your team works it may not be something you interact with often. That said, I’m always trying to push myself to learn more and get outside my comfort zone; it’s always frustrating when you get stuck, but when you see the light at the end of the tunnel it’s always rewarding and a cool feeling.
I thought this was a really good tutorial for getting started–at least for front-end developers who may not have come across this particular resource or haven’t interacted much with JSON in their day to day workflow. The video isn’t terribly long, but definitely worth a look:
What The FlexBox
I know I’ve added a lot of resources, tips, and tricks related to the Bourbon/Neat suite, so I wanted to mention one last item that I hope you find interesting and useful. As the web continues to evolve and supporting older browsers becomes less of a difficult task, I thought I’d mention this video series by Wes Bos and Flexbox. It’s twenty videos in all and a good primer for Flexbox–check it out.
Flexbox is already available as a mixin in Bourbon and there is some discussion about introducing it into Neat at some point as noted here. It will certainly be interesting to see what happens down the road.
Hopefully you’ve found one or more of these great resources already–or if you hadn’t, I hope you found them useful. This obviously isn’t a comprehensive list–just a few recent things I came across that I found myself going back to a few times (or more accurately, ones I’ve written down and not completely forgotten). I’m sure there are other great ones–if you have some to share, feel free to drop them in the comments!
I still find the fact that the US has design standards. About time.
Thanks for link to Bourbon, Neat, and Bitters. That is a new one to me and I enjoyed reading it.