DEV Community: hari1k

Useful resources and links for Web Development

hari1k — Tue, 28 Jul 2020 06:09:26 +0000

Learning Platforms

freeCodeCamp
A nonprofit community that help people learn to code for free and build projects.

Scrimba
Next-gen learning platform which has interactive courses and tutorials.

Codecademy
Have access to resources that can teach web fundamentals, as well as multiple programming languages, including JavaScript, Ruby, and Python.

Frontendmentor
Learn and Solve real-world HTML, CSS and JavaScript challenges.

Sololearn
Learn to code for free which has interactive lessons, "on-the-go"
practice and peer support.

Illustrations

Blush
Create, mix, and customize illustrations made by artists around the world.

Ouch!! Icons8
ICONS8 allows designers to express their ideas giving right design elements at right time.

Storytale
Storytale is a platform with vector, raster, and 3D illustrations that grows every week.

Drawkit
DrawKit is a designstripe project has free Hand-drawn vector illustration and icon resources.

CSS

Tailwindcss
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

CSSgradient
Free tool that lets you create a gradient background for websites.

cssinspector
Chrome extension which helps to get the CSS of any element on the web.

CSSpeeper
A smart CSS viewer which Inspect styles in a simple, well-organized& beautiful way with Chrome extension.

BTTN.CSS
Get awesome buttons for awesome projects.

Other resources

Startupstash
Online directory of resources and tools for startups and entrepreneurs.

Unsplash
Over 1 million free high-resolution images brought to you by the world’s most generous community of photographers.

Pixabay
Over 1.8 million+ high quality stock images and videos shared by our talented community.

What is JSX?

hari1k — Wed, 22 Jul 2020 04:58:00 +0000

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

What does “syntax extension” mean?

In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it!

If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

JSX Elements And Their Surroundings

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array…you name it.

Here’s an example of a JSX element being saved in a variable:

const navBar = <nav>I am a nav bar</nav>;

Here’s an example of several JSX elements being stored in an object:

const myTeam = {
  center: <li>Benzo Walli</li>,
  powerForward: <li>Rasha Loa</li>,
  smallForward: <li>Tayshaun Dasmoto</li>,
  shootingGuard: <li>Colmar Cumberbatch</li>,
  pointGuard: <li>Femi Billon</li>
};

Attributes In JSX

JSX elements can have attributes, just like HTML elements can.

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this:

my-attribute-name="my-attribute-value"

Here are some JSX elements with attributes

<a href="http://www.example.com">Welcome to the Web</a>;

const title = <h1 id="title">Introduction to React.js: Part I</h1>;

A single JSX element can have many attributes, just like in HTML:

const panda = <img src="images/panda.jpg" 
alt="panda" width="500px" height="500px" />;

Why Node.JS

hari1k — Fri, 17 Jul 2020 05:45:02 +0000

Node.js is opensource server javaScript runtime environment that lets developers write command line tools and server-side scripts outside of a browser.
With it's simple structure, now the npm registry hosts over 1,000,000 open source packages which you can freely use
Many of those established over time as popular options. Here is a non-comprehensive list of the ones worth learning:

AdonisJs:
A full-stack framework highly focused on developer ergonomics, stability, and confidence. Adonis is one of the fastest Node.js web frameworks.
Express:
It provides one of the most simple yet powerful ways to create a web server. Its minimalist approach, unopinionated, focused on the core features of a server, is key to its success.
Fastify:
A web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. Fastify is one of the fastest Node.js web frameworks.
hapi:
A rich framework for building applications and services that enables developers to focus on writing reusable application logic instead of spending time building infrastructure.
koa:
It is built by the same team behind Express, aims to be even simpler and smaller, building on top of years of knowledge. The new project born out of the need to create incompatible changes without disrupting the existing community.
Loopback.io:
Makes it easy to build modern applications that require complex integrations.
Meteor:
An incredibly powerful full-stack framework, powering you with an isomorphic approach to building apps with JavaScript, sharing code on the client and the server. Once an off-the-shelf tool that provided everything, now integrates with frontend libs React, Vue, and Angular. Can be used to create mobile apps as well.
NestJS:
A TypeScript based progressive Node.js framework for building enterprise-grade efficient, reliable and scalable server-side applications.
Next.js:
A framework to render server-side rendered React applications.
Nx:
A toolkit for full-stack monorepo development using NestJS, Express, React, Angular, and more! Nx helps scale your development from one team building one application to many teams collaborating on multiple applications!
Socket.io:
A real-time communication engine to build network applications.