Tag: Web

Last week on the code challenge #13 we looked at converting sample code in ES5 to even simpler and more readable code in ES6. Yet to take the challenge? You can check it out here. In this post, we shall solve the challenge. Awesome entries for the challenge can be found in the comment section of the post, on Twitter using the hashtag #ScotchChallenge and on the Spectrum forum. The Challenge No doubt that the ES6 version of JavaScript came with tons of amazing and useful features making web development with JavaScript even simpler and less error-prone. In this challenge, we are presented with a set of 5 different code pieces requiring a re-write using a key ES6 feature. We would go over these individual challenges and the solution for each shortly. However, we were provided with boilerplat...

Being in tech — especially if you're in the B2C world — gives you a lot of freedom the rest of the business world doesn't get to enjoy. You're primarily dealing with people who understand basic workflows, you can generally expect their browsers to be updated, and most importantly for us, people in tech tend to be far less resistant to new things than the rest of us. So when it comes to finding the perfect domain name for your next project, there's a lot of freedom. ... perhaps too much freedom. With 400+ TLDs available at iwantmyname, choice paralysis can definitely set in. Here's some help to get you through it. .com is the safe way to go There's nothing wrong with choosing a .com for any project. It's the most trusted, most expected TLD on the planet, and that's not likely to change in...

If you are confused about the differences between forkJoin, zip, combineLatest and withLatestFrom, you are not alone! :) These 4 operators are what we know as combination operators - we use them when we need to join information from multiple observables. Which operator should I use? That is what this article is for! We will talk about the usage and differences between these 4 operators in an easy to understand way, so you know which one to choose when the time comes. Setup Imagine you are printing t-shirts. Ms. Color holds the color information and Mr. Logo holds the logo information. Both of them will pick color and logo spontaneously. You will need to wait and combine these two information continuously in order to print t-shirts. Ms. Color and Mr. Logo represent two observables in our...

Font Awesome is an... awesome (sorry I had to) product. React is a brilliant coding library. It would only make sense to use them together. I've been using Font Awesome for a long time and was stoked when their Kickstarter for the new version went live. There's a whopping 3,978 icons as of the time of this writing! We use React and Font Awesome together whenever you see an icon here on Scotch. That includes the user navigation, cards, brand icons, and more. While the Font Awesome team has made a React component to make this integration easy, I found a couple gotchas and had to understand some fundamental things about the new Font Awesome 5 and how it's structured. I'll write up what I found and the ways to use the React Font Awesome component. Ways to use Font Awesome Normally, if you we...

Designing A Textbox, UnabridgedDesigning A Textbox, Unabridged Shane Hudson 2018-09-06T13:30:16+02:00 2018-09-06T11:42:22+00:00 Ever spent an hour (or even a day) working on something just to throw the whole lot away and redo it in five minutes? That isn’t just a beginner’s code mistake; it is a real-world situation that you can easily find yourself in especially if the problem you’re trying to solve isn’t well understood to begin with. This is why I’m such a big proponent of upfront design, user research, and creating often multiple prototypes — also known as the old adage of “You don’t know what you don’t know.” At the same time, it is very easy to look at s...

In this article we will be looking at how we implemented the new animated logo of Scotch.io, a visual detail to complement all the improvements that the site has experienced. Something like the icing on the cake :) For those who have not yet played a bit with the animation of the new logo, they can do so by moving the cursor inside (to resume animation) or outside (to pause animation) of the logo in the top left corner. If you want to know all the details about how it was implemented, just keep reading! Keeping the Waves Inside the Cup One of the first things we had to do was to keep the waves inside the cup. First we thought about cutting the waves using just a circular HTML element, using border-radius and overflow: hidden in the CSS. However, this was not possible, since the waves had t...