Implementing SASS with Webpack – Part 1

My CSV converter project that I’ve been working on is a test-bed for learning some key development workflows such as using Pull Requests, implementing JavaScript modules and one of the most useful of those – using Webpack to bundle project files.

When I first started the project it consisted of the following files:

  • index.html
  • style.css
  • app.js

That was it! It was nice and simple but didn’t really do much so this was perfect. The question is, what if I was working on a far more complicated app that would benefit from splitting the files into modules, the styles into multiple files for each module and so on? I could just import every module and style file into my project – this is okay but isn’t really good in the real world aka “production”.

You will eventually want to take all those files and optimise them into a much more compact codebase with fewer files. Why? So that your 50 individual files don’t all use 50 HTTP requests when loading the page from the server. The idea of bundling is to take every one of those files that you work on while developing and with a simple set of tools and a command to then bundle all of that for you into fewer files and therefore fewer HTTP requests.

This just touches the tip of the iceberg since the bundling tools will also allow you to compress, minify and make various other changes such as implementing SASS or SCSS to your code and then making it production ready all in a single command.

Maybe I’ll come back and write more about webpack another time but for now, I’m learning how to implement SASS, so in the next part of this series we will start discussing how that works.

Interested in finding out when the next part get’s published? Why not subscribe to this blog?

TIL: Passing parameters to callback functions

Today I tried to move an Event Listener callback function to it’s own module. It seemed simple enough. Take the following code example:

app.js

element.addEventlistener("submit", (event) => {
  event.preventDefault();
});

Now, my callback was a little more complex so it made sense to move to a module. The question then became why it didn’t work when I tried the following:

app.js

element.addEventListener("submit", eventHandler(event));

eventHandler.js

function eventHandler(event) {
  event.preventDefault();
}

I would get an error from app.js saying that event is not defined. After a little research I discovered on the MDN guide for addEventListener that you need to pass parameters using an anonymous function. My eventHandler() was fine – the issue was in the way I passed the parameter to the function in the callback. To fix it this was the solution:

app.js

// Arrow function syntax
element.addEventListener("submit", (event) => {
  eventHandler(event);
});

// Full function syntax
element.addEventListener("submit", function(event) {
  eventHandler(event);
});

Edit: turns out there is an even simpler approach when you’re only sending a single parameter – just don’t add the parameter to the callback function at all. This is also valid and you will still be able to access the parameter in the callback:

element.addEventListener("submit", eventHandler);

The second is even harder

So, I started this blog with the intention of putting thoughts and experiences of learning somewhere. The thing that I quickly realise in my learning journey is the challenge of figuring out what I don’t know.

I have “dabbled” in development (PHP, JavaScript and a few others) over many years and learned a lot along the but much of it was never coherent knowledge. So then if I can’t figure out what I don’t know, how can I know if I’m good enough yet?

There are only so many times you can take a beginners course or even struggle through an intermediate course while thinking “I know this stuff, but I’m not confident so I’m clearly not ready” before I lost my way a little. I’ve started and restarted courses many times but each time I come back to it I feel lost again. Then the imposter syndrome sets in and I mentally put myself in the “still learning, not ready” category.

I have learned task runners, local development environments, loops, site migrations, database manipulations and so much else over the years that I often question if I really know as little as I think but then actually try to develop something, get overwhelmed and give up to pursue the next project that hasn’t lost me yet!

What is different this time? I’m not alone and I have a plan. I have a mentor, friends reviewing my code, I’m planning my project out before I even begin to write any code and so I have a framework to follow. The best part? It’s working!

I haven’t felt this confident in my learning journey in a long time. So I encourage you, if you’re struggling to progress in your learning – get a plan, collaborate on your code, find a mentor, find a friend. Get your code on Github or some other version control system and get them to comment on your code as issues or pull requests. You will feel far better and have somewhere to get your internal criticism out into the open to allow others to encourage you instead.

Feel free to check out the current learning project I’m working on!

The first post is the hardest

Why do this blog? To make myself write thoughts and process what I learn as I grow my ability as a developer. I plan to write, even if it’s small and even if someone else wrote a better post about what I learned.

Why public? I work for Automattic – a fundamentally distributed organisation who also make incredible Open Source software. We code in the open – you can find much of our code, issues and discussions publically so, why not learn to embrace that? Maybe someone will also learn something valuable along the way. Even if they don’t, I’ll still become a better blogger!

Edit: how could I forget – we’re pretty heavily about WordPress so why wouldn’t I blog with it?

I have no idea what I’ll post just yet so let’s enjoy the ride together. What I do know is that I plan to write a post at least once every month to start.

Also…this post was written using the “Introduce yourself (Example post)” posts that are on WordPress sites by default. Whoever came up with that – you are amazing.