DEV Community: Zaiste

Livestream: Building E-Commerce Apps with Flutter & GraphQL

Zaiste — Sun, 04 Jul 2021 18:19:57 +0000

I'll be doing a live stream this week about building mobile apps with Flutter and GraphQL. My plan is to create a simple e-commerce app. For the backend I'll use the Saleor API.

If this sounds interesting and/or you're building (or planning to build) something similar, let me know your questions. I'll happily consider them during the coding! This can be anything related to Flutter, GraphQL or e-commerce.

The stream will happen on my YouTube channel - subscribe and click the notificaiton bell.

Modern React.js Setup for GraphQL (using Vite & urql)

Zaiste — Tue, 29 Sep 2020 13:39:40 +0000

In this tutorial, we will build a React.js application that interacts with a GraphQL endpoint. This method of project setup is modern and lightweight: it uses Hooks, ES Modules and has a small amount of dependencies. We will use Vite to create the project structure, pnpm to manage the dependencies, urql for GraphQL, and finally OneGraph as the GraphQL gateway to various APIs. Our goal is to create an application for listing GitHub repositories of a specific user.

Install `pnpm`

Let’s start with pnpm, a package manager for JavaScript that is faster and more efficient than npm or yarn. pnpm uses a content-addressable filesystem to store your project dependencies. This way files inside node_modules are linked from a single place on your disk. Thus, you install each dependency only once and this dependency occupies the space on your disk only once. In other words, libraries are not copied over for each new project. This way, on top of being faster than alternatives, pnpm provides huge disk space gains.

npm i -g pnpm

pnpm comes with two command-line tools: pnpm for installing dependencies and pnpx for invoking commands (a npx equivalent).

Create the project

Let’s use Vite to create the project structure for our React.js project. We need to initialize the project using the vite-app generator with the React as the template. The template must be set explicitly using the --template parameter with react as its value. Finally, gh-explorer is a custom name we are giving to this project.

pnpm init vite-app gh-explorer --template react

Vite is a build tool for web projects. It serves the code in development using ECMAScript Module imports. In production, vite bundles the code using Rollup. Vite is a lightweight solution that can be 100-150x times faster than alternatives such as Webpack or Parcel. This enormous speed gain is possible thanks to esbuild, a new TypeScript/JavaScript bundler written using the Go programming language.

Go inside the gh-explorer directory and install the necessary dependencies using the pnpm install command. Then, start the development server with pnpm dev and head to the localhost:5000 in your browser. You should see a React.js logo along with a counter and a button.

Integrate with OneGraph

When interacting with external APIs, we need to learn the specifics for each new API we are dealing with. This is especially visible at the level of authentication. The methods of authentication are slightly different between one API and another. Even though those APIs are provided either as REST or GraphQL endpoints, it takes time and often much effort to learn how to use them. Luckly, there is OneGraph. The project provides a layer of unification for various GraphQL APIs. Using OneGraph, we can just access one endpoint and gain access to various GraphQL APIs at once. Think, a catalog of APIs. This simplifies and speeds up the development. We will use OneGraph to interact with the GitHub API.

Let’s create an application in OneGraph:

Then, we can use OneGraph's Explorer to test our GraphQL queries for GitHub before we integrate them with our React.js application. On the left side of the Explorer I have a list of all available APIs. It goes from Airtable, Box to Shopify, Stripe, Zendesk and much more. This catalog is quite impressive on its own.

Construct the GraphQL Query

Our goal is to list the repositories of a specific user. I start by selecting the GitHub API. Then, I select theuser branch. I enter the handle of a specific user, e.g. zaiste - in this case, it’s my own username. I go further down the GitHub API tree by selecting the repositories branch. I want to list only the public repositories that are not forks and ordered by the number of stars. For each repository, I want to return its id, name and the number of stars.

Just by clicking the fields in the OneGraph Explorer I end up with the following GraphQL query:

query GitHubRepositories {
  gitHub {
    user(login: "zaiste") {
      repositories(
        first: 10
        orderBy: { field: STARGAZERS, direction: DESC }
        privacy: PUBLIC
        isFork: false
        affiliations: OWNER
      ) {
        nodes {
          id
          name
          stargazers(
            first: 10
            orderBy: {
              field: STARRED_AT
              direction: DESC
            }
          ) {
            totalCount
          }
        }
      }
    }
  }
}

Integrate with urql

We can now execute this query from our React.js application. We will use urql, a versatile GraphQL client for React.js, Preact and Svelte. The project is lightweight and highly customizable compared to alternatives such as Apollo or Relay. Its API is simple and the library aims to be easy to use. We need to add urql along with the graphql as dependencies for our project.

pnpm add urql graphql

urql provides the useQuery hook. This function takes the GraphQL query as input, and returns the data along with errors and the fetching status as the result. We will name our component RepositoryList. You can use the regular .jsx extension, or .tsx if you plan to integrate with TypeScript - it will work out-of-the-box with Vite. There is no need for additional TypeScript configuration.

export const RepositoryList = () => {
  const [result] = useQuery({ query });

  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Errored!</p>;

  const repos = data.gitHub.user.repositories.nodes;

  return (
    <ul>
      {repos.map(repo => (
        <li key={repo.id}>{repo.name} <small>({repo.stargazers.totalCount})</small></li>
      ))}
    </ul>
  );
}

Next, in main.jsx let’s configure our GraphQL client. We need the Provider component along with the createClient function from urql, and an instance of OneGraphAuth. For the latter, we need another dependency, i.e. onegraph-auth.

pnpm add onegraph-auth

Let’s create an instance of OneGraphAuth with the appId of the application we created using the OneGraph dashboard. Then, we create a GraphQL client with the OneGraph endpoint as the url parameter. Finally, we nest the <App/> component inside the <Provider/>.

import React from 'react'
import { render } from 'react-dom'
import { createClient, Provider } from 'urql';
import OneGraphAuth from 'onegraph-auth';

import './index.css'
import App from './App'

const appId = "<Your APP_ID from OneGraph goes here>";

