Javascript

Intro to Svelte

Published Jun 8, 2021

Updated Feb 14, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Intro to Svelte

Svelte is a JavaScript tool that may look similar to other frameworks, or have similar concepts, but it works differently, making it stand out from the rest. Svelte is reactive by nature, and instead of using a virtual dom, it will directly update the DOM in an efficient way.

It is possible to achieve this by delegating its work to a compile step, which will make the framework itself "disappear", and will ship some optimized vanilla JavaScript code.

Let's take a look at an example of a Svelte component.

<!-- App.svelte -->
<h1>This is Svelte</h1>
<p class="omg">It looks like regular html</p>

As you can see, at a first glance, it is no different than plain old HTML (for a non-dynamic component). You can keep using the class keyword.

Let's add some CSS to our component.

<!-- App.svelte -->
<h1>This is Svelte</h1>
<p class="omg">It looks like regular html</p>
<p class="styled">CSS rocks!</p>

<style>
  h1 {
    font-size: 30px;
  }
  .styled {
    color: red;
  }
</style>

Once again, this looks like regular CSS, and that's because it is regular CSS.

How about adding some JS to it?

<!-- App.svelte -->
<script>
  function logSomething(something) {
    console.log(something);
  }

  logSomething('it works');
</script>

<h1>This is Svelte</h1>
<p class="omg">It looks like regular html</p>
<p class="styled">CSS rocks!</p>

<style>
  h1 {
    font-size: 30px;
  }
  .styled {
    color: red;
  }
</style>

So, we have HTML that looks like HTML, CSS that looks like CSS, and JavaScript that looks like JavaScript, all packed in a single svelte file.

Of course, this is not everything Svelte has to offer.

How to start a new Svelte project

To start a svelte project, you can use the command npx degit [sveltejs/template](https://github.com/sveltejs/template) my-svelte-project as suggested on their website, but my preferred way of doing it these days is to use vite.

Both methods can be set up to use TypeScript.

Let's create a new project.

npm init @vitejs/app

✔ Project name: · my-svelte-project
✔ Select a framework: · svelte
✔ Select a variant: · TypeScript

cd my-svelte-project
pnpm install //use the package manager you prefer
pnpm run dev

Now that our project is created, it will have a folder structure that looks like this.

How do you do x in Svelte?

Let's create a new component to be able to test different features of Svelte. I will remove the default component created (Counter.svelte)

rm -rf src/lib/Counter.svelte     // removes the component created by default
touch src/lib/Example.svelte      // creates a new svelte component

We need to update App.svelte to import our new component and render it

<!-- App.svelte -->
<script>
  import Example from './lib/Example.svelte';
</script>

<Example />

Using variables in the template

To use a variable in the template we need to: Declare a variable in our <script> Use the variable within brackets {} in the template

In our component:

<!-- src/lib/Example.svelte -->
<script lang="ts">
  let greeting: string = 'Hi';
</script>

<p>{greeting}</p>

If you run the application with the command npm run dev, the project will start, and run by default on port 3000. Changes will be reflected in the browser.

props/inputs

To create an input we need to export a variable.

<!-- src/lib/Example.svelte -->
<script lang="ts">
  export let name: string;
  let greeting: string = 'Hi';
</script>

<span>{greeting}, {name}</span>

We will need to update our App to pass the value of name.

<!-- App.svelte -->
<script>
  import Example from './lib/Example.svelte';
</script>

<Example name="John" />

Event

You can listen to events with the on directive.

Let's add an event to our span element in the Example component.

<script lang="ts">
  export let name: string;
  let greeting: string = 'Hi';

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }
  }
</script>

<p>{greeting}, {name}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>

You can now see the text changing when clicking on the button.

Sometimes you will need to pass a custom event from a child component to a parent component. To trigger a custom event we need to import and use the createEventDispatcher method.

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }
  }

  function toggleName() {
    dispatch('myCustomEvent');
  }
</script>

<p>{greeting}, {name}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>

We need to update our App component too, to do something with the event.

<script>
  import Example from './lib/Example.svelte';

  let name = 'John';
  function onMyCustomEvent() {
    if (name === 'John') {
      name = 'Jane';
    } else {
      name = 'John';
    }
  }
</script>

<Example {name} on:myCustomEvent={onMyCustomEvent} />

This event can pass data using the second argument in the dispatch method.

