DEV Community: Musab

Understanding Svelte: Setting Up Your Project and Mastering .svelte Files

Musab — Sun, 21 Apr 2024 21:19:24 +0000

Introduction

I’m very much in the midst of my Svelte knowledge refresh, and to share my learnings with you effectively it would be most prudent to start by walking through the setup of a Svelte project and understanding the role of a .svelte file - where the magic happens!

A word about SvelteKit…

SvelteKit is the easiest way to start developing with Svelte. SvelteKit is a framework built on top of Svelte that simplifies the development of fast and interactive web applications. It provides tools and features for managing pages, layouts, and routing, ensuring efficient performance. SvelteKit offers a comprehensive set of development tools, including server-side rendering, file-based routing, and API endpoints, all seamlessly integrated. This allows us developers to focus on building the application rather than managing complex configurations. SvelteKit is to Svelte what Next.js is to React (for those who are familiar with React).

Setup

Setting up a SvelteKit app is straightforward, and you can get started with just a few commands. Here’s a simple guide to help you set up a new SvelteKit project and an overview of what the repository will contain (note: I highly recommend you check SvelteKit documentation for the latest setup instructions).

Setup Instructions

First, make sure you have Node.js installed.
Open your terminal or command prompt and run the following command to create a new SvelteKit app:
```
npm init svelte@next my-sveltekit-app
```
Replace my-sveltekit-app with whatever you want to name your project.
Change to your project directory:
```
cd my-sveltekit-app
```
Install the necessary dependencies using npm:
```
npm install
```
Run the following command to start the development server:
```
npm run dev
```
This will run your app locally on a server, typically accessible at http://localhost:3000 in your web browser.

What's Inside the App Repository

src contains all the source files essential for your project. This includes the routes folder, which contains the pages and endpoints of your application. The structure of files and folders within this folder directly maps to the application's routing; for example, a file named about.svelte maps to the /about route. Additionally, there is a lib folder, intended for reusable libraries and utility functions that support the broader application. The directory also contains app.html, the main template file where Svelte components are dynamically injected.
static directory is for static assets like images, fonts, or plain JavaScript files that don’t need processing.
svelte.config.js is the configuration file for SvelteKit. This file includes settings for how your app is built and run.
package.json and package-lock.json handle project metadata and the list of dependencies, respectively.
node_modules is a directory that contains all of your project’s npm packages.
.gitignore specifies intentionally untracked files to ignore (like node_modules).
Finally, depending on your setup, you might have other config files for tools like ESLint, TypeScript, Tailwind etc.

This structure provides a solid base for developing complex applications with clear routing and organisation, making it easy to scale up and manage as your project grows.

What is the `.svelte` file

A .svelte file is a component file used in Svelte applications, and it's where much of the "magic" of Svelte takes place. These files are the building blocks of a Svelte app, allowing you to define structure, style, and behaviour in a single cohesive place. Here’s a breakdown of what goes into a .svelte file:

JavaScript: The script tag within a .svelte file contains the component's logic. This can include data properties, computed properties, and functions. The JavaScript in a .svelte file directly manipulates the component's state and handles its reactivity. Svelte compiles this script into highly efficient imperative code that updates the DOM when the state changes.
HTML: The template section of the component, written in regular HTML. This is where you define the structure of your component, like any other HTML file.
CSS: Styles specific to this component. Any CSS styles written here are scoped to the component, meaning they won't affect other elements outside this .svelte file unless explicitly intended. This helps in managing styles without worrying about conflicts across the application.
Reactivity: Svelte simplifies reactivity, primarily through the use of the '=' operator to automatically update the DOM when a variable changes. This basic method is part of a straightforward syntax. I will explore more of Svelte's reactivity approaches in the next post.
Exports: Components can export variables and functions, making them available for use by other components. This is how you can pass props (properties) into components and interact with them.

Here’s a simple example of what a .svelte file might look like:

<script>
  let count = 0;

  function increment() {
    count += 1;  // Automatically updates the DOM wherever `count` is used
  }
</script>

<h1>Count: {count}</h1>
<button on:click={increment}>Increment</button>

<style>
  h1 {
    color: purple;
  }
</style>

In this example:

The <script> block defines a count variable and a function to increment it.
The HTML structure displays the count and a button that, when clicked, calls the increment function.
The <style> block scopes its CSS to just this component, ensuring the <h1> tag is styled as defined only within this component.

Closing Remarks

Svelte opens up a world of possibilities for “easily” creating interactive and efficient web applications. With its intuitive syntax and component-based structure, Svelte, and by extension SvelteKit, offer a streamlined approach to web development that both beginners and seasoned developers come to appreciate.

