Category Archives: JavaScript

MMAT: My Teaching and Learning Approach

MMAT: My Teaching and Learning Approach


In our day and age, learning is more important than ever because things change so rapidly. I learned a taught a lot of things during my career which led me to discover that the best and the most effective learning method is to use MMAT: Motivation, Methodology, Action and Time.

Motivation is number one. It’s the answer to a “why?” question. Without it, we won’t do anything else. People who constantly remind themselves of their WHYs are more motivated and can overcome any other difficulties like finding the best methodology.

A good methodology (or learning structure and material) is important because without a good strategy and know-how we will drown in a sea of ubiquitous information. We simply will never accomplish our learning goals due to analysis paralysis. And yes, sometimes it take a lot of time to find the best methodology. Don’t get caught up in never ending search. Perfect is the enemy of done so just pick something good enough and stick with it for a while.

Next is the action. Action is what separates theory from the real results. Action clarifies. It shows what’s working and what’s not, what’s important and what’s not. Action brings up new questions. Action turns new learning into habits and then into identity (which makes things automatic — a second nature).

There are so many fake teachers who never worked in the industry and yet teach people business, marketing, finance, computer science, literature. A lot of their teaching is plain BS that’s better to ignore because it can actually harm the real doers.

Lastly, time. Time is needed to soak up the skills, to ruminate, to muse on them to come up with novel ways to think and work. Sometimes it’s more practice and action. Sometimes it’s stepping away and then coming back to the new skill after a short break (e.g., space repetition).

The bottom line is that once we’ve acquired the methodology, we should aim to take a lot of action. A lot! And we ought to be prepared to wait, be patient and give time for our new skills to sharpen. It can take years. The luckiest will master the skills and they’ll become second nature. We can remind ourselves of our motivation to keep going.

Acquisition of Node University by DevelopIntelligence

After 2.5 years of starting my online school for software engineers Node University and growing it to one of the best resources on Node.js, APIs and AWS, I’m happy to announce the acquisition of Node University by the tech training company DevelopIntelligence. 💰😎🍾 I’ve known and worked with DevelopIntelligence for many years. They deliver outstanding in-person tech training to Fortune 500 companies. The synergies and future of combining in-person with online training are massive. I’m sure the new team will take Node University to the next level! 🚀

Why GraphQL is Taking Over APIs

Why GraphQL is Taking Over APIs

A few years ago, I managed a team at DocuSign that was tasked with re-writing the main DocuSign web app which was used by tens of millions of users. The APIs didn’t exist yet to support our new shiny front-end app because since the beginning the web app was a .NET monolith. The API team in Seattle was taking the monolith apart and exposing RESTful APIs slowly. This API team consisted of just two engineers and had a release cycle of one month. Our front-end team in San Francisco released every week. The API team release cycle was so long because a lot of (almost all) the functionality had to be tested manually. That’s understandable. It was a monolith without proper automated test coverage after all—when they modified one part, they never knew what can go wrong in other parts of the application.

Continue reading

Node Toolchain for Newbies: The Best Node Apps and Libraries to Increase Productivity

Node Toolchain for Newbies: The Best Node Apps and Libraries to Increase Productivity

I get this question very often: “What tools would you recommend for Node development?” Software engineers love to optimize and increase productivity instead of wasting their time. I bet you are one of them! Read on to find out the best Node tools for development.

  • IDEs/code editors
  • Libraries
  • GUI tools
  • CLI tools

IDEs/code editors

When it comes to your primary tool, the code editor, I recommend sticking with lighter and simpler editors like Atom or VS Code instead of full-blown IDEs like Webstorm. Of course an IDE will do more for you but this comes with a learning curve and the need to configure. Node is interpreted, thus there’s no need to compile it. The files are just plain text files with the .js extension.

title
title

Here’s my list of the best Node editors:

  • Atom: created and maintained by GitHub; uses Electron, HTML, JS and CSS under the hood which makes it very easy to customize or add functionality; allows to have Git and terminal support via packages. Price: free.
  • VS Code: a newer addition; uses similar to Atom web-based tech; was created from Azure’s Monaco editor; comes with debugging, smart autocomplete based on types, Git and terminal support. Price: free.
  • WebStorm: more of an IDE than an editor, developed by JetBrains and based on IntelliJ platform; has code assistance, debugging, testing, Git. Price: starts at $59/yr for individuals.

There are more options like Brackets, Sublime Text 3 and of course IDEs like Eclipse, Aptana Studio, NetBeans, Komodo IDE, and cloud-based like Cloud 9, Codenvy.

What to pick? Any of the three in the list is good choice. I have heard good things about VS Code and their smart autocomplete is a nice thing, but I didn’t find it a good enough reason for me to switch from Atom. So try VS Code and Atom and see which one you like more. Both of them offer a wide variety of packages and themes.

The most popular and useful libraries and project dependencies

