DEV Community: Kelvin Conrad

Is node js Dead - Long Live Deno

Kelvin Conrad — Mon, 25 May 2020 10:19:00 +0000

Node.js is certainly not dead, but the hype is over. As of 2019, all of Node’s innovations (non-blocking I/O, same language on front-end and backend) are copied and even made better by other languages. It is hard to find any use cases where there are no better alternatives
Deno is a new platform for writing applications using JavaScript and TypeScript.

Both platforms share the same philosophy – event-driven architecture and asynchronous non-blocking tools to build web servers and services. The author of Deno is Ryan Dahl, original creator of Node.js. In 2018, he gave the famous talk “10 Things I Regret About Node.js“ and announced his new project – Deno. Deno aims to fix Node.js design mistakes and offers a new modern development environment

What’s wrong with Node.js?

The most important thing first: Nothing is wrong with Node.js. You can use it and you should not switch to Deno just because it’s there.

Node.js is getting used by thousands of (very large) companies, it has huge ecosystem and a highly active community - Node.js isn’t going anywhere!

You don’t have to take this from me by the way - you can also listen to Ryan.

"But there are a couple of weaknesses in Node.js which could potentially be improved (side-note: Those weaknesses of course don’t necessarily have to matter to you)."

Node.js is focused on JavaScript and doesn’t (natively) use static types The import syntax is very specific to Node.js and not what we know from the browser (ES modules, URL imports)
Node.js does not embrace modern JavaScript features like Promises
Node.js is not “secure by default” The last point is a tricky one though. “not secury by default” sounds horrible and it’s easy to get this point wrong.

Node.js absolutely allows you to build secure applications. Period!

BUT: A Node script doesn’t have a built-in security model. To be precise, by default, every Node script has full access to your file system, your network and your entire environment.

This is by design and makes Node.js very flexible. But it also means that tools like ESLint, which are just “big Node.js scripts” under the hood, theoretically could do anything with your files on your system.

How does Deno fix those problems?

Deno generally can be used for the same things as Node.js. You can use it to build web servers, you can use it to build utility scripts etc.

But Deno:

By default supports TypeScript - hence it’s a JavaScript and TypeScript runtime
Uses ES modules (with URL support) imports instead of its own module system
Embraces modern JavaScript features like Promises or async iterables
Is “secure by default”

Let’s take a closer look at those points then.

TypeScript Support

You can absolutely write normal JavaScript code with Deno - but if you want, you can also switch to TypeScript at any point as the TypeScript compiler is built right into Deno.

For example, this code would fail when executed with Node.js but works with Deno:

The usage of TypeScript of course gives you extra type safety and might help you avoid a lot of unnecessary bugs.

As mentioned, it’s optional but if you want to use it, you don’t have to set up your own custom TypeScript project and compilation flow first.

ES Modules Imports

Node.js brings its own modules system:

We got used to it but it’s very different from what we know in the browser:

or - directly in HTML of course:

In the browser, we use relative or absolute URLs. We don’t sometimes use module names and sometimes file paths (both is done in Node).

In addition, in Node projects, we use npm to manage our local packages. This tool downloads them and stores them (as well as their dependencies) in the node_modules folder.

This folder can easily become very big and it’s actually an important part of Node’s module resolution system. Indeed, the following code relies on express existing as a package in node_modules - it would fail if it would be a simple express.js file or anything like that.

Deno simplifies this. You simply work with ES Module imports (i.e. the syntax you know from browser-side JavaScript) and it doesn’t need a package managing tool or folder like npm/node_modules.

Instead, your Deno code looks like this:

This imports the serve function from the server.ts package which is stored on some web server.

Deno automatically downloads and caches this package (and its dependencies) when your code runs for the first time.

Modern JavaScript Features

Node.js works a lot with callback functions - simply because at the point of time it was created, modern JS functionalities like Promises weren’t as important and big (and common) as they are today.

Deno, being very new, of course is able to work around that and leverage all those modern features.

Hence you can for example spin up a very simple web server with the following code snippet that leverages “async iterables” What is that

Just as a comparison, here’s pretty much the same server, built with Node.js:

Security

As mentioned, Deno has “security built in”.

And this does not mean that your Deno applications are always secure, no matter what you do!

This just means that Deno scripts can’t do everything on your computer by default.

For example, if you run the above server script, you’ll get an error message:

The script only executes successfuly once you use the right permissions:

In this case, --allow-net provides network access to the script. Similar permission flags exist for writing (--allow-write) and reading (--allow-read) files for example.