<!-- src/lib/Example.svelte -->

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }

    let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
  }

  function toggleName() {
  	let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
    dispatch('myCustomEvent', nextName);
  }

</script>

<p>{greeting}, {name}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>

<script>
  import Example from './lib/Example.svelte';

  let name = 'John';
  function onMyCustomEvent(event) {
    name = event.detail;
  }
</script>

<Example {name} on:myCustomEvent={onMyCustomEvent} />

Now the Example component is emitting an event with the new name. And the App component is handling it.

Reactivity

One of the main features of svelte is that it makes reactivity so easy to reason about.

To include a reactive statement, you need to prepend it with $:. The compiler will figure out when it should update the reactive values based on the variables that it depends on. In our previous example:

<!-- src/lib/Example.svelte -->

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  $: reactiveValue = `You're saying ${greeting} to ${name}`

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }

    let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
  }

  function toggleName() {
  	let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
    dispatch('myCustomEvent', nextName);
  }

</script>

<p>{greeting}, {name}</p>
<p>{reactiveValue}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>

In this example, reactiveVlaue is dependant on name and greeting. Whenever any of these values changes, reactiveValue will be updated.

Reactivity in Svelte will be triggered by assignments, which means that it's required to assign a value to make it work. Array.prototype.push is not an assignment, so it will not work.

Flow control

if/else You can change your template rendering based on some condition use if else. The syntax looks like this

