Forem: Per

Introducing Scrimba Fullstack

Per — Fri, 11 Apr 2025 07:29:25 +0000

Over the last few years, Scrimba has grown into a community of nearly two million learners focused on mastering frontend development. But there’s one question we've heard again and again:

"When will you offer backend courses?".

This makes a lot of sense, as you need both backend and frontend in order to build fully functional apps. It also drastically improves your hireability if you understand the entire stack, as the job market has moved towards fullstack roles.

So today, we’re happy to share that you can finally learn fullstack development on our platform, with six free courses ready straight out of the gate. These cover subjects like Node.js, Express.js, Next.js, SQL, the command line, and more.

Click here to see all of them.

These fullstack courses run entirely in the browser, meaning you don’t have to set up your dev environment locally, nor pay for credits on a remote container that runs the project for you.

You'll be able to jump seamlessly between the video and the IDE, as they have been fused into a unified learning experience.

Click here to watch a scrim that explains how it works in more detail.

How the fullstack support works under the hood

To offer truly interactive fullstack learning experiences, we considered multiple approaches. Most in-browser code editors spin up remote server containers for backend code execution, but these can quickly become expensive, leading to limits on usage. In addition, network latency can be a drag on performance.

Another possibility we explored was using building our own solution using WebAssembly, which lets you run a range of programming languages within the browser. However, this would be huge undertaking for our development team, who have plenty of other important tasks to focus on.

Luckily though, StackBlitz has done much of this heavylifting already, and launched it as a product called WebContainer. This allows complete Node.js environments to run directly in your browser, providing instant setup without installations, local configurations, or performance compromises. WebContainers is now fully integrated it into our scrims.

How we make the “videos” interactive

Speaking of which, developers often ask how we’ve built the scrim format. So let’s have a look at that as well.

The easiest way to describe it is that is a mix between the IDE and a video.

The main thing to understand about the scrim format is that is is event-based, as opposed videos, which are pixel-based.

So whereas a 24 FPS (frames per second) video contains 24 images stacked on top of each other, a scrim instead records the underlying events, which could be “edit code”, “move cursor”, “open file”, or so forth.

Here is a screenshot that visualizes the difference.

When you watch a scrim, we simply re-create these events in the IDE, while layering the audio from the teacher on top. Much of the complexity in Scrimba arises from having to apply these events in the correct order in the IDE, and thus creating a timeline that reliably can be scrubbed back and forth.

These events are optimized like crazy, meaning they require little bandwidth to be streamed to your computer. Actually, a scrim usually weights 100 times less than its equivalent video.

Which courses are available?

Our teachers have been working around the clock the last few months to ensure you can learn a range of full-stack technologies from the start, learning essential skills like building APIs, working with databases, controlling the terminal, and more. Here are the courses you can enroll into for free right away:

Learn Node.js
Learn Express.js
Learn Next.js
Intro to SQL
Command Line Basics
Intro to Vite
Intro to Supabase

Several of the courses above have been created in collaboration with the library maintainers, giving us feedback on best-practices and common hurdles beginners feel when learning their stack.

And in well-known Scrimba style, they all take full advance of the interactivity, giving you coding challenges around every corner. By the time you’d taken either of these courses, you’ll have written a lot of code in the given technology.

And this is just the start. Over the coming months, we’ll release additional courses including:

Intro to Nest.js
Intro to Nuxt
Intro to Vitest
Learn Vue
RAG & AI agents

If you have suggestions for a course you’d like us to create, or if you’re an open-source maintainer who’d like to see a course about your technology on Scrimba, please email me at per@scrimba.com.

Can I record my own scrims?

Yes, you can! It’s quite simple, as everything is done in the browser, so you don't even have to download an app. Once a scrim has been recorded, it will be listed on your profile, or can be shared via a link.

Most likely, you’ll have to edit your scrim a bit to cut away pauses, mistakes, and so forth. So we’ve create a simple editing interface as well.

If you’re a teacher or developer looking to record content with
Scrimba, please reach out!

Can I embed scrims into my website?

Yes, you can do that! Several partners of ours are doing this, like MDN, Coursera, and freeCodeCamp.

It'll enable your users to get an unique and differentiated learning experience.

When are actively looking for partnerships these days, and have an affiliate program where you’ll get a generous share of the revenue from any traffic your send us. This program has generated hundreds of thousands of dollars in revenue since we started ramping it up in the second half of 2024.

Happy coding!

Learn JavaScript - A Free 7-hour Interactive Tutorial

Per — Thu, 27 May 2021 15:15:47 +0000

Over the last four months, I have recorded what is probably the most interactive JavaScript course that has ever been created.

The reason I have done this is because I often see new coders fall into the same pitfalls again and again when trying to learn JavaScript, with the most dangerous ones being these three 👇

Not being able to go from watching JS tutorials to building JS projects 🛠
Losing motivation because they get bored 🥱
Not being able to move forward because the learning curve is too steep 🧗

However, very few courses seem to take these pitfalls seriously enough. So this course is meant for anyone who has experienced any of the above issues when learning JavaScript.

In this article, I'll explain how the course works so that you can decide whether or not you think it is something for you.

If you you're sold already, just click on the image below 👇

Why Hyper Interactivity is Important

The course is built around 140+ interactive challenges. This means that there's no point in binge-watching it. The whole purpose of it is to get you to code, to build up your JavaScript muscle memory. And in order to achieve that, you must solve the challenges.

Don't worry though – each challenge is byte-sized and fast to solve, so you will feel like you are progressing quickly.

This level of interactivity would be clunky to achieve using regular videos, as you would need to jump between the video player and the code editor 140+ times throughout the course. Not to mention opening up new starter files for many of the challenges.

To combat this issue, I created this course using Scrimba, which makes the experience much smoother.

When you are inside a scrim, you can instantly jump between watching the teacher's explanation and coding up your own solution.

Imagine if VS Code and the video format had a child. That's Scrimba.

You can both watch the tutorial and edit with the code inside the same frame.

People often struggle to understand what a scrim is before they've seen it, so I'd recommend that you watch through this 1-minute scrim to get ahold of it.

"Just-in-time" Learning

Another thing that separates this course from most other JavaScript courses is that it spreads the theoretical lessons evenly out across the entire course. Just in time when you need to learn it, and not a second before.

This means that you won't get long and boring lectures about abstract concepts before you start building projects.

Instead, we will dive head-first into building projects. And when we hit a road block, I will introduce you to the piece of theory we need in order to overcome it. This way, you will intuitively understand why you need to learn the theory.

However, don't be fooled to think that we will skip any theory. My course goes through the same important theory as any other good JavaScript course. But instead of squeezing it in all up-front, it is spread out evenly from start to end. Just it time when you need to learn it.

Learning by Doing

This tight integration between theory and practice means that most of your time will be spend building products. Here are the three projects you will build:

Project 1: Passenger Counter

You'll start out by building a passenger counter app. This might seem like a bit of a contrived example, but counting passengers at the metro was my actually my full-time job for a time when I was 19 years old.

What's important here is that you are building an actual product from day one. You are combining JavaScript with HTML and CSS, so that you can learn JavaScript in the context of a real user interface in the browser.

This makes it a lot more fun than simply seeing your output in the console. While this adds a little bit of complexity, it it well worth it.

Project 2: Blackjack game

Next, you will build your very first JavaScript game – Blackjack!

This is the first time you will code something that can also entertain you, which I think is important.

Blackjack is one of the most iconic Casino games ever, and this marks your first step into the world of game development.

Project 2: Chrome Extension

Finally, you will build a Chrome Extension that we are going deploy to your Chrome browser, so that you can use it out in the wild. This is exciting, as you'll really understand the super power you have gotten at this point.

The extension is called "Lead Tracker" and it is a tool for sales representatives. It allows them to browse the web and collect promising leads.

Check out the intro scrim for it to learn it a bit more:

Practice sections

After each of these project sections, I will stress-test your knowledge with dedicated challenge sections. This will also give you the necessary repetition you need in order to progress to the next project. I have tried to make all the challenges as real-world as possible so that they are fun to solve.

If you struggle to solve these challenges, then I would recommend that you revisit the scrims from the project sections as well. So these sections serve as gateways for progressing with the course.

You can enroll for free right now

I hope this gave you the background you needed in order to decide whether or not you'd like to try this course out. It's 100% free, and will be so forever. If you are interested, just click this link and you can get started immediately.

Finally, if you would like to help us spread the course, you can retweet my launch tweet.

// Detect dark theme var iframe = document.getElementById('tweet-1395359456335106048-220'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1395359456335106048&theme=dark" }

It's the first day of Scrimba's #JavaScriptmas Advent Calendar! 🎄 Let's take a look at challenge number 1. 🎅🏻

Per — Tue, 01 Dec 2020 16:48:37 +0000

If you haven't already heard, Scrimba has launched 24 Days of #JavaScriptmas - an "advent calendar" of code challenges which gives you the chance to put your coding skills to the test and win prizes every day until Christmas Eve!

The #JavaScriptmas challenges have been created by Scrimba's popular teacher, Dylan 'Claus' Israel. You might know Dylan from his YouTube channel CodingTutorials360, but what you probably didn't know is that he moves to the North Pole every December and takes on a completely different job...creating advent calendars for code enthusiasts like you! 🎅🏻

The #JavaScriptmas calendar contains challenges of increasing difficulty, so if you take part, you'll give yourself a good chance of becoming a Javascript maestro in time for Christmas!

Time for the challenge!

Now let's take a look at the very first coding conundrum, a task all about dividing candies equally, which could come in handy over the holidays!

Click the image to access the challenge.

Some skeleton code is provided in the screencast, so it's super easy to get started:

function candies(children, candy) {
    //  write code here.
}

As it's the season for giving, Dylan also spoils us with a handy hint to help us along the way, and that is to consider using Math.floor(). However, this is a recommendation and not a requirement. If you come up with a different solution, by all means share it with the community.