Here’s the list of the most used and most popular modules which you would install as dependencies of your projects. Node developers use most of these modules (or alternatives) in almost all of their projects.

The libraries are listed with the npm names, so you can execute npm i {name} substituting {name} with the name of the package/module:

  • webpack: Builds static assets like browser JavaScript, CSS and even images. It allows to use node modules in the browser.
  • babel: Allows to code in the latest versions of JavaScript/ECMAScript without having to worry about your runtime by converting the new code to the code compatible with older versions of ECMAScript
  • axios: Makes HTTP requests
  • express: the most popular Node web framework
  • mongoose: MongoDB object-document mapper library
  • sequelize: PostgreSQL object-relational mapper library
  • socket.io: Real-time library with support of Web Sockets and others.
  • cheerio: jQuery syntax for working with HTML-like data on the server
  • node-oauth: Low-level but very mature and tested library to roll out any OAuth integration
  • passport: OAuth library to quickly integrate with major services
  • yargs
  • shelljs
  • mocha: Testing framework
  • async: Controls flow by running function concurrently, sequentially or any way you want
  • concurrently: Allows to execute CLI tools (local) as multiple processes all at the same time, e.g., webpack and node-static.

Note: Some of the libraries/tools listed above like webpack or mocha, can be installed globally instead of locally in your project folder. However, installing them globally is an old practice and currently is an anti-pattern because local installation allows developers to use multiple versions of the tool with different projects in addition to have these tools specified in package.json.

 

Of course there are a lot of different options in each category. For example, request and superagent are also extremely popular HTTP agent libraries. However, I don’t want to give too many options and confuse you with the differences, I listed only one tool (typically the one I use the most currently).

CLI tools (global)

pm2 in action
pm2 in action

Unlike the previous section, these tools are okay to install globally since most likely their version won’t affect or break your project.

  • node-dev: Monitor and restart your Node app automatically on any file change within the current folder
  • node-static: Serve files over HTTP web server
  • node-inspector: Debug Node code in a familiar interface of DevTools (now part of Node starting with v7)
  • docker: Build and run Docker containers to isolate app environment, speed up deployment and eliminate conflicts between dev and prod (or any other) environments
  • curl: Make HTTP(S) requests to test your web apps (default for POSIX but can get for Windows too)
  • nvm: Change Node versions without having to install and re-install them each time
  • wintersmith: Build static website using Node templates and Markdown
  • pm2: Process manager to vertically scale Node processes and ensure fail-tolerance and 0-time reload

GUI tools

MongoUI in action
MongoUI in action

A good share of Node developers prefer GUI (graphical user interface) tools at least for some of the tasks because these tools require less typing and have features which makes them more productive and the development easier and simpler.

  • Postman: HTTP client with ability to save requests and history, change formats (JSON, form, etc.) and do other things
  • MongoUI: Modify and inspect your MongoDB data in a web interface. You can host this web app on your server to enable the database management.
  • Chrome: DevTools is a great way to inspect your requests, network, traffic, CPU profiles and other developer related data which is very useful for debugging
  • iTerm, itermocil and zsh: A better alternative to a native macOS Terminal app which together with itermocil and zsh increases productivity greatly
  • SourceTree: Visual git trees and histories

If you liked this post, next step is to understand the Node platform better. For this reason, check out this FREE course You Don’t Know Node.

ES 7 and ES8 Features

Recently I wrote a blog post and even created an online course on ES6/ES2015. Guess what? TC39—the mighty overseer of JavaScript—is moving forward with ES8 so let’s cover ES7 and ES8 (or ES2016 and ES2017 officially). Luckily, they are much, much, much smaller than the best of a standard that was ES6. Really! ES7 has only two (2) features!

ES7 features:

  1. Array.prototype.includes
  2. Exponentiation Operator

ES8 is not finalized yet as of this writing (Jan, 2017) but we can assume all finished proposals (stage 4) and most of stage 3 (more on stages here and in my course). The finished 2017 (ES8) proposals are:

  1. Object.values/Object.entries
  2. String padding
  3. Object.getOwnPropertyDescriptors
  4. Trailing commas in function parameter lists and calls
  5. Async Functions

I won’t include stage 3 proposals in this post, but you can check the status of proposals from stage 1 to 3 here.

Let’s dive deeper into the proposals and features…

The rest of the article: https://node.university/blog/1621685/es7es8.

Preact

Preact: Fast 3kB alternative to React with the same ES6 API.

Preact is a lightweight (just 3kb) alternative to React which has same interface (ES6), but better performance. Preact also has a few new features, i.e.,

  • Arguments props, state and context are passed to render()
  • Standard HTML attributes class and for
  • React DevTools right out of the box

There is a migration guide at the https://preactjs.com/guide/switching-to-preact which is basically replacing react and react-dom with preact npm packages.