export const auth = new OneGraphAuth({ appId });

const client = createClient({
  url: 'https://serve.onegraph.com/dynamic?app_id=' + appId,
  fetchOptions: () => ({ headers: auth.authHeaders() })
});

render(
  <React.StrictMode>
    <Provider value={client}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

Authenticate with OneGraph

We are almost finished. The last step is to authenticate the user against the OneGraph endpoint. It’s a unified approach for any API from the OneGraph catalog. We will use the .login method from the onegraph-auth with github as the value. Once the user logs in, we will adjust the state accordingly by displaying the <RepositoryList/> component.

import React, { useState, useEffect } from 'react'

import './App.css'
import { auth } from './main';
import { RepositoryList } from './RepositoryList';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  const login = async () => {
    await auth.login('github');
    const isLoggedIn = await auth.isLoggedIn('github');

    setIsLoggedIn(isLoggedIn);
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>GitHub Projects via OneGraph</p>
        <p>
          {isLoggedIn ? (
            <RepositoryList/>
          ) : (
            <button style={{fontSize: 18}} onClick={() => login()}>
              Login with YouTube
            </button>
          )}
        </p>
      </header>
    </div>
  )
}

export default App

The Result

That’s all. Here’s the final result. You may need to adjust the stylesheets for the same visual effect.

We created a React.js application using Hooks. The project has a minimal set of dependencies. It uses the modern ECMASCript Modules approach. It is efficient in disk space as it uses pnpm as the package manager. The JavaScript/TypeScript transpilation is 100-150x faster than Webpack or Parcel. We use a simple and versatile GraphQL client called urql. Finally, we access the GitHub API via OneGraph, a meta API that provides an impressive catalog of GraphQL APIs with the unified access method. The end result is lightweight and modern.

I hope you will use some of those elements in your future React.js applications. If you liked the article, follow me on Twitter for more.

Video Tutorial

If you prefer watching programming tutorials rather than reading them, check this video on YouTube where I code this application step-by-step.

If you like it, subscribe to my channel.

My Favorite Privacy Tools in 2020: Be Safer on the Internet!

Zaiste — Sun, 16 Aug 2020 20:27:05 +0000

This is a list of tools I use to increase my privacy on the Internet. I'm not a security expert. My goal is to have a good enough protection. Feel free to suggest any additions and improvements.

Firefox

Firefox probably doesn't need an introduction. It is an open-source project. It's run by Mozilla - a non-profit organization. Anyone can go to the Firefox repository to take a look at the code and see how it works.

Firefox doesn't gather your personal data to serve you ads as Chrome. While Google seems careful and to an extend trustworthy with handling people's personal data, you don't seem to have much control how your profile is built and used.

The browser is constantly being improved. It seems slightly heavier than Chrome or Safari on my computer, but that's a minor issue compared to all the advantages. I use the Developer Edition.

Little Snitch

Little Snitch is a MacOS application that monitors connections and lets you control inbound and outbound traffic from your computer. It visualizes these connections and shows where applications connect. This way you have information about both familiar and unfamiliar network actions that applications are trying to perform.

PiHole & AdGuard

PiHole & AdGuard are ad blockers. PiHole is open-source while AdGuard is a paid offering. I use one at home and the other one at the office. AdGuard is slightly easier to setup and use. Both work network-wide, but AdGuard also provides standalone applications and browser plugins to protect from ads when being outside of private networks.

Nibspace

Nibspace is an alternative to Google Analytics. It provides basic information about the visitors of my websites. It doesn't use cookies and it has a small footprint (~ 1kb) while being affordable ($1/mo per domain). It's not open-source. There are few other, notable competitors such as Fathom, Simple Analytics and Plausible.

Bitwarden

Bitwarden is an open-source password manager. I used to use 1Password, but I wanted something more affordable yet with similar features and Bitwarden fits the bill perfectly.

NordVPN

NordVPN is a personal virtual private network service provider. Their marketing seems aggressive, so I was a bit skeptical at the beginning, but then I decided to give it a try. Overall, NordVPN is one of the most polished and reliable VPNs I've used so far.

I also like that they show some innovation efforts, namely their NordLynx technology that is built around WireGuard - this relatively new VPN tunneling protocol

Last year NordVPN was hacked, but they handled the whole situation pretty well in my view.

Fastmail

Fastmail is a paid e-mail service that focuses on privacy and doesn't display ads. It is a simple service to manage e-mails, calendars and contacts. It costs $5/mo. It is also fast. This is partly related to their work on a more reliable, faster IMAP alternative, called JMAP - so it goes beyond just a snappy UI.

Have I missed an interesting tool? Let me know on Twitter.

15 Command-Line Tools to Make You Better at Shell & CLI

Zaiste — Wed, 05 Aug 2020 09:41:50 +0000

Shell is the essential tool for every programmer. The more familiar you become with the available tools, the more efficient you can be with using your computer. Here's a list of command-line tools that aim to provide modern, often much faster, alternatives to the existing shell commands. These tools will boost your skill at shell.

`bat`

bat is a cat clone with syntax highlighting and Git integration that works on Windows, MacOS and Linux. It provides syntax highlighting for many file extensions by default.

GitHub

`exa`

exa is a modern replacement for ls, the default command-line program in Unix/Linux for listing directory contents. exa supports icons with the --icons flag.

GitHub

`fd`

fd is a fast and user-friendly alternative to find, the built-in command-line program in Unix/Linux for walking a file hierarchy. fd provides opinionated defaults for the most common use cases. To find a specific file by name, you write fd PATTERN instead of find -iname ‘*PATTERN*’. fd is also extremely fast and it comes with a ton of options like ignoring hidden directories, files and patterns from .gitignore by default.

GitHub

`procs`

procs is a modern replacement for ps, the default command-line program in Unix/Linux for getting information about processes. It provides convenient, human-readable (and colored) output format by default.

GitHub

`sd`

