Image for post
Image for post

I wrote this article to help you quickly learn CSS and get familiar with the advanced CSS topics.

CSS is often quickly dismissed as an easy thing to learn by developers, or one thing you just pick up when you need to quickly style a page or app. Due to this reason, it’s often learned on-the-fly, or we learn things in isolation right when we have to use them. This can be a huge source of frustration when we find that the tool does not simply do what we want.

This article will help you get up to speed with CSS and get an overview of the main modern features you can use to style your pages and apps. …


I wrote this article to help you move from pre-ES6 knowledge of JavaScript and get you quickly up to speed with the most recent advancements of the language.

JavaScript today is in the privileged position to be the only language that can run natively in the browser, and is highly integrated and optimized for that.

The future of JavaScript is going to be brilliant. Keeping up with the changes shouldn’t be harder than it already is, and my goal here is to give you a quick yet comprehensive overview of the new stuff available to us.

Click here to get a PDF / ePub / Mobi version of this post to read…


Image for post
Image for post

The React Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic.

I find this approach gives a well-rounded overview. This book does not try to cover everything under the sun related to React, but it should give you the basic building blocks to get out there and become a great React developer. If you think some specific topic should be included, tell me. You can reach me on Twitter @flaviocopes.

I hope the contents of this book will help you achieve what you want: learn the basics of React.

You can get this ebook in PDF, ePub and Mobi format at reacthandbook.com


Image for post
Image for post
Image courtesy of undraw.co

Introduction

WebRTC is a protocol that allows to add very advanced capabilities to our JavaScript applications running in the browser.

The technology lets us directly connect two or more browsers to each other, without the need of a centralized service.

We already saw how to create a webcam sharing application using this protocol, and in this tutorial we’ll see how to send files from one peer to another. We’ll send images from one browser to another.

The PeerJS library, which builds on top of WebRTC, provides a great abstraction level over the lower APIs of WebRTC, and we’ll use that in this tutorial. …


Image for post
Image for post

If you are willing to learn React, you have first to have a few things under your belt. There are some pre-requisites technologies you have to be familiar with, in particular related to some of the more recent JavaScript features you’ll use over and over in React.

Sometimes people think one particular feature is provided by React, but instead it’s just modern JavaScript syntax.

There is no point in being an expert in those topics right away, but the more you dive into React, the more you’ll need to master those.

I will mention a list of things, with pointers to articles I wrote that can help you get up to speed quickly:


Image for post
Image for post
Image courtesy of undraw.co

WebRTC is a protocol that allows you to create real-time communication between peers using JavaScript.

We can use this technology to make it possible for 2 (or more) browsers to directly talk to each other, without needing a central server that would only become a bottleneck.

The server is only needed before the connection happens, so that every client knows how to communicate to each other.

What kind of applications does this unlock? Direct webcam connections, for example. Peer to peer chats, file sharing, and much more.

In this tutorial I want to make what’s probably the application that gives the most “wow” effect when you first run it: a webcam communication app. …


Image for post
Image for post

JavaScript is one of the most popular programming languages in the world, and is now widely used also outside of the browser. The rise of Node.js in the last few years unlocked back-end development - once the domain of Java, Ruby, Python, PHP, and more traditional server-side languages.

The JavaScript Handbook follows the 80/20 rule: learn 80% of JavaScript in 20% of the time.

Learn all you need to know about JavaScript!

Note: you can get a PDF, ePub, or Mobi version of this handbook for easier reference, or for reading on your Kindle or tablet.

Table of Contents


Image for post
Image for post

This tutorial shows you how to build a simple Google Sheets or Excel clone using React, and how to share its reusable components for your other projects or your team using Bit.

Creating a stripped down version of a spreadsheet like Google Sheets is really a good example of showing many of the capabilities of React.

At the end of this tutorial you’ll have a working, configurable, reusable spreadsheet React Component to power all your calculations 🙂

Also, we’ll share those components in Bit, making them easily reusable for our team (and ourselves) to use in more applications.

First steps

First thing, we’re going to detail what we’re going to build. We’ll create a Table component that will have a fixed number of rows. Each row has the same number of columns, and into each column we’ll load a Cell component. …


In this tutorial, I’ll create a simple Discord bot using Node.js. The bot will be connected to a Discord server and translate every message that’s not written in English.

Image for post
Image for post
Discord, the popular chat application for gamers

If you don’t know Discord, it’s one of the most popular chat applications among gamers and has attracted non-gaming communities as well.

Communities are called Servers. Each time you create a new one, you create a server, give it a name, and create several channels. In the programming world, I can mention Nodeiflux, Reactiflux, SpeakJS, Vue Land, and the /r/webdev server.

There are many more, of course, those can get you started if you don’t know any community to join.

But let’s get to the meat of the article. Say I just created a server, and before inviting my friends to join and discuss what’s the best JS framework (might not end well), I want to create a bot that will translate every word added to the channel that is not in English. …

About

Flavio Copes

I write tutorials for developers at https://flaviocopes.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store