Level up your web development skills through guides, side projects, interviews and a community comprised of awesome self-taught devs from around the world. Become a dev hero. For free.

The place for self-taught developers to level up

Chat and discuss solutions with a growing community of developers.

Venture by Small by design

Career

Tutorials

Company

Learn web development

Matt Swanson

A full-stack developer who also likes to build side projects outside of his full-time job. We also talk about code, stimulusJS and career progression.

Hey Matt! Can you quickly introduce yourself?

Hey! I’m Matt Swanson - I identify with the “full-stack” label because I sit in the weird intersection between engineering, product, and design. I’m primarily a software engineer, but I’ve focused all my career on building products and developing a good design sense.

I live and work just outside of Indianapolis, IN. Lately in my free time, I’ve been listening to podcasts on long walks and discovering my new favorite music genre: retrowave.

What was it like studying Computer Engineering?

I was extremely lucky to have some great opportunities to learn more about engineering, even while in high school. My high school has a “technical vocational” school attached and I was able to take electives in things like AutoCAD, digital electronics, 3D printing, and computer networking. In addition, I joined our school’s FIRST Robotics team. All of these experiences helped me decide that I wanted to pursue some kind of engineering job.

But I was not very much into programming when I enrolled at university. In fact, I didn’t really like it much at all in some of my intro-level engineering courses. Partially because we learned coding by learning C and Fortran (yes...Fortran was taught in 2006).

What were the biggest benefits of going to university and studying Computer Engineering?

I think a huge benefit of going through a rigorous engineer program is that you build problem solving habits and get experience working through difficult tasks. Skills like stating your assumptions and working incrementally and checking progress all along the way are key concepts that are super valuable in my work now, but might not be obvious since they don’t show up directly in the curriculum.

I didn’t really know that I wanted to pursue a career in software development until I took a class about scripting that taught Python and where the projects shifted from more academic examples into real-world examples. The final project for that class was to build an IRC chat client with Python. After that, I was hooked and started shifting more and more of my classes into programming-related topics and away from digital electronics and circuit design.

Learning to code by yourself/bootcamp vs CS degree?

Bootcamps and the wealth of learning resources were not as prevalent when I was going through school, but I’ve worked with several people that have taken the route at my job. I think there is a bit of bias in the success stories from bootcamps in that the people that can get up to speed quickly are generally very driven and usually have an existing background in some other field. But certainly I think it’s a viable alternative.

Both paths have downsides: CS grads may have good fundamentals, but lack experience with more relevant technologies that will be used in the workplace. Bootcamp grads have more experience with certain tools, but may have to play catch up when it comes to more abstract concepts.

How did you start working at SEP and what were the challenges in the start?

I did an internship at SEP after my junior year at school. I got to work on a real client project (a web app for monitoring performance of aircraft engines and tracking maintenance). I was part of a team of around 10 people. It was a great learning experience. After graduating, I interviewed with a few more companies, but ultimately I liked the “small company” feeling at SEP and joined full-time.

In order to get the internship, I had to do one of the dreaded whiteboard interviews. I was able to solve the problem, but once I joined SEP and learned what the pool of potential interview questions was, I realized that of the three questions they pick, I got the only one that I was confident I could answer!

The biggest thing I struggled with early on in my career was adapting to working in codebases that were large and had been running for a long time. In school, you are generally doing small projects and you “throw them away” at the end of the assignment.

In the real-world, you have to deal with legacy code, systems that you don’t understand, and know how to navigate a complex domain. Now try doing all of that while also still learning the fundamentals of building software!

What does a normal day at your job look like nowadays?

Projects at SEP typically last 12-18 months. Right now, I’m leading a small project team of two engineers that is building a knowledge base for tracking patient access to oncology (cancer) and rare disease drugs. I’m doing a little bit of everything: talking with our client, talking with our users, writing code, learning about the US healthcare system, designing features (product-level decisions, UI mockups), reviewing code, making GitHub issues, writing release notes and project updates.

I love wearing many hats and being able to help small teams do big things.