Speaking of sharing with the community, that's exactly what you should do if you'd like to be in with a chance of bagging one of the daily prizes. Simply share your solution on Twitter with the #JavaScriptmas hashtag and you'll automatically be entered into Scrimba's prize draw. Better still, Scrimba has installed a 'Share Your Solution' button into every challenge to take the leg-work out of Tweet-writing.

If you haven't signed up to the advent calendar yet, it's not too late! Head over to the 24 Days of #JavaScriptmas page and hit enrol - you'll then receive each day's challenge directly to your email inbox every day until Christmas Eve!

Merry challenging! 🎄

A Free Advent Calendar To Sharpen Your JavaScript Skills And Win Daily Prizes 🎁

Per — Tue, 01 Dec 2020 06:05:24 +0000

Welcome to 24 Days of #JavaScriptmas, a fun-packed advent calendar that gives you the chance to win daily prizes while sharpening your JavaScript skills.

How does #JavaScriptmas work?

Each day from today until December 24th, we'll release a brand-new challenge for you to solve. To join, simply head to the 24 days of #JavaScriptmas page (👈link🔗) and enroll right now. You'll receive a daily email notifying you of the latest challenge, plus the previous day's solution.

The challenges come in the form of interactive screencasts. So you don't have to read a tons of instructions to understand them. Just watch a one-minute screencast and start coding your solution directly inside the scrim.

What can I win? 🎁

Santa will reach into his sack and give out a year of free Scrimba Pro (worth $150) to one lucky winner every single day until December 23rd.

On Christmas Eve, we'll select a winner who gets Scrimba Pro for life plus 1000 USD in cash💰

To learn more about the prizes and the competition, check out our launch video:

What level are the challenges? 📊

The challenges start off easy and become harder as the month goes on. If you stick at it, you'll be a JavaScript master in time for Christmas!

With 24 days to fill, there will be plenty of topics covered, including Math.floor(), slice(), sort(), every(), split(), push(), Math.pow() and many more.

I'd recommend you to start on Day 1 and see how long you can keep up. This is a great way of challenging yourself.

How do I enter the competition?

Once you've completed your daily challenge, just tweet a link to your solution with the #JavaScriptmas hashtag. That's all there is to it!

We will pick the winners randomly, as we want everyone to have a chance at winning prizes. Plus, we don't want you to compete with other participants. We want you to compete against yourself.

The point with this calendar is to kick-start the year of 2021 with strong JavaScript skills, as that's the best way to future-proof your career.

How do I maximize my chances of winning? 🏆

You maximize your chance of winning by submitting a solution on Twitter every single day. This will give you 23 shots at winning a daily prize (annual Scrimba Pro membership).

This will also maximize your chance of winning the Grand Prize ($1000 and a lifetime Scrimba membership), as every solution you have submitted counts as a "lottery ticket" towards the Grand Prize.

Who has created the challenges?

All the challenges have been created by Dylan Israel. He runs the popular CodingTutorials360 channel over at YouTube, so you might already know Dylan.

But what you probably didn't know is that Dylan takes on a completely different job at the end of each year, as proven by the picture below 👇

Best of luck, and Merry JavaScriptmas! 🎅🏻

Proven advice to secure your first developer job

Per — Fri, 30 Oct 2020 10:21:48 +0000

Meet Austėja Kazlauskytė :

Austėja is a new mom, law graduate, and “mom-and-pop” entrepreneur turned full-time frontend developer 🎉

She managed to get a job despite soul-crushing odds👇

No formal education
No professional coding experience
No portfolio

And as if that wasn't enough, she was also raising a child and facing a worldwide pandemic this whole time 😱

So in this article - and corresponding podcast episode - you will learn how she conquered her fears, took risks, and learned to navigate JavaScript, CSS, React, and eventually nailed the dreaded technical interview.

What you'll learn 👨‍🏫

Here are some of the specific takeaways you'll have from her story:

Transitioning careers (law 👉 entrepreneurship 👉 coding)
Making time to learn to code as a new mom 👶🏻
A winning job-hunting strategy you can copy 🎉
Motivation and drive during a pandemic 🦠
Smashing the technical interview 👊
Salary negotiation 💸

Podcast links 🎧

If you'd like to bring this story with you as you commute, clean your house, or whatever you prefer, just click on one of the links below.

The Interview 👇

If you prefer reading over listening, we have extracted some of the most interesting parts of the interview below. However, if you like this read, I'd recommend you to also listed to the podcast, as you'll get a more in-depth.

And if you'd like to try the online course Austeja used to ramp up her skills, you can check out Scrimba Frontend Developer Career Path..

Welcome to #StoriesByScrimba, Austėja! Could you start by telling us about your background?

Sure 😀

I didn't know what I wanted to do when I was 18. I was good with languages and history and - to be honest - not so good with math. Since my parents worked in pharmacy, they told me it's law or medicine, you know? I chose law.

I did 5 years in law school. I have masters in legal philosophy, and have a little bit of legal experience working with IT law! But I never really enjoyed it 😔 I thought it was so boring. So when I could, I switched to events, then sales, and this is what I did for work after graduation.

Then I married and had a baby 👶🏻 and then - you know - many questions arose around what I want to do in my life because I had time, and I felt I wasn't professionally fulfilled.

After seeing many positive examples of my friends who transitioned from law to testing and development, I chose a testing at first but shortly after, I decided that I wanted to be a developer and I took a full-stack Java course and that I took the Scrimba Frontend Developer Career Path..

I started in September 2019. Today is October 2020. And now I work at a company called DevBridge which was my really dream career choice. It's one of the best companies in Poland and Lithuania.

When they chose me, I thought it must be something magical ✨ But the technical interview went well. Scrimba helped me a lot there. I'm in my third week right now and my job title is full-stack Junior Software Engineer.

You mentioned you took a Java bootcamp before Scrimba. How did you decide where to begin?

I didn't have any contacts in coding. I didn't have engineer friends who could be my mentors so I Googled the web. Eventually, I found a few schools on-site.

I was so scared of online courses. I thought it was only on-site things that would teach you effectively. I was wrong.

I went to the full-stack Java course. When I signed up, I didn't know what Java was, to be honest 😂

I thought Java was a good choice because it was a very popular. I Googled it well.

The on-site Java course was ~7 months every weekend - like a course. You go to a classroom with 10 other classmates and there was a teacher and you do the tasks. In the end, you have a project which involves basic CRUD operations (EDITOR NOTE: CRUD is an acronym for Create, Read, Update, Delete - four common database operations you must eventually learn).

When I was learning Java, I decided those courses were not enough for me to learn to code so I did a little course on CodeGym.cc - they have really good software for Java.

Eventually, I realised I want to be a really good frontend developer. So I enrolled in Scrimba's Frontend Developer Career Path. 🙌

What would you say to someone who's deciding between frontend or backend development?

I think it doesn't matter because the main struggle I face every day is how to think like a programmer. Syntax doesn't matter.

I could easily switch to C# (EDITOR NOTE: C# is a programming language by Microsoft) one day because if you know how to think like a programmer, you can Google out new syntax fast but it's very hard to Google out logic.

My approach and my tips - and my tips for myself because I'm just starting - would be to concentrate on learning logic. Syntax doesn't matter. You can switch languages fast. And if, for example, you work for an agency like DevBridge you get a client that wants, for example, backend in PHP and frontend in JavaScript... It would be terrible for you to say "I'm not going to learn PHP because I'm a JavaScript developer 😭"

Language doesn't matter. What matters is that you want to learn to think like an engineer and an engineer likes to play with things, mess with things and learn new concepts.

Remember, React didn't exist 10 years ago. Angular angler didn't exist 10 years ago either! So what will happen in five years?

When you decided to learn to code, could you study all day? Maybe your other obligations meant you had to learn on the side.

I couldn't actually.

I was running a little business, but my main focus was my baby 👶🏻. So I was like a full time mom who has like a little business to keep my mind sane.

I remember the things that I bought my baby - I bought a new tricycle that I can navigate with one hand because with my other hand, I was holding my phone and I was reading about Java. It was that extreme 😱

You know, when we're out in the park, I'm always coding. When baby naps, I'm always coding. Late nights, I'm always coding.

If I cannot code late at night, I would wake up at 5.00AM or 4.30AM and I would go 'til 6.00AM because that was the only free time I had.

You must have been very driven. What motivated you?

I thought that it was something I could feel good about myself - that I could establish my roots as a professional because when I was in my twenties, I didn't know what I wanted to do. I was pushed towards law because I was good with languages.

What I later realised is that IT is closer to languages than it is to maths or physics. I feel like a linguist, you know? To me, Java/JavaScript feels like English/French.

I feel like I am grounded in my professional roots and that I'm expressing myself as a professional because other parts of my life are well done. I have a family -I'm really happy 😀! But professionally, I didn't know what I wanted to do until I started to code.

From law, to motherhood, to your own business, now code. You're a lifelong learner. Did you have an idea about the way to learn that was most efficient for you?

No, it was so completely different when I was learning law.

In law, I was learning from theory or in discussion mode. For me, coding is closer to fixing the car, sewing, or making something out of clay!

I think that for learning to code, the most important thing is mentorship. That personal mentor doesn't have to be on-site.

My biggest mistake was that I chose on-site courses that were really, really, really expensive and not much of use. I think you'll learn more from Scrimba or online coaching.

On-site courses take a lot, a lot of your time. You are expected to work in the group, but people come from different backgrounds and different motivation.

If I could start everything from scratch, I wouldn't go to on-site courses. I would take online courses and I would look for online mentors.

Take online courses, never go to university - I would never think of going to informatics and pursuing another master's degree or something. That's totally a waste of time.

We remember when you were participating in the Frontend Developer Career Path you joined a study group on Discord and frequently helped others.

I was consciously taking other people's problems to solve on my own because what I lacked was experience. And if somebody asks me, "how would you make this logo fit in something?" I say, "okay, let me think about that". So I would take my time, Googling about that, coming up with a solution and presenting them to people.

Being completely honest with you, it's not about helping them, but it was how I gathered my experience.

When I was participating in my technical interview, I had more stories to tell. Interviewers are interested about stories and about the challenges you've faced and solved. I made an impression that I'd solved more problems than I have for my own projects.

