tech/webdev magazine

July 31, 2019

Yarn Workspaces: Organize Your Project’s Codebase Like A Pro

Wednesday, July 31, 2019 Teklinks

Yarn workspaces let you organize your project codebase using a monolithic repository (monorepo). In this article, Jorge explains why they’re a great tool and how to create your first monorepo using Yarn with basic npm scripts, and add the required dependencies for each app.

Full article

July 28, 2019

Exploring Sets and Maps in JavaScript

Sunday, July 28, 2019 Teklinks

The objective of these new constructs is to provide easier and more efficient ways to structure and access data under certain use cases. In this article, we will look at how Sets and Maps work and explore some of the operations that can be performed on them. A collections of values.

Full article

July 27, 2019

Cypress: a new kid on the E2E block

Saturday, July 27, 2019 Teklinks

Those of us familiar with E2E testing a user interface, we all know the struggle. Not only coding with waits and timeouts but setups that were harder to manage especially when running it on a continuous integration platform. Maintaining versions, network issues, browser support, …

Full article

Web Workers with Angular CLI

Saturday, July 27, 2019 Teklinks

Although web workers have been around for a while, frontend engineers seem to avoid using them in projects. There is some documentation on the Angular website, but this article will show how to…

Full article

Yarn support for security alerts

Saturday, July 27, 2019 Teklinks

GitHub security alerts help developers stay on top of vulnerabilities that impact their dependencies. JavaScript developers already receive alerts for their NPM-based projects that use package.json and package-lock.json manifests.

Full article

16 Cool Projects for Your New Raspberry Pi 4

Saturday, July 27, 2019 Teklinks

Join 250,000 subscribers and get a daily digest of news, articles, and more. Whether you’re in the market for a Pi 4 or you already have one sitting alone in a drawer, you’re probably in need of some cool project ideas. Don’t fret—you have a ton of options.

Full article

July 24, 2019

Automatically detect memory leaks with Puppeteer

Wednesday, July 24, 2019 Teklinks

About half a year ago Bronley Plumb kindly made me aware of a memory leak in one of my open-source packages. To see this memory leak in action it was necessary to open a browser and its dev tools to execute some manual steps. On top of that, the memory had to be inspected manually.

Full article

Using Jest and Enzyme for testing React Apps

Wednesday, July 24, 2019 Teklinks

Testing your code is probably one of the most important things to do in software engineering. With testing we ensure quality of what we are building. There are many ways to test code, from end to end testing (manual testing) to unit testing (component testing in React).

Full article

July 23, 2019

5 Commandments for TypeScript programmers

Tuesday, July 23, 2019 Teklinks

More and more projects and teams are adopting TypeScript. However, there is a massive difference between just using TypeScript and taking the most out of it. Types are a contract.

Full article

Top 10 Websites to Learn Coding (Interactively) Online

Tuesday, July 23, 2019 Teklinks

Gone are the days when programming languages could only be mastered programmers like Bill Gates, who later got to dominate the world by storm. Now everyone holds the same potential, and the chance to learn and even master programming language easily.

Full article

July 19, 2019

The Interviewer Who Cursed Me Out and Changed My Life

Friday, July 19, 2019 Teklinks

“Why don’t you walk out the door, not only because you’re not going to get this job, but also because you actually don’t want this job. You’re not a writer and you’ll never be. Prove me wrong.” I sat there fuming and ready to both punch this man in the face and hug him.

Full article

July 18, 2019

React Hooks in TypeScript

Thursday, July 18, 2019 Teklinks

Released in React v16.8.0, React Hooks address a number of issues with React, and perhaps most notably for TypeScript users, provide a first-class solution for reusing stateful logic, built with typing in mind.

Full article

Visual Regression Testing with Puppeteer & Jest

Thursday, July 18, 2019 Teklinks

In this tutorial, we will set up a small project with automated visual tests using Puppeteer, Jest and VisWiz.io. Puppeteer is a Node.js library which provides a high-level API to control headless Chrome. It is a great tool to perform browser automation tasks.

Full article

July 16, 2019

Setup create-react-app with Tailwind CSS

Tuesday, July 16, 2019 Teklinks

Recently, I've been having fun with writing front-end code using utility-first CSS frameworks instead of full-blown toolkit ones like Bootstrap and Bulma. It helps me build and customize my page components immediately without having to write my own CSS from scratch.

Full article

July 15, 2019

Improve Your JavaScript Knowledge By Reading Source Code

Monday, July 15, 2019 Teklinks

Do you remember the first time you dug deep into the source code of a library or framework you use frequently? For me, that moment came during my first job as a frontend developer three years ago. We had just finished rewriting an internal legacy framework we used to create e-learning courses. At the beginning of the rewrite, we had spent time investigating a number of different solutions including Mithril, Inferno, Angular, React, Aurelia, Vue, and Polymer.