What are the not so obvious differences between junior and senior developers? What should a junior dev start thinking about?

I think as you grow as a developer you first are just trying to get something working, then you’re trying to make the code good, but as you become more senior, you try to see if you can avoid writing the code at all.

Especially in my context of custom software projects, code can sometimes be a liability as much as an asset. Thinking about what the codebase or product will look like 3-5 years down the line is a perspective that I think is important to develop over time.

The biggest piece of advice I would give to someone just starting in the field is to figure out what kind of projects you like working on. At the surface-level, this could be what tech stack or frameworks you like. But really think about whether you like working at a product company, or a consulting agency, or inside of a non-software business.

Do you like small teams? Big teams? Do you like interacting with customers? You can end up working with your dream stack, but be miserable at work if you’re not in the right environment for your own preferences.

Could you explain why you are a fan of StimulusJS for folks who haven't tried it before?

StimulusJS is part of a larger set of tools produced by Basecamp. Typically, you would use StimulusJS alongside Ruby on Rails and Turbolinks to get some of the benefits of a client-side SPA (snappy page loads) with still writing backend code that renders HTML.

11 years of development experience

Mario Laurich

Mario Laurich is a software engineer from Germany who is currently building a YouTube channel with free tutorials and courses about front-end development, specialising in Vue.js

I live in Germany with my wife and little son and try to spend as much time as possible with my family. I do my best to keep everything in balance. Concentrating on just one thing in life doesn't feel right for me.

The first line of HTML code I have written was in 1999. It was the time of chunky and ugly websites where you used tables to divide and arrange the entire site.

In the '90s, the main job in my spare time was to play video games. However, I also wanted to build a website (of course a website about video games). With zero knowledge of web development, I built this ugly thing. At that time, I didn't even know that you need a domain and a provider where you had to upload the code. It was expensive at the time, so my first website never saw the light of day.

This first website project was the spark that introduced me to web development and an apprenticeship as an IT specialist.

You are currently building a YouTube channel about coding. It's awesome! Can you tell us a bit about it?

I started with YouTube just for fun. My first videos were without explanation, just me coding and background music. But there were a handful of people who found my videos helpful. So I bought a microphone and started putting more effort into my videos. 

This is my new passion now - teaching and helping people to learn new skills.

The most challenging aspect for me is to find time to make tutorial videos as I have a full-time job and family. The coding part for creating a video is only about 15 % of the work for me. I spend a lot of time planning the video, as I don't want to waste the viewer's time. This is one of the most time-consuming parts besides cutting the footage and creating thumbnails and other graphics for the video.

I currently don't have a paid course, and I don't plan to do one in the near future. All of my tutorials are freely accessible on my YouTube channel.

How do you balance a full-time job and working on your YouTube channel?

Everyone has different commitments in their lives. But we all only have 24 hours in a day.

It's essential to make it a habit. I sit down once a day for 1 hour and do something for my side-project.

How did you get your first job as a developer?

During my apprenticeship, one of my instructors invited me to work at his company. The funny thing is this instructor was one of my neighbours. It was a small company with only five people. Two of them were the CEOs. I think it was the best way to start as a developer. With so few people, you have to do something in every area (backend/frontend), and this gives you the opportunity to learn a lot.

I absolutely agree with Mario. In my first job as a software developer, I was in a 4 person company. This exposed me to a lot of new things which I probably wouldn't have learnt otherwise.

What advice would you give to other developers who are getting started on their journey in web development?

Code. Code. Code. Eat something, preferably healthy, and don't forget to sleep. 😉

I recommend starting with frontend development. It's more comfortable, in my opinion, because you have visual feedback and is not as abstract as backend technologies. Go to your favourite page and look at the source code and try to build a static version from this site. Don't worry about how it should look (UI/UX), but concentrate on building this page, just with HTML and CSS.

Don't pick up a framework from the start. The basics are essential. You can build everything with the essentials. All of these different technologies today can be overwhelming. Many web developers with years of experience started only with HTML, CSS, and Javascript (the cool ones used JQuery).

