Starting from scratch

Somehow feeling that most of the web development tools these days are complex. I understand that there are reasons for it, but still. Have been trying and comparing a lot of different boilerplate projects.

Most of them are too complex for no so good reason. Often it does not make sense to start from the scratch. There has to be balance between overloaded feature jungles and emptiness of a new directory.

Reply in Twitter made me think.

Maybe I don’t have to. It might be good to ‘just do it without extra tools’. Maybe this ‘npm package for everything’ –movement has gone too far. Especially, considering that people use a lot of other tools besides of it.

CodePen is a wonderful place for web technology experiments. Recently did a bit of practice there, for improving my design and development skills. First thing I created was SVG Icons with CSS filter & hover effect. A good reason to try new tools and libraries. In the example, I used Evil Icons SVG icon pack as a base for the pictures. On top of those, did use CSSGram library of CSS-based Instagram filters from Una Kravets. Not all of the filters worked with the set of icons, but many of them did.

Made a new version few hours later. Though to ‘clean up’ it a bit and rewrote the plain HTML markup to Jade template engine’s syntax.

Jade template language allows you to loop trough set of variables. In this case, generating different variations from the same set of icons.

End result was a lot of more icon versions. Had to limit the number of icon sizes (of iconsize variable). The JavaScript–based template library was generating too many elements at the same time. It did cause web browser to freeze for a moment. Smaller amount of images would make sense. Reducing amount of values was easy. Modified the pictures –variable to only generate large versions. If there are smaller amount of icon pictures, it could make sense to have all size versions of them.

In the end, learned a lot of new things. Features of a template language made it easy to generate many different design alternatives. Useful thing in itself. Code generation makes sense for Style Guide Driven Development. It allows to make better tools.

Try to keep things simple as possible.
Only add complexity if it reduces the amount of work by a large margin.

What is next for me?
More learning, more writing about it.

Stay tuned for the next episode.

Show your support

Clapping shows how much you appreciated Daniel Schildt’s story.