sd is an intuitive find & replace command-line tool, it is an alternative to sed, the built-in command-line program in Unix/Linux for parsing and transforming text. sd has simpler syntax for replacing all occurrences and it uses the convenient regex syntax that you already know from JavaScript and Python. sd is also 2x-11x faster than sed.

sed is a programmable text editor, with search and replace being a common use case. In that light, sd is more like tr, but on steroids. (thanks /u/oleid for the suggestion).

GitHub

`dust`

dust is a more intuitive version of du, the built-in command-line program in Unix/Linux for displaying disk usage statistics. By default dust sorts the directories by size.

GitHub

`starship`

The minimal, blazing-fast, and infinitely customizable prompt for any shell.

Website

`ripgrep`

ripgrep is an extremely fast alternative to grep, the built-in command-line program in Unix/Linux for searching files by pattern. ripgrep is a line-oriented search tool that recursively searches your current directory for a regex pattern. By default, ripgrep respects .gitignore and automatically skips hidden files, directories and binary files.

GitHub

`tokei`

tokei is a program that displays statistics about your code. It shows the number of files, total lines within those files and code, comments, and blanks grouped by language.

GitHub

`hyperfine`

hyperfine is a command-line benchmarking tool. Among many features, it provides statistical analysis across multiple runs, support for arbitrary shell commands, constant feedback about the benchmark progress and current estimates and more.

GitHub

`ytop`

ytop is an alternative to top, the built-in command-line program in Unix/Linux for displaying information about processes.

GitHub

`tealdeer`

tealdeer is a very fast implementation of tldr, a command-line program for displaying simplified, example based and community-driven man pages.

GitHub

`bandwhich`

bandwhich is a CLI utility for displaying current network utilization by process, connection and remote IP or hostname.

GitHub

grex

grex is a command-line tool and library for generating regular expressions from user-provided test cases.

GitHub

`zoxide`

zoxide is a blazing fast autojumper, intended to completely replace the cd command. It allows you to change directories without typing out the entire path name.

GitHub

Bonus: `nushell`

nushell is a new type of shell, written in Rust. Its goal is to create a modern shell alternative that's still based on the Unix philosophy, but adapted to the current era. It supports piping and filtering in a way similar to awk and sed with a column view so that you can combine operations like in SQL. (thanks /u/matu3ba for the suggestion).

GitHub

Have I missed an interesting command-line tool? Let me know on Twitter.

Full-Stack TypeScript using Node.js, Vue.js 3 & PostgreSQL - Introduction

Zaiste — Thu, 04 Jun 2020 21:27:31 +0000

In this tutorial series, we will be writing a fully featured TypeScript application from scratch using Node.js & the upcoming Vue.js 3. The goal is to cover the process of building a full-stack TypeScript application in a comprehensive and accessible way so that you could see it from A to Z and step-by-step.

This tutorial will cover not only the front-end part, but also the back-end part and everything in-between: from setting up the database through designing the database schema, exposing an API using both REST & GraphQL endpoints, till the application deployment.

Check the Live Demo

This series will teach you how to connect different layers to create a fully functioning web application. This approach aims to give you the big picture of building web applications so that you have a basic understanding of all the elements and techniques needed for creating your own applications from scratch, or rather from A to Z.

Goal

In this series, we will build yet another task management application. I decided to showcase creating another task manager because the notions of such application are simple and well understood. You already know what a task is, you know that you can group or filter them, or that you can mark tasks as done. You probably used a task manager yourself at some point. As a result, instead of spending time on explaining the business features and their outcomes, we can be practical and focus on building the actual app.

Technology Stack