Furthermore, the first step is always to write code that fulfils the specifications of the tasks. Beginners quit at that point and move on to the next thing. More experienced programmers know that the first iteration is just the first iteration. It works. Congratulations! But you are not done. Now, make it better. Part of that process is defining what "better" means. Is it worthy of making it faster? Or to make it more reusable? More reliable? The answer varies with each application, but the process is the same.

I recommend you to check out the MoSCoW method- it's a technique for prioritisation in project management - it's something that I still use in my own projects.

From your own experience, what soft skills should developers have in order to succeed as software engineers?

Don't be afraid to ask. No matter if you are just at the beginning of your journey or you already have years of experience. Communication is essential.

Be patient with your customers or team members. Not everyone understands how difficult programming is, or how long code takes to write.

Keep your mind open to new ideas. Not just from your team but also the rest of the company and your clients. They could teach you new things. Seek and accept input from others. Clients are the ones who use your product, so they are the best people to tell you what works and what they need.

Try to accept criticism with appreciation and be aware of your first reaction of defending yourself. Turn the negative into a positive. Learn from criticism and be a better person. Listen and keep improving. You are not your code. Remember that the entire point of a review is to find problems, and problems will be found. Don't take it personally when one is uncovered.

What are you up to now other than the YouTube channel?

I have a personal website. It's currently only one page, but I plan to expand it even further. Maybe I'll start a blog in the near future.

Can you share some of your favourite resources for learning VueJS and web development?

There are tons of stuff. But my all-time favourite is and was selfhtml.org. Unfortunately, the website is only available in German.

I like to read documentations and can recommend using all the official stuff for each language or technology. And besides, there is a lot of free material on YouTube. No need to pay a single coin to learn new stuff. I can recommend using sources from different channels. Everyone has a different way of solving a certain problem - it's good to get a different insight into a specific topic.

Thank you for the amazing interview, Mario. Make sure to follow him on Twitter, Instagram and YouTube. You can also subscribe to his newsletter.

14 years of development experience

This software engineer is building a development YouTube channel in his spare time

Ryan is a CS graduate who after several years of working in the industry, decided to quit his job in order to pursue his passion for writing tutorials and courses for new web developers as well as building his own product - polished.app

Ryan Wilson

Did the CS degree help in your career as a developer?

I graduated with a Bachelor degree in Software Engineering from the Rochester Institute of Technology (RIT). I was required to take several Computer Science courses as part of my degree, but I was mostly focused on how businesses build software.

My degree was helpful in giving an overview of the world of software development. The most beneficial part was that RIT requires internships to receive your degree. I learned more about development during one year of internships than four years of classes.

I’ve always loved building things. I had legos and K’nex as a kid. I took a metal shop in high school and learned to build things out of metal. Software is the best world for a builder. You can build and test new ideas quickly for free. There are no materials to buy. There is a minimal downside to messing up. You can just try things and see what happens.

Tell us about the personal projects you have built throughout the years

High school - the teacher would give us a printout of the code of a working program and we’d have to type it back into the computer.

College - The first major project was an implementation of a bot that could play the board game quorridor. They provided an API and we had to write the code in Python. We then had a Quorridor tournament with the other classmates.

College - Another project was our senior project, where we actually worked with an outside client to get product requirements. We built an investment/retirement account simulator. The client was a financial advisor and they wanted to use that with their clients. They would plug in how much money someone had in their retirement accounts, how old they were, expected contributions and growth, and the software would apply the different tax treatments based on account type and try to solve the most optimal allocation per account type.

Out of college - I’ve mostly been focusing on building Polished. It’s a writing app built with React and SVG. I originally wanted to make it into a design tool like Figma, but eventually, I pivoted to a writing app as there is less competition in that space.

Side project idea:build a Quorridor web app for people to play it on one computer. Players take turns to move their pawn or place a wall on a virtual board. If you decide to do it, share a link in the comments.

RIT required internships. Through one of the internships I did, I was offered a full-time position after I graduated.

If you are looking for your first development job, look for internships as well. Often enough, when you complete the internship and the team has gotten used to working with you (and they like you), they would offer you a full-time position.

