Barbecue Source

10 Essential VS Code Extensions for JavaScript Developers in 2019

JavaScript · Open Source · Projects · Web Development

Every programmer you’ll ever meet will have a slightly different opinion about what code editor is the best and what configuration is the most productive. Many of us have spent countless hours trying out different extensions for our code editor of choice, configuring settings, switching back and forth between code editors and trying to get the development environment just right for us.I’ve been an…

Why you should avoid using ES6 Generators to generate keys in React

JavaScript · React · ES6 · Web Development

A few days back I started reading up on ES6 generators (or generator functions), a new feature that I wanted to learn and understand for quite a while now. In retrospect, it’s not that difficult a concept, but it might take some time getting used to how generators work. As I was reading this fantastic writeup by Arfat Salman (which I suggest reading before going any further), I had an idea…

10 Reasons why you should work in IT

Jobs · Tech Support · Tech

To most folks in the tech world, working in IT might sound like one of the dullest jobs on the planet. And that can be the case at times. However, as I’ve found out, working as an IT officer for the past 6 months, it’s also one of the most lucrative career paths if you’re still in college trying to make ends meet or just taking your first steps in the tech world. Let me tell you why.1. IT jobs don…

Persistent JavaScript storage with CSV

JavaScript · Web Development · ES6 · Node