When did you know you were ready to start applying for jobs?

I wasn't ready.... And many times during my day, I'm not feeling ready 😂

I was referred by one of my teachers and someone else from DevBridge. The call from the company was a little bit unexpected because I was thinking of joining their academy that is happening this fall and winter to be "more ready". As it happened, I was referred earlier, before the academy.

I didn't have a chance to think of "being ready" or not being ready. But yeah, many times throughout the day when I am facing tough tasks, I question myself, "am I ready to work here?" And the answer is "no never ready" - still working on it!

I think that for many people, it might sound like a miracle and sometimes it sounds like a miracle for me, myself. But I did lots of research and homework. I Googled a lot about the company, I attended the open day events the company hosted. I prepared a lot - for almost 6 months, I was gathering information about this company and about 2 more companies - they were my plan B and plan C. I was actively researching and trying to understand what technology stack the companies are using when they are hiring (because some companies hire in January or do massive hires or in summer, for example).

When you received the call, were they inviting you to interview?

They invited me to HR inter interview with the HR partner and the squad lead.

We talked about why I wanted to be a programmer and my background. They asked me what tasks have I solved before. It was very soft. It was a mild interview, not a technical interview. And then a week later, they invited me for the technical interview that was conducted by 2 developers 🎉

Would you tell us the story about that day? I bet it was exciting and nerve-racking 😬 How long did it take? What did they ask you? What was the process like?

The process was... All the interviews were conducted online through Zoom because of COVID 🦠. They didn't want to perform interviews on-site.

I was nervous and the worst part: the interview was scheduled for 3:00 PM so I had the whole day to feel nervous 😬. If the interview was at 9.00 AM, you just get up and you do it 😂. I was nervous throughout the whole day and the week before because there were 7 days between the soft and technical interview.

During those 7 days, I was studying like mad! That week reminded me of the weeks before legal exams when you don't count the pages you have to read, but you count the centimeters, you know, the inches of the papers!

I Googled out maybe 200, maybe more interview questions for frontend developers from junior to senior level.

I Googled out the answers from various places. I rehearsed myself explaining the concepts - like explaining BEM (EDITOR NOTE: BEM is an acronym for Block, Element, Modifier and is an advanced naming convention for classes in HTML and CSS). I practiced explaining CSS - what a selector does, how preprocessors work, and more.

Of those 200 interview questions you practiced, how many came up?

All of them. Not 200! But all the questions that I received, I was more or less familiar with.

Many concepts I couldn't explain thoroughly because I didn't have any hands-on experience but I knew it from theory.

There wasn't a question that I couldn't say a sentence about. There were some questions I could talk about for 10 minutes (I didn't have that much time 😂) but for other questions, I could only talk a little - I could explain the concepts in like 2 or 3 sentences, but I was showing that I can understand what they're asking me. What, in general, the concept is, but how many questions in numbers? I don't remember, but the interview lasted for about an hour.

Sounds like you prepared really well. You must have been feeling pretty confident, right 😏?

No, I thought they wouldn't take me!

I was expecting that DevBridge would instead invite me to join the academy because I know that they don't typically hire juniors without experience unless they finish that of 3-4 months. In the academy, they teach you the stack and they evaluate if you can work in a large team because the projects this company is working on are HUGE.

I thought that they wouldn't hire me. I thought they would offer me to, to take part in the internship courses (the academy).

But they did hire you! How did they present the job offer to you?

The interview was Friday at 3:00 PM and the squad leader called me Monday during the first part of the day. I only had to wait for a couple of days 😌

They said that it's normal to be contacted in 2 weeks so I was expecting that I will have like 2 weeks of doing Scrimba 😂, But they called me earlier. I was really, really happy about that. And the onboarding process was really quick, really fast. They know what they're doing. They have systems. So far, it's been very smooth.

Did you attempt to negotiate your salary?

I received such a good offer that went beyond my financial expectations for a Junior Software Engineer and so I was just like.. "okay 🙌!!". I didn't negotiate.

I was out of my mind! And I am aware of the benefits system here - it is very transparent.

Once I can be confident about my performance and see that I'm bringing value to the company.... Because right now I'm in a position to learn from other colleagues and I understand how much time are they spending on me - explaining the concepts, how the projects are structured... I know that I will have to negotiate one day, but one step at a time.

Well, when you're the lead developer in a few months (or even sooner) we can chat about it then 😉 What was your first day at DevBridge like? Were you excited?

Oh, yes! I was excited 🎉!

It was so very well organized. It was me and 2 other people who were joining the company that same day. So we had a tour in the office and we both received a T-shirt and backpack with cool stuff inside.

We were taught how to set up the computer. We received clear instructions via email about how to do that. And I just started setting up and my new colleagues helped me out. It was really stress-free and everyone was unintrusive. They gave me time to unpack then little by little, they came in to ask about me, to talk about me. They asked me out for lunch, we had coffee with new people, so it was smooth, but it was intense! I didn't have time to check my phone or something.

To close us out, can you summarise why you succeeded?

I was thinking about that myself because I received many positive messages. I think it's related to that Scrimba posted something about me and people were asking me, "how did you get a job?" It made me think myself...

I think that it was the preparation and the efforts I put forth.

I wasn't only learning to code, but I tried to get familiar with the industry, find friends in the tech world, attend the events, read the blogs, follow the bloggers.

I tried to understand the technology world and the rules of this new game I'm entering.

I worked a little bit with myself with marketing. I had a LinkedIn page that was always up to date. I optimised my LinkedIn for SEO so that the HR team could find me more easily - this is what they did I was thinking "if nobody could find me, I will never be offered anything", so I worked on that.

Also, learning every day. I used to code every day. I still code every day, no matter if I'm tired or if it's a bad day. Every day, I open my laptop. Sometimes for five minutes, sometimes five hours, but it has to be every day.

I hope you enojoyed the read! 😁

Learn Svelte in 5 Minutes

Per — Thu, 18 Jun 2020 13:38:35 +0000

This article gives you a lightning-speed overview of Svelte - a Javascript framework which lets you write less code, uses no virtual DOM and create truly reactive apps.

As if that's not enough, Svelte is super-intuitive too! Built with developers in mind, it is designed to make coding easier, bug-squashing quicker and a developer's work-life generally happier. If that sounds right up your street, then read on!

While 5 minutes won't be enough to teach you Svelte in-depth, it does allow for a solid overview of the basics, including:

Components
Importing and Exporting
Templating
Event handling
Event dispatching
Reactivity

If you want to find out more about Svelte after reading this article, check out the full course over on Scrimba. There, you'll learn about even more Svelte features and have the chance to road test your new skills with a bunch of interactive challenges.

For now, let's get started on the basics!

Components

(Click the image to access the course.)

First, we'll take a look at how to build a Svelte component, which can contain three parts; <script>, which contains Javascript, <style>, which contains CSS and the HTML, which uses the JS from the <script> tag.

<script>
    let say = 'hi';
</script>

<style>
    div {
        color: red;
    }
</style>

<div>
    Say: {say}
</div>

Note: The bare minimum needed for a Svelte component is the HTML, so the app will still work without the <script> and <style> tags.

Importing and Exporting

One big benefit of using frameworks is the ability to modularise code by splitting it into separate components. Components are then imported into the main app using import keyword:

import Face from "./Face.svelte";

Unlike with other frameworks, the export keyword is not required to use a component elsewhere in an app. Instead, it is used to pass parameters, or props, from parent elements to their children.

For example, we can set a size prop with a default size in our component:

<script>
    export let size = 1;
</script>

<div style="font-size: {size}em">=)</div>

This allows us to easily adjust the size of the imported component over in our App.svelte file:

<script>
    import Face from './Face.svelte';
</script>

<Face size="4" />
<Face size="10" />
<Face />

The various sizes appear on the DOM as follows:

(Click the image to access the course.)

Head over to the course on Scrimba to view and play around with the full code.

Templating

The Svelte templating syntax is a great feature which lets us add if statements and for loops to our HTML.

The syntax for an if statement looks like this:

