Do not use destructuring on import

Johan Melin — Fri, 31 Dec 2021 13:50:02 +0000

When importing it is common to use destructuring, but it seems to have its drawbacks. By not using destructuring I got a bundled JavaScript file down from 76kb to 7kb.

I made a simple web app that prints hello world in camelcase to the console.

const lodash = require('lodash') console.log(lodash.camelCase('hello world'))

After bundling it with webpack the bundled js file was 76kb. Checking out the file with webpack-bundle-analyzer it seems to have loaded the whole of lodash. Maybe it would be smaller with destructoring.

const {camelCase} = require('lodash') console.log(camelCase('hello world'))

Now the file is 70kb. Not a huge saving. I tried another syntax.

const camelCase = require('lodash/camelCase') console.log(camelCase('hello world'))

Now the bundled file was only 7kb, a huge saving. I got the same results whether using nodejs require or ES6 import syntax. Try it out in your own projects and see if you have similar results.

Learning to code

Johan Melin — Fri, 30 Jul 2021 09:11:37 +0000

There are lots of free resources available to start learning coding online.
Here are some to get you started.

W3Schools
FreeCodeCamp
JavaTpoint
GeeksforGeeks
DEV Community
LeetCode
HackerRank
LinkedIn
StackOverflow
Udemy

Learning to code:

1. W3Schools

Reference website to learn about web technologies online. Learn about HTML, CSS, JavaScript, Python, SQL and much more. It also has a built in editor so you can play around with code without leaving the site.

2. FreeCodeCamp

An interactive web development learning platform. Learn about HTML5, CSS, JavaScript, Python, Algorithms, Data Structures, Node, jQuery, React, Python and much more. Also gives you a certification after completing a course.

Taking it further:

3. JavaTpoint

Read up on subjects like digital marketing, functional programming, AI, testing and much more.

4. GeeksforGeeks

Well explained articles related to computer science and programming.

5. DEV Community

This site. =)

Test your knowledge:

6. LeetCode

Try programming puzzles and get scored on runtime and memory usage.

7. HackerRank

Programming puzzles with certifications for topics like CSS, JavaScript, Problem Solving and much more.

8. Linkedin

LinkedIn is not only for looking for a new job, but also has a section where you can test your skills in several categories like Front End Development.

Need help:

9. StackOverflow

Question and answer website for programmers. When you get stuck, this is the next step after Googling.

Extra:

10. Udemy

The only paid alternative in the list, Udemy is a course provider with videos on most topics. Some courses can be expensive, but most of them are available for a recurring discount of around €12.

Hopefully some of these will be of use to you.