What were some of the challenges that you encountered when you started to code and build products?

When I was starting out, I just had no idea how things fit together in the real world. I could learn the syntax of programming languages pretty easily. But that was always in the context of a course, so I never deployed anything to the servers. Because of that, I didn’t understand servers and clients in the first 2 years of college.

I didn’t know how to deploy a website or publish an app. This was all I wanted to learn to do this whole time! Being able to relate the logical problem-solving side of programming with how you apply that to a real-world application and actually deliver value is a huge piece that traditional courses and tutorials don’t really focus on. In my experience, this has all been picked up while doing real work.

What are some of the soft skills developers should develop in order to be successful at their job?

All of them, honestly. There isn’t a few you should focus on. Some people will naturally be better at teamwork while others will be better at creativity.

What is best is to be able to identify where your weak areas are, accept that you’re weak in those areas, and strive to improve that. Asking for feedback from your team, or manager, or friends is a good way to identify and try to get better at that particular skill.

What advice would you give to other developers who are getting started out in their careers or building products?

Build real things. Start with something small and simple but can still deliver value. Build a Trello clone. Build a social website for family gatherings. A lot of products require a lot of the same setup, regardless of the complexity of the entire app.

Take Trello - it’s basically a glorified to-do list with different stages a task can be in. The app will still need authentication, profiles, some kind of data structure to store things, a database, an API, it will need to be deployed. Setting up those things will also need to be done on just about any other app.

Build your coding muscles with something small first and learn the foundations. Then move on to building more complex things.

I'm currently self-employed. I’m working on building a personal site that will have a blog, podcast, and courses for learning programming. You can check it out here.

I’m also working on Polished. Last November, I quit my full-time job as a frontend developer and have been living off savings since. I’m hoping to make enough money on my own eventually so that I do not need to work for another company. I still have a few more months of runway left, so we’ll see how that works out.

How did you find the courage to quit your job and start building your own products full-time?

I completed an internship at the first company I worked at when I graduated from college. The internship was awesome, I had a great team which was really supportive.

However, when I began full-time for this company, I was in a different team that didn't connect as well so it wasn't a great experience. I also always had this urge to do something on my own since before I even started college. I always wanted to be an entrepreneur.

I worked at a corporate company for a year and a half, but then I quit that job and started working as a consultant. That team was much better, but the work was considerably worse. I was working there for 9 months before I decided to move on. I had a good relationship with my boss and told him how I wanted to work on my own stuff 3 months before I quit.

I was able to amicably leave that job. I also paid off all of my debt as soon as I started working out of college. I was fortunate to not have an insane amount and I was making quite a lot as I was a software engineer at a big company.

So it's a mix of wanting to work for myself and having enough savings to sustain myself for a while without any cashflow coming in. If this doesn't turn out as expected, I will try to get another programming job in the future.

Do you have any courses, books and any other resources that you would highly recommend to check out?

Make sure to follow Ryan on Twitter - @rywils21

Also, follow his journey on building web development courses on https://ruminant.dev

8 years of development experience

From full-time employee to writing courses and building his own product

My managers were founders of a small agency, where they have interviewed dozens of university students for internships and junior roles over the last few years.

My managers are founders of a small agency, where they have interviewed dozens of applicants for internships and junior roles over the last few years.

I decided that it would be a great opportunity to gather whatever knowledge I can and share it. I hope it helps you whether you are currently applying or you have plans to apply for a role in software development.

Before you start applying, make sure you have some side projects under your belt. Don't overthink it - it doesn’t have to be the best idea in the world. It doesn't even have to be a unique idea for that matter. Just execute it in your own way and make sure you have a way to justify your development decisions during the application/interview. For example, try not to copy and paste from a tutorial and instead, do your best to understand why something is done in a certain way.

“Depth rather than breadth” - that’s the other thing that my manager told me regarding small projects. In essence, concentrate on fully understanding something before you move to something bigger and more complicated. When it comes to building projects, execute small projects well and push them live rather than half-finished larger projects. You will be able to talk about your projects more confidently and your portfolio will look better.