On the back-end we will be using Node.js 14.x+, while on the front-end we will be using a UI framework called Vue.js, specifically the upcoming (currently in beta) Vue.js 3 that introduces the Composition API (something similar to Hooks in React.js). For the database layer, you will use PostgreSQL - probably the best database out there. ;) I will show you how to design the database schema, how to create tables and how to make relations between them. We will also see how to use PostgreSQL as a NoSQL solution and how it compares to databases such as MongoDB et al. For the UI we will do something different. Instead of writing CSS by hand we will use Tailwind CSS that provides a set of predefined building blocks that we can combine directly in HTML pages to quickly create coherent UIs. Finally, Kretes will put all those tools together in a ready to use solution (it's like a boilerplate on steroids) so that you can focus on building the actual application and its business logic, instead of spending time manually configuring and putting things like TypeScript, Node.js, Vue.js or PostgreSQL together.

Future

This tutorial aims to cover modern approaches in web development. At some pointwe may switch certain things in our stack. For example, we may try to replace Node.js with Deno or Vue.js with the Solid.js framework, etc. The idea is to track the current trends & tendencies in web development instead of using older, already established ways of creating web applications, and also to give you an early example how to use these modern solutions to build full-stack TypeScript applications. In other words, our goal here is to explore new or improved ways of building web applications.

Plan

Design the application UI using Tailwind CSS
Make the application interactive using Vue.js 3
Implement the backend
Define and expose a REST API
Design a basic database schema

Stay tuned for the next part in the series!

Video Tutorial

If you prefer watching programming tutorials rather than reading them, check this video series on YouTube where I code this application step-by-step.

If you like this TypeScript series, check my other video tutorials.

I'm Live Streaming How To Build a Mobile App for Dev.to in Flutter with REST & GraphQL

Zaiste — Sun, 26 Jan 2020 15:09:31 +0000

In this very first live stream session, I'll build yet another mobile app for the Dev.to community. The application will be developed using the Flutter framework. I'll integrate with Dev.to's REST API followed by the integration with the GraphQL endpoint provided by OneGraph. My goal is to have a simple article browsing by the end of it.

The live stream will start at 18:00 CET / 12:00 EST on Sunday, Jan 26th. Here's the link:

How to Quickly Build a REST API in Node.js with TypeScript (for Absolute Beginners) - PART 1 of 4

Zaiste — Sun, 29 Dec 2019 17:37:21 +0000

Let's build a simple a REST API in Node.js using TypeScript. This series will be split into four parts as there is a lot to discuss. It is also aimed for absolute beginners or people just starting with programming. At the same time I will be mentioning few some advanced topics so that even if you know how to build a REST API, you will hopefully still gain something from reading this tutorial.

If you prefer to watch me coding this application instead of reading the article, check this video:

Also, if you liked it, consider subscribing to my YouTube channel for more.

In this series I will be using Huncwot, which is a tool to quickly build web applications. It is an integrated solution that covers both frontend, backend and everything in between.

Let's start by installing Huncwot. It's better to do it globally.

npm install -g huncwot

A bit of theory

Before we jump into the code, let's start with some theory. This won't be a comprehensive introduction. My goal is to explain a few concepts, and then show you some practical examples. I believe this is the best way to quickly gain proper intuition on the subject.

APIs

API stands for Application Program Interface. The important bit here is the word /interface/. An interface is this point where we meet to interact with something. For example the screen of our phone is an interface, a user interface (or UI) to be exact. This interface allows us to interact with the device. By touching, pressing and swapping the screen we instruct the phone to do some actions. Those gestures are the middle ground: for humans it would be easier just to think about the action to do, for phones it would be easier to receive the instructions directly as a chain of 0s and 1s; instead we have a compromise, a point in between how to humans can interact with phones - the interface.

Web APIs

There are many types of APIs. In this tutorial we will be discussing a Web API, which are places on the web where we go to interact with something by getting or sending data to it. In other words, a Web API is an interface exposed through an endpoint (an URL) which allows us to interact with some system by exchanging messages. Those messages are requests we send in and responses that we receive. A Web API is a message system, which conceptually is somehow close to object-oriented programming.

URLs

Requests instruct Web APIs do something for us. In order to send it we need an address: a URL. URLs have several parts. There is protocol: for Web APIs it's http(s). There is a domain which designates a place on the web where this Web API lives. Finally there is a path, which is a location within that domain that describes a specific subset of information.

Resources

Let's imagine we want to build a Web API for technical events so that we could ask for the upcoming events in our area, or the best tech conferences which happened in the past. We start by creating necessary abstractions for all entities within that contexts. Those abstractions are called resources. We could start with an Event resource where each one would have a name field and a date field. Later on we could imagine adding other resources such as Attendee, Organizer, Speaker and more.

We can now expose each resource as the path in the URL of our Web API, e.g. the /event path for the Event resource, the /speaker path for the Speaker resources and so on. Once the resource is exposed, we can start interacting with it by sending requests and receiving responses. We may, for example, fetch the current state of a particular resource, filter a resource based on a specific criteria, or update a resource because you found a typo in its name.

Headers

When sending requests and receiving responses to our Web API we may need to parametrize how this API behaves. This is unrelated to the specific context of that API, whether we are building an API for technical events, to manage a bookstore or to schedule appointments. For example, we may want to change the response format. We communicate that to the API via headers.

Handlers

Each path is associated with a function, which describes what should happen once this path visited or this resource requested. We call those functions handlers. A handler receives a request as input and produces a response as output.

Routes

A Web API is a mapping between paths (that may describe resources) and handlers. A particular pair of a path and its handler is called route. This is a data-driven approach for defining routes. We use a simple data structure already available in most programming languages, a map to represent the relation between exposed paths and functions being triggered once that path is visited.

Practical Example

Let's finally jump to the code and let's create our project: techevents.

huncwot new techevents

Let's open the project in VS Code. We are only interested in the config/server/routes.ts file.

import { Routes } from 'huncwot';
import { OK } from 'huncwot/response';

const routes: Routes = {
  GET: {
    // implicit `return` with a `text/plain` response
    '/hello': _ => 'Hello Huncwot',

    // explicit `return` with a 200 response of `application/json` type
    '/json': _ => {
      return OK({ a: 1, b: 2 });
    },

    // set your own headers
    '/headers': _ => {
      return { body: 'Hello B', statusCode: 201, headers: { 'Authorization': 'PASS' } };
    }
  },
  POST: {
    // request body is parsed in `params` by default
    '/bim': request => {
      return `Hello POST! ${request.params.name}`;
    }
  }
};

export default routes;

Huncwot generated for us a basic structure for routes. Let's start the server to test it out:

huncwot server

This command will start the server on the port :5544. We can now send some requests to see how it works. I'll use HTTPie to send requests directly from the command line, but you may also use something like the Postman API Client.

Let's send a request to the /hello path:

http :5544/hello

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 13
Content-Type: text/plain
Date: Sun, 29 Dec 2019 16:56:23 GMT

Hello Huncwot

Since the server is running on the localhost I can skip that part and only specify the port along with the path.

http :5544/json

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 13
Content-Type: application/json
Date: Sun, 29 Dec 2019 16:56:44 GMT

{
    "a": 1,
    "b": 2
}

Huncwot is able to automatically transform a JavaScript object into JSON. Additionally, you may use the response helpers such as OK to specify an HTTP status code of your choice.

http :5544/headers

HTTP/1.1 201 Created
Authorization: PASS
Connection: keep-alive
Content-Length: 7
Content-Type: text/plain
Date: Sun, 29 Dec 2019 16:57:11 GMT

Hello B

Since responses in Huncwot are just objects, you can add the headers field to the response object with headers of your choice. In this case, the Authorization header with the value PASS.

In Huncwot, the changes to your routes are automatically reload. There is no need to restart the server nor to install something like nodemon. It works out of the box. You don't have to worry about this.

The config/server/routes.ts is a simple JavaScript hash map (or an object to be exact). We can use the Routes type from Huncwot to further constrain that fact. Each handler receives a request as input (which has the Request type) and returns a response (which has the Response type).

We have now a good understanding of a few concepts related to Web APIs. We built a foundation for a future REST API. We are not yet there as few important elements are still missing. I will cover that in the upcoming articles. Stay tuned!

Programming Languages To Learn In 2020 To Boost Your Career As A Software Developer

Zaiste — Tue, 17 Dec 2019 17:01:09 +0000

As famously stated by Ludwig Wittgenstein: « The limits of my language means the limits of my world ». He was referring to natural languages, but this quote can be also applied to the programming world.

Learning a new programming language is an intellectual journey which may help deepen your understandings of computer science. This opens the mind so that you have a different perspective on the software practice. It also exposes you to different programming paradigms. You witness how some ancient or unpopular ideas either transform into popular ones, or got forgotten to be then rediscovered again a decade afterwards.

With the year 2020 around the corner, it is a good idea to also review your programming goals. In this short article I will give you four ideas plus a bonus for programming languages to learn in 2020 in order to hopefully boost your career as a software developer.

“But why should I listen to you?” you may rightly ask. In the end, there is no shortage of people who have an opinion about this topic. I’m not an expert in those language, but I’ve been lucky to get exposed to different programming ideas in the span of 15 years as an organizer of technical conferences with PolyConf being my largest and my dearest creation.

PolyConf promotes the idea of polyglot programming. It’s about encouraging a generalist approach to the art and craft of software development. Programmers should strive to have a comprehensive understanding of programming concepts with breadth and depth of knowledge that transcend the boundaries of a single language.

During those years I’ve had a chance to meet and exchange with creators of programming languages, frameworks and software tools. I was able to witness not only new technologies emerging (like Ruby on Rails in 2005 or Node.js in 2009), but also great ideas being discarded and sometimes forgotten. This experience gave me a good insight into the field of programming.

There is no particular order for this list. Also, it is not about learning all those languages. These are just ideas to inspire or ignite your curiosity so that you can find your own path in this field.

Reason

Reason is a new syntax (and a toolchain) built on top of OCaml . It provides functional and object-oriented features with type-safety and focus on performance. Its syntax is similar to JavaScript. The intention is to make interoperation with JavaScript and adoption by JavaScript programmers easier. Reason can access both JavaScript and OCaml ecosystems. OCaml, a functional programming language with infered types, was created in 1996. Reason builds upon the rock solid type system from Ocaml while focusing on both simplicity and performance.

Reason was created by Jordan Walke who also created React.js. If you like programming in React.js, you should watch Jordan’s recent talk at ReasonConf where he gives a few reasons why Reason is worth learning.

Rust

Rust is a statically typed programming language focusing on safety, speed, and concurrency. Rust is a system language which means it generates the best possible machine code with full control of memory use. Rust is memory safe by default: all memory accesses are checked. The language is partially influenced by functional programming and its type system is similarly rich to Haskell’s. Rust can be also compiled into WebAssembly which runs in each major web browser at near-native speeds.

Rust was created at Mozilla by Graydon Hoare in 2006. As the web slowly but steadily moves towards WebAssembly and in some degree to serverless, it may be a good investment to learn Rust. Don’t take my word for that, but rather watch the following talk by Steve Klabnik

Dart

Dart is an object-oriented, garbage-collected programming language with inferred types. The language supports various compilation methods. AOT (Ahead-Of-Time) compilation allows Dart to produce native code while JIT (Just-In-Time) compilation significantly improves the development experience with features such as hot-reload. Dart can also compile to JavaScript. Since the version 2.7 the language also supports null safety, i.e. accessing object references safely without triggering null reference exceptions. Lastly, Dart is the language of Flutter, the mobile (soon web) framework that’s taking the world by storm.

Dart was created by Lars Bak and Kasper Lund.

I greatly enjoy Bob’s Nystrom articles and talks. In the following video Bob along with Kevin Moore explain why Dart is a programming language choice with no compromises.

Nim

Nim is a statically typed compiled programming language with a syntax inspired by Python. It was designed to be as fast as C and as easy to read as Python. Being a compiled language, Nim is fast. It combines concepts from languages like Python, Ada and Modula. Some describe Nim as an easier to learn Rust or as a faster Python. It can be compiled to C, C++, Objective-C or JavaScript. It offers both automatic memory management (via Garbage Collection) and manual memory management. What sets Nim apart from other programming languages is its metaprogramming features with a powerful macro system in particular which allows manipulating the syntax tree to write custom DSLs.

The lanaguage was created by Andreas Rumpf.

In the following video, the creator himself, explains the almost magical power of the Nim programming language.

Bonus: Joy

As a bonus, I’ve selected one of my favourite programming languages and one that is completely different than anything you may have experienced. It’s called Joy and it is a purely functional programming language devised by Manfred Von Thun. Whereas all other functional programming languages are based on the application of functions to arguments, Joy is based on the composition of functions. Every Joy function is unary, taking a stack as argument and producing a stack as value.

There is no video for this one, but I encourage you to read (at least 3 times) the following Rational for Joy by Manfred von Thun.

As programmers we are supposed to constantly seek how to improve your practice, and eventually, how to expand and improve it. By being able to compare and contrast various technologies, you will be able to quickly learn what they bring to the table and in which context they could be used. Hopefully my list helps you in that journey. Good luck!

Are you planning to learn other programming languages in 2020 ? Let me know in the comments!

Still reading this far ? Great! Let me invite you to my YouTube channel where I teach programming using different programming languages. It's free and there is not catch. :)

4 Ways Of Accessing HTML Elements In The DOM

Zaiste — Tue, 26 Nov 2019 11:18:01 +0000

The DOM (Document Object Model) is a representation of a web page. It is a combination of elements that form a HTML document. Thanks to the DOM, programs can change the structure and content of a web document.

You can access HTML elements in a document by type, their attributes or using a unique identifier. In this article we will go over the 4 ways of accessing elements in the DOM.

Accessing Elements by Unique Identifier (ID)

The most direct way of accessing an element is by using a unique identifier. Since the identifier is unique, this approach will always return a single element.

Let's consider the following snippet of HTML:

<h1 id="title">This is a uniquely identified title</h1>
<div id="content">
...
</div>

We can access each of these elements by using the getElementById of the document object, e.g.

const title = document.getElementById('title');
console.log(title);

Once you display that element it will return back the corresponding HTML tag content.

It is important to remember that HTML elements cannot use the same ID twice on the web page.

Accessing Elements by Class

Another way of accessing elements on a web page is by identifying them via the values of the class attribute. Since the class values don't have to be unique, this approach allows targeting more than one element at once.

Let's consider the following snippet of HTML:

<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

We can access all the li elements at once using the getElementsByClassName of the document object, e.g.

const pioneers = document.getElementsByClassName('person');

The pioneers variable is a collection (an array) of HTML elements. Also, note that the getElementsByClassName name uses the the plural form (Elements). The getElementById, however, uses the singular form (Element ).

Accessing Elements by Tag

There is also a way to access elements on a web page by the tag name. This approach is less specific and rarely used in practice as a result.

Let's consider the same snippet of HTML:

<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

We can access all the li elements at once using the getElementsByTagName of the document object, e.g.

const pioneersAndMore = document.getElementsByTagName('li');

This approach will also return a collection (an array) of elements. On top of that it will return each and every li tag in the document. If we happen to have another list on that page, but with different classes, this will also return them.

Accessing Elements by CSS Selector

A CSS selector is a codified way to identify various HTML elements on a web page. The IDs must be prefixed with the # sign while classes with the . sign, e.g. #title and .person to identify the title and the pioneers from the previous examples. These are the most basic ways for element identification. CSS Selectors are much more powerful than that.

Let's consider the following snippet of HTML:

<h1 id="title">Internet Pioneers</h1>
<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

We can now access both the title and the list elements using the query methods of the document object. There is the querySelector method to access a single element and querySelectorAll to access more than one element:

const title = document.querySelector('#title');
const pioneers = document.querySelectorAll('.person');

Also, the querySelectorAll returns a static collection while all the getElements* methods return live collections. A live collection will auto-update once there are some changes on the web page (e.g. in response to another JavaScript program adding new elements that match the criteria of those methods).

This is a concise introduction to working with HTML using JavaScript. We went over some essential ways of accessing HTML elements on a web page. This should provide a good base and a staring point to the further explore the wonderful world of the web browser.

If you liked this article, consider subscribing to my YouTube channel. I produce free videos teaching programming in JavaScript, Dart and Flutter. Also, if you'd like to see my new content right away, consider following me on Twitter. Till the next time!

22 Short Lessons To Become A Mobile Programmer Using Flutter Framework

Zaiste — Sun, 17 Nov 2019 21:34:36 +0000

Here is a list of 22 short, video lessons that provide essential information to start developing mobile applications. This crash course is aimed for beginners and non-programmers.

Instead of teaching abstract concepts and ideas in both Flutter and Dart, those lessons showcase a process of building an actual, mobile application.

Join me in this adventure to become a great mobile programmer! :)