So … should you switch?

This doesn’t sound too bad, does it?

But it’s also very possible, that you have a look at this list of new features and you think: “This is nice but I don’t hate those things about Node.js”.

And that would be understandable, too.

Either way: Deno is extremely new. Version 1.0 was released on May 13th 2020. And just because it’s v1.0 does not mean that it’s finished and you should use it for your production apps.

It’s still very new and under active development. And it’s also way too early to tell whether it’ll ever be a “big thing”.

You can of course play around with it, dive into it and its ecosystem of packages and use it in your side projects or in demos and smaller apps.

The goal of Deno is not to replace Node.js, but to offer an alternative. Some of the differences are quite controversial and it’s hard to predict if they will format in a correct way. I recommend that all Node.js programmers keep an eye on this project. I’m not sure if this project will be a success, but it’s a great opportunity to observe how Node.js could have been implemented differently.

But only time will tell if it’ll be adopted by bigger companies and projects and if the problems, which it fixes, are really problems with Node.js for the majority of other developers as well.

What are your Thoughts About Deno

Postwoman 👽 - An online, open source API request builder Alternative to Postman

Kelvin Conrad — Fri, 22 May 2020 16:18:32 +0000

PostWoman is a Web alternative to Postman - Helps you create requests faster, saving precious time on development which is also an opensource API request builder

Website

Built with 🔧

- Chromium - Thanks for being so fast!

- HTML - For the web framework

- CSS - For styling components

- JavaScript - For magic!

- Vue - To add to the JavaScript magic!

- Nuxt - To add to the Vue magic!

Postwoman developer
-by- liyas Thomas

-How it all Started-

Story behind Postwoman: The very first task I was assigned is an API integration of an old project. That's when I came across Postman API testing. Postman has separate builds targeted to each operating systems made with Electron. I use a low-end PC and can't possibly afford to run another Electron app. From that moment onwards, I wanted to make an API testing platform which is:

- Open Sourced 💚

- Runs online

- Have multi-platform support

- Have multi-device support

- Accessible from anywhere

That's how Postwoman was born (this is not at all an alternative to Postman - yet, it does the job very beautifully and minimally. It needs more features and love which I hope we all can give by contributions on GitHub).

When I did a background check on API request builders, Postman offered various Plans & Pricing, there were lot of other API request builders based on CURL etc. But none of them seems simple, minimal and efficient.

That's why I created my own API request builder with pure JavaScript (Later I used Vue.js and apparently migrated to Nuxt.js) + HTML + CSS 💖

Did I mention this service is all free of charge and 100% open source? Yes, It's free and always will be.

The Postwoman API request builder helps you create your requests faster, saving you precious time on your development.

Features 🔥

- Send requests to verify your API is ready for launch

- GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH (more coming soon)

- Authentication support

- Parameters support

- Request body support

- View Response

- Progressive Web App support

- UPDATE: Added History support

- UPDATE: Migrated to Vue Nuxt

- UPDATE: Added web socket support

- UPDATE: Added raw input field for PUT and POST methods

- UPDATE: Added response status color

- UPDATE: Added theme customization with settings storage

- UPDATE: Added option to copy response to clipboard

- UPDATE: Added option to view/copy HTML preview of responses

(more coming soon)

Features planned for near future for which I need your help:

- Autocomplete

- Code highlight in response body~ UPDATE: Added code highlight on response body

- More methods

- History UPDATE: Added History support