<Container>
    {#if say}
        <div>
            Hi!
        </div>

    {/if}
</Container>

While a for loop is as follows:

{#each [2,1,0] as faceIndex}
        <Face index={faceIndex} />
    {/each}

Event handling

To allow the user to interact with our app, we need event handlers. In this scrim, we see how to add a simple on:click to a <button> to show our app's header:

<button
    on:click={() => {
        showHeader = true;
    }}
>
    show
</button>

And what a header it is..!

(Click the image to access the course.)

There is a gotcha with this, though - it only works with the native HTML <button> tag and not imported components called <Button>. Luckily, we can work around this by using event forwarding, i.e. adding an on:click to the native <button> tag in its component file:

<button on:click>
    <slot></slot>
</button>

Event dispatching

(Click the image to access the course.)
Event dispatching is a great feature of Svelte which increases code usability by allowing us to use the same element for more than one action.

In this scrim, we learn how to use one <Button> component to both show and hide an element.

We create an event dispatcher in the <Button> component file like this:

<script>
    import {createEventDispatcher} from 'svelte'; const dispatch =
    createEventDispatcher();
</script>

We then add the dispatcher to our native HTML <button> like this:

<button on:click={() => dispatch('show')}>
    Show
</button>
<button on:click={() => dispatch('hide')}>
    Hide
</button>

Lastly, we declare the button's functionality options in the App.svelte file as follows:

<Buttons
    on:show={() => {
        showHeader = true;
    }}
    on:hide={() => {
        showHeader = false;
    }}
/>

We can refactor this by passing values up through the dispatch using the event variable (e). In this case, the <Button> in our App.svelte file looks like this:

<Buttons
    on:click={(e) => {
        showHeader = e.detail;
    }}
/>

While the native HTML <button>s in our component file look like this:

<button on:click={() => dispatch('click', true)}>
    Show
</button>
<button on:click={() => dispatch('click', false)}>
    Hide
</button>

Reactivity

If you want a piece of code to rerun every time its associated variable is updated, then Svelte's unique feature, the reactive statement, is for you. We declare a reactive statement with $: as follows:

let score = 0;
$: smileySays = "Hi there, your score is: " + score;

It's also possible to run if statements inside reactive statements. The code to do so looks like this:

let score = 0;
$: smileySays = "Hi there, your score is: " + score;
$: if (score < -4) smileySays = "Wow your score is low!";

That's about all the features we can cram into our 5-minute tour of Svelte. I hope you found it useful and are inspired to try out the framework for yourself and test your new-found skills. Don't forget to check out the full course over at Scrimba to find out about even more Svelte features and give the coding challenges a try.

Wherever your coding journey takes you next, happy learning :)

The Working Developer's Guide To Algorithms

Per — Mon, 15 Jun 2020 09:45:06 +0000

If you're looking to gain new problem-solving skills and level up your Computer Science knowledge, look no further than Scrimba's free one-hour course, The Working Developer's Guide To Algorithms. It was designed for those who don't have a background in Computer Science and feel they would benefit from learning to think algorithmically.

What does the course do?

Our guide takes you through how to craft six different binary search algorithms. In classic Scrimba style, it contains a bunch of challenges along the way, so you'll gain the muscle memory you need to improve your skills as a software developer and work better with algorithms going forward.

You'll learn:

Binary Search
Big O notation
Imperative code
Recursion
Tail recursion
Array splitting
Array view
Partition

Each algorithm is taught in three stages:

Walkthrough: Jonathan introduces the algorithm conceptually.
Implementation: We get our hands dirty by crafting our own versions of the algorithm.
Solution: Jonathan shows us his implementation for comparison.

Prerequisites

You'll get the most out of this course if you have a good understanding of Javascript and are ideally already working as a developer or are a Bootcamp graduate. If you're not there yet, check out Scrimba's great free tutorials Introduction to JavaScript and Introduction to ES6+.

Intro to the instructor

Jonathan Lee Martin is a software developer, web educator, speaker, and author. He helps other developers achieve their professional and personal goals through writing, speaking, immersive Bootcamps, workshops, and online tutorials. With clients including companies such as NASA and HP, he's just the person to take you through the learning journey. So let's get started!

Binary Search

Click the image to access the course.

In the first cast, Jonathan introduces to the concepts of Big-O notation and binary search, the algorithm we'll be working with.

Big-O notation is a means of describing the worst-case performance of an algorithm. A Big O of O(n) says that if an array has a length of n elements, the run time will be proportional to n. In other words, an array of seven entries will take 7 lookups in the worst case, just as an array of 7 million entries will take 7 million entries in the worst case. We can also say this algorithm's runtime is linear, as illustrated in the graph above.

Binary search is one of several strategies for answering the question "Where does this element appear in a list?"

When answering the question, there are two main approaches:

Sweeper: Checking through each item in the list until the correct item is found.
Splitter / Binary Search: Splitting the list in half, checking whether you have gone too far or not far enough to locate the item, searching either right or left side respectively and repeating until the item is located.

We can think of these approaches in terms of checking an old-school paper phone book. The sweeper approach would involve looking through each and every entry from the start until the correct one is located, while the splitter approach is the one most people would use; opening the book randomly and seeing whether you need to go forwards or back until the entry is located

Binary Search is more efficient than the sweeper approach, particularly for larger lists, however, it only works when the list has already been sorted. While the sweeper approach has a linear runtime (see graph above) and Big O of O(n), the splitter approach has a sub-linear runtime and a Big O of O(log n).

Imperative

In the first challenge cast, Jonathan encourages us to get our hands dirty by implementing binary search in a traditional style, that is with a Big O of O(n), using a fixed amount of memory and loops.

Jonathan provides us with a test suite we can use to ensure our solution is successful and encourages us to try the challenge ourselves before checking out his implementation. No spoilers here, so head over to the cast to give it try yourself.

While this solution is short and close to the original formulation of binary search, you've probably noticed that the solution was difficult to write and not the best solution from a software craftsmanship point of view. Read on to find out ways to level up the solution...

Recursion

In this cast, we look at improving our binary search by implementing a new version with a few constraints. While our solution should still have a Big O of O(n), it should not use loops and must use recursion. All variables should be initialized with the const operator so they can't be mutated.

Jonanthan kicks us off with a skeleton version of the solution and then encourages us to try the challenge on our own:

let binarySearchWithRecursion = (array, element, compare = defaultCompare) => {
    return -1;
};

export default binarySearchWithRecursion;

If you've completed this challenge, you've probably seen that this solution is a lot easier to read but is quite verbose. In the worst case, it can also result in infinite recursion. Continue with the course to see whether there are ways of streamlining the solution...

Tail Recursion

The challenge for the next cast is to improve our previous implementation by reducing duplication.

Jonathan warns us that the solution will look worse than the previous two solutions, however, it sets us up for some better optimizations further down the line. Head over to the course now to try the challenge for yourself and see Jonathan's solution.

Array Splitting

If you completed the previous challenge, you may have felt that we're still passing a lot of extra information into our binary search via recursion. This cast looks at a way of cleaning that up called array splitting.

We can think of array splitting in terms of our phone book example from earlier - whenever we decide that half the phone book is irrelevant, we just tear it off and throw it away. Similarly, our next solution should disregard any parts of the array which don't include our desired entry.

To help us achieve this, Jonathan starts us off with some skeleton code:

let binarySearchWithArraySplitting = (
    array,
    element,
    compare = defaultCompare
) => {
    return -1;
};

Then, as usual, he gives us free rein to try to the solution for ourselves before walking us through his own implementation.

Although this is an elegant method of binary search, because it involves making a copy of part of the array, it no longer has a Big O of O(n) and has a higher memory usage and slower run time. Continue with the course to find out whether there is a way to regain a higher performance with a similar code solution...

Array View

In this cast, we look for ways of merging the higher performance of our previous solutions with the elegance of array splitting. To do this, we create an array-like object that responds to the same methods as an array. We'll then inject this object in place of the original array.

Jonathan gets us started by initializing a function ArrayView which returns an object that expects three arguments: array, start and end. When invoked, ArrayView should return an object with four methods, length, toArray, slice and get.

export let ArrayView = (
    array,
    start = 0,
    end = array.length,
) => ({
    length: end - start,
    toArray: () => array.slice(start, end),
    slice: () => ,
    get: () => ,
});

let binarySearchWithArrayView = (array, ...args) =>
    binarySearchWithArraySplitting(ArrayView(array), ...args)

Our challenge is to implement the slice and get methods of ArrayView without making a copy of the original array. Click through to try it out and then view Jonathan's walkthrough.

Although this solution produces better, more readable code, it is longer than some of our previous solutions. Continue with the course to find out if we can retain the benefits of ArrayView while lifting even more of the logic out of binary search code...

Array Partition

In the final challenge cast of the course, Jonathan gives us a goal of extracting some of the cryptic bounce logic in our previous version into a data structure.

For this, we need a simple data structure which returns the middle, left or right part of an array. To start us off, Jonathan sets up a function ArrayPartition:

export let ArrayPartition = (array, pivot) => ({
    left: () => array.slice(0, pivot),
    middle: () => array.get(pivot),
    right: () => array.slice(pivot + 1, array.length),
});

Next, Jonathan sets up a new version of binary search called binarySearchWithPartition, which has a starting signature the same as binarySearchWithArraySplitting:

let binarySearchWithPartition = (array, element, compare = defaultCompare) => {
    if (array.length === 0) {
        return -1;
    }
    const middle = Math.floor(array.length / 2);
    const comparison = compare(element, array.get(middle));

    if (comparison === 0) {
        return middle;
    }

    //bounce logic
    const [left, right] =
        comparison === -1 ? [0, middle - 1] : [middle + 1, array.length];
    //end of bounce logic

    const subIndex = binarySearchWithArraySplitting(
        array.slice(left, right),
        element,
        compare
    );

    return subIndex === -1 ? -1 : left + subIndex;
};

let binarySearchWithPartitionAndView = (array, ...args) =>
    binarySearchWithPartition(ArrayView(array), ...args);

Our challenge now is to rewrite binarySearchWithPartition with none of the bounce logic highlighted above, instead of creating an array partition and making calls to its left, middle and right methods.

Head over to the course now to try the challenge for yourself. As Jonathan points out, this challenge is tricky, so it's ok to skip to his solution if you get stuck for too long but give it a go first on your own.

Wrap-Up

You've made it to the end of the course - great work! We've covered several approaches to binary search, all with their own benefits and drawbacks, and built some great muscle memory for working effectively with algorithms. Now that you've seen six different approaches to binary search, you'll probably notice it pop up in many different places in programming.

Jonathan's full course featuring 10 algorithms will be coming out at the end of the year, but in the meantime, I hope you can put your newfound binary search skills to good use.

Happy coding :)

Learn React in 1 Hour by Building a Movie Search App

Per — Sat, 06 Jun 2020 14:18:44 +0000

If you've been meaning to learn React but unsure of where to start, Scrimba's brand new Build a Movie Search App course is perfect for you! You'll be guided through the app's creation from start to finish in just one hour, with interactive challenges helping you gain the muscle memory you need to become an effective React developer.

Why learn React?

React is the world's most popular front-end framework. As the docs state, React makes it painless to create interactive UIs and more predictable code which is easier to debug. With React, you can produce complex UIs through constructing reusable components that manage their own state.

What does this course do?

This learning journey takes you through 11 interactive screencasts, showing you the following core concepts of modern React:

How to get an API key
Adding base styles
Creating and styling components
Creating functions
Managing state using hooks
Displaying information
Creating and styling cards

Intro to the teacher

This tutorial is led by James Q. Quick, a full-stack Web Developer who regularly speaks at community events and participates in Hackathons. He also runs a YouTube channel teaching web development. His motto 'Learn. Build. Teach.' makes him the perfect teacher for this practical course.

Prerequisites

To study this course effectively, you should have basic knowledge of HTML, CSS, and JavaScript. You'll also find it useful to have seen some React code before, but it's not a must-have. If you need a bit more background knowledge, take a look at these fantastic free Scrimba courses:

