tech/webdev magazine

November 30, 2019

Setup Prettier For Typescript

Saturday, November 30, 2019 Teklinks

One thing making developers life easier is automatic code formatters. Prettier is one of the most famous code formatter, for most part it does what you would expect it to do and most of the time it formats code in a better way you would yourself do.

Full article

November 27, 2019

Batching Client GraphQL Queries

Wednesday, November 27, 2019 Teklinks

Modern apps are chatty—they require a lot of data, and thus make a lot of requests to underlying services to fulfill those needs. Layering GraphQL over your services solves this issue, since it encapsulates multiple requests into a single operation, avoiding the cost of multiple round trips.

Full article

Finally Understand the JavaScript Reduce Method

Wednesday, November 27, 2019 Teklinks

Reduce is a method that can be difficult to understand especially with all the vague explanations that can be found on the web. There are a lot of benefits to understanding reduce as it is often used in state management (think Redux).

Full article

A Complete Pre-Commit Workflow

Wednesday, November 27, 2019 Teklinks

I really like making perfect commits, and I particularly hate appending or creating a new commit because of a guideline mistake. So I needed a tool that would bark at me when I was about to make a bad commit.

Full article

Zsh Plugins

Wednesday, November 27, 2019 Teklinks

Last week we looked into how we could install iTerm2 combined with Oh My Zsh to create the best possible terminal experience. Today we’ll have a look at the plugins that we can install to make our terminal even more powerful! Oh My Zsh comes with a set of plugins.

Full article

WebRTC chat with React.js

Wednesday, November 27, 2019 Teklinks

In this blog post I’m going to share how could be build WebRTC chat with React.js. Before we continue lets describe briefly what React.js and WebRTC are. The application from this tutorial is available at GitHub.

Full article

November 26, 2019

Using the useEffect hook

Tuesday, November 26, 2019 Teklinks

useEffect is meant to handle any sort of "side effect" (making a change in some external system, logging to the console, making an HTTP request, etc...) that is triggered by a change in your component's data or in reaction to the component rendering.

Full article

Getting Started with GraphQL

Tuesday, November 26, 2019 Teklinks

GraphQL was developed by Facebook in 2012 to power up its mobile apps. Since open-sourcing GraphQL specification in 2015, it gained a lot of popularity and is now used by many development teams, including giants like GitHub, Twitter or Airbnb.

Full article

November 24, 2019

How to set up JavaScript Test Coverage

Sunday, November 24, 2019 Teklinks

Coveralls is used to show you the test coverage of your JavaScript application. Let’s see how it can be used for your JavaScript project which is already on GitHub and connected to your Travis CI due to the previous CI setup tutorial. First, sign up at Coveralls.io with your GitHub account.

Full article

Iterm2 With Oh My Zsh

Sunday, November 24, 2019 Teklinks

Few years ago I wrote a post about ConEmu, a better shell experience for Windows. I have been using it over the past four years while working on Windows. Recently I completely moved to Mac and on unix system we have better shell experience in general.

Full article

How TypeScript Makes You a Better JavaScript Developer

Sunday, November 24, 2019 Teklinks

What do Airbnb, Google, Lyft and Asana have in common? They’ve all migrated several codebases to TypeScript. Whether it is eating healthier, exercising, or sleeping more, our humans love self-improvement. The same applies to our careers.

Full article

November 23, 2019

A Complete Guide to useEffect

Saturday, November 23, 2019 Teklinks

You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues.

Full article

Build your own React

Saturday, November 23, 2019 Teklinks

We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.

Full article

November 20, 2019

The Front-End Tooling Survey 2019 - Results

Wednesday, November 20, 2019 Teklinks

It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here! This year, 3,005 developers answered 27 questions covering a wide range of front-end tools and methodologies.

Full article

Test React apps with React Testing Library

Wednesday, November 20, 2019 Teklinks

Building web applications is not an easy task as of today. To do so, you’re probably using something like React, Vue or Angular. Your app is faster, the code is both more maintainable and readable. But that’s not enough. The more your codebase grows, the more complex and buggy it is.

Full article

November 18, 2019

Writing Your Own Changelog Generator with Git

Monday, November 18, 2019 Teklinks

Changelogs are great. They give us a record of what changes in our project were made at a particular time. If you’re writing a library, it also gives your users awareness of what changed and gives the impression that your library is well-maintained and can be relied on.

Full article

Top 5 React Chart Libraries for 2020

Monday, November 18, 2019 Teklinks

Charts are like wheelchairs for our feeble minds. If you want to make a data-informed decision, you better get the right help ? “There is magic in graphs. The profile of a curve reveals in a flash a whole situation — the life history of an epidemic, a panic, or an era of prosperity.

Full article

November 16, 2019

What’s New in JavaScript

Saturday, November 16, 2019 Teklinks

Ever since ES2015 released, which was a great leap forward in itself, JavaScript has been improving at a fast pace. Every year since, there have been new features added to the JavaScript specification. Features have been consistently added, like new syntax and new methods for built in JavaScript.

Full article

Functional CSS: Meet Tailwind CSS

Saturday, November 16, 2019 Teklinks

Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable, and explicitly named utility classes to construct components.

Full article

8 Useful Tricks for React Apps You Should Know

Saturday, November 16, 2019 Teklinks

React has gone through many shifts in stages that never fail to amaze its fans. At first, we had mixins to create and manage our interface, then came the concept of class components, and now React Hooks which has changed the way we build our apps in React.

Full article

November 15, 2019