Make sure your Github is presentable. Make old and unfinished projects private and update the README.md file of your projects. Briefly explain what the project does and link it to a live version, so the person reviewing your profile can see what it is quickly and easily.

You can host front-end projects for free on websites like Netlify, Vencel or Surge. For back-end projects, developers are opinionated, but I personally like using Heroku.

If you are reading this article, it already shows that you have a passion for the industry. Building personal projects is also a great indicator for that.

Now expand on this. Keep up to date with recent news and developments in your chosen programming area. Follow tech people on Twitter. Check out Product Hunt - a community that showcases awesome new products. You could even get inspiration for your own projects from there.

Start a blog. Write about what has caught your attention while learning to code. Last year, I started railsjunior.com - a blog where I posted problems and solutions that I discovered at work and couldn't figure out straight away. Hiring managers love stuff like that. Don't be afraid to start writing.

Have a passion for other industries as well

My managers also said that it's important to have other areas of curiosity which are outside of tech. Even though you will be working in the tech industry, you will be likely influencing a non-tech industry. It is especially important if you are working for a product studio or if you want to be a freelancer as these require you to work in different industries and have to keep up with having domain knowledge in many sectors in order to see how the technology influences that sector.

Creativity is not just important from a design/user interface perspective, it’s also required when programming . You are basically the architect for this new system and are constantly utilising your problem-solving skills. Many times there are multiple ways to solve the same problem, so having the confidence to know which solution is best for a particular problem is a creative process.

Some of the ways I develop creativity are through writing, reading, watching other people code, getting inspiration from another website's design and trying to implement it in my own way. It's a long never-ending process, but you can feel when you are slowly making progress.

My managers believe that not having a Computer Science degree is fine - they don't hold it against you. People from any degree or no degree have the potential to become amazing software developers and be just as good as anyone who has studied CS at university.

Most companies won’t ask you that much in terms of technical abilities since you are applying for an internship position as companies will guide you through that as part of the internship. 

However, it would be a great benefit if you understand the theory behind software engineering. They recommended reading up on the concept of software processes, in terms of the workflow that normal software products go through from the initial idea through to delivery.

You don’t have to read textbooks or take long courses on this, but learning the basics from articles and videos will be a great introduction that might help you during more technical interviews.

There’s a Medium blog series that’s fairly concise on this:

Another personal favourite is Crash Course Computer Science course on Youtube.

A lot of developers recommendCS50's Introduction to Computer Science by Harvard. It is a huge investment of time (~15 hours per week for 12 weeks), but if you have the time and passion it seems like a great course to check out.

Apply for companies you are excited to work for

I see a lot of people (including me when I was looking for internships) apply for any position under the sun. You might think that this increases your chances of getting hired, but it often has the opposite effect. If you only apply for the companies that you care about, this will show in your cover letter and interview.

When I applied to the company that I eventually got my internship, I was so excited about it that I listened to almost every episode of their podcast, read news articles about them and checked out their social media. When the interview came, I knew exactly what the company is about, I knew about the people working there and what questions I should ask.

A lot of companies nowadays are creating content for marketing purposes. Check if the business that you're applying to has a podcast, youtube channel or a blog. This extra information can be a great way to understand what the company actually does and learn more about the people working there.

Put actual effort into your cover letter/supporting email

My managers told me that they get quite a few bland applications that are either not tailored to their company or are clear copypasta applications. Specifically, they don't like to see what your goals are and why you think the position can help achieve those goals. Not writing about these things has a positive effect of encouraging you to do in-depth research into the team and company. Tell them about your experience and how you can contribute to their team.

When I was applying, I tried to dedicate a lot of time researching the company and give special attention to every cover letter. A good rule of thumb is to apply to one or two companies per week. I had a period where I was doing 2-3 applications per day and none of them turned out successful.

Don’t be afraid to reach out directly. Universities and recruiters have a habit of scaring people into following internship processes. Just send an email or connect on LinkedIn — and be clear on what you want.