If you're ready to hit the ground running with React, let's get started!

Course Introduction

In the first scrim, James runs us through a few of the key features of the app we'll be building and gives us a quick rundown of how the app works. Lastly, James introduces us to the API we'll use - themoviedb.org.

How to Get Your Movie DB API Key

In this short cast, James gives us the lowdown on how to get a Movie DB API Key by signing up with a free account. This is super straightforward and takes just a few minutes. Click the image above to access the course.

Add Base Styles to Your App

Next up, James shows us the basic React application he has instantiated for us:

import React from "react";
import ReactDOM from "react-dom";

class Main extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

ReactDOM.render(<Main />, document.getElementById("root"));

We then add some base styles to our style.css file including margins and padding, title styles and, the Holy Grail of CSS - centering the app's contents. Click here to check out the styles for yourself.

Create Your First Component

In this scrim, we have our first challenge - to create a React component. James uses a test.js file to give us a brief preview of what's needed before breaking down the task into manageable chunks:

//to create the SearchMovies component //form with a class of form //label with
htmlFor="query" and a class of Label //input of type text with a name of "query"
and a placeholder //button class of button and a type of submit

Click through to the link or image above to get your hands dirty and give the challenge a try.

Style the Search Movies Component

Next up, it's time to style our new app. James suggests some styles for our <form>, <label>, <input> and <button> and adds a media query to adjust the styles on larger screens:

@media (min-width: 786px) {
    .form {
        grid-template-columns: auto 1fr auto;
        grid-gap: 1rem;
        align-items: center;
    }

    .input {
        margin-bottom: 0;
    }
}

Don't forget that Scrimba is fully interactive, so you can be as creative as you like with the styles - these ideas are just some possibilities.

Create the Search Movies Function

export default function SearchMovies(){

    const searchMovies = async (e) => {
        e.preventDefault();

        const query = "Jurassic Park";

        const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;

        try {
            const res = await fetch(url);
            const data  = await res.json();
            console.log(data);
        }catch(err){
            console.error(err);
        }
    }

In this screencast, we create an async function that will use the Fetch API to retrieve the movie information from the Movie DB API. Hit the link to see how it's done.

Manage State with React useState Hook

In this scrim, James shows us how to use state to track the user's query with the useState hook:

const [query, setQuery] = useState("");

Next, we set the onChange on our <input> to bind it to that state:

<input
    className="input"
    type="text"
    name="query"
    placeholder="i.e. Jurassic Park"
    value={query}
    onChange={(e) => setQuery(e.target.value)}
/>

Then it's time for our second challenge - to create the state for movie information and update that state as appropriate. Hop on over to the tutorial to try it out.

Display Movie Information

Now that we can search for our movies, it's time to display the information to the user. Click the link or image to see how it's done!

Style the Movie Cards

Next up, James shows us how to style our movie cards to create an attractive, user-friendly app. We start with our card container <div> :

.card {
    padding: 2rem 4rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
}

With that done, we move onto our titles and images. Click the link or image above to get the lowdown.

Create the Movie Card Component (Challenge)

Our final task is to create a separate component to display the movie card. This ensures maintainability should our project grow, and is a good habit to get into in preparation for bigger projects.

In true Scrimba style, James presents this challenge and then walks us through his solution. Head over to the cast now to try for yourself. Note: Props are needed for this, but James gives a quick how-to in the task explanation.

Wrap up

Congratulations on completing the Movie Search app! You now know how to build a fully functional app using core React concepts including functional components, hooks, fetch requests, styling, and reusable components.

I hope that you gained a lot from this course and feel inspired to continue your learning journey. To find out more about React, head over to Scrimba's free, six-hour Learn React for Free course.

After that, why not check out all the other great courses available over on Scrimba to see where you'll go next?

Wherever your journey takes you, happy coding :)

Learn Vuex in 5 minutes.

Per — Fri, 05 Jun 2020 17:07:21 +0000

This tutorial will give you a basic understanding of Vuex by building a plan-making application. A user can type in activities and then vote how much they like/dislike them.

Once you've read this tutorial, you can check out our free Vuex course on Scrimba, if you're interested in learning more.

What is Vuex? From Vue's official documentation

Vuex is a state management pattern + library for Vue.js applications.
It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

This course assumes that you're somewhat familiar with Vue and we will briefly touch on features like props, components and bindings, but will not review them in great detail. If you'd like to have a quick primer on Vue, feel free to check out this course on Scrimba.

The setup

At Scrimba, complicated setups are something we just don't do.
For this tutorial, we've created a simple HTML file where everything can be written. Feel free to write your own CSS or just copy it from this playground

Vue and Vuex libraries are imported via CDN using <script> tags:

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Activity Voter</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
    <style>
      /*
        ADD CSS HERE
      */
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>

  <script>
    /*
      ADD VUE CODE HERE
    */
  </script>
</html>

Alternatively, you can also experiment with the code in this Vue Scrimba playground **RELINK PLAYGROUND TO YOUR OWN ACCOUNT**.

App plan

We're going to build a voting app, that works especially well when you're in a group of friends not knowing what to do and you have to consider all the options.

The functionality will consist of a user being able to type in an activity and then each activity will have a vote up and down button to count up the totals.

Getting started

First, let's quickly mock our app up in HTML. We will use this layout to then extract into a separate component and we will add functionality for the layout to come to life.

<div id="app">
  <h1>Activity voter</h1>
  <form>
    <input type="text" placeholder="Add Activity" />
    <button id="button">Add Activity</button>
  </form>
  <ul>
    <li>
      <span>
Go Snowboarding</span>
<span>🤩</span>
        <button>👎</button>
        5
        <button>👍</button>
      </span>
    </li>
  </ul>
</div>

Add Vuex store with some basic data

Vuex starts with the store. The store is where we keep (store) our state.

<script>
  Vue.use(Vuex);

  const store = new Vuex.Store({

  });

  new Vue({
    el: "#app",
    store
  });
</script>

Let's also add some hard-coded data to the store, that will include one activity and an array with one emoji to display our feelings towards the activity.

<script>
  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: {
      activities: [{ name: "go snowboarding", rating: 5 }],
      emojis: ["🤩"]
    }
  });

  new Vue({
    el: "#app",
    store
  });
</script>

To allow our state to change reactively, we can use Vuex mapState to handle computed state properties for us.

  new Vue({
    el: "#app",
    store,
    computed: Vuex.mapState(["activities", "emojis"])
  });

Add component

Now we have activities inside our state. Let's render a separate component for each of those activities. Each one will need activity and emojis props.

Vue.component("activity-item", {
  props: ["activity", "emojis"],
  template: `
    <li>
      <span>{{ activity.name }}
        <span>{{ emojis[0] }}</span>
        <button>👎</button>
        {{activity.rating}}
        <button>👍</button>
      </span>
    </li>
    `
});

Inside app we can now use our newly created component with all the appropriate bindings for activity and emojis. As a quick reminder, if we want to loop over an array and display a component for each item in an array, in Vue, we can use v-for binding.

<div id="app">
  <h1>Activity voter</h1>
  <form>
    <input type="text" placeholder="Add Activity" />
    <button id="button">Add Activity</button>
  </form>
  <ul>
    <activity-item
      v-for="item in activities"
      v-bind:activity="item"
      v-bind:emojis="emojis"
      v-bind:key="item.name">
</activity-item>

</ul>
</div>

Add mutations to store

If we want to update the store in Vuex, we can use mutations. At the moment we will just console.log that a mutation happened and we will implement it afterwards.

const store = new Vuex.Store({
  state: {
    activities: [
      { name: "go snowboarding", rating: 5 },
    ],
    emojis: ["🤩"]
  },
  mutations: {
    increment(state, activityName) {
      console.log('increment');
    },
    decrement(state, activityName) {
      console.log('decrement');
    },
  }
});

How do we trigger a mutation? We call a commit function on $store with the name of mutations we want to be executed. Any arguments after the name of a mutation are treated as arguments to a committed mutation.

new Vue({
  el: "#app",
  store,
  data() {
    return {
      activityName: ""
    };
  },
  computed: Vuex.mapState(["activities", "emojis"]),
  methods: {
    increment(activityName) {
      this.$store.commit("increment", activityName);
    },
    decrement(activityName) {
      this.$store.commit("decrement", activityName);
    }
  }
});

Add functionality to component

Each activity-item has voting buttons that need to increment and decrement on click of a button. We can pass these functions as props. Let's now bind our methods to props.

<activity-item
  v-for="item in activities"
  v-bind:increment="increment"
  v-bind:decrement="decrement"
  v-bind:activity="item"
  v-bind:emojis="emojis"
  v-bind:key="item.name">
</activity-item>

Let's also not forget to provide activity.name as an argument to both.

Vue.component("activity-item", {
  props: ["activity", "emojis", "increment", "decrement"],
  template: `
    <li>
      <span>{{ activity.name }}
          <span>{{ emojis[0] }}</span>
          <button @click="decrement(activity.name)">👎</button>
          {{activity.rating}}
          <button @click="increment(activity.name)">👍</button>
      </span>
    </li>
    `
});

And there we go! The flow is working. We can see the console.log statement in the console.

Implement counter

Let's implement the counter. First, we need to find an activity by its name, and then update its rating.

  mutations: {
    increment(state, activityName) {
      state.activities
        .filter(activity => activity.name === `${activityName}`)
        .map(activity => activity.rating++);
    },
    decrement(state, activityName) {
      state.activities
        .filter(activity => activity.name === `${activityName}`)
        .map(activity => activity.rating--);
    }
  }

Perfect, we can now vote on activities.

Use form input to add activity

But of course, we need to be able to add activities too.

Let's create a mutation to the store, that would add an activity to the list of existing activities, with a name that we will later get from the input and a default rating of 0.

 mutations: {
    ...
    addActivity(state, name) {
      state.activities.push({ name, rating: 0 });
    }
  }

Inside methods, we can commit a new activity to the store.

methods: {
    ...
    addActivity(activityName) {
      this.$store.commit("addActivity", activityName);
    }
  }

Implement form submission

Let's wire up the submit function to our HTML form.