0. What is Flutter ?

Flutter is a framework for building mobile applications, created at Google. You can develop both Android and iOS mobile applications, which means that it is a so-called « cross-platform solution ». You develop it once with a single codebase written using a single programming language called Dart. Instead of using Swift for iOS and Java or Kotlin for Android.

Flutter abstracts the interaction with both Android & iOS while still producing native code. Simply put, you don’t need to learn different ways of writing mobile applications for different mobile platforms.This is similar to React Native, but Flutter’s advantage is that the framework, the programming language and the toolchain are developed by single company while still being open source.

1. Development Setup

Visual Studio Code has a fantastic integration with Flutter. There are two great plugins: Dart and Flutter to streamline the development process. There is also a built-in hot reload feature , which provides instant code reloading while developing the app.

2. Creating First Flutter Application

The Flutter plugin adds to VS Code commands to create a new project boilerplate and to launch a mobile device emulator for both Android and iOS.

3. Stateless & Stateful Widgets

Flutter is pretty similar to React or Vue.js. The notion of Component is replaced by a notion of Widget, which is basically the same thing. Similarly, we distinguish Widgets that have state as Stateful Widgets (Smart Components in React) and those without state are Stateless Widgets (Dumb Components in React).

4. Listings Elements

One of the most common and import ways to interact with a mobile application is simply by using lists. In Flutter, listing elements on screen is extremely easy thanks to the ListView widget.