HTTP support (currently I don't have money to buy a domain so I hosted on GitHub Pages which is served only on HTTPS - this makes impossible to make non-HTTPS requests from HTTPS hosting 😿)
🎁 Bonus: Postwoman is in dark mode 🌚

Demo 🚀

Feel free to contribute on GitHub 💚

How To learn any front-end framework

Kelvin Conrad — Fri, 22 May 2020 15:44:00 +0000

SUPPOSE You decided to learn x framework, You open youtube or any search engine you prefer to search for any tutorials related to this “x” framework and suddenly after 30 min you scream “Eureka”, I think this framework is similar to my previous framework and you are right you don’t have to learn it from scratch, In this post I will show to you my experience to learn frontend frameworks and how those frameworks are closed to each other.

Every time you decided to learn a front end framework, you must hear those terms over and over ( components, routing and managing state ) Let’s break it down.

Components

The heart core for any framework building components makes it reusable.
Most modern frameworks using JSX or HTML template engine,
All frameworks provided lifecycle hooks that provide visibility into component life moments like creates, renders, destroy and the ability to act when they occur.
Routing
Nowadays most modern frameworks provided API to create and manage client-side routing.

Managing State

All freameworks are built with a way for components to internally manage their state without any need for an external library or tool.
Many Frameworks are built with a way for components to share same state for example (Angular has a Service, React now has Context API).
Sometimes frameworks solutions are not enough especially when your state is huge so you can consider using a library like redux.
After Finishing learning basics let’s get our hands dirty and building projects.

Building projects

In order to understand aspects of something you need to know it well and this knowledge does not come from reading books or watching visual lessons only, the real test comes with a real problem in real life, during this article I bring you some ideas for projects covering many aspects of any frontend framework you choose.

Notes:

The projects listed in this subject are gradual in their difficulty and each project adds to its predecessor.
The order of projects from the youngest to the most comprehensive.

1. Find & Display ( clone )

The first application which is commonly used is the clone of any known site using its public API, try to build a simple search bar with drop-down list holds results coming from endpoint API, check returning data before displaying it like if there is an image or not to display.

Endpoint API Example:

- Github API

- OMDb API

- Spotify Web API

- wunderground API

- reddit API

What you will learn:

Using HTTP client to make a request to endpoint API.
Using keyboard event listener, for example, once a user hit enter call -endpoint API to fetch result data.
Learn how to display single data or group of data.
Styling your display with Interpolation data.
Structural your display.
Master-Details: list results add a link for each item in result to the item details page.
Learn how to pass data from master page to a details page.

2. Auth App

some of this endpoint API I mention in the previous section require some authentication so in this section try to add or build another app with login /register page and if the user is login redirect him or her to the user homepage and prevent guest users from pages that require the user to be logged in.

What you will learn:

Route guard: some pages require authenticated user only.
How to send and save JWT (JSON web token) to make requests that require an authenticated use.

3. CRUD App

create, read, update and delete app is the most popular front-end app in this section you can build this app offline using local storage or using online service like Firebase or even integrated it with a back-end framework.

Project Examples:

-Bookmark app.

-To-Do App.

What you will learn:

Validate user input in form and display error if the user inserts wrong data.
How to make put, delete, post and get HTTP request.
Integrate your app with any back-end framework.
Try to add auth capabilities for your back-end framework.

4. Chat App

In previous sections, all the requests to the back-end are unidirectional you don’t have a problem managing your app state there, but in this section, we try to build chat app using web sockets and it’s bidirectional and we can’t wait for the response to update the view, we need another way to manage our client-side state.

What you will learn:

learn how to use manage state solutions like redux for react, ngrx for angular 2+ or vuex for vuejs and how to integrate it with your client-side app.
Make your app more reactive (listen to network state and notify the user with the new message).

10+ Free and Open-Source Ghost Themes for 2020(Nodejs)

Kelvin Conrad — Wed, 20 May 2020 07:12:56 +0000

What is Ghost?

Ghost is a free and very popular open-source headless Node.js CMS. Unlike WordPress or Joomla, Ghost tries to specifically focus on bloggers and publishers. It is a completely independent platform which gives you control of the technology, the content and the audience. The framework was designed with one clear purpose: minimalistic content publishing.

Apart from its headless capabilities, one of the great things about Ghost framework is its leanness. It is designed for a specific task, publishing content, and it performs that task really effectively. Is also has an elegant and friendly UI.
If you want to check out more official information about this framework, here’s the official website

Ghost Free Themes Examples

If you think you should give this framework a try, then you should check these awesome Ghost templates examples. They are free and open-source! <3

1. Material Kit Ghost

Material Kit Ghost is a high quality, free, and open-source theme for Ghost. It comes packed with a large number of features and its pixel-perfect design will help you create amazing web apps. The screens are carefully created and inspired by Creative Tim – Material Kit line of design.
Putting together a page has never been easier. From HTML insertion to bookmarks and responsive styling, you can easily create and build your blog posts.

Live Preview/Download

2. Massively

Massively is a very good-looking, free, and open-source theme for Ghost. It is a text-heavy, article-oriented design built around a huge background image and scroll effects powered by Scrollex.
It was originally created by @ajlkn for HTML5 UP and later ported to Ghost.

Asgar is an elegant, two-column, free and open-source theme for Ghost.

Live Preview/Download

9. Editorial

Editorial is a free and open-source theme for Ghost
It has a news-oriented design built around a dynamic ‘locking’ sidebar (try the toggle to see it in action!) and it is purpose-built for content-centric sites. Originally created by @ajlkn for HTML5 UP and later ported to Ghost.

Live Preview/Download

10. The Shell

The Shell is a minimalistic dark color theme for Ghost platform.

LivePreview
Download

11. No-nonsense

No-nonsense is a fully-featured, content-focused Ghost theme. It is inspired by ghostwriter and typesome.

Features

-Multi-author support
-Post cover image
-Tag page description
-Custom error page and many more!

LivePreview/Download

Supercharge your front-end skills by building real projects

Kelvin Conrad — Tue, 19 May 2020 12:56:35 +0000

Gain real experience of building websites and providing code reviews. Build your portfolio and help others achieve their goals.
visit site 👇👇
https://www.frontendmentor.io

Frontend Mentor offers a range of challenges that aim to mimic a real-world workflow for a front-end developer. Each free challenge includes:

✅ Mobile & desktop designs in JPG format
✅ A front-end style guide for colors, fonts, etc
✅ A basic project brief, which mentions any expected functionality
✅ Pre-optimised assets
✅ A skeleton HTML file with pre-written content, but no structure

If you want to practice using the original Sketch design file, there is an option to buy that as well, although it's not a requirement to start the free challenges.

As well as the free challenges we also have premium challenges. Premium challenges offer you the chance to build some seriously impressive portfolio pieces and include:

✅ Multi-page and fully-functional project ideas
✅ Mobile, tablet & desktop designs in both JPG and Sketch format
✅ A professional design system providing common styles
✅ Custom APIs to work with so that you can practice with JS libraries/frameworks like React, Vue, Svelte, Angular, etc

How to install and check if Node & Npm on Windows

Kelvin Conrad — Sat, 16 May 2020 12:04:19 +0000

How to Install Node.js® and NPM on Windows
JavaScript is quickly becoming the go-to language for web developers. Front-end web developers use JavaScript to add user interface enhancements, add interactivity, and talk to back-end web services using AJAX. Web developers who work on the server-side are also flocking to JavaScript because of the efficiencies and speed offered by JavaScript’s event-driven, non-blocking nature.

In fact, concentrating on JavaScript as your language of choice offers the opportunity to master a single language while still being able to develop “full-stack” web applications. The key to this server-side JavaScript revolution is Node.js® — a version of Chrome’s V8 JavaScript runtime engine — which makes it possible to run JavaScript on the server-side.

Node.js is also used for developing desktop applications and for deploying tools that make developing web sites simpler. For example, by installing Node.js® on your desktop machine, you can quickly convert CoffeeScript to JavaScript, SASS to CSS, and shrink the size of your HTML, JavaScript and graphic files. Using NPM — a tool that makes installing and managing Node modules — it’s quite easy to add many useful tools to your web development toolkit.
Installation Overview
Installing Node and NPM is pretty straightforward using the installer package available from the Node.js® web site.

                 Installation Steps

Download the Windows installer from the Nodes.js® web site.
Run the installer (the .msi file you downloaded in the previous step.)
Follow the prompts in the installer (Accept the license agreement, click the 4. NEXT button a bunch of times and accept the default installation settings). installer
Restart your computer. You won’t be able to run Node.js® until you restart your computer.
Test it!
Make sure you have Node and NPM installed by running simple commands to see what version of each is installed and to run a simple test program:
```
                 Test Node
```
Test Node. To see if Node is installed, open the Windows Command Prompt, Powershell or a similar command line tool, and type node -v. This should print a version number, so you’ll see something like this v12.13.0.
Test NPM. To see if NPM is installed, type npm -v in Terminal. This should print NPM’s version number so you’ll see something like this 1.4.28
Create a test file and run it. A simple way to test that node.js works is to create a JavaScript file: name it hello.js, and just add the code console.log('Node is installed!');. To run the code simply open your command line program, navigate to the folder where you save the file and type node hello.js. This will start Node and run the code in the hello.js file. You should see the output Node is installed!.
verify How to Update Node and NPM
New versions of Node and NPM come out frequently. To install the updates, just download the installer from the Nodejs.org site and run it again. The new version of Node and NPM will replace the older versions.

How to Uninstall Node and NPM
You uninstall Node.js and NPM the same as you would most Windows software:

-Open the Windows Control Panel
-Choose the “Programs and Features” option
-Click the “Uninstall a program” option
-Select Node.js, and click the Uninstall link.
With Node.js and NPM installed you’ll soon be able to take advantage of the huge world of NPM modules that can help with a wide variety of tasks both on the web server and on your desktop (or laptop) machine. The NPM site lists all of the official Node packages making it easy to make the choice. Have fun!