I got my most recent position by someone recommending the company on a LinkedIn post. I then reached out to the CEO and the head of engineering before I submitted my application.

Practice the STAR method even if it's not a formal competency interview. Answering questions in this format will make sure you are illustrating your points with clear examples. This will greatly help the person who is interviewing you and increase the chances of you getting hired.

Take initiative — interviewers want to learn about you so present yourself. If the interviewer asks you to tell a bit about yourself, make sure you know what you want to say. Know how to describe how you got into coding, your previous experience and your side projects.

Ask questions that allow the interviewer to open up to you. Ask questions that show the interviewer that you care and that have researched the company. Ask about what's it like to work at the company. Ask what kind of projects you would be working on. Ask about what tech stack they are using.

I have always found it useful to have a mock interview with a teacher, friend or family member before the interview.

I asked my managers how to land a software development internship. Here's what they said.

Web developers can use Local Storage to store data across browser sessions without an expiration date. You can read, write and delete data.

Local Storage is a useful way of storing data within your browser. The data is stored across browser sessions - which means that you can refresh the page and go to different pages without losing the information which is stored inside Local Storage.

If you are building a simple app or you want to store non-sensitive information within your website, local storage is a great addition to your skillset.

It is supported by most major browsers. To demonstrate how you can save and read information, we are going to build a simple e-commerce website with a cart page. I will build it in plain HTML and Javascript, but you are welcome to do this example in a framework of your choice.

Local storage is similar to Session storage except that Local Storage is not cleared whenever the page is closed. This means that you can close the browser, but the data stored in Local Storage will still be there.

localStorage.setItem(keyName, keyValue) method writes a key/value pair to localStorage. The keyName and keyValue should be strings, so if you want to save an array or object to keyValue, you will need to convert them into strings using Array.prototype.toString() or JSON.stringify(object).

localStorage.getItem(keyName) retrieves an item from the localStorage by keyName. Note that it will return null if the key does not exist.

The return value is the keyValue associated with the keyName. The return value will be a string, so if you have saved an array or object (like described above) you will need to convert them to the relevant data type in order to use them.

localStorage.removeItem(keyName) will remove the provided key from localStorage.

localStorage.clear() clears all keys from local storage. It basically resets localStorage.

localStorage.key(index) returns the keyName at the given index within localStorage.

Building a simple e-commerce website with a checkout page

Now let's put our newly acquired knowledge into practice. We will have two pages, one with a list of products with a name, price, and "Add to cart" button and a cart page with a total price and a button that clears the cart.

This is only an example to illustrate how to use local storage. You shouldn't implement an actual checkout page with it, because the user can easily change the price number within the Dev Tools.

Let's begin by building a simple page with one div where we can insert our catalogue into using Javascript.

Within our Javascript code, we create a simple list of products which we then loop through and insert our objects with the buttons onto the DOM inside the "catalogue" div.

<div id="catalogue">
</div>

  const data = [
    {
      name: "Kindle",
      price: 70
    },
    {
      name: "Cool Lamp",
      price: 15
    },
    {
      name: "Mirror",
      price: 25
    }
  ]
  
  const wrapper = document.getElementById("catalogue")
  data.forEach(element => {
    // item wrapper
    let item = document.createElement("DIV")
    item.innerHTML = element.name

    // item price
    let itemPrice = document.createElement("DIV")
    itemPrice.innerHTML = `$${element.price}`
    item.appendChild(itemPrice)

    // item button
    let itemButton = document.createElement("BUTTON")
    itemButton.innerHTML = "Add to cart"

    itemButton.dataset.name = element.name
    itemButton.dataset.price = element.price
    itemButton.classList.add("add-to-cart")
    item.appendChild(itemButton)

    // hr to separate the items
    item.appendChild(document.createElement("HR"))

    // insert item to the main wrapper
    wrapper.appendChild(item)
    return true
  })

Our next task is to add a click event listener to the item, so every time we click on an item's button, we add it to local storage (our cart)

As mentioned above, when you retrieve an object from Local Storage, it will be in a string format. You need to convert it back into an object using JSON.parse().