5. Assets

A mobile device is slightly different than a web page. If there is a need to display images or handle data files that accessible offline, those need to be store on that device as assets.

6. Using Types in Dart

Types allows to provide a clear intent in our code. They improve the coding experience on the lower level and at the micro scale. Dart, the language used by Flutter, is not only statically typed, but it also provides a sophisticated type inference - a way for the compiler to guess types for you.

7. Serializing JSON

At some point there is a need to serialize a payload, usually acquired over the wire in the JSON format. Dart & Flutter provide convenient helpers for such tasks.

8. Doing HTTP Request and Parsing HTTP Responses

The http package in Dart comes with a comprehensive tool-set to perform any type of HTTP request and to efficiently parse the HTT responses.

9. Async / Await Syntax

Dart supports the async/await syntax out-of-the-box. In many eyes, this leads to a code which is easier to read and understand. For those, who prefer the notion of Promise, Dart has Futures an equivalent.

10. Navigating Between Screens

The screen on a mobile is usually considerably smaller than the one of your laptop. The interactions result in often screen changes. In this lesson, we explain that mechanism in detail.

11. Creating Simple Forms

Similarly to web pages, a common way to interact with a mobile application is through forms. You can enter some data via input fields or select some criteria via radio buttons or drop-down menus. Creating forms in Flutter is also pretty straightforward. This lesson shows the basics of that process.

12. Creating More Complicated Forms

Forms are sent in by submitting them. It may be necessary, not only to control particular fields, but also the form as a whole. Flutter allows to group different fields under a Form widget, so that the form submission triggers saving all fields values in that form.

13. Validating Forms

Forms need to be validated. It is a process of accepting proper values and rejecting those that don’t conform to the rules defined for each field. Flutter comes with a built-in mechanism for validating forms.

14. Adding Side Menu

Side menus are used to display allowed operations along with the profile information for a currently logged in user. There is no need to build this feature from scratch in Flutter as it comes built-in.