As I continue to delve into the capabilities and features of Svelte in future posts, I encourage you to experiment with the concepts and examples shared today. Dive into the documentation, tinker with the code, and see firsthand how enjoyable Svelte is to work with. Whether you're building a small personal project or a large-scale application, the simplicity and power of Svelte are sure to make the development process a rewarding experience.

Happy coding, and see you in the next post!

Learning Svelte & SvelteKit

Musab — Sun, 31 Mar 2024 16:43:01 +0000

During my Northcoders software bootcamp, a mentor introduced us to the State of JS survey, an annual survey that measures the preferences of JavaScript developers, exploring widely used frameworks, favoured frameworks, and those gaining popularity. At the time, we were learning React.js, which I found somewhat challenging. Despite React’s popularity and widespread usage, the survey revealed that another framework, Svelte.js, scored higher in terms of developer preference and popularity.

Intrigued by this finding, I dedicated some time after completing the bootcamp to learning basic Svelte and used it to build my first portfolio site. I found it much easier to pick up compared to React, and it was a joy to work with. However, my foray into working with Svelte was short-lived as I landed a job and became busy with the responsibilities that came with it.

Now, with the goal of building a few Micro-SaaS projects, I recognise the need to refresh my front-end knowledge. I have decided to dive deeper into Svelte.js to further my understanding. To start, I’m following a tutorial by Vercel that covers all the fundamental concepts of SvelteKit which is the equivalent of Next.js for Svelte — once I have a solid foundation I’ll begin building.

Throughout my learning journey, I’ll write posts / articles on the key concepts of Svelte / SvelteKit as a means of consolidating my knowledge. If you’ve never used Svelte before, I highly recommend exploring it. It’s very easy to set up and most importantly you’ll be pleasantly surprised by its unique (and straightforward) approach to reactivity.

In my next post I’ll cover more about how Svelte handles reactivity. If you have used Svelte, let me know your thoughts in the comments!

TypeScript and the NOT (!) operator in the context of an if statement

Musab — Thu, 14 Sep 2023 21:42:05 +0000

A quick write up on better understanding of the ! (NOT) operator in JavaScript / TypeScript.

I had to find a way to stop a null value from progressing to the next statement in a TypeScript file.

In order to do this I used the ! operator as follows:

const name = await doingsomethingasync

\\"name" can be a string, number or null
\\The if statement below catches the null value keeping TypeScript happy!

if (!name){
    throw new Error("name is null") 
}

So what's happening here exactly?

Placing a ! infront of a value does two things

The value gets coerced to a boolean
It then gets inverted

So, if name is a string, as a coerced boolean it evaluates to true (remember JavaScript truthy and falsy), inverting it means the statement !name will evaluate to false.

Likewise, if name is a number, it's coerced to a boolean which evaluates to true, then inverts to false.

However, if name is null, it's coerced to a boolean evaluation of false (remember null is falsy value), when inverted it will evaluate to true.

This approach ensures the if statement targeting the null condition will only execute when name is null, permitting a continuation of the program otherwise.

All in all, ! is thoroughly useful tool to have in the toolbox.

Solving File Path Errors in Node.js: Lessons Learned

Musab — Tue, 28 Feb 2023 12:23:42 +0000

Working with file paths in Node.js can be tricky and can cause errors if not handled correctly. In this article, I'll discuss the issues I faced while comparing CSV files and how I resolved it.

Background

I was comparing two CSV files using a JavaScript Node.js tool I created, where I used the built-in fs module and a well-known CSV parser library called csv-parser. The plan was to parse the files and compare them programmatically.

const fs = require("fs");
const csv = require("csv-parser");

const currentProducts = [];

fs.createReadStream("../../../../Downloads/current_products.csv")
  .pipe(csv())
  .on("data", (data) => {
    currentProducts.push(data["Product ID"]);
  })
  .on("end", () => {
    console.log(currentProducts);
  });

The Issue

While executing the above code, I encountered the following error:

Error: ENOENT: no such file or directory, open '../../../../Downloads/current_products.csv

Troubleshooting and Simple Fix

After some debugging, I realised that Node.js uses the current working directory for resolving file paths rather than the location of the actual script file. In my case, the script file was located in a different directory than the one I was executing the code from.

To fix this issue, I had two options:

Ensure that the current working directory (cwd) is the same as where the script is located, and then run the file.
OR Use absolute paths / environment variables for the file paths.

I chose the second option by using the path module to create an absolute path for me.

const fs = require("fs");
const csv = require("csv-parser");
const path = require("path");