You also need to convert the object into a string before you save it into Local Storage. You can do it using JSON.stringify().

// We have to loop through all buttons and add an event listener to each individual button
// jQuery/React makes it a lot easier to do something like this
Array.from(document.getElementsByClassName("add-to-cart")).forEach(function (
  element
) {
  element.addEventListener("click", (e) => {
    // retrieve current cart if it exists. If it doesn't create an empty cart
    let cart = JSON.parse(localStorage.getItem("cart")) || [];

    let newItem = {
      name: e.target.dataset.name,
      price: e.target.dataset.price,
    };
    cart.push(newItem);

    localStorage.setItem("cart", JSON.stringify(cart));
  });
});


You can go to your browser's dev tools and inspect your local storage objects.

We now have the ability to add items to a cart. Our next and final step is to create a cart page where can see the total price of our items and a button which we can clear our cart with.

<body>
  <a href="index.html">Go to catalogue page</a>
  <h1>My Cart</h1>
  <button id="clear-cart">Clear cart</button>
  <div id="overall-price">
  </div>
</body>

// retrieve items from the cart
let cart = JSON.parse(localStorage.getItem("cart")) || [];
let overallPrice = 0;

if (cart.length) {
  // using forEach, calculate the total price of each item within our cart array
  cart.forEach((element) => {
    overallPrice += parseInt(element.price, 10);
  });
}
document.getElementById(
  "overall-price"
).innerHTML = `Overall Price: $${overallPrice}`;

// adds an event listener to clear our cart
document.getElementById("clear-cart").addEventListener("click", () => {
  localStorage.removeItem("cart");
  alert("Cart is cleared!");
});

You did it! If you want to make this a more complete example and gain a deeper understanding of Local Storage, here are some extra tasks you can do:

Ability to see how many times we have selected a certain item in the cart page

When you clear your entire basket, that should be reflected on the page (currently you need to refresh to page to see an empty basket)

Ability to delete an item from a cart (both only 1 occurrence of the item and all items)

Expand the list by adding images and descriptions to each item

Contact me on Twitter or comment on the post if you need any help.

It might be convenient to use Local Storage, but you should be aware when you shouldn't use it. In general, do not use localStorage to store sensitive information such as user or purchase data as it can be accessed and modified by anybody.

It also has a 10MB limit in Google Chrome, but browsers like Opera might increase the storage place if needed. In general, 10MB should be enough for whatever you are doing, as this amount of space can store millions of string characters.

How to use Local Storage in Javascript + an example

Exit intent is a marketing strategy which increases conversion without being obstructive and annoying to customers. It displays a modal before the user leaves the page.