15. Making List Items Dissmissable

As noted previously, lists are common in mobile applications. It is also popular to interact with list items through gestures such as swiping. In Flutter, this feature is also built-in and available as the Dismissible widget.

16. Creating Tab Bars

Another popular element in mobile applications is a tab bar, usually located at the top of the screen. And yes, this is also built-in in Flutter. No need to reinvent the wheel, you can simply use the TabBarView widget.

17. Adding Navigation Bars

Contrary to the tab bars, the navigation bars are usually located at the bottom of the screen. In addition, they often have icons associated with each item in the bar. Once again, Flutter has your back and provides a convenient BottomNavigationBar widget to quickly create that functionality.

18. Streams & The BLoC Pattern

The Dart programming language has a great, built-in support for streams. This mechanism is extremely useful to deal with state in your mobile application. Along with the built-in StreamBuilder you can easily rebuild a portion of your widget tree in response to changes in streams.

19. Combining Streams with Futures

Streams may require some additional learning, but they also provide more flexibility than regular variables. At the beginning it may no be straightforward how to combine entities providing values once with the notion of streams, which is a stream of values. In this lesson we dive into that topic by showing how to combine an HTTP future with a stream in Flutter.

20. Creating A Client-Side Search

The search functionality is also something pretty common for mobile applications. And yet again, Flutter helps us out by providing a built-in mechanism to easily implement that feature. In this lesson, we show how to build a search screen.

21. Explaining The Inherited Widget

In addition to Stateful and Stateless widgets, Flutter has a special widget for sharing data across the widget tree. In this episode we deep dive into that topic to fully understand how to use in order to provide our widgets with data.

22. The Sprinkle Architecture

In this lesson, we introduce a mental model for the architecture by using a garden as the metaphor. Widgets are plants while Streams are the water sprinkles them, so that those widgets could grow or change.

This course is free and it will always be free. There is no catch. If you like it, found it useful or it helped you in your career, please write me a private message. Seeing and hearing from people enjoying those lessons really motivates me to produce more.

You can also subscribe to my YouTube channel. ;)

The Basics of a TypeScript Setup for Node.js with VS Code

Zaiste — Fri, 15 Nov 2019 10:27:29 +0000

TypeScript is a superset of JavaScript that provides optional static typing along with type inference. It also supports modern JavaScript features, which makes it similar to the Babel project.

There is a complementary, walk-through video on YouTube for this article where I show this TypeScript setup.

TypeScript makes working with JavaScript more enjoyable. One of the biggest advantages of using TypeScript is the IntelliSense feature, which provides a rich development environment with contextual code completions, hover info and method signature information.

At the same time TypeScript is not necessary to write great software. Most of the articles about TypeScript picture the language as the necessity. This is not true. In software, most problems come from errors in specifications and architectural mistakes.

Types improve the coding experience on the lower level and at the micro scale. They greatly help with writing particular lines of code by providing a stricter, thus slightly safer coding environment.

It is difficult to estimate the actual benefits, but adopting TypeScript is not something that will change your software practice in dramatic ways. There are even prominent voices saying you shouldn't use types at all.

I think this is exactly backwards, types often cripple larger codebases. #Clojure https://t.co/2eJIQsmRrR
— stuarthalloway (@stuarthalloway) September 27, 2019

Personally I find great pleasure in using TypeScript, to the extend of not willing to write regular JavaScript anymore.

Simplest TypeScript Snippet

Let's start with the simplest TypeScript code snippet, which is also not idiomatic. In other words, it's a syntaxtically correct piece of code which doesn't follow the common coding practice.

let message: string = "Hello World"

TypeScript allows us to specify the type for the message variable as string. This type annotation describes a range of values that a particular variable (or constant) can take, or a particular function can return. With TypeScript we can now explicitly specify the value constrains in our code. It leads to a stricter control, which is a good thing.

Types, however, reduce the code flexibility. That's one of the reasons why there is no consensus in the debate of static versus dynamic typing. At the end of the day, it boils down to the personal preference and experience.

Type Inference

So what's wrong with this short snippet? The piece of TypeScript is not idiomatic, because TypeScript not only allows us to specify type, but is also smart enough to guess the types based on how particular variable or function is used in the code - this feature is known as type inference.

The TypeScript compiler looks at our code and infers the ranges of values for our variables, constans or functions. Type inference is something you should use as much as possible. Usually, the compiler knows better than you what types to use. Therefore, in idiomatic TypeScript, the code from above should be written as follows:

let message = "Hello World"

Funny enough, it looks like a regular JavaScript. As a general rule you should not specify types in the assignments as those can be easily inferred by the TypeScript compiler; on the other hand, you should explicitly provide types for the function parameters.

An HTTP Server in TypeScript

Let's now write a simple HTTP server in Node.js using TypeScript to see how VS Code supports TypeScript out of the box. You may know that VS Code is actually written in TypeScript, but the editor also provides a feature called the Automatic Types Aquisition.

With the Automatic Types Aquisition VS Code automatically downloads the type definitions for the packages you use in your code. This makes using TypeScript even more convenient and straighforward.

Let's initialize a TypeScript project:

mkdir typescript-with-zaiste
cd typescript-with-zaiste
npm init --yes
npm install -D typescript
tsc init

and let's consider the following snippet stored in the ~app.ts~ file:

import http, { IncomingMessage, ServerResponse } from 'http';

const handler = (request: IncomingMessage, response: ServerResponse) => {
  response.end('Hello, World');
}

http
  .createServer(handler)
  .listen(8080, () => console.log('started'));

The Automatic Types Acquisition being enabled by default in VS Code, I can simply type the . (the dot) after the response variable to see all possible fields and methods of that object along with their documentation.

This is possible thanks to those type definitions. I don't need to switch back and forward between the documentation of the http module. Everything is in one place which streamlines the coding.

Types in Plain JavaScript

The http is a core module from Node.js and Node.js is not written in TypeScript. Thus, there is no information about types in it. Plenty of popular NPM packages are still written using JavaScript as well.

