What I learned this week #
BEM (block, element modifier, CSS)
I started playing with BEM on a smaller project and really like it. It fits well with SASS and nesting and is also easy to read. All of my projects in the past have used the object-oriented style or atomic pattern style where we try and use re-usable components such as .btn.btn-wide. However, this seems to cause issues on projects that get large and start to have custom styles, running out of and memorizing unique class names over time. The one thing I don't like about BEM is how long class names can be but this could be overcome in production with minifying CSS names or scoping CSS to modules
CSS Grid #
Wes Bos has a great YouTube series on how to use CSS grid and I started working with this. I am very familiar with floats, displays and some flexbox but wanted to keep ahead and start using CSS grid as much as I can. Once I understood CSS grid, it feels a lot more natural and predictive than floats. The debugging tools for CSS grid in Chrome and Firefox are also really nice.
Destyle.css #
Destyle.css is another way to reset the default browser styles. It has a really great comparison of how it looks compared to normalize.css and Eric Myer's reset. Destyle.css should allow less of having to zero out and reset things as you code and more of starting from a blank slate.
Docker #
I got a quick Docker WordPress site setup on my local machine. I enjoy how quickly it was to get started based on some basic configuration. I used David Yeiser's article and configuration. I have and use Vagrant almost daily and would like to broaden some of this experience into Docker. I would still like to explore deploying docker and using it for production.
What I want to learn #
There are quite a few things I have some experience in, either in a small project or starting a tutorial. I feel comfortable using them with reference material but want to be able to work efficiently with them with little reference needed. Some of the technologies and frameworks I am currently interested in having more expertise in include:
- Webpack
- React
- GatsbyJS
- GraphQL
- GSAP (Green sock animations)
Building landing pages with modern tools #
I found this Github repo which I have been using to rapidly develop static pages for landing pages or quickly mess with SASS or CSS grid. Sometimes I need to quickly prototype or develop something and this is a great starter for that. It also includes Browsersync, which is a huge plus.
static-html-webpack-boilerplate
I would like to eventually fork it and add other common starting points that I use.