.markdown {
  -webkit-overflow-scrolling: touch;
}
.markdown pre[class*=" language-"] {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.markdown pre[class*=" language-"]::before {
  background: black;
  border-radius: 0 0 0.25rem 0.25rem;
  color: white;
  font-size: 12px;
  letter-spacing: 0.025rem;
  padding: 0.1rem 0.5rem;
  position: absolute;
  left: 1.5rem;
  text-align: right;
  text-transform: uppercase;
  top: 0;
}
.markdown pre[class=" language-js"]::before, 
.markdown pre[class=" language-jsx"]::before, 
.markdown pre[class="  language-jsx"]::before, 
.markdown pre[class="  language-js"]::before {
  content: "js";
  background: #f7df1e;
  color: black;
}
.markdown pre[class="  language-rb"]::before, 
.markdown pre[class=" language-rb"]::before, 
.markdown pre[class=" language-ruby"]::before,
.markdown pre[class="  language-ruby"]::before {
  content: "ruby";
  background: #A91401;
  color: white;
}
.markdown pre[class="  language-bash"]::before {
  content: "shell";
  background: white;
  color: black;
}

.markdown pre[class="  language-erb"]::before,
.markdown pre[class=" language-erb"]::before {
  content: "erb";
  background: rgb(0, 90, 156);
  color: white;
}
.markdown pre[class="  language-html"]::before, 
.markdown pre[class=" language-html"]::before {
  content: "html";
  background: rgb(0, 90, 156);
  color: white;
}

Many websites (including this one) have implemented exit intent modals. I have taken a lighter approach and have implemented a popup banner/modal, and I will show you how I did it. You can easily extend this example to be a modal instead if you prefer this approach.

Exit intent strategy is displaying a modal before the user leaves the page. You can detect when the mouse moves to the tab portion of the browser (+ a certain threshold which we will use in this example) and display the modal then. We will then set up a cookie with an expiration date so we don't annoy people with the modal every time they want to exit our articles.

Try to trigger the exit intent banner on this website to see how it works.

Extract exit intent logic into a component

We will use this npm package but as it is only one file, we can just import it into our utils folder and use it within our app. That way we can decrease the dependencies of our app and have the ability to extend the component logic if we need to.

// src/utils/ExitIntent.js

import throttle from "lodash/throttle"

export default function ExitIntent(options = {}) {
  const defaultOptions = {
    threshold: 20,
    maxDisplays: 1,
    eventThrottle: 200,
    onExitIntent: () => {},
  }

  return (function() {
    const config = { ...defaultOptions, ...options }
    const eventListeners = new Map()
    let displays = 0

    const addEvent = (eventName, callback) => {
      document.addEventListener(eventName, callback, false)
      eventListeners.set(`document:${eventName}`, { eventName, callback })
    }

    const removeEvent = key => {
      const { eventName, callback } = eventListeners.get(key)
      document.removeEventListener(eventName, callback)
      eventListeners.delete(key)
    }

    const shouldDisplay = position => {
      if (position <= config.threshold && displays < config.maxDisplays) {
        displays++
        return true
      }
      return false
    }

    const mouseDidMove = event => {
      if (shouldDisplay(event.clientY)) {
        config.onExitIntent()
        if (displays >= config.maxDisplays) {
          removeEvents()
        }
      }
    }

    const removeEvents = () => {
      eventListeners.forEach((value, key, map) => removeEvent(key))
    }

    addEvent("mousemove", throttle(mouseDidMove, config.eventThrottle))

    return removeEvents
  })()
}

Let's take a moment to appreciate what this code is doing

We define several default options, which we can configure when we call the object later

A note that throttle doesn't allow a function to execute more than once in a given period. Therefore, by default, we only allow the function to execute once every 200ms (it makes things more efficient and doesn't put a burden on the browser)

We add a mousemove event listener using the addEvent function. We check if we should execute our onExitIntent prop function or not.

We check the Y position of the cursor and if it's above the top of the viewport of the page (+ any threshold we have set), we return true.

This component also gives us the ability to set up how many times we want it to trigger per page load, but for our purposes, we only one it to happen once (as it is the default)

Finally, the return value of this function is removeEvents, which unsurprisingly, clears all events.

Our next step is to create a useEffect hook within the component where we want to trigger the exit intent. Whenever the page is loaded, we initialize the ExitIntent.

Since ExitIntent returns the function that removes the exit intent events, we assign it as a constant which we then give as the return value of our useEffect.

If you need a refresher of the basics of useEffect, you can read a bit about them in theofficial react docs.

// article.js

import React, { useState, useEffect } from "react"
import ExitIntent from "../utils/ExitIntent"

...

const Article = props => {
  const [showPopup, setShowPopup] = useState(false)

  useEffect(() => {
    const removeExitIntent = ExitIntent({
      threshold: 30,
      eventThrottle: 100,
      onExitIntent: () => {
        setShowPopup(true)
      },
    })
    return () => {
      removeExitIntent()
    }
  })

...

  return(
    ...
    <ExitIntentModal show={showPopup} />
    ...
  )

Now for the fun part. You can style this modal however you like - I will leave this part to you. However, you should be aware that you need set up a useEffect hook in this component as well in order to update your show variable whenever your parent component triggers the ExitIntent function (and therefore passes an updated show prop).

The place for self-taught developers to level up

Latest Fireside Chats

Latest Tutorials

Join Our Slack Channel