Full article

JavaScript Ternary Operators

Monday, July 15, 2019 Teklinks

Here we have a CodePen similar to the earlier examples. Feel free to play around with this and see how we can use JavaScript ternary operators. Ternary operators are just an operator that accepts 3 parts.

Full article

July 14, 2019

Faster web navigation with predictive prefetching

Sunday, July 14, 2019 Teklinks

Learn about predictive prefetching and how Guess.js implements it. In my "Faster Web Navigation with Predictive Prefetching" session at Google I/O 2019, I began by talking about optimizing web apps with code-splitting and the potential performance implications for subsequent page navigation.

Full article

11 React Testing Tools and Libraries for 2019

Sunday, July 14, 2019 Teklinks

Most people use Jest to test their components. Probably, with Enzyme and a couple of other utils. But, while FB recommends Jest as their React testing Framework of choice, the open source ecosystem for testing React applications is rich in frameworks and tools.

Full article

July 12, 2019

React State with Hooks: useReducer, useState, useContext

Friday, July 12, 2019 Teklinks

If you haven’t used state management excessively in React Function Components, this tutorial may help you to get a better understanding of how React Hooks – such as useState, useReducer, and useContext – can be used in combination for impressive state management in React applications.

Full article

The Circle of a React Lifecycle

Friday, July 12, 2019 Teklinks

A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes.Those phases are: mounting, updating, unmounting, error handling. There are methods in each of these phases that make it possible to perform specific actions on the component during that phase. For example, when fetching data from a network, you’d want to call the function that handles the API call in the componentDidMount() method, which is available during the mounting phase.

Full article

July 9, 2019

July 6, 2019

Beware! Angular can steal your time.

Saturday, July 06, 2019 Teklinks

Small gotchas from my(and not only my:) Angular experience. Angular can do everything — or almost everything. But sometimes this ‘almost’ makes you waste time for coding workarounds or trying to find out why something happens or doesn’t work as expected.

Full article

July 5, 2019

The State of Angular in 2019

Friday, July 05, 2019 Teklinks

It’s that time of the year when conferences and events are happening all over the world and we are bombarded with an amount of information that is pretty hard to digest. The Front End world is a never-stopping machine and we all know how hard it is not to stay behind.

Full article

Terms You Need to Know as a JS Developer

Friday, July 05, 2019 Teklinks

In this article, we will focus specifically on things you need to know about JavaScript, to get up and going as a JS developer. JavaScript is dynamic typed. This means that variables can hold values of any type, without any type enforcement. The following build-in types are available:

Full article

Bringing new CSS techniques to production

Friday, July 05, 2019 Teklinks

We—people making websites—have been designing and building responsive websites for the best part of ten years. Responsive websites are designed to be accessible at any display size we can reasonably anticipate being used to browse the web.

Full article

July 4, 2019

The Future of Websites: Headless CMSs

Thursday, July 04, 2019 Teklinks

Since their introduction, content management systems **(CMS**) have made life easier for website developers, site owners, and administrators alike. Platforms like WordPress, Joomla, and Drupal account for more than 60% of all web content platforms.

Full article

The cost of JavaScript in 2019 · V8

Thursday, July 04, 2019 Teklinks

One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant costs of processing scripts are now download and CPU execution time.

Full article

The 10 Component Commandments

Thursday, July 04, 2019 Teklinks

Written in collaboration with Caroline Odden. Based on the talk with the same name and people, held at the ReactJS Oslo Meetup in June 2019. Creating components that are used by a lot of people is hard.

Full article

July 1, 2019

The Designer’s Growth Model

Monday, July 01, 2019 Teklinks

Borrowing from the Invision report The New Design Frontier and the Greiner growth model (good designers copy, great designers steal), I concocted a model for the evolution of the designer. Just like the famous Greiner growth model, my model has different phases.

Full article

Placing, Spanning and Density in CSS Grid

Monday, July 01, 2019 Teklinks

The most common things you learn in CSS Grid is usually related to the grid container and less about the grid items. A generic grid definition applied to the grid container is enough for a basic layout structure.

Full article

Creating a Design System: Our Approach and Experiences

Monday, July 01, 2019 Teklinks

Creating a design system is one of the services we offer at Netguru. So far, we’ve created design systems for either enterprise-size or smaller companies. Our approach and process are based on our experiences and the issues we’ve encountered so far.

Full article

Building a Conference Schedule with CSS Grid

Monday, July 01, 2019 Teklinks

Twitter Facebook Sessions of variable length (limited to set time increments) Imagine back-to-back one-hour talks in three rooms alongside a two-hour workshop in another. Sessions spanning one or more "Tracks" Tracks are usually associated with a specific room in the venue.

Full article