const currentProductsFile = path.resolve(
  `${__dirname}`,
  "../../../../Downloads/current_products.csv"
)

const currentProducts = [];

fs.createReadStream(currentProductsFile)
  .pipe(csv())
  .on("data", (data) => {
    currentProducts.push(data["Product ID"]);
  })
  .on("end", () => {
    console.log(currentProducts);
  });

path.resolve() resolves a sequence of paths or path segments into an absolute path. It's useful when working with file paths, providing a reliable way to get the absolute path of a file or directory regardless of the script's location.

__dirname in Node.js is a global variable that represents the directory name of the current module.

Best Practice

It's always a good practice to know the current working directory of the script, which can be checked by logging process.cwd(). It's also recommended to use absolute paths or environment variables to ensure that the code works reliably across different directories and machines.

The Node.js path module is a great tool to help with building paths, so it's worth checking out.

In summary, when working with file paths in Node.js:

Remember that Node.js executes from the current working directory.
Relative paths will resolve based on the current working directory.
A way to check the current working directory is to log process.cwd()
Try to use absolute paths or environment variables to avoid issues like this.
The Node.js path module can help with building absolute paths.

By following these best practices, you can avoid errors and ensure that your code works reliably across different directories and machines.

Why am I pursuing a career in software development?

Musab — Sun, 01 Jan 2023 01:42:05 +0000

In October 2022 I started on a software development bootcamp with Northcoders. My final week of this incredible journey falls on the first week of Jan 2023, a perfect way to welcome in the New Year. I start 2023 on the lookout for a junior developer role equipped with a host of practise based software development skills thanks to
Northcoders.

So why did I choose software development?

1) I love using technology

Mine isn’t a story of falling in love with programming at 7 years old.. rather it’s been a gradual process that has brought me here. I never delved into “coding” or “programming” per-se up until recently but I have always taken a liking to technology, I’d go as far as saying I am a self-confessed technophile when it comes to technology as an end-user. Off the shelf ready to use software has always been a large part of my life, I have always enjoyed learning, adopting and finding new ways to utilise it in a personal or work capacity.

2) Circumstances cause a rethink

What I did not consider or do, is learn how to code my own scripts / programs / software even with my continual interest in technology. Regularly reading about the shortage of software developers in the public domain eventually led me to explore this field in more depth. I dabbled a little here and there with some very basic scripting, HTML and JavaScript but never really considered changing career paths up until I came across... software development bootcamps.

The timing of this discovery was perfect if anything as I was at the point in my career where the trajectory did not look appealing and I was actively looking into options for a career change alongside all the other things one has to consider with such a move.

Keeping my options open I decided to investigate a few different IT roles which had a low enough barrier to entry and had viable re-skill options for me to complete. I considered the following paths:

IT Administration
QA Testing
Software Development
Data Analysis / Engineering
Digital Marketing

3) The working environment

But I kept coming back to software development - Why? The day to day work of designing, building, fixing and maintaining software was the most appealing out of all the above roles. The working conditions, especially the flexibility was also appealing. Additionally, once I had developed strong foundational knowledge I could start working on areas of personal interest / build useful personal projects of which I have a few ideas for.

4) Future proofing my career

Lastly, there is constant evolution in the technology sector - the software development field itself is so vast and perpetually growing that one can spend a joyful lifetime working, learning, creating, exploring and sharing. Not to mention all the important off-shoots such as dev-ops, cloud-engineering, cyber-security etc that one can pursue after some well-grounded experience.

A note:

“*Give a person a fish, and they will be hungry again tomorrow; teach a person how to fish, they will never be hungry again”*

Why I chose to study with Northcoders:

It is a well established and respected boot-camp, the testimonials speak for themselves both from past students and employers who hire Northcoders graduates.
The curriculum is designed around employer needs, more importantly they work on building strong foundational knowledge thereby equipping us graduates with the ability to adopt different technology stacks.
It is local to me, which allowed me to attend in-person at their Leeds office every so often.

I’m thoroughly grateful to the teaching team at Northcoders. it has by no means been an easy journey starting with little to no knowledge to equipping me with the necessary skills for building these two projects on my own - a back-end project and a front-end project. I'll be finishing Northcoders by working on a full-stack final small-team based project due to be showcased on the 06/01/2023. It has been a truly rewarding experience and I will be leaving knowing “how to fish”, how superb is that!

And finally,

Thank you for taking the time to read about my journey to becoming software developer :)

If your reading this and are on the lookout for a junior developer, please do get in touch with me! I’d love to explore and consider any relevant opportunities!