10 Interesting JavaScript and CSS Libraries for November 2019

Friday, November 15, 2019 Teklinks

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

Full article

November 14, 2019

Optimizing images for the web - an in-depth guide

Thursday, November 14, 2019 Teklinks

Unoptimized (non-minified) images are one of the main causes of poor website performance, mainly on the initial (first) load. Depending on the resolution and image quality, you might end up with images that take up more than 70% of your total website size.

Full article

Reasons to learn Redux as a JavaScript Developer

Thursday, November 14, 2019 Teklinks

Redux has been with us for a while now. What has gone public 2015 -- demonstrated by Dan Abramov in his infamous talk about time travel -- suddenly turned into many JavaScript developer's day to day business.

Full article

A Quick Start Guide to Query Strings with React Router

Thursday, November 14, 2019 Teklinks

I’ve been working on a project where we wanted to implement a set of filters for a list of records on one page of our React web app and store the selected filters as state in the URL. We chose this approach so we could link directly to the page with specific filters selected.

Full article

November 12, 2019

Picking Your Tech Field as a Newbie

Tuesday, November 12, 2019 Teklinks

Experience is the best teacher, but no one said it has to be your experience As a newbie just starting in tech, one of the most challenging decisions you have to make is choosing a tech stack to learn, you'll probably be thinking of choosing web, and you still have to decide if you'll be a Frontend

Full article

3 Ways to Build Your Own React Component Library

Tuesday, November 12, 2019 Teklinks

Component libraries are great resources when it comes to developing React-based applications. They allow you to logically group your components in a way that lets others in your team explore them and pick & choose the ones they need.

Full article

Experimenting with the new React Concurrent mode

Tuesday, November 12, 2019 Teklinks

I’ve been playing around with React’s new Concurrent Mode and it is amazing. A little mind-bendy, a dash mad, and a whole lot of wonderful. Your app might get faster even if you don’t change anything. ?

Full article

3 Steps to Beat Imposter Syndrome

Tuesday, November 12, 2019 Teklinks

Eventually, I recognized that worry for what it was: impostor syndrome. There are lots of ways our feelings of inadequacy can surface. We might say to ourselves, “I’m not the right person for this” or “I just know I’m going to get called out.

Full article

November 9, 2019

20 VS Code Shortcuts for Faster Coding

Saturday, November 09, 2019 Teklinks

This article hopes to help people using VS Code to code even faster. Not everyone has time to go through every tip and trick to find the ones that help them code faster — there’s just too many.

Full article

A List of Fun Things You Can Build as a Developer

Saturday, November 09, 2019 Teklinks

One becomes a beginner after 1,000 days of training. One becomes a master after 10,000 days of practice. This is a quote from Mas Oyama that sums things up pretty well. The secret to being a great developer is by putting in the effort.

Full article

November 7, 2019

See Light Commands in Action

Thursday, November 07, 2019 Teklinks

By shining the laser through the window at microphones inside smart speakers, tablets, or phones, a far away attacker can remotely send inaudible and potentially invisible commands which are then acted upon by Alexa, Portal, Google assistant or Siri.

Full article

November 5, 2019

How to get started with Cypress

Tuesday, November 05, 2019 Teklinks

If you’ve been developing frontend applications recently, you’ve undoubtedly heard of Cypress.io. Cypress is a powerful testing framework that makes writing tests easy and really fun. I’ve used Cypress on a number of projects, and had a great experience.

Full article

How to Reuse Logic with React Hooks

Tuesday, November 05, 2019 Teklinks

This article was originally posted in the ButterCMS blog. React has always been great for reusing and composing components. That means you can write a piece of UI and simply reuse it later on. Moreover, your component can have some embedded logic that you can reuse too.

Full article

Micro Frontends

Tuesday, November 05, 2019 Teklinks

We'll start with the container, as it's the entry point for our customers. Let's see what we can learn about it from its package.json: To see how we select and display a micro frontend, let's look at App.js.

Full article

November 3, 2019

Use Your Money to Buy Back Time

Sunday, November 03, 2019 Teklinks

Money, to me, always meant having more pleasure and being able to buy stuff. Having money meant less stress and the gift of options. Money could buy me a relaxing holiday, or a better car, or a fancier house. These money fantasies were nice until I actually got money.

Full article

Why Is React Concurrent Mode Exciting?

Sunday, November 03, 2019 Teklinks

Last week the React team released an experimental version of Concurrent Mode to the public. It's been in development for over a year and the React community has been very excited about its release. What is Concurrent Mode? The documentation pages has a nice and concise description:

Full article

November 2, 2019

You don’t need CSS to style your webpage!

Saturday, November 02, 2019 Teklinks

Are you that someone who gets frustrated whenever you apply those styles you always wanted on your webpage but when you check out on the browser, it just doesn’t work! Ah, I had those moments (and still I see others struggling with this), I’ve been that “someone” for quite long and the only

Full article

How do I deploy my code to Heroku using GitLab CI/CD?

Saturday, November 02, 2019 Teklinks

In this article, I'd like to share how I deploy my code to Heroku using GitLab CI/CD. For this, I'll create a simple NodeJS application. Here we'll learn the environments initial concepts: Development, Stage, and Production.

Full article

November 1, 2019

TypeScript and Babel, a match made in heaven

Friday, November 01, 2019 Teklinks

TypeScript is awesome. I ? it! It brings powerful type checking to your codebase that helps you find bugs more quickly and form and adhere to contracts more easily. Not to mention the amazing editor…

Full article