Awesome

How to learn modern Javascript

A guide to the adventurer.

Description

Javascript has become, over the years, one of the most used programming languages in the world. First it was only used on the browser (client side without frameworks or with frameworks like React, Angular or Vue). Then it was used also in the server side with Node.js. Then it started appearing also in the desktop with the Electron GUI ( Visual Studio Code editor is one of the best examples, as is the Joplin note system). Then it appeared in mobile development with the React Native . It's also used for Machine Learning TensorFlow.js and for embedded development in micro-controllers. So currently, Javascript is all over the place in all possible development areas. <br>

In this page I will list some of the links that I have found to be more interesting to a person that is starting to learn Javascript. <br>

Obviously, this is only a starting point in a journey. But I think it's good start. <br>

Index

• Javascript
• Client side UI frameworks
• React
• Electron

Javascript

Sites

• w3 schools

• Mozilla - Javascript Docs

Javascript video tutorials

• Video - JavaScript Crash Course For Beginners

• Video - JavaScript Tutorial - Derek Banas

• Video - Object Oriented JavaScript Derek Banas

• Video - ECMAScript 6 Tutorial

• Video - Async JS Crash Course - Callbacks, Promises, Async Await

DOM access in Javascript.

• Video - JavaScript DOM Crash Course - Part 1

• Video - JavaScript DOM Crash Course - Part 2

• Video - JavaScript DOM Crash Course - Part 3

• Video - JavaScript DOM Crash Course - Part 4 - Final Project

Animations in Javascript

• HTML Canvas Tutorial

Best editor (personal opinion)

• Visual Studio Code <br> Developed in Javascript, this open source project is built in Electron by Microsoft and works in Windows, Linux and Mac.

• Visual Studio plugin - Live Server <br> It serves the HTML page and updates the page when each file is updated (Javascript, HTML and CSS).

Best debugging tools for client side

• Google Chrome DevTools

Javascript books

• Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming <br> 472 pages <br> by Marijn Haverbeke <br> Free on the web

• JavaScript: The Good Parts<br> 176 pages <br> by Douglas Crockford

• Secrets of the JavaScript Ninja 2nd Edition <br> 464 pages <br> by John Resig, Bear Bibeault, Josip Maras

• JavaScript and JQuery: Interactive Front-End Web Development <br> 640 pages <br> by Jon Duckett

• HTML and CSS: Design and Build Websites <br> 490 pages <br> by Jon Duckett

Client side UI frameworks

• React <br> A JavaScript library for building user interfaces

• Angular <br> One framework. Mobile & desktop.

• Vue.js <br> The Progressive JavaScript Framework

Others

• JQuery <br> jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

• Bootstrap <br> Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

React

Description

React is a component based browser client UI building framework for Javascript.

Site info

• React site

• Doc's e Getting Started

• Tutorial: Intro to React

• React Blog

• w3schools - React Tutorial e Reference

React video tutorials

• Video - React JS Crash Course <br [Transversy Media]

• Video - Redux Crash Course With React <br> [Transversy Media]

React Tools

• React Developer Tools for Chrome <br> It allows you to see in debugging, the state of the components of React directly.

• Create React App <br> Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

• Plugin in Visual Studio Code - search for "Es7 React/Redux/GraphQL/React-Native snippets" <br> This plugin facilitates the creation by giving a template for new components and other stuff.

• Typicode <br> Gives a dummy json REST API's in the internet for development

React books

• The Road to learn React: Your journey to master plain yet pragmatic React.js <br> 200 pages <br> by Robin Wieruch

Electron the desktop client GUI for Javascript

Description

Electron is a multi-platform (Windows, Linux, Mac) desktop Client GUI that uses the browser Chromium in one or more windows of desktop. It also uses Node.js and Javascript. It comes with tools that generate execution files, automatic installation and update of the application. Has API's for the direct access to native hardware, like files, printers, notifications and much more. The applications made in Electron normally are really fast. The Visual Studio Code editor, the Atom editor and the Joplin note system are good examples of applications made with Electron.

Site

• Electron - Site

• Electron - Documentation

• Writing Your First Electron App <br> (From te Electron site...)

• Electron Fiddle <br> Demo application for the development of Electron APP's, with several examples that can be used to explore the Electron API.

• Awesome Electron list <br> Useful resources for creating apps with Electron.

• Electron-Forge <br> A complete tool to build modern Electron application, see github.

GitHub - Repositories of sample APP's

• electron/simple-samples <br> Small applications with ideas for taking them further.

• electron/electron-api-demos <br> An Electron app that teaches you how to use Electron from the Electron project. <br>

• hokein/electron-sample-apps <br> Small demo apps for the various Electron APIs. <br> Shows many Electron APP's including one that integrates with the Javascript 3D engine Three.js.

Chrome DevTools - To debug the RenderProcess

• Google Chrome DevTools

Debugging the [Main Process] in VSCode

• Debugging the Main Process in VSCode

Electron videos tutorials

• Video - What is Electron: The Hard Parts Made Easy

• Video - Learn Electron in Less than 60 Minutes - Free Beginner's Course

• Video - ElectronJS: Beginner To Pro

• Video - An Intro To Electron - Desktop Apps with JavaScript <br> Traversy Media 2017

• Video - Build an Electron App in Under 60 Minutes <br> Traversy Media 2017 - In this video the author talks about the necessity to know about DOM manipulation with Javascript.

• Video - Code Challenge: Criando app com Electron do zero <br> [2019 - 2H 20m] in Portuguese

• Video - Electron Desktop Apps With JavaScript <br> 2019 - Example of how to create an Electron App that has inside the integrated text editor Monaco. Monaco is the base component of Visual Studio Code.

Books on Electron

• Electron in Action <br> 376 pages <br> by Steven Kinney

Others

• MaterializeCSS <br> CSS site with pre defined styles.

• Electron packaging tutorial

• Icon Archive <br> It has a version of each icon for each platform different formats.

• WorldVectorLogo icons in SVG format

Monaco editor component

• Monaco Editor <br> See playground with many interesting examples of how to use the API calls of Monaco.

• Getting Monaco to work with Vuejs and electron

• Video - Trying to Setup Monaco Editor with Next.js

Debug

• DevTron <br> An Electron DevTools extension to help you inspect, monitor and debug your app. It allows you to debug the IPC - Inter Process Communication, inside Electron.

• Visual Studio Code node Tools debug.

• The chromium type inside browser debug tools.

Testing

• Spectron

Installation

• Electron-builder <br> A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box.

Auto-Updating

Official methods

[2017 info]

Third party groups - Maybe better solution

• Electron-Updater <br> This system is a better update system for an Electron application based on update events.

Have fun!

Best regards, <br> Joao Nuno Carvalho <br>