Forem: Vlad Anghel

Best Coding Challenge Websites to Practice your Skills

Vlad Anghel — Fri, 28 Aug 2020 21:25:17 +0000

A few days ago, I had my first whiteboard interview for which I had to practice my JavaScript skills using various coding challenges found online. Below I want to share the coding challenge websites that stood out to me and helped me over time in the process of learning programming:

1. Codewars

This is my personal favorite, since they have various difficulties, from beginner to the very advanced and they employ a ranking system similar to the one encountered in the Japanese martial arts.

2. HackerRank

HackerRank was actually recommended to me by the company I was interviewing for. They have curated challenges from many companies.

3. Edabit

If you are an absolute beginner I strongly recommend starting with this one since they have very easy problems.

4. LeetCode

LeetCode features more advanced challenges and contests. If you have some experience, this one is for you.

5. freeCodeCamp

freeCodeCamp has also a collection of hundreds of challenges that you can practice your skills on.

6. Exercism

Exercism gets also a mention since they provide you with mentor support to provide feedback to your challenge solutions.

#Day4 of #100DaysOfCode: Protect your eyes!

Vlad Anghel — Thu, 23 Jan 2020 20:33:27 +0000

I feel that eye health is a subject that is not talked enough in the dev community. After spending more than half of my life in front of computers, I feel that this is finally taking a toll on my eyes. After stumbling upon this amazing Dev article: The Definitive Guide To Protecting Your Eyes For Developers, which features some great advice, I decided it's time to invest in my eye health. 👁👁

Here are a few steps that I've recently introduced into my daily routine:

drinking more water
washing my eyes more often and massaging them
eating more fish and taking an Omega-3 supplement
activating Night Shift on my Mac
looking away from the computer every 20 minutes or so
limiting my computer time when it's possible
choosing night mode on websites where it's available

👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀

Back to JavaScript, today I updated my BAT Price app to include the BAT-USD price for one hour ago. For those of you that don't know what I'm talking about, BAT is a new cryptocurrency offered as a reward for watching ads on the Brave browser. Being concerned about Google's recent privacy record, I decided to switch from Google Chrome to Brave. The small React app that I developed shows the current BAT-USD price and it updates it every 30 seconds. It will also draw a line graph to help you keep track of the price change. My reason for building this was getting into Chart.js and I have to say I really enjoyed working with it.

You can try the app here - mobile friendly 📈
If you want to have a look at the code, you can find it here

Another takeaway of this project is that I learnt how to deploy a React app to Github Pages. If you're also wondering how, this article explains it perfectly:

How to deploy a create react app to Github pages

JavaScript Tip of the Day: Math.round() - returns the value of a number rounded to the nearest integer

Example:

console.log(Math.round(2020.1));
// expected output: 2020
console.log(Math.round(2020.8));
// expected output: 2021

That's about it for today. Until tomorrow, happy coding!

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

#Day3 of #100DaysOfCode: Collaborate!

Vlad Anghel — Tue, 21 Jan 2020 22:54:19 +0000

Pairing up with someone can do wonders for your coding career. It doesn’t matter if you’re both beginners. You can still learn new things from each other and you can gain a fresh perspective on some concepts that you are stuck on. Also, you will motivate and keep each other going! 👫👭👬

Today, I started by diving deeper into more advanced JavaScript concepts like callbacks, promises and async/await. I recommend this video for a wonderful explanation of these:

The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await 📺

Theory is great but practice is king. While looking for a new coding challenge, I stumbled upon an advanced challenge from Frontend Mentor: REST Countries API with color theme switcher. I decided that I am going to build this using React, more specifically with Hooks. I managed to get done a big chunk of it today. Next, I'm going to work on the design and the color theme switcher and then deploy it tomorrow. Cover picture is a sneak peek of what I managed to build yet. 🇩🇪🇬🇭🇬🇮

JavaScript Concept of the Day: Array.filter()

The filter() method returns a new array with all elements from the original array that pass a certain test. Example:

const countries = ['albania', 'germany', 'romania', 'ghana', 'denmark', 'china'];

const result = countries.filter(country => country.length > 6);

console.log(result);
// expected output: Array ["albania", "germany", "romania", "denmark"]

In our case we provide a callback function to the filter() method. The callback function, will check for countries that have more than 6 characters in the name.

What did you learn today? Happy coding, until tomorrow!

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

#Day2 of #100DaysOfCode: Keep writing!

Vlad Anghel — Mon, 20 Jan 2020 13:50:32 +0000

When I first committed myself to the #100DaysOfCode, I tried to follow the challenge rules religiously. After a few missed days I gave up on it completely and felt disappointed as a result. Now I will try to adapt the challenge to my own needs so I keep going. I realized that what I truly care about is to keep coding and to write more about it, not some missed days.

I want to use this as a journal of my coding journey. I want to document the things I learn along the way, the websites I build, the interviews I have and what I learn from them (yes, I'm actively interviewing and looking for a front-end or full stack role in Berlin 🙋🏻‍♂️) and I want to document the challenges I face as a queer person in the industry.

Why do I want to write? There's even more to it:

I love it! 💖
I think you learn a lot by just writing. When I'm writing about code, I find myself revisiting some of the concepts so I make sure I am saying the right thing. 👨🏻‍🎓
The only way to improve your writing is to keep doing it. I'm more than open to feedback so please reach out. ✍🏻
I want to hold myself accountable. Yes, there are going to be some missed days but what's important is to keep doing it. 🙋🏻‍♂️
You make new friends along the way and that is really fun. 👯‍♂️

** cover photo is generated from one of my React projects: https://emoji-artwork-generator.herokuapp.com/

#Day1 of #100DaysOfCode

Vlad Anghel — Mon, 11 Nov 2019 10:26:14 +0000

Yesterday I committed myself to the #100DaysOfCode challenge. First, a little background about myself: I have a bachelor's degree in Economic Informatics and I recently finished a Full Stack Web Development Bootcamp in Berlin. My past work has been mainly in arts as a 3D Motion Designer. 🎨

I'm taking on this challenge because I want to land my first job (hey employers!) and I will also build my portfolio in the process. The way that I will approach this challenge is a bit different. Instead of just coding for one hour every day I am challenging myself to also build something, be it a small website or an app and share it here. Another goal that I'm setting for myself is to share what I've learned during that day.

So let's get going! For my first day of the challenge I built a simple drum kit app, using HTML, CSS and Vanilla JavaScript. This was the first challenge from #Javascript30 series: https://javascript30.com/ The idea for my drum kit was inspired by Björk's song 'Cvalda', which she plays in the wonderful movie 'Dancer in the Dark' (watch it if you haven't!). You can try the drum kit for yourself at: https://gyuluu.github.io/drum-kit/. The way it works is you have to press one of the letters displayed on the screen and then the corresponding sound and animation fires up.

In the process of making this I've learned a few JavaScript tricks:

'transitionend' event - this event occurs when a CSS transition has completed. In this case the transitioned form is removed after the transition has finished.
Add, remove and toggle classes on a CSS element

For example adding a class to a

element can be achieved in the following manner:

document.getElementById("key").classList.add("playing");

Playing an audio clip with JavaScript:

First we select the audio element and then we chain the play method:

document.querySelector("audio").play();

Happy coding! 👨🏻‍💻