DEV Community: Dan Netherton 👨‍💻

Do we need to know the magic?

Dan Netherton 👨‍💻 — Sun, 22 Sep 2019 07:44:22 +0000

I'm hoping to open up a bit of discussion here.

In my opinion, the current state of modern web development has a lot of "magic".

What I mean by magic is the running of commands or using software that does a lot of set up, scaffolding or triggers a build process etc with minimal knowledge required from the developer.

This magic is fantastic, it helps us get up and running quickly and allows us to focus on our apps or products and not get delayed having to understand or set up complex environments and configurations.

However, every time one of these magic commands fails or does not reflect the readme verbatim I can often find myself on Google for hours trying to debug and understand what went wrong.

My question is, does anyone else experience this and does it make you feel like an imposter? How important is having a working knowledge of these package managers and scaffolding applications?

Would love to know everybody's thoughts. 👍

Every developers 'oh my god I get it' moment.

Dan Netherton 👨‍💻 — Thu, 26 Apr 2018 10:03:56 +0000

So recently, I've been working on my personal project cssgr.id using vanilla JS. The code uses a lot of different objects and arrays and I needed to use Array.reduce() for something.

For some reason, I've never quite understood how this method worked. Something inside my brain didn't quite grasp it, but...with a few (a lot of) console logs I finally got it working how I needed it to and moved on to my next task.

After coming back to the code the next day and reading through what I'd done previously, it just...clicked! I understood how reduce() worked! I finally grasped what it was doing with my data and why it returned the values it did. This is what I'm referring to in the title as the 'oh my god I get it' moment.

I remember having a similar experience when first using GIT and working with branches. I even had it when first learning how to nest rules in SCSS!

I'm really interested to know firstly, if anyone else has experienced these awesome moments during their work, and second, what it was for you that just 'clicked'!

Introducing cssgr.id - an interactive CSS grid boilerplate code generator

Dan Netherton 👨‍💻 — Tue, 24 Apr 2018 09:20:57 +0000

So, at the moment, it seems like you can't go anywhere on the web without seeing articles, tutorials and snippets about CSS grid.

With this in mind, I've put together a simple tool which aims to help developers of all skill levels and experience to generate some quick boilerplate code for their projects that need layouts powered by CSS grid.

Why?

So why did I make this? Cssgr.id was created out of necessity for me and my own projects. I found myself looking to use CSS grid based layouts in a number of different projects and when these projects started to require more complex layouts (requiring multiple column and row spans) I found it took me quite a long time to generate just the base code for the grid.

I wanted a way to create my layouts visually, grab some mark up and build upon it afterwards.

So what can it do? (at the moment)

At the moment you can do the following:

Choose the number of grid items
Set the number of columns for the grid
Control the grid gap between items
Set the max width of the entire grid
Toggle lorem ipsum text within the grid items
Set howe many columns an individual grid item can span
Set how many rows an individual grid item can span
Get the HTML and CSS code for the grid you've created

What will it do? (in the future...)

In the future I'm looking to add more and more features, including but not limited to:

Setting the alignment of grid item content using align-content and justify-content properties
Allow the option to use grid-auto-flow
Allow the option to set min and max width of grid items
Create inline-level grids using display:inline-grid

I'd love to know everyones thoughts on this tool and if you think you will find it useful either now or in the future with your projects?

There are plenty of bugs in here I'm sure so if you see any just let me know and I'll aim to fix them when I can!

cssgr.id