{#if <condition>}
	some code
{:else if}
	more code
{:else}
	more code
{/if}

The syntax is similar to other template modifiers. start with {# }, continue with {: } and end with {/ }.

each You can iterate over an array with an each block.

{#each anArray as item, i}
<span>{item.name}{/span}
{/each}

When iterating this way and modifying the array, items will be added or removed at the end of the block, and the values of the items will be updated accordingly.

If you need to keep track of each element, you can use a key. This is common for other frameworks too.

The syntax for this is:

{#each anArray as item (item.id)}
<span>{item.name}{/span}
{/each}

where the id is the unique key in this example.

Asynchronous rendering

Sometimes, you need to wait before rendering something (or not). We can make use of an async block in this case. Similar to the other template modifiers, the syntax is like this.

{#await aPromise}
	<p>Somthing to render while promise has not resolved
{:then value}
	<p>If the promise is successful you can render the value: {value}</p>
{:catch error}
	<p>There was an error: {error.message}</p>
{/await}

Stores

Another nice feature of svelte is stores, which provides a way of having global pieces of state in your application. They can be accessed anywhere in your application, and are reactive.

A readable store cannot be modified from the outside (like a component). A writable store can be accessed and updated from a component. The third kind of store is a derived store, which will depend on other stores, and update accordingly.

Let's share some state between components using a store:

// lib/stores.ts
import { writable } from 'svelte/store';

export const age = writable(32);

<!-- src/lib/Example.svelte -->

<script lang="ts">
  import { createEventDispatcher } from 'svelte';```
  import { age } from './stores.js';

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  $: reactiveValue = `You're saying ${greeting} to ${name}`

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }
  }

  function toggleName() {
  	let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
    dispatch('myCustomEvent', nextName);
  }

   function toggleAge() {
   	age.update(value => value === 32 ? 35 : 32);
  }

</script>

<p>{greeting}, {name}</p>
<p>{reactiveValue}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>
<button on:click={toggleAge}>Toggle Age</button>

<!-- src/lib/Age.svelte -->

<script lang="ts">
  import { age } from './stores';
</script>

<span>Your age is: {$age}</span>

<script>
  import Example from './lib/Example.svelte';
  import Age from './lib/Age.svelte';

  let name = 'John';
  function onMyCustomEvent(event) {
    name = event.detail;
  }
</script>

<Example {name} on:myCustomEvent={onMyCustomEvent} />
<Age />

Svelte is a fully-featured framework that shifts some of the load to the compiler process. There's more to it like animations and context. So make sure to keep an eye on it, and give it a try whenever you can.

Sapper

Sapper is a framework built on top of Svelte, which adds more to it like router navigations, SSG, and SSR. It never reached v1.0, but it led the way for the future of Svelte.

Svelte-Kit and the future

Announced last year, Svelte-Kit takes what's learned in Svelte and Sapper, and combines them into one single tool/framework, so you don't have to decide to either use Sapper or regular Svelte. It preserves the main features of Sapper, like file-based routing, SSR, and SSG. It's still in Beta, but you can try it today. (I already migrated a Sapper site). Svelte-Kit uses Vite by default.

If you want to give it a try, you can start a new project by running npm init svelte@next my-app.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Ignacio Falk
I love to learn new things and share what I know. Mentor, Writer, Speaker Member of the local community
@flakolefluk @flakolefluk

D1 SQLite: Writing queries with the D1 Client API

Writing queries with the D1 Client API In the previous post we defined our database schema, got up and running with migrations, and loaded some seed data into our database. In this post we will be working with our new database and seed data. If you want to participate, make sure to follow the steps in the first post. We’ve been taking a minimal approach so far by using only wrangler and sql scripts for our workflow. The D1 Client API has a small surface area. Thanks to the power of SQL, we will have everything we need to construct all types of queries. Before we start writing our queries, let's touch on some important concepts. Prepared statements and parameter binding This is the first section of the docs and it highlights two different ways to write our SQL statements using the client API: prepared and static statements. Best practice is to use prepared statements because they are more performant and prevent SQL injection attacks. So we will write our queries using prepared statements. We need to use parameter binding to build our queries with prepared statements. This is pretty straightforward and there are two variations. By default we add ? ’s to our statement to represent a value to be filled in. The bind method will bind the parameters to each question mark by their index. The first ? is tied to the first parameter in bind, 2nd, etc. I would stick with this most of the time to avoid any confusion. ` I like this second method less as it feels like something I can imagine messing up very innocently. You can add a number directly after a question mark to indicate which number parameter it should be bound to. In this exampl, we reverse the previous binding. ` Reusing prepared statements If we take the first example above and not bind any values we have a statement that can be reused: ` Querying For the purposes of this post we will just build example queries by writing them out directly in our Worker fetch handler. If you are building an app I would recommend building functions or some other abstraction around your queries. select queries Let's write our first query against our data set to get our feet wet. Here’s the initial worker code and a query for all authors: ` We pass our SQL statement into prepare and use the all method to get all the rows. Notice that we are able to pass our types to a generic parameter in all. This allows us to get a fully typed response from our query. We can run our worker with npm run dev and access it at http://localhost:8787 by default. We’ll keep this simple workflow of writing queries and passing them as a json response for inspection in the browser. Opening the page we get our author results. joins Not using an ORM means we have full control over our own destiny. Like anything else though, this has tradeoffs. Let’s look at a query to fetch the list of posts that includes author and tags information. ` Let’s walk through each part of the query and highlight some pros and cons. ` * The query selects all columns from the posts table. * It also selects the name column from the authors table and renames it to author_name. * It aggregates the name column from the tags table into a JSON array. If there are no tags, it returns an empty JSON array. This aggregated result is renamed to tags. ` * The query starts by selecting data from the posts table. * It then joins the authors table to include author information for each post, matching posts to authors using the author_id column in posts and the id column in authors. * Next, it left joins the posts_tags table to include tag associations for each post, ensuring that all posts are included even if they have no tags. * Next, it left joins the tags table to include tag names, matching tags to posts using the tag_id column in posts_tags and the id column in tags. * Finally, group the results by the post id so that all rows with the same post id are combined in a single row SQL provides a lot of power to query our data in interesting ways. JOIN ’s will typically be more performant than performing additional queries.You could just as easily write a simpler version of this query that uses subqueries to fetch post tags and join all the data by hand with JavaScript. This is the nice thing about writing SQL, you’re free to fetch and handle your data how you please. Our results should look similar to this: ` This brings us to our next topic. Marshaling / coercing result data A couple of things we notice about the format of the result data our query provides: Rows are flat. We join the author directly onto the post and prefix its column names with author. ` Using an ORM we might get the data back as a child object: ` Another thing is that our tags data is a JSON string and not a JavaScript array. This means that we will need to parse it ourselves. ` This isn’t the end of the world but it is some more work on our end to coerce the result data into the format that we actually want. This problem is handled in most ORM’s and is their main selling point in my opinion. insert / update / delete Next, let’s write a function that will add a new post to our database. ` There’s a few queries involved in our create post function: * first we create the new post * next we run through the tags and either create or return an existing tag * finally, we add entries to our post_tags join table to associate our new post with the tags assigned We can test our new function by providing post content in query params on our index page and formatting them for our function. ` I gave it a run like this: http://localhost:8787authorId=1&tags=Food%2CReview&title=A+review+of+my+favorite+Italian+restaurant&content=I+got+the+sausage+orchette+and+it+was+amazing.+I+wish+that+instead+of+baby+broccoli+they+used+rapini.+Otherwise+it+was+a+perfect+dish+and+the+vibes+were+great And got a new post with the id 11. UPDATE and DELETE operations are pretty similar to what we’ve seen so far. Most complexity in your queries will be similar to what we’ve seen in the posts query where we want to JOIN or GROUP BY data in various ways. To update the post we can write a query that looks like this: ` COALESCE acts similarly to if we had written a ?? b in JavaScript. If the binded value that we provide is null it will fall back to the default. We can delete our new post with a simple DELETE query: ` Transactions / Batching One thing to note with D1 is that I don’t think the traditional style of SQLite transactions are supported. You can use the db.batch API to achieve similar functionality though. According to the docs: Batched statements are SQL transactions ↗. If a statement in the sequence fails, then an error is returned for that specific statement, and it aborts or rolls back the entire sequence. ` Summary In this post, we've taken a hands-on approach to exploring the D1 Client API, starting with defining our database schema and loading seed data. We then dove into writing queries, covering the basics of prepared statements and parameter binding, before moving on to more complex topics like joins and transactions. We saw how to construct and execute queries to fetch data from our database, including how to handle relationships between tables and marshal result data into a usable format. We also touched on inserting, updating, and deleting data, and how to use transactions to ensure data consistency. By working through these examples, we've gained a solid understanding of how to use the D1 Client API to interact with our database and build robust, data-driven applications....

Dec 23, 2024

6 mins

JavaScript

Svelte 5 is Here!

Svelte 5 was finally released after a long time in development. Fortunately, we've been able to test it for some time, and now it has a stable release. Let's dig into its features and why this is such a significant change, even though Svelte 4 code is almost 100% compatible. Svelte syntax everywhere This is one of my favorite additions. Previously, Svelte syntax was limited to a component element. Refactoring code from a component and moving it to a JavaScript file worked differently. Now you can use the .svelte.js or .svelte.ts extension, which allows you to use the same syntax everywhere. It's important to note that it's a way to express that this is not just JS, and what you write may be compiled to something else, just like .svelte files are not just html even though they look very similar. Runes The introduction of runes is one of the most significant changes in Svelte. Many users felt attracted to variables being instantly reactive in previous versions. ` There was, however, a lot of magic underneath and a considerable amount of work from the compiler to make it behave reactively. $state In Svelte 5, a reactive variable has to be explicitly declared using the $state rune, which brings a clear distinction between what is reactive and what isn’t. ` In the previous code, $state is not an actual function being called; it's a hint for the compiler to do something special with this declaration. Rune names always start with a dollar sign ($) and do not need to be imported. However, there’s much more to the changes than just the way we declare reactive variables. Runes bring a lot of new features that make Svelte 5 a great improvement. In Svelte 5, objects or arrays use Proxies to allow for granular reactivity, meaning that individual properties in an object are reactive, even if they are nested objects or arrays. If you modify a property, it will only update that property and will not trigger an update on the whole object. It also supports triggering updates when methods like array.push are called. In previous versions, an assignment was required to trigger an update: ` To have a similar behavior of svelte 4 (no deep reactivity), use the $state.raw() rune. This syntax of .* is common for related features of a rune: $state.raw() will require an assignment to trigger reactivity. ` Because proxies are used, you may need to extract the underlying state instead of the proxy itself. In that case, $state.snapshot() should be used: ` $derived We will use $derived and $derived.by to declare a derived state. The two runes are essentially the same, except one allows us to use a function instead of an expression, allowing for more complex operations to calculate the derived values. ` $effect Effects are useful for running something triggered by a change in state. One of the things you'll note from the $effect rune is that dependencies don't need to be explicit. Those will be picked from reactive values read synchronously in the body of the effect function. ` Something to bear in mind is that these dependencies are picked each time the effect runs. The values read during the last run become the dependencies of the effect. ` Depending on the result of the random method, foo or bar will stop being a dependency of the effect. You should place them outside the condition so they can trigger reruns of the effect. *Variants* of the effect rune are $effect.pre, which runs before a DOM update, and $effect.tracking(), which checks for the context of the effect (true for an effect inside an effect or in the template). $props This rune replaces the export let keywords used in previous versions to define a component's props. To use the $props syntax, we can consider it to return an object with all the properties a component receives. We can use JavaScript syntax to destructure it or use the rest property if we want to retrieve every property not explicitly destructured.. ` $bindable If you want to mutate a prop so that the change flows back to the parent, you can use the $bindable prop to make it work in both directions. A parent component can pass a value to a child component, and the child component is able to modify it, returning the data back to the parent component. ` $inspect The $inspect rune only works in dev mode and will track dependencies deeply. By default, it will call console.log with the provided argument whenever it detects a change. To change the underlying function, use $inspect.with().with): ` $host The host rune gives access to the host element when compiling as a custom element: ` ` Other changes Another important change is that component events are just props in Svelte 5, so you can destructure them using the $props() rune: ` A special children property can be used to project content into a component instead of using slots. Inside the components, use the [@render[(https://svelte.dev/docs/svelte/@render) tag to place them. ` Optional chaining (?.) prevents from attempting to render it if no children are passed in. If you need to render different components in different places (named slots before Svelte 5, you can pass them as any other prop, and use @render with them. Snippets Snippets allow us to declare markup slices and render them conveniently using the render tag (@render). They can take any number of arguments. ` Snippets can also be passed as props to other components. ` ` Conclusion Some exciting changes to the Svelte syntax were introduced while, at the same time, maximum compatibility efforts were made. This was a massive rewrite with numerous improvements in terms of performance, bundle size, and DX. Besides that, a new CLI has been released, making the whole experience of starting a project or adding features delightful. If you haven't tried Svelte before, it's a great time to try it now....

Nov 27, 2024

4 mins

Svelte

Overview of the New Signal APIs in Angular

Overview of the New Signal APIs in Angular Google's Minko Gechev and Jeremy Elbourn announced many exciting things at NG Conf 2024. Among them is the addition of several new signal-based APIs. They are already in developer preview, so we can play around with them. Let's dig into it, starting with signal-based inputs and the new matching outputs API. Signal Based Inputs Discussions about signal-based inputs have been taking place in the Angular community for some time now, and they are finally here. Until now, you used the @Input() decorator to define inputs. This is what you'd have to write in your component to declare an optional and a required input: ` With the new signal-based inputs, you can write much less boilerplate code. Here is how you can define the same inputs using the new syntax: ` It's not only less boilerplate, but because the values are signals, you can also use them directly in computed signals and effects. That, effectively, means you get to avoid computing combined values in ngOnChanges or using setters for your inputs to be able to compute derived values. In addition, input signals are read-only. The New Output I intentionally avoid calling them signal-based outputs because they are not. They still work the same way as the old outputs. The Angular team has just introduced a new output API that is more consistent with the latest inputs API and allows you to write less boilerplate, similar to the new input API. Here is how you would define an output until now: ` Here is how you can define the same output using the new syntax: ` The thing I like about the new output API is that sometimes it happens to me that I forget to instantiate the EventEmitter because I do this instead: ` You won't forget to instantiate the output with the new syntax because the output function does it for you. Signal Queries I am sure most readers know the @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren decorators very well and have experienced the pain of triggering the infamous ExpressionChangedAfterItHasBeenCheckedError or having the values unavailable when needed. Here is a refresher on how you would use these decorators until now: ` With the new signal queries, similar to the new input API, the values are signals, and you can use them directly in computed signals and effects. You can define the same queries using the new syntax: ` Jeremy Elbourn mentioned that the new signal queries have better type inference and are more consistent with the new input and output APIs. He also showcased a brand new feature not available with the old queries. You can now define a query as required, and the Angular compiler will throw an error if the query has no result, guaranteeing that the value won't be undefined. Here is how you can define a required query: ` Model Inputs Jeremy and Minko announced the last new feature is the model inputs. The name is vague, but the feature is cool—it simplifies the definition of two-way bindings. Until now, to achieve two-way binding, you would have to define an input and an output following a given naming convention. @Input and @Output had to be defined with the same name (followed by "Change" in the case of the output). Then, you could use the template's [()] syntax. ` ` That way, you could keep the value in sync between the parent and the child component. With the new model inputs, you can define a two-way binding with a single line of code. Here is how you can define the same two-way binding using the new syntax: ` The html template stays the same: ` The model function returns a writable signal that can be updated directly. The value will be propagated back to any two-way bindings. Conclusion The new signal-based APIs are a great addition to Angular. They allow you to write less boilerplate code and make your components more reactive. The new APIs are already in developer preview, so you can start playing around with them today. I look forward to seeing how the community will adopt these new features and what other exciting things the Angular team has in store for us, such as zoneless apps by default....

Apr 3, 2024

3 mins

AngularJavaScript

“Music and code have a lot in common,” freeCodeCamp’s Jessica Wilkins on what the tech community is doing right to onboard new software engineers

Before she was a software developer at freeCodeCamp, Jessica Wilkins was a classically trained clarinetist performing across the country. Her days were filled with rehearsals, concerts, and teaching, and she hadn’t considered a tech career until the world changed in 2020. > “When the pandemic hit, most of my gigs were canceled,” she says. “I suddenly had time on my hands and an idea for a site I wanted to build.” That site, a tribute to Black musicians in classical and jazz music, turned into much more than a personal project. It opened the door to a whole new career where her creative instincts and curiosity could thrive just as much as they had in music. Now at freeCodeCamp, Jessica maintains and develops the very JavaScript curriculum that has helped her and millions of developers around the world. We spoke with Jessica about her advice for JavaScript learners, why musicians make great developers, and how inclusive communities are helping more women thrive in tech. Jessica’s Top 3 JavaScript Skill Picks for 2025 If you ask Jessica what it takes to succeed as a JavaScript developer in 2025, she won’t point you straight to the newest library or trend. Instead, she lists three skills that sound simple, but take real time to build: > “Learning how to ask questions and research when you get stuck. Learning how to read error messages. And having a strong foundation in the fundamentals” She says those skills don’t come from shortcuts or shiny tools. They come from building. > “Start with small projects and keep building,” she says. “Books like You Don’t Know JS help you understand the theory, but experience comes from writing and shipping code. You learn a lot by doing.” And don’t forget the people around you. > “Meetups and conferences are amazing,” she adds. “You’ll pick up things faster, get feedback, and make friends who are learning alongside you.” Why So Many Musicians End Up in Tech A musical past like Jessica’s isn’t unheard of in the JavaScript industry. In fact, she’s noticed a surprising number of musicians making the leap into software. > “I think it’s because music and code have a lot in common,” she says. “They both require creativity, pattern recognition, problem-solving… and you can really get into flow when you’re deep in either one.” That crossover between artistry and logic feels like home to people who’ve lived in both worlds. What the Tech Community Is Getting Right Jessica has seen both the challenges and the wins when it comes to supporting women in tech. > “There’s still a lot of toxicity in some corners,” she says. “But the communities that are doing it right—like Women Who Code, Women in Tech, and Virtual Coffee—create safe, supportive spaces to grow and share experiences.” She believes those spaces aren’t just helpful, but they’re essential. > “Having a network makes a huge difference, especially early in your career.” What’s Next for Jessica Wilkins? With a catalog of published articles, open-source projects under her belt, and a growing audience of devs following her journey, Jessica is just getting started. She’s still writing. Still mentoring. Still building. And still proving that creativity doesn’t stop at the orchestra pit—it just finds a new stage. Follow Jessica Wilkins on X and Linkedin to keep up with her work in tech, her musical roots, and whatever she’s building next. Sticker illustration by Jacob Ashley....

Apr 25, 2025

3 mins

JavaScriptSoftware Engineering

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Intro to Svelte

Intro to Svelte

How to start a new Svelte project

How do you do x in Svelte?

Using variables in the template

props/inputs

Event

Reactivity

Flow control

Asynchronous rendering

Stores

Sapper

Svelte-Kit and the future

Ignacio Falk

You might also like

D1 SQLite: Writing queries with the D1 Client API

Svelte 5 is Here!

Overview of the New Signal APIs in Angular

“Music and code have a lot in common,” freeCodeCamp’s Jessica Wilkins on what the tech community is doing right to onboard new software engineers

Let's innovate together!

You might also like

D1 SQLite: Writing queries with the D1 Client API

Svelte 5 is Here!

Overview of the New Signal APIs in Angular

“Music and code have a lot in common,” freeCodeCamp’s Jessica Wilkins on what the tech community is doing right to onboard new software engineers