While most programmers would argue that JSON is the preferred file format to persistently store JavaScript data, there is still value in using other formats to store data. CSV is one of those formats that have been around for a long time and are dead simple to use in most cases. However, while JavaScript provides native methods to serialize and deserialize JSON objects (JSON.stringify() and JSON…

Javascript Framework Comparison with Examples (React, Vue & Hyperapp)

JavaScript · React · Frontend Development · Web Development · Hyperapp · Vue

In my previous article, I tried to explain why I think Hyperapp is a viable alternative to React or Vue and the reasons I found it easier to get started with it. Lots of people criticized that piece, as it was opinionated and didn’t give the other frameworks a proper chance to shine. So, in this article, I’m going to try to compare these three frameworks as objectively as possible, by providing…

I abandoned React in favor of Hyperapp — Here’s why

JavaScript · Frontend Development · Web Development · React · Hyperapp

Frameworks like React, Vue and Angular seem to have been all the rage this past year and with good reason: they make it easier to create and maintain scalable web apps. Having worked with React and Vue in the past, mainly on side projects and during courses, I found them both to have quite a steep learning curve. However, out of necessity, I settled with React and Redux as my tools of choice…

Prepare for you next interview with 30 seconds of interviews

JavaScript · Open Source · Projects · Web Development

You might be one of the very best web developers this world has ever seen. Or you can be adequate enough to land a job and keep it. Whatever the case, preparing for an interview never did any harm.If you are anything like me, you go from overwhelming excitement when you get called in for an interview to instant panic-and-search-all-the-interview-questions-mode a mere 2 minutes later. Looking for…

Learn some useful JavaScript tricks with 30 seconds of code

JavaScript · Open Source · Projects · Web Development

The shift from desktop to web applications, along with the rapid growth of browser-based applications has made a lot of fresh developers pick JavaScript as their programming language of choice. While JavaScript has a library, module or framework for pretty much everything, it can easily create a situation where one gets overwhelmed by the sheer amount of information being thrown their way.Apart…

10-minute color preview input field

JavaScript · Web Development · CSS · Web Design

While the type="color" is not something most web developers need in their everyday designs, it is a bit of an input control that is all over the place and support for it is not yet stellar across major browsers and platforms.Having a little bit of extra time, I decided to try my hand at a custom input component that can be used to input colors. It’s not as fancy as whatever Chrome or Firefox has…

Copying text to clipboard with JavaScript

JavaScript · Web Development · ES6

In this article, I will be explaining in depth how the _copyToClipboard_ snippet from 30 seconds of code works. You can find the source code for it and a ton of other useful methods in the project’s repository.Core functionalityOne thing that comes up quite often in website building is the ability to copy some text to clipboard, without the user selecting it or hitting the appropriate key…

Takeaways from maintaining an open source project for a month

JavaScript · Open Source · Projects · Web Development

A month ago, I launched my latest open source project, 30 seconds of code. It started out as a simple idea — a small, private collection of Javascript methods that were useful to me when I was prototyping projects. After I collected about 30 of them, I decided to make the repository public and share it on reddit, see if anybody had some cool snippets they wanted to add to the collection. And then…

Building a simple static page generator with Node.js

Node · Static Site Generator · Web Development · JavaScript

Static page generators are great and super convenient when developing reasonably simple websites. I’ve used probably two or three out of what seems like a hundred that are available right now. But using one wasn’t enough for me, which is usually the case, as I really like building my own tools to understand what’s going on behind the scenes. Therefore, today I will share with you my very own…

A Guide to creating Web Applications with React and Redux

React · JavaScript · Web Development · Frontend Development

In a previous article, I tried to write an in-depth guide to getting started with Progressive Web Apps. Having learnt a great deal since then, along with noticing some changes in the tools that I used, I decided to write something between a follow-up and a rewrite of that guide. Much like last time, I will be adding a TL;DR in every section to help you figure out what parts of the article you want…

30-minute Python Web Scraper

Python · Web Development

I’ve been meaning to create a web scraper using Python and Selenium for a while now, but never gotten around to it. A few nights ago, I decided to give it a spin. Daunting as it may have seemed, it was extremely easy to write the code to grab some beautiful images from Unsplash.Ingredients for a simple Image ScraperPython (3.6.3 or newer)Pycharm (Community edition is just fine)pip install requests…

How to get your first tag badge on StackOverflow — and why it’s important.

JavaScript · Web Development

Every developer uses StackOverflow in different ways. Some use it to figure out how to fix bugs in their code. Others enjoy being able to copy-and-paste that very confusing ternary operator with easily forgettable syntax. While others just ask for some help on how to approach complex problems.But the more people I meet, the clearer it becomes that not all is well in the developer community. On the…

A Quick Introduction to Functional Javascript

JavaScript · Web Development · Frontend Development · Functional Programming

Functional programming is one of the hottest trends right now and there’s a lot of good arguments about why one might want to utilize it in their code. I’m not going to go into a lot of detail about all of the concepts and ideas of functional programming here, however I will try to provide a demonstrative guide of how to use functional programming in everyday situations involving Javascript…

Javascript Variable Scope & Closures: A Primer

JavaScript · Web Development · Frontend Development

Javascript might seem like a pretty approachable programming language to most people, however certain concepts can prove quite tricky for beginners. One of the most commonly brought-up topics is that of variable scope and what closures are, so in this artile I will try to introduce these concepts in a beginner-friendly way.ScopeWhen we talk about scope, we mean the visibility of one or more…

A Beginner’s Guide to Progressive Web Apps & the Frontend Web

JavaScript · Web Development · Progressive Web App · Frontend Development

Developing for the frontend web and keeping up with the Javascript ecosystem and all the new terms and flashy frameworks can be intimidating to say the least. I wanted to try and go over it as much as possible in a post for quite a while now and I have finally mustered the courage to do so. At the end of this post, I hope you will have learnt something new or honed your web development skills a…

Creating a mobile-friendly navigation using mini.css

mini.css · Web Development · CSS · Web Design

In this series, we will be walking through some basic ideas and techniques that will help you get started with mini.css, as well as understand the fundamental concepts behind it.What we will be covering in this article: Cards, grids and the media patternDifficulty: Intermediate (it’s recommended that you start at the beginning of the series and work your way up to this article)https://blog…

Using the mini.css card module and media object

mini.css · Web Development · CSS · Web Design

In this series, we will be walking through some basic ideas and techniques that will help you get started with mini.css, as well as understand the fundamental concepts behind it.What we will be covering in this article: Cards, grids and the media patternDifficulty: Beginner (it’s recommended that you read the previous article in the series first)https://blog.chalarangelo.me/2017-06-09-designing-a…

Designing a simple web page with mini.css

mini.css · Web Development · CSS · Web Design

In this series, we will be walking through some basic ideas and techniques that will help you get started with mini.css, as well as understand the fundamental concepts behind it.What we will be covering in this article: Typography, grids and navigationDifficulty: Beginner (if you are already familiar with another CSS framework, you can skip to the next article in the series)Picking up a new tool…

5 reasons to try out mini.css

mini.css · Web Development · CSS · Web Design

In this article, I am going to explain why mini.css is a worthwhile addition to the CSS framework ecosystem, as well as the types of projects that will most benefit from using it.1. Small sizeThe main selling point of mini.css is the fact that it is made up of a single CSS file, under 7KB gzipped, which is a lot lighter than many of its full-featured competitors. However, it’s not really a micro…

Join the Newsletter