I imported my AnalogDisplay component (original in React) into preact JSFiddle code, and they worked well. I can either use this.state or just state in render(). Here’s the JSFiddle code: http://jsfiddle.net/gz7L59mn/1/ and the source code:

Continue reading

Autocomplete Widget with React

This project will guide you through building an autocomplete function similar to the one that you might see in Slack (a popular messaging app), as shown in figure 1, when you type something in the search box. For simplicity, our widget will work with room names (the rooms in a chat application).

Figure 1
Figure 1

The autocomplete widget will have (figure 2):

  1. An input field
  2. A list of options filtered according to the entered characters
  3. An Add button (figure 3)
Figure 2
Figure 2

The filtering of the matches will be done using the entered characters as the first characters of the option. In other words, there is a simple comparison that allows us to autocomplete the name of the room (figure X). For example, if you type “mac” and you have “Mac OS X” and “Apple Mac,” then only “Mac OS X” will be shown as a match, not both options.

Continue reading

React Native Quickly: Start Learning Native iOS Development with JavaScript NOW!

React Native Quickly: Start Learning Native iOS Development with JavaScript

This book is a guide on getting started with React Native for mobile iOS development. You can find source code and the manuscript in https://github.com/azat-co/react-native-quickly. You can read this book online here, or at reactnativequickly.com, or if you prefer videos, you can watch project videos at Node.University: http://node.university/courses/react-native-quickly.

In this book, I’ll introduce you to React Native for native mobile iOS and Android development… and do it quickly. We’ll cover topics such as

  • Why React Native is Awesome
  • Setting up React Native Development for iOS
  • Hello World and the React Native CLI
  • Styles and Flexbox
  • Main React Native UI components
  • Importing Modules into an Xcode Project
  • Project: Timer
  • Project: Weather App

This book is about getting started with React quickly and not about React Native, which is technically a separate library (or some might even call it a framework). But I figured after eight chapters of working with React for web development, it would be fun to apply our knowledge to mobile development by leveraging this awesome library. You’ll be amazed how many React Native skills you already know from React.

Continue reading

Reactive Web Stack: 3RES – React, Redux, RethinkDB, Express, Socket.io

This post has been written by Scott Hasbrouck. You can find him on Twitter or his website.

It’s been nothing but wonderful to see JavaScript truly catch fire the past few years in web technology, ultimately becoming the most used language in 2016, according to StackOverflow data. My history with JavaScript began about 15 years ago, not all that long after it was first released as part of Netscape Navigator 2, in 1996. My most used learning resource was DynamicDrive, and their tutorials and code snippets of “Dynamic HTML” or DHTML – a term coined by Internet Explorer 4. Really, DHTML was a set of browser features implemented with JavaScript, CSS, and HTML that could get you nifty elements like rollover buttons and stock tickers.

Fasting forward to today, we now live in a world where JavaScript has grown to take over web technology. Not just in the browser, but it is now the most popular backend language according to that same StackOverflow report! Naturally, there are always those who dislike the language citing things like the ease of creating a global variable, or null being an object and undefined being its own datatype. But I’ve found that every language I pick up has quirks that are easily avoidable once you learn to properly use it. And we do want to become experts in our craft and truly learn to master our tools, do we not?

Continue reading

You Don’t Know Node: Quick Intro to Core Features

You Don't Know Node

This essay was inspired by the Kyle Simpson’s series of books, You Don’t Know JavaScript. They are a good start with JavaScript fundamentals. Node is mostly JavaScript except for a few differences which I’ll highlight in this essay. The code is in the You Don’t Know Node GitHub repository under the code folder.

Why care about Node? Node is JavaScript and JavaScript is almost everywhere! What if the world can be a better place if more developers master Node? Better apps equals better life!

This is a kitchen sink of subjectively the most interesting core features. The key takeaways of this essay are:

  1. Event loop: Brush-up on the core concept which enables non-blocking I/O
  2. Global and process: How to access more info
  3. Event emitters: Crash course in the event-based pattern
  4. Streams and buffers: Effective way to work with data
  5. Clusters: Fork processes like a pro
  6. Handling async errors: AsyncWrap, Domain and uncaughtException
  7. C++ addons: Contributing to the core and writing your own C++ addons

Event Loop

We can start with event loop which is at the core of Node.

Node.js Non-Blocking I/O

Node.js Non-Blocking I/O

It allows processing of other tasks while IO calls are in the process. Think Nginx vs. Apache. It allows Node to be very fast and efficient because blocking I/O is expensive!

Take look at this basic example of a delayed println function in Java:

System.out.println("Step: 1");
System.out.println("Step: 2");
Thread.sleep(1000);
System.out.println("Step: 3");

It’s comparable (but not really) to this Node code:

console.log('Step: 1')
setTimeout(function () {
  console.log('Step: 3')
}, 1000)
console.log('Step: 2')

Continue reading