In order to provide type information in those cases, there is a special project called DefinitelyTyped. The Automatic Type Aquisition feature in VS Code aquires the type information from that project. In our example, we relied on the @types/node to have this information for the http module from Node.js.

It is a good practice to include those types definitions explicitly in your project using the devDependencies of the package.json. Those using editors other than VS Code will be able then to benefit form the type definitions as well.

npm install -D @types/node

A TypeScript project must be first compiled (or transpiled) into JavaScript before we can run with Node.js. This transpilation process is done using the tsc command line tool that comes with the typescript package.

npm install -D typescript

In order to have a more streamlined process we can instruct the TypeScript compiler to constantly watch our files using the --watch option and automatically recompile once there are changes within them.

TypeScript with VS Code

VS Code recognizes TypeScript projects by the presence of the tsconfig.json and conveniently provides the appropriate build tasks. The compilation can be trigger directly using the Command Palette and seamlessly run using the UI of the editor - there is no need to switch between the terminal and the editor anymore.

We can also specify the default build task in VS Code to further simplify the whole process and have it conveniently under the build command via the editor wide key binding.

This setup works for well for regular, command-line applications which we run to do a specific tasks. Once it's done, they finish. In Node.js, however, we also build web servers - long running processes that accept requests and return responses. This slightly troubles the setup of a TypeScript application. We not only need to transpile our code from TypeScript to JavaScript, but we also need to reload our Node.js server instance once this compilation is done and for each such change in our files.

There are many solutions for this problem. We could use nodemon to restart both TypeScript compilation and the server once there are changes in our files - this is not optimal though, especially for bigger projects. We could also use a tool called ts-node-dev which is slightly smarter and shares the TypeScript compilation between restarts. There is, however, a better solution.

PM2 for Restarts in Development

The JavaScript ecosystem is insanely rich to the point to be easily overwhelming. I prefer to keep the dependencies to minimum and to reuse what is already there. For that reason we will use the pm2 tool, which is the Node.js standard for running Node.js processes in production. This tool also provides a development mode as the pm2-dev command. Let's use it instead of adding another dependency.

"scripts": {
  "dev": "pm2-dev app.js"
}

Let's run the dev script directly using the tasks feature in VS Code in addition to the already running TypeScript compiler process via tsc --watch. From now on any change in the app.ts will be automatically recompiled by TypeScript and then quickly reloaded by the pm2 tool.

⋯

TypeScript makes writing JavaScript more enjoyable. It reduces the probability of making typos while the type system constrains the area for mistakes.

We also simplified and sped up the development process by eliminating the need to switch between the editor and the terminal - everything is now in one place, directly accessible from VS Code.

That's a perfect TypeScript setup for Node.js with VS Code, indeed!

A Gentle Introduction to Functional Programming in JavaScript

Zaiste — Fri, 30 Aug 2019 18:07:31 +0000

Functional programming is a programming paradigm in which you build programs by composing functions. The computation is then the evaluation of those functions.

Functional programming focuses on the usage of pure functions and on avoiding shared, mutable state. This programming paradigm is declarative. Functional code is usually more concise and easier to test.

JavaScript has its flaws, but at the same time the language is well adapted for functional style of programming. Functions are first-class objects. It is easy to pass them around as arguments, or to return them from other functions.

In this mini video series, we will embark on an exciting journey to learn a bit about functional programming by using JavaScript. Presented concepts will be mostly universal and applicable to other programming languages.

This series is created with beginners and non-programmers in mind.

Don't worry, we will take it slowly!

If you'd like to be notified about new episodes, subscribe here

DEV Community: Zaiste

Livestream: Building E-Commerce Apps with Flutter & GraphQL

Modern React.js Setup for GraphQL (using Vite & urql)

Install pnpm

Create the project

Integrate with OneGraph

Construct the GraphQL Query

Integrate with urql

Authenticate with OneGraph

The Result

Video Tutorial

My Favorite Privacy Tools in 2020: Be Safer on the Internet!

Firefox

Little Snitch

PiHole & AdGuard

Nibspace

Bitwarden

NordVPN

Fastmail

15 Command-Line Tools to Make You Better at Shell & CLI

bat

exa

fd

procs

sd

dust

starship

ripgrep

tokei

hyperfine

ytop

tealdeer

bandwhich

grex

zoxide

Bonus: nushell

Full-Stack TypeScript using Node.js, Vue.js 3 & PostgreSQL - Introduction

Goal

Technology Stack

Future

Plan

Stay tuned for the next part in the series!

Video Tutorial

I'm Live Streaming How To Build a Mobile App for Dev.to in Flutter with REST & GraphQL

How to Quickly Build a REST API in Node.js with TypeScript (for Absolute Beginners) - PART 1 of 4

A bit of theory

APIs

Web APIs

URLs

Resources

Headers

Handlers

Routes

Practical Example

Programming Languages To Learn In 2020 To Boost Your Career As A Software Developer

Reason

Rust

Dart

Nim

Bonus: Joy

4 Ways Of Accessing HTML Elements In The DOM

Accessing Elements by Unique Identifier (ID)

Accessing Elements by Class

Accessing Elements by Tag

Accessing Elements by CSS Selector

22 Short Lessons To Become A Mobile Programmer Using Flutter Framework

0. What is Flutter ?

1. Development Setup

2. Creating First Flutter Application

3. Stateless & Stateful Widgets

4. Listings Elements

5. Assets

6. Using Types in Dart

7. Serializing JSON

8. Doing HTTP Request and Parsing HTTP Responses

9. Async / Await Syntax

10. Navigating Between Screens

11. Creating Simple Forms

12. Creating More Complicated Forms

13. Validating Forms

Install `pnpm`

`bat`

`exa`

`fd`

`procs`

`sd`

`dust`

`starship`

`ripgrep`

`tokei`

`hyperfine`

`ytop`

`tealdeer`

`bandwhich`

`zoxide`

Bonus: `nushell`