<form @submit="onSubmit">
  <input type="text" placeholder="Add Activity" v-model="activityName" />
  <button id="button">Add Activity</button>
</form>

We can now add our submit function to methods. Inside, we're going to use our existing addActivity method and in the end, reset activityName in the input field to an empty string.

methods: {
    ...
    onSubmit(e) {
      e.preventDefault();
      this.addActivity(this.activityName);
      this.activityName = "";
    }
  }

We call e.preventDefault() to avoid the form from reloading on each addition of a new activity.

All the counters now work and the field gets updated. It does look a bit strange, that we have only one emotion for all the activities, no matter what their rating is.

Let's rewrite emojis into an object with some description of what moods they are meant to reflect and clean up existing state, so we start from no activities.

state: {
    activities: [],
    emojis: { yay: "🤩", nice: "😀", meh: "😐", argh: "🤬", hateIt: "💩"}
},
...

And as a finishing touch, we can display different emojis depending on the rating an activity has.

Vue.component("activity-item", {
  props: ["activity", "emojis", "increment", "decrement"],
  template: `
    <li>
      <span>{{ activity.name }}
        <span v-if="activity.rating <= -5">{{ emojis.hateIt }}</span>
        <span v-else-if="activity.rating <= -3">{{ emojis.argh }}</span>
        <span v-else-if="activity.rating < 3">{{ emojis.meh }}</span>
        <span v-else-if="activity.rating < 5">{{ emojis.nice }}</span>
        <span v-else>{{ emojis.yay }}</span>
        <button @click="decrement(activity.name)">👎</button>
          {{activity.rating}}
        <button @click="increment(activity.name)">👍</button>
      </span>
    </li>
    `
});

We start with a blank app, which is what we wanted.

And now if we add back the two activities we used to have in the app, vote on the ratings we have emojis that reflect how we feel about the activities!

Full Code

Learn React Hooks by Building a Paint App

Per — Fri, 05 Jun 2020 17:05:14 +0000

According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian Jensen's 14-part tutorial to find out about the basics of this new feature of React. Follow along to find out more!

Intro

Hooks are new to the React library and allow us to share logic between components and make them reusable.

In this course, we will be building a paint app similar to Microsoft Paint, which will allow us to name our project, switch out colors, get a new batch of colors and of course paint.

Scrimba allows you to pause screencasts at any time and play with the code. It's a great way to learn by doing!

Prerequisites

The course assumes some prior knowledge of ES6, JSX, State and Props, but no worries, we've got you covered - check out our Scrimba articles by hitting the links above.

If you are completely new to React, be sure to check out our Scrimba React course

`useState` - Part 1

First, we give our application a way to manage state using useState.

In our <Playground.js /> component, we declare a component called <Playground /> and create buttons to increment and decrement it. We then give useState an argument of (0) and use state restructuring to get state and setState (the function which updates the state) from our useState function. These are now renamed to count and setCount. We then render our count in the browser.

Lastly, we render buttons which update the count using an inline function which will be triggered on the click.

To ensure our count is accurate, we pass a function to our setState function instead of a value. This function takes the current state as its argument, which is then updated:

import React, { useState } from "react";
import randomColor from "randomcolor";

export default function Playground() {
    const [count, setCount] = useState(0);
    return (
        <div>
            {count}
            <button onClick={() => setCount((currentCount) => currentCount - 1)}>
                -
            </button>
            <button onClick={() => setCount((currentCount) => currentCount + 1)}>
                +
            </button>
        </div>
    );
}

If you're worried about the performance of inline functions, take a look a this blog.

`useState` - Part 2

Now we add our name input to the <Name.js /> component so the user can name their project.

To set up<Name.js /> with a useState Hook, we need to import the Hook with a named import and then set our state up. Our state will be name and we will update it with setName. We then call useState and pass in an empty string as our default state value.

We now need an input element with four properties. These are:

value, which will always be the state name from above
onChange, which will use setState inline to update name by passing the value into setState
onClick which uses setSelectionRange which takes a start index of 0 and end index of the length of the string to select the entire name, making it easier for the end-user to change the name.
placeholder, which we set to 'Untitled'.

import React, { useState } from "react";

export default function Name() {
    const [name, setName] = useState("");
    return (
        <label className="header-name">
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                onClick={(e) => e.target.setSelectionRange(0, e.target.value.length)}
                placeholder="Untitled"
            />
        </label>
    );
}

We can now name our project and select the name to reset it with just one click:

`useEffect`

Currently, our Playground.js component is simply rendering a counter where can increment or decrement the count. Now we will update this so that every time the count is changed, the color of something is also changed.

We use the useState Hook to set up the initial color, which we set to null and the function to update it (setColor). Now, we set up useEffect to update this color. useEffect's first argument is setColor, which we want to set to a randomColor.

As we only want a change in count to trigger useEffect, we set this as the second argument. If the count value hasn't changed, the Hook will not run the effect and the color will remain the same.

import React, { useState, useEffect } from "react";
import randomColor from "randomcolor";

export default function Playground() {
    const [count, setCount] = useState(0);

    const [color, setColor] = useState(null);
    useEffect(() => {
        setColor(randomColor());
    }, [count]);

    return (
        <div style={{ borderTop: `10px solid ${color}` }}>
            {count}
            <button onClick={() => setCount((currentCount) => currentCount - 1)}>
                -
            </button>
            <button onClick={() => setCount((currentCount) => currentCount + 1)}>
                +
            </button>
        </div>
    );
}

Now, our color changes every time we increment or decrement our count.

`useState` & `useEffect` Challenge

It's now time to test the skills we have acquired so far. In this screencast, a function which gets some random colors for us has been added to :

const getColors = () => {
    const baseColor = randomColor().slice(1);
    fetch(`https://www.thecolorapi.com/scheme?hex=${baseColor}&mode=monochrome`)
        .then((res) => res.json())
        .then((res) => {
            setColors(res.colors.map((color) => color.hex.value));
            setActiveColor(res.colors[0].hex.value);
        });
};

Our task is to write the functions for setColors, which will give us an array of hex colors and setActiveColor, which will tell use what the active color is.

If we set up everything correctly, the UI will update with five colors which we can click on to expand. We only need useState and useEffect for this test.

`useState` & `useEffect` Solution

In this screencast, Christian walks us through how to give functionality to the <ColorPicker /> component. At the end of it, we now have some colors:

`useEffect` Clean Up

Now we add a component called <WindowSize.js /> which will show the window width and height at the bottom of the screen when the user resizes the window. This then disappears after half a second.

When we set up a timer or an event listener, we also need to clean it up once the component unmounts. This requires two pieces of state - the window size and visibility of the <WindowSize /> component:

export default function WindowSize() {
    const [[windowWidth, windowHeight], setWindowSize] = useState([
        window.innerWidth,
        window.innerHeight,
    ]);
    const [visible, setVisible] = useState(false);
}

Now we set up our effect, which adds the event listener:

useEffect(() => {
    const handleResize = () => {};
    window.addEventListener("resize", handleResize);
});

Next, we set up the cleanup phase. This returns the function and an empty array is passed in to tell it that useEffect should only run on the first mount. The cleanup will then run and remove the event listener:

useEffect(() => {
    const handleResize = () => {};
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, []);

We now set up the window size, the visibility and the timer so that the the resize window appears and then disappears after 500 milliseconds:

const [visible, setVisible] = useState(false);
useEffect(() => {
    const handleResize = () => {
        setWindowSize([window.innerWidth, window.innerHeight]);
        setVisible(true);
        setTimeout(() => setVisible(false), 500);
    };
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, []);

However, we do not want to add a new timer every time the user resizes the window, so we also need to clean up the timer with clearTimeout(timeoutId):

timeoutId = setTimeout(() => setVisible(false), 500);

To give clearTimeout the timeoutId from the last time the function ran, we use closures, which means that we declare our timeoutId variable outside the handleResize function. This way, the variable is still available to the inner function. Every time the function runs, the previous timeout will be cleared and a new one will be set up.

Lastly, we render our resize function to the browser.The final code can be seen in the screencast.

Now, whenever the user resizes their window, the window size is set to the current window size, the visibility is set to true, and a timer is started to set the visibility to false after 500 milliseconds.

`useRef` Challenge

If you need to access to actual DOM elements in React, you may need to use Refs. React has a Hook, useRef, which is dedicated to Refs.

To use a Ref, it needs to be added to the element:

<input
    ref={inputRef}
    type="range"
    onChange={(e) => setCount(e.target.value)}
    value={count}
/>

This input is a slider which updates the count and therefore the selected color. As the value is also tied to the count, the slider will also adjust if the count is changed via the buttons we added earlier.

We have now declared our Ref, but we also need to set it up by calling useRef:

const inputRef = useRef();

In order to focus the input every time we change the count with the buttons, we simply add the necessary logic inside the effect which runs when the buttons are clicked:

 useEffect(() => {
    setColor(randomColor())
    inputRef.current.focus()
  },

Currently, the canvas is set to the height of the window itself, which makes it possible for the user to scroll within the canvas, which can lead to empty whitespace if the image is exported.

Our challenge now is to ensure that the canvas of our paint app is only as big as the window minus the header height. To do this, we need to use useRef to get the height of the header and subtract it from the window's height.

`useRef` Solution

In this screencast Christian walks us through how to get the correct canvas height with useRef.

After this, the user is no longer able to scroll, except for a few pixels offset between Scrimba's browser and a regular browser. There is now no whitespace at the bottom of the image.

`useCallback` & `useMemo` + Challenge

In this screencast, we are introduced to the concept of _ memoization_. This is when a pure function returns the same output from a calculation it has previous processed, rather than re-running the entire calculation:

function Calculate(num) {
    // first call, num === 3... ok I will calculate that
    return fetchComplicatedAlgorithmToAdd47(3); // returns 50 after a while

    // second call, num === 5... ok I guess I have to calculate that too
    return fetchComplicatedAlgorithmToAdd47(5); // returns 52 after a while

    // third call, num === 3... WAIT, I've seen this before! I know this one!
    return 50; // immediately
}

React provides two Hooks which allow us to use memoization: useCallback and useMemo.

`useCallback`

We start off with a very simple component in Playground.js which renders the number of times the function has rendered:

function Calculate(num) {
    const renderCount = useRef(1);
    return <div>{renderCount.current++}</div>;
}

Now let's say that the component should only render when the count changes, but not when the color changes. To achieve this, we could use useCallback. We assign the result of useCallback to a variable called calculate:

const calculate = useCallback(<Calculate />, [count]);

We will now render our new calculate variable instead of the <Calculate /> component. Now, the component only renders when the count is changed, and not when the 'Change Color' button is clicked.

We also need to render our <Calculate /> component instead of the variable we previously used and create a callback function. We use useCallback and assign it to a variable called cb. The count is the only dependency, meaning that if the count changes we will get a new function instance:

const cb = useCallback((num) => console.log(num), [count]);

Now we pass in a number (which is set to the count) to the Calculate component and the callback function, which we log to the console. Whenever the Calculate component re-renders (i.e. when the plus and minus buttons are clicked), the current count will be logged to the console.

However, with this method, the count is also logged to the console when we click the 'Change Color' button. This is because we are using memoization for our console.log function, but not for our actual component, meaning that is not checking whether the callback function is the same as a previous one.

`React.memo`

To solve this, we add React.memo to the Calculate component. Now, it will check the inputs and see whether they are the same, and will not render if so:

const Calculate = React.memo(({ cb, num }) => {
    cb(num);
    const renderCount = useRef(1);
    return <div>{renderCount.current++}</div>;
});

The 'Change Color' button now no longer logs the count to the console.

`useMemo`

To see what useMemo can do, we add a useCallback call right next to a useMemo call:

useCallback(() => console.log("useCallback"));
useMemo(() => console.log("useMemo"));

This tells us that useMemo is used every time the function renders. This is because useCallback returns the functions, whereas useMemo returns the result of the function:

useCallback(() => console.log("useCallback")); // return the function
useMemo(() => console.log("useMemo")); // return the result of the function

useMemo can be used for some expensive functions which you want to memoize. UseCallback, on the other hand, is better for passing a callback into a component when you don't want to render the component unnecessarily.

The screencast finishes with a new challenge. Our paint app currently offers only a few colors to work with. Our challenge is to add some functionality to a newly-added refresh button so that the user can click the button and get some new colors. This should take place in RefreshButton.js, which is currently taking in a callback and should be calling that callback when the refresh button is clicked. Our challenge is to pass in the callback using useCallback or useMemo.

As a bonus challenge, we are also asked to use React.memo to memoize the <Name /> component, which is currently rendering unnecessarily every time we change our colors.

`useCallback` Solution

Now, Christian walks us through the solution to the previous challenges, follow him in this marvellous screencast.

At the end of the screencast, our refresh button is now supplying shiny new colors when clicked:

Custom Hooks

Here, we learn about custom Hooks by refactoring the <WindowSize /> component into a Hook. This is great for reusability.

Currently, <WindowSize /> is handling two different sets of state; the window size and visibility. As visibility might not be needed in future uses of <WindowSize />, we move its logic into our <Paint /> component, which is also where we will use our useWindowSize Hook.

The following lines are removed from WindowSize.js:

let timeoutId;
///
setVisible(true);
clearTimeout(timeoutId);
timeoutId = setTimeout(() => setVisible(false), 500);

Additionally, the following lines now need to be returned from <Paint.js /> instead of <WindowSize />:

<div className={`window-size ${visible ? "" : "hidden"}`}>
    {windowWidth} x {windowHeight}
</div>

The window width and height will be returned from <WindowSize />:

return [windowWidth, windowHeight];

To make the windowWidth and windowHeight variables available, we add the following code to <Paint.js />:

const [windowWidth, windowHeight] = useWindowSize();

To implement the visibility logic so that we can show and hide the window size as necessary, we pass in a callback to our useWindowSize Hook and use a Ref to make timeoutID available between renders:

let timeoutId = useRef();
const [windowWidth, windowHeight] = useWindowSize(() => {
    setVisible(true);
    clearTimeout(timeoutId.current);
    timeoutId.current = setTimeout(() => setVisible(false), 500);
});

We can now call this when we need to from <WindowSize />:

export default function useWindowSize(cb) {
    const [[windowWidth, windowHeight], setWindowSize] = useState([
        window.innerWidth,
        window.innerHeight,
    ]);

    useEffect(() => {
        const handleResize = () => {
            cb();
            setWindowSize([window.innerWidth, window.innerHeight]);
        };
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);
    return [windowWidth, windowHeight];
}

We now have the same functionality as before but the <WindowSize /> logic is in a reusable Hook.

The lessons ends with another challenge - to convert the <Canvas /> component into a function which uses Hooks instead of lifecycle methods.

Building the paint app with Hooks

This screencast walks us through how to convert <Canvas /> into a functional component using Hooks. It also shows us how to refactor our app to make it much cleaner and more readable. A big advantage of using Hooks is that all related logic is next to each other, in contrast to our old components in which related logic items were separated from each other.

At the end of the screencast, our paint app is finally finished and we are ready to paint our masterpieces:

Outro

We have now finished the React Hooks course. We have learnt about:

useState, which manages state
useEffect, which does side effects,
useRef, which gets references to DOM elements and keeps values across renders
useCallback, which creates functions which don't need to be created on every render
useMemo, which memoizes expensive computations
React.Memo, which can go around a React component and memoize it
custom Hooks, which allow us to create our own reusable logic.

There are two rules to keep in mind when using any of these Hooks:

Only call Hooks at the top level of the React component, i.e. not within if blocks or anything similar.
Only call Hooks from React functions, not your own custom functions.

Congratulations on following the tutorial and learning all the skills used in this project. To further your learning, check out Scrimba's free, six-hour Learn React for Free course which aims to make you a React wizard!

Happy coding!

Build Tic-Tac-Toe with React Hooks

Per — Fri, 29 May 2020 13:50:16 +0000

If you have a good understanding of HTML, CSS, JavaScript, and React and are wondering where to go next on your learning journey, why not check out Scrimba's brand new, free tutorial on how to build the classic Tic Tac Toe game in React?

Click above to go to the tutorial.

The example game is pulled from React's official tutorials but is brought bang up to date using React hooks - the latest hot topic in the React world. This article gives you an overview of the tutorial and lets you click through to the screencasts and play with the code at any time.

If your HTML, CSS, JavaScript or React skills feel shaky, never fear - Scrimba offers a huge range of tutorials to bring you up to speed. We recommend the following courses to get you ready for the Tic Tac Toe tutorial:

HTML & CSS Crash Course with Kevin Powell
Introduction to Javascript with Dylan C. Israel
Learn React for Free with Bob Ziroll

In true Scrimba style, the Build Tic Tac Toe with React Hooks tutorial contains loads of interactive challenges along the way, so you'll embed your learning and feel like a hooks wizard by the end of it.

The course is led by Thomas Weibenfalk, a passionate developer, designer, and coding instructor from Sweden. Thomas loves teaching people about front-end development, especially React, making him the ideal teacher to take you through this learning experience.

Assuming you're ready to go with Tic Tac Toe, let's get started!

Introduction

In the first scrim, Thomas tells us about his plans for the tutorial and shares the Official React Documentation, which we can refer to for a more detailed explanation of the features used to build the game.

As well as talking us through the file structure he has implemented for the app, Thomas also gives us our first glimpse of the finished product. Click the image above to visit the cast.

Scaffolding Components

Next up, Thomas talks us through setting up the Board.js, Game.js and Square.js files needed to create the game. We also see how to import Game.js into the App.js file.

import React from "react";
import Game from "./components/Game";

const App = () => <Game />;

export default App;

Square Component and Destructuring Props

In the next scrim, we create our square component using JSX to add a button:

const Square = (props) => (
    <button onClick={props.onClick}>{props.value}</button>
);

For our first challenge, Thomas encourages us to destructure out the props in our component. Click through to the cast to give the challenge a try.

Board Component and Scaffolding Functions

Now it's time to create the board component by importing the square component and adding nine instances of it to the board (note that we will refactor this with a loop to improve the code later):

<div>
    <Square value="1" onClick={() => onClick("dummy value")} />
    <Square value="2" onClick={() => onClick("dummy value")} />
    <Square value="3" onClick={() => onClick("dummy value")} />
    <Square value="4" onClick={() => onClick("dummy value")} />
    <Square value="5" onClick={() => onClick("dummy value")} />
    <Square value="6" onClick={() => onClick("dummy value")} />
    <Square value="7" onClick={() => onClick("dummy value")} />
    <Square value="8" onClick={() => onClick("dummy value")} />
    <Square value="9" onClick={() => onClick("dummy value")} />
</div>

Thomas also scaffolds out the functions we need in Game.js, which we'll complete later.

Square Styling

Click the image to access the cast.

Next up, we style our squares using the style default prop:

const style = {
    background: "lightblue",
    border: "2px solid darkblue",
    fontSize: "30px",
    fontWeight: "800",
    cursor: "pointer",
    outline: "none",
};

const Square = ({ value, onClick }) => (
    <button style={style} onClick={onClick}>
        {value}
    </button>
);

Board Styling

Click the image to access the scrim.

Now that our squares are ready, it's time to the style the board. Thomas kicks us off by once again creating a style object, this time with CSS grid:

const style = {
    border: "4px solid darkblue",
    borderRadius: "10px",
    width: "250px",
    height: "250px",
    margin: "0 auto",
    display: "grid",
    gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)",
};

Our challenge now is to apply the style object to the board. Head over to the scrim to give it a try.

Don't forget, while Thomas has provided some great styling options, Scrimba is fully interactive, so you are free to customize your game however you prefer - let your imagination run wild!

The calculateWinner Function Explained

export function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

Next up, Thomas explains the all-important calculateWinner() function, which is taken from the original tutorial from reactjs.org. Head over to the cast to explore the function and hear how it works.

Create States and Fill with Initial Data

In the next scrim, we start creating the logic for the game.

We begin by adding a hook called usedState in Game.js and creating states to set an empty board and specify the next player. Lastly, we add const winner, which tells us whether the latest move was a winning one:

const [board, setBoard] = useState(Array(9).fill(null));
const [xIsNext, setXisNext] = useState(true);
const winner = calculateWinner(board);

Over in Board.js, we delete our manually-rendered squares and replace them with mapped squares as promised earlier. Click through to see this in detail:

const Board = ({ squares, onClick }) => (
    <div style={style}>
        {squares.map((square, i) => (
            <Square key={i} value={square} onClick={() => onClick(i)} />
        ))}
    </div>
);

Create the handleClick Function

Next, we create the handleClick() function, which carries out the calculations when we make a move:

const handleClick = (i) => {
    const boardCopy = [...board];
    // If user click an occupied square or if game is won, return
    if (winner || boardCopy[i]) return;
    // Put an X or an O in the clicked square
    boardCopy[i] = xIsNext ? "X" : "O";
    setBoard(boardCopy);
    setXisNext(!xIsNext);
};

renderMoves Function and the Last JSX

Click above to go to the tutorial.

In this scrim, we create the JSX which makes the game playable.

<>
  <Board squares={board} onClick={handleClick} />
  <div style={styles}>
    <p>
      {winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}
    </p>
  </div>
</>

We now have the all knowledge needed to create a fully working Tic Tac Toe game with React hooks!

BONUS: Implement Time Travel

Click the image to go to the bonus tutorial.

In the bonus scrim, we take our game to the next level by implementing time travel to review the moves made throughout the game. Click through to get the goodies in this bonus tutorial.

So there we have it - a fully working Tic Tac Toe game using React hooks! I hope you found this tutorial helpful. Don't forget, you can refer back to it at any time to refresh your memory of the topics covered or play around with the code in the interactive screencasts.

If you feel that this Tic Tac Toe tutorial was a bit over your level, you can start our with our free Learn React Course. It'll ensure that you have the basics in place before tackling more complex React tutorials.

Happy learning :)

Want to learn Vuetify? Here's our free 15-part course by Gwen Faraday

Per — Tue, 26 May 2020 09:37:17 +0000

If you love building apps in Vue.js but struggle to know where to start with UI design, look no further than Vuetify - a UI library containing handcrafted material components which give apps a beautiful finish and professional feel.

Why learn Vuetify?

Vuetify is the most popular component library for Vue.js, enabling you to create great-looking, accessible apps even if UI design isn't your area. While the library has over 80 elements ready to use straight out the box, it also allows you to create custom elements, giving your apps a clean yet bespoke feel.

This article takes you through Scrimba's free two-hour Vuetify course by Gwen Faraday. The course teaches you all the core skills needed to get started with Vuetify, including:

Typography
Spacing
Buttons
Navigation
Grid
Card

In the first half, Gwen introduces all the Vuetify elements needed to build a great app. As with all Scrimba courses, you can pause the scrims and explore the code.

The second half lets you get your hands dirty by building a webshop. This puts your new skills to good use and lets you apply your newfound knowledge.

By the end, you'll be fully versed in building professionally-styled apps with Vuetify.

Intro to the Instructor

Gwen Faraday is a software engineer, author, speaker, and & content creator who also runs a Youtube channel, the Faraday Academy, where she teaches a wide range of subjects including Vue.js and Vuetify. This makes her the perfect teacher to take you through this learning journey and bring your Vuetify skills to the next level.

Prerequisites

To learn the most from this tutorial, you'll need a decent understanding of HTML, CSS, Javascript and Vue.js. If you're not there yet, check out Scrimba's great free courses to get you up to speed:

If you’re ready to hit the ground running with Vuetify, let’s get into it!

Intro to Vuetify

In the first cast, Gwen introduces us to Vuetify and shares the two Github repositories where she has stored all the code, basic-components and vuetify-responsive. This allows us to download the code and try it out for ourselves.

What is Material Design?

Next up, we learn about Material Design, a standard developed by Google for implementing accessible, user-friendly interfaces.

The Material Standard provides a set of rules for the most common elements found on web pages including buttons, text, navigation and more advanced features such as movement and elevation.

Vuetify takes the hard work out of implementing this standard by providing a bunch of ready-made compliant UI elements which we can add to our Vue.js application straight out the box.

First Look at Vuetify Code

In the next cast, Gwen gives us our first look at Vuetify code by instantiating a Vue application, adding a Vuetify property and creating a new Vuetify object:

new Vue({
    el: "#app",
    vuetify: new Vuetify({}),
    data: {
        message: "Using Single File Components",
    },
});

Next, Gwen shows us the <v-app> element, which is the root component of all Vuetify elements (Vuetify components must fall within <v-app>):

<v-app>
     <v-content>
          <playground></playground>
     </v-content>
</v-app>

Typography

Click the image to access the course.

In the next scrim, we see some of the options Vuetify offers to handle typography, including headings, titles, subtitles and body text. We also see how to change text color and background color.

<v-card-text>
     <h1 class="display-4 purple yellow--text">Heading 1</h1>
     <h2 class="display-3">Heading 2</h2>
     <h3 class="display-2">Heading 3</h3>
     <h4 class="title">Title</h4>
     <h5 class="subtitle-1">Subtitle</h5>
     <p class="body-1">Body</p>
</v-card-text>

Finally, we see how to use Vuetify classes to adjust font weight and style:

<h1 class="font-italic font-weight-light">Heading 1</h1>

Note: Vuetify classes override any other styles that the browser applies to HTML tags.

Spacing

Next up, we explore some of the spacing classes in Vuetify, which allow us to add margins and padding. We also see how to change spacing size.

<h3 class="ml-5">Spacing</h3>

Best of all, Gwen also shows us how Vuetify classes can help with that holy grail of app styling - centering an element! Click through to the course to find out more.

Buttons

Click the image to access the course.

In the next scrim, we look at some of the options available with Vuetify's button component, including buttons with text, icons or both.

<v-btn large block>Submit</v-btn>

Lastly, we look at how to build custom buttons using classes from earlier.

<button v-ripple class="elevation-2 py-2 px-4">
     Submit
</button>

Navigation

Click the image to access the course.

Next up, we look at the two main navigation options available in Vuetify,<v-app-bar> and <v-toolbar>. Both navigation elements provide automatic button and icon sizing, navigation icons and the ability to handle list dropdowns.

<v-toolbar color="deep-purple accent-4" dense dark>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>App Title</v-toolbar-title>
</v-toolbar>

Click through to see all this in action!

Grid

Click the image to access the course.

In the next scrim, Gwen takes us through Vuetify's grid system, which is split into 12 columns, with five built-in media breakpoints for handling different screen sizes.

<v-row>
    <v-col cols="12" sm="6">
        <v-card
        class="pa-2"
        outlined
        tile
        >
        Column
        </v-card>
    </v-col>
</v-row>

Card

Click the image to access the course.

In this cast, Gwen explains that Vuetify uses a <v-card> component as the wrapper for any UI card. This component can take props, classes and slots and has custom events, allowing for neat, well-aligned cards in any use case.

 <v-card-title>
    <v-icon
        large
        left
    >
        mdi-twitter
    </v-icon>
    </v-card-title>

    <v-card-text class="headline font-weight-bold">
    "Vue Rocks!"
    </v-card-text>

</v-card>

Gwen also introduces us to the <v-spacer> element, which lets us easily add whitespace between elements.

Finally, we check out the Playground.vue file - a space for us to explore the features of Vuetify Gwen has shown us so far. Head over to the course to try it out for yourself and see what Vuetify can do.

Store Navigation

Click the image to access the course.

Next, it's time to start building our store application. Gwen starts us off by adding a navigation bar including responsiveness and a drawer menu. We also run through some options for styling, including icons and a dense menu.

Home Page

Next up, it's time to add a home page. Gwen adds the header and a footer and then sets us the challenge of coding the mid-section using the mock-ups provided. Head over to the screencast to test out your new Vuetify skills and compare your work to Gwen's solution.

To finish off, Gwen shows us the <v-snackbar> element, which can be used to notify a user when a product has been added to the cart.

<v-snackbar
    v-model="$store.state.snackbar.show"
    :multi-line="true"
    :right="true"
    :top="true"
    :timeout="6000"
    :color="$store.state.snackbar.variant"
>
    {{ $store.state.snackbar.message }}
    <v-btn
    dark
    text
    @click="$store.commit('updateSnackbar', { show: false })"
    >
    Close
    </v-btn>
</v-snackbar>

Store Page

Click the image to access the course.

In the next Scrim we build out our store page using Vuetify grid elements. First up, we add product cards by reusing the cards we built for our home page. Next, Gwen challenges us to build out a sidebar with the <v-sheet> and <v-expansion-panels> elements.

Head over to the cast to give the challenge a try.

Cart Page

Click the image to access the course.

Next up, we add a cart page to our app. Once again, Gwen sets us the challenge of coding out the page as per her mock-ups, which is great practice for real-world coding and flexes the muscle memory needed to become a Vuetify wizard.

Click through to give the challenge your best shot before comparing your work with Gwen's final code. Don't forget, you can always look back at the previous scrims or check out the Vuetify docs if you're having trouble.

Checkout Screen

In the final code scrim, we build a simple checkout flow using the <v-stepper> element.

<v-stepper-header>
    <v-stepper-step
        step="1"
        :complete="step > 1"
    />
    <v-divider />
    <v-stepper-step
        step="2"
        :complete="step > 2"
    />
    <v-divider />
    <v-stepper-step
        step="3"
    />
    </v-stepper-header>

To finish the course, Gwen points out that there are a few features in the mockups which we haven't covered and encourages us to have a go at coding them ourselves using Scrimba's interactive interface.

Conclusion

A huge well done for completing the course! I hope you've found it useful and now have the confidence to build stunning apps using Vuetify. Why not continue your learning journey by checking out the huge range of other topics available over at Scrimba?

If you don't know where to start, you can check out our Learn React for Free course with Bob Ziroll.

Wherever you go next, happy coding :)