Forem: Maciek Chmura

Check events fired while interacting with a DOM element

Maciek Chmura — Tue, 14 Jul 2020 11:08:35 +0000

There is an easy way of monitoring all events fired while interacting with a DOM element.

Open dev tools and select element.

While the element is selected, switch to console and type: monitorEvents($0)

Interact with the element: hover, click, etc.
The console should print all the events fired.

Sequelize decimal type error

Maciek Chmura — Wed, 26 Feb 2020 21:29:43 +0000

Sequelize is probably the most popular ORM for Express. It helped me to quickly start with a NodeJS server and a Postgres database in my current side project.
Unfortunately I encountered a strange issue when I wanted to introduce decimal numbers to one of my models.

Sequelize in version 5.21.3 has an error with decimal type.

My model looked like this:

module.exports = (sequelize, DataTypes) => {
  const incomeExpense = sequelize.define(
    'incomeExpense',
    {
      id: {
        type: DataTypes.INTEGER,
        primaryKey: true,
        autoIncrement: true
      },
      value: DataTypes.DECIMAL(10, 2),
      description: DataTypes.STRING,
      date: DataTypes.DATEONLY,
      type: DataTypes.STRING
    },
    { freezeTableName: true }
  );
  incomeExpense.associate = function(db) {
    incomeExpense.belongsTo(db.stage);
  };
  return incomeExpense;
};

Data in Postgres:

id	value	description	date	type	stageId
6	120.00	invoice 1	2019-11-11	income	3
7	120.33	invoice 2	2019-11-11	income	3

JSON response:

[
    {
        "id": 6,
        "value": "120.00",
        "description": "invoice 1",
        "date": "2019-11-11",
        "type": "income",
        "createdAt": "2019-11-10T23:00:00.000Z",
        "updatedAt": "2019-11-10T23:00:00.000Z",
        "stageId": 3
    },
    {
        "id": 7,
        "value": "120.33",
        "description": "invoice 2",
        "date": "2019-11-11",
        "type": "income",
        "createdAt": "2020-02-06T16:41:36.868Z",
        "updatedAt": "2020-02-06T16:41:36.868Z",
        "stageId": 3
    }
]

The returned value is a string type.

I thought that the conversion from a number to a string heppens somewhere in Node or React. As it turns out, it is the model itself.

Model after changing the value to DataTypes.FLOAT:

module.exports = (sequelize, DataTypes) => {
  const incomeExpense = sequelize.define(
    'incomeExpense',
    {
      id: {
        type: DataTypes.INTEGER,
        primaryKey: true,
        autoIncrement: true
      },
      // value: DataTypes.DECIMAL(10, 2),
      value: DataTypes.FLOAT,
      description: DataTypes.STRING,
      date: DataTypes.DATEONLY,
      type: DataTypes.STRING
    },
    { freezeTableName: true }
  );
  incomeExpense.associate = function(db) {
    // associations can be defined here
    incomeExpense.belongsTo(db.stage);
  };
  return incomeExpense;
};

Postgres dropped the trailing zeros:

id	value	description	date	type	stageId
6	120	invoice 1	2019-11-11	income	3
7	120.33	invoice 2	2019-11-11	income	3

And now the value in response is a number:

[
    {
        "id": 6,
        "value": 120,
        "description": "invoice 1",
        "date": "2019-11-11",
        "type": "income",
        "createdAt": "2019-11-10T23:00:00.000Z",
        "updatedAt": "2019-11-10T23:00:00.000Z",
        "stageId": 3
    },
    {
        "id": 7,
        "value": 120.33,
        "description": "invoice 2",
        "date": "2019-11-11",
        "type": "income",
        "createdAt": "2020-02-06T16:41:36.868Z",
        "updatedAt": "2020-02-06T16:41:36.868Z",
        "stageId": 3
    }
]

This issue is opened, and there is an ongoing discussion:
link

For now, I can't think of a better fix than Changing a DECIMAL to a FLOAT.

How to learn JavaScript

Maciek Chmura — Mon, 23 Sep 2019 11:25:23 +0000

This is the second post of a series about my path of learning JavaScript.
The last post described my opinion about what not to do while learning JS.

How to learn it then?

I think learning JavaScript has nothing to do with JavaScript.

...

Let me explain.

Just like my Unnamed Friend advised, I needed to learn how to program.
In general.

What are variables, functions, objects, arrays, strings, ints?
How do computers even work?
What happens when you type an address to a browser?
What is a server?
What is a database?
Why functions return something?
What is an algorithm?
What is a browser API?
What is AJAX?

A lot of unknowns and no clear starting point, when you just want to make a Todo app in React... 🤦‍♂️

Luckily there is a starting point. And it is an awesome one.

Part 1: Fundamentals

CS50

An introduction to the intellectual enterprises of computer science and the art of programming.

Taught by David J. Malan @davidjmalan and his team.

I love this course. I would like to do it again and discover everything one more time 😅

For each week you will have a lecture by David
(while watching it, your 💡⚡ 'AHAAAAA' light bulb will shine every few minutes).
Followed up by shorter lecture with coding examples.
You finish each week with a coding project and run it through an automatic test.

You will be exposed to very interesting problems with many technologies.

Here are the topics that were covered in the scope of this course during my take on it.

Week 1: Introduction to programming in C language. Create 2 CLI programs in C.
Week 2: Big O, Sorting Algorithms, Binary Search, Recursion. Create 2 cyphering CLI programs with C.
Week 3: Call Stack, Pointers, Dynamic Memory Allocation. Create a program to manipulate images in C
Week 4: Structures, Custom Types, Singly-Linked Lists, Hash Tables, Tries, Stack, Queues. Create a spell checker in C.
Week 5: IP, TCP, HTTP, HTML, CSS
Week 6: Dynamic Programming, Introduction to Python.
Week 7: Servers, Python and Flask. Create 2 CLI programs in Python.
Week 8: Flask, MVC, SQL. Implement a stock-trading website.
Week 9: JavaScript, DOM, Ajax. Implement a news map app.
Week 10 and 11: Final Project

After completing it you will have a pretty good understanding of what is needed to build an app.

Suddenly you will not ask: "UGHHHH, why it is coded like that??!!"
And will say: "💡Ahhhh, it is coded like that because..."

Part 2: Building

Now you are ready to dig into JavaScript.
And the best way to learn is by building.
Some ideas about what to build:

tic-tac-toe game with vanilla JS
tic-tac-toe with React now you know what problems React solve!
Node backend with a database on Heroku
React app with data from Firebase

Depending on how much time you have for learning, this can take from 6 months to a year.

Now you have a solid understanding of what programming is about.
You have a handful of completed projects on GitHub.

Part 3: Expand your knowledge

You can dig deeper into JavaScript.
You can follow this awesome roadmap made by @kamranahmedse.
Build more complex apps.

Go and learn what interest you.
That's it 😀.

Have fun!

How NOT to learn JavaScript

Maciek Chmura — Tue, 17 Sep 2019 11:16:33 +0000

A few years ago when I was starting my journey as a programmer I asked my friend(an unnamed hero, who is an awesome programmer) a question:

How can I learn JavaScript?

He answered:

You don't want to learn JavaScript, you want to learn how to program.

I didn't understand it then. I wanted to learn JS. I wanted to learn React, and Node, and WebGL.

And then I made lots of mistakes trying to. I've hit a roadblock after a roadblock when I was struggling to understand some basic concepts.

I remember a specific point in time when my Unnamed Friend was trying to teach me about data structures. When we got into hash maps I was so frustrated that I saved the file with the exercise as "some stupid 💩.js"
Why would somebody even need this!!??

I was in the pit of despair...

I got here by following some advice found on the internet that was not suited for me.
I wouldn't say it was wasted time because all experience is valuable. But I've could use this time more efficiently.

Here is my opinion what NOT to do:

Don't do Advent Of Code. Instead of learning some good practices you will try to finish the task at all cost. This can produce really ugly code with lots of if statements.
Don't read Eloquent JavaScript Don't get me wrong, this is a good book, IMHO not good for beginners without a CS degree. It tries to teach you JS by solving complex problems with lots of abstractions.
Don't read You Don't Know JS. Again, great books but too complex for start. Get back here in a year or soo.
Don't learn frameworks. React, Vue, Angular. You need to know what problems these frameworks solve in the first place.
Don't jump from tutorial to tutorial without practicing what you learn. You can easily fall into watching an endless stream of YouTube videos. Probably you will not remember most of it the next day.

In the next post, I will present a way that helped me get out of the pit.

Do you know about Teal? +React game

Maciek Chmura — Mon, 22 Jul 2019 20:17:18 +0000

TL;DR: just show me the game.

Some time ago, while listening to a podcast, I stumbled upon a neat idea.

Teal Organisations

Guests were talking about the structural and workforce changes happening in the tech industry.
I'm generally interested in startups and tech industry so I was intrigued about this new way how to structure a tech organization.

The idea of "Teal Organisation" was created by Frederic Laloux and described in his book: "Reinventing Organizations"

The Teal paradigm refers to the next stage in the evolution of human consciousness. When applied to organizations, this paradigm views the organization as an independent force with its own purpose, and not merely as a vehicle for achieving management's objectives. Teal organizations are characterized by self-organization and self-management. The hierarchical "predict and control" pyramid of Orange is replaced with a decentralized structure consisting of small teams that take responsibility for their own governance and for how they interact with other parts of the organization.
wiki

There is also a book by Polish author, Andrzej Blikle titled "Doktryna Jakosci" The book is available for free in PDF format, unfortunately, there is no English translation yet.

Teal answers a question:

How a group of people, happily united with the same goal, can cooperate to produce value.

Some companies have a gut feeling about how to do this.

You can see Teal values in companies that were started long before Frederic Laloux published his book.

Basecamp -> check any book or blog post from Jason Fried and David Heinemeier Hansson and discover what they think about creating a tech company. (I might be biased because I am a huge fan) https://basecamp.com/books
Buffer -> https://buffer.com/about
Valve -> ever heard about Half-Life, Counter-Strike or Steam Platform? Check the Handbook for New Employees, its hilarious, https://www.valvesoftware.com/en/publications

Teal ideas are not some kind of revolution. You can observe them popping up everywhere.

Some of these ideas are about being happy at work:

Some of these ideas are about focusing on quality instead of growth.
https://www.amazon.com/Company-One-Staying-Small-Business/dp/1328972356

Some of these ideas are about trust:

I allowed myself to loosely translate 2 insightful fragments from the book from Andrzej Blikle.

Hopefully, this will make you dig deeper into Teal.

How to decide what to work on?

You can pick a task based on these rules:

you do what you can do,
you do what is necessary,
you are responsible for it,
what you do, you can change, but with preservation of 1, 2 and 3.

Teal principles:

Do not look for the guilty one to punish - look for the cause to remove it,
Do not expect perfection that cannot be achieved - expect progress that is always possible,
Avoid competition that destroys partnership - create conditions for cooperation,
Do not judge, because it destroys - appreciate, because it strengthens,
Do not say what is wrong - say what could be better,
Do not ask people what they could do better - ask them what hinders their work,
Do not build on control - build on trust,
Do not say that someone is bad - say how you feel about it (the so-called "communication I"),
Do not manage - create conditions for self-organization,
Don't be a supervisor - be a teacher, moderator, and student.

As you can see all of these rules are very reasonable and natural.
To illustrate how easy it is to follow them, I made a simple game 😅

Dear Creator,
Now You know about Teal.
You have a great tool to help you organize a team.
What will you build now?

How I structure a React project

Maciek Chmura — Tue, 28 May 2019 10:51:01 +0000

There are many guides on how to structure web apps and React in particular.

Move files into folders based on Smart/Dumb components.
Organise them by the Header/Main/Footer
Or throw everything to Components and combine them in Pages???

I’ve never been fully convinced to use any of these conventions.
And then, about 2 months ago I started a new project. Simple tech stack: React + Express + MySQL.
After a few commits, I had to move the components somewhere.
After a little bit of research, I found something promising.
It's based on 2 resources:

Dan gave me freedom and Brad gave me structure 😅

Atomic Design introduces a new, abstract way to think about project structure. Components are building blocks of an app.
Atoms, molecules, organisms, templates, and pages. This concept brings a breath of fresh air to how we can think about structure.
For my purpose, I used the first 3, but I encourage you to read Brad's guide and adapt it to your liking.

I started with a sketch:

Main idea:
3 folders: Atoms, Molecules, Organisms
If the component has logic/state -> move it to Organisms.
If the component has other components -> move it to Molecules.
Otherwise, the component is an Atom.

I like the organic analogy. It creates a mental and logical box for React components. If needed, I can add more non-organic folders for Utils, Routes, API, etc.
A Button will be in Atoms.
A Card will be in Molecules.
Component with Hooks will be in Organisms.

src/
  Atoms/
    Button
    ProjectName
    ...
  Molecules/
    ControlBar
    DaysList
    ...
  Organisms/
    User
    CreateUser
    ...
  Utils
    formatMonthData.js

For now, this works with no flaws with my project. I will reevaluate this concept when my project grows.

3 topics in 1 JavaScript interview question

Maciek Chmura — Tue, 12 Mar 2019 12:06:41 +0000

Programming interviews are hard. Live coding during the interview is even harder.
I have a feeling that as soon as I have to type code in front of another person myIntelligence -= 10;
At my current company, lead developers regularly conduct interviews with potential new candidates. There are prepared some sets of questions for JavaScript developers, but there is this one questions that almost always gets asked:

    // what will be logged in the console
    // and how to fix it to log 0, 1, 2??
    for (var i = 0; i < 3; i++) {
      setTimeout(function() {
        console.log(i);
      }, 1000);
    }

It's a pretty typical question.
What is so special about it?
Well, in my opinion, these 5 lines touch 3 interesting aspects of JavaScript.

var, let and const
closures
event loop

Let's break it down to see what is happening here.

var let const

ES6 introduced new variable assignment keywords: const and let. You probably already know that they are block scoped and var is function scoped.
Some simple cases to illustrate this behavior.

    // simplest JavaScript example in the world:
    {
      var name = 'maciek';
      let surname = 'chmura';
    }
    console.log(name); // -> maciek
    console.log(surname); // -> surname is not defined

    // what's happening under the hood:
    var name;
    {
      let surname;
      name = 'maciek';
      surname = 'chmura';
    }
    console.log(name);
    console.log(surname);

OK, let’s put this in context of a for loop.

    for (var i = 0; i < 3; i++) {
      console.log(i); // -> 0 1 2
    }

    // what will happen when var is changed to let?
    for (let j = 0; j < 3; j++) {
      console.log(j); // -> 0 1 2
    }

Both loops generate right output. But in some slightly different way. var 'jumps' to global scope and let 'jumps' into the loop, and gets initialized on each iteration.
It can be illustrated like this:

    // var lives here
    for (var i = 0; i < 3; i++) {
      console.log(i); // -> 0 1 2
    }
    console.log(i); // -> 3

    for (let j = 0; j < 3; j++) {
      // let is available only from here
      console.log(j); // -> 0 1 2
    }
    console.log(j); // ReferenceError: j is not defined

OK, easy peasy... This is how block scoping works... moving on.

Closures

The mystical land of JavaScript Closure.
What is the raw definition of a closure?
Lets check MDN

A closure is the combination of a function and the lexical environment within which that function was declared.

Please take a deeper look at this article from MDN. Very smart people contribute to this knowledge base, let's trust them :)

What exactly is this lexical environment?
Does it go away at some point?
Who and when decides about it?
How can I control it?

For a long time, I could not wrap my head around it.
It was until I added 2 visual aids to help me understand it.

🎒 A Backpack. I like to think of closures as backpacks of functions. When a function is defined it adds to its backpack all the values it might need in the future.
🚚 A Garbage Collector. A truck that removes old code. Unlike in C language, you don't have to do malloc() and free(), it will be handled automatically.

When some function has executed and returned a value, we can safely remove this function definition from memory 🚚🗑. The same thing goes for values that are not reachable anymore.
Things get interesting when a function returns a function.
I don't want to reinvent new examples and definitions, so I will just add some layer of visual helpers.
MDN example (with line numbers):

    function makeFunc() {          // 1
      var name = 'Mozilla';        // 2
      function displayName() {     // 3
        alert(name);               // 4
      }                            // 5
      return displayName;          // 6
    }                              // 7
                                   // 8
    var myFunc = makeFunc();       // 9
    myFunc();                      // 10

Let's imagine a simplified JavaScript interpreter workflow. What JavaScript runtime is ’thinking’ while running code.

(line 1)makeFunc function definition, moving on.
(9)Declare myFunc variable and assign to it the result of running makeFunc, execute makeFunc
(1)Jumping into makeFunc definition.
(2)Ok, a variable name with value Mozilla.
(3)displayName function definition, moving on.
(4)return displayName function definition

First plot twist. Whole function definition is returned here. There are no () at the end of displayName.
Second plot twist. A closure is observed. Where? displayName puts into its 🎒 var name (it is within lexical scope of displayName)

makeFunc executed and returned the whole function definition of displayName with its closure (a 🎒) holding a reference to a value in name.
The garbage collector can't delete lines 1 to 7 from memory because sometime in the future myFunc might get executed, and then displayName with its closure will be needed.

(10) execute myFunc

This is how I understand closures.
Now I can see it!

Let's move to the last part of the puzzle.

Event Loop

There is no better way to learn about event loop than from amazing Philip Roberts talk at JSConf EU.
Just watch it...

🤯 mind blowing right?
OK! Finally, with all the knowledge, let's break down what is happening in the interview question.

    for (var i = 0; i < 3; i++) {
      setTimeout(function() {
        console.log(i);
      }, 1000);
    }

With each iteration of the loop, setTimeout sends function with console.log(i) to the web APIs and start the countdown.
In the meantime, we will continue with the loop. Another console.log(i) will be pushed to web APIs and so on...
Loop finished execution. Call Stack is empty.
In the web APIs, after 1 second console.log(i) gets pushed to the Callback Queue. And another one, and another one.
Because the Call Stack is empty, Callback Queue can push its first element to the Call Stack to execute it.
So the first console.log(i) executes.
It looks for an i.
What is the value of i?
It's 3. From the global scope.
Why?
Loop finished its iteration and updated the i to 3 at the end.
var i is function scoped (for loop is not a function), and was hoisted outside of the loop to the global scope.
Call Stack is empty again.
Second console.log(i) moves to the Call Stack.
What is the value of i? It's 3 again. It's the same value.

How to fix it to log 0, 1, 2?
One way of fixing it is by changing var to let.
Now while looping, each i is initialized and assigned a value of current iteration and put into closure (a 🎒) of function that will log it.
After 1 second, when the Call Stack is empty, Callback Queue will push function with console.log(i) and it's closed over value of i back to Call Stack and execute it.
0, 1, 2 will get logged respectively.
Done.

Next question please.

Now, when you know what is happening exactly, what else can be done to fix it?

Disclaimer:
I wrote this mainly for myself to study these topics. If anything here is wrong, please point it out in the comments so we all can learn :)

4 fast ways to run JavaScript

Maciek Chmura — Thu, 14 Feb 2019 21:31:34 +0000

I like to learn new things.
When I experiment, I need a fast way to run a code snippet, do some debugging and figure out what is working and what is not.
Depending on the situation and mood 🌅 I switch between these setups:

VSCode

Most of the time I will write the code in my code_notes repository.
I have the simplest VSCode configuration possible:



{
  "type": "node",
  "request": "launch",
  "name": "single file",
  "program": "${file}"
}

With this config, VSCode will run currently opened file in the debugger.

Just hit F5 and look for the output in DEBUG CONSOLE.
Of course, you will have all the debugging goodies - read more here

VSCode + Quokka.js

To have 'live reload' for code evaluation check out Quokka.js

Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.

I use it when I am just starting out with an idea.
It really helps to understand what effect has each line of the code.

Chrome Snippets

Sometimes the quickest way to run JavaScript is in Chrome directly.

Just open Developer Tools, switch to Sources tab and create a new code snippet. Snippets might be hidden under the >> icon.
Remember to wrap the code in {} to have a new local scope on each run.

Python Tutor

Don't be fooled by the name! It can run JavaScript also. And it even has a live mode too.
The cool thing about this tool is that it visualizes what is happening at each step.
It's great for educational purposes.
link

Hardware idea

Maciek Chmura — Tue, 05 Feb 2019 16:51:41 +0000

Hardware is probably too big word for what I have in mind. A gadget? Helper?

Problem

I am learning to touch type. Right now I can pretty much type all words without looking on the keyboard.
Problem starts when I have to write code. Beside typing names for variables, functions and methods I have to type language specyfic syntax:
: ; " ' { [ ] } - + = ( ) ...at least in JavaScript world.
When I order my 'pinky' finger to press minus keycap, the process to show the minus sign on screen is something like this:
[] backspace 0 backspace - . Sometimes it takes me more steps to finally have what I want. Or even worse, eventually I have to look at the keyboard...

Solution

On J and F keycaps on the standard keyboard there is this raised dot or bar. This is an indicator for index fingers to find home row without looking.
Cool idea that is very helpful.
What if there were similar indicators for 'pinky' fingers?😄 On those hard to aim and reach keycaps.

When reaching to that keycap you can instantly know if you are about to press correct key.
There could be indicators only on 0 and 1. Or there could be some additional on [ or even \.
Of course, there is no limitation to shape. Only one condition: shapes need to be easily distinguishable.

How to modify a keyboard like that?
STICKERS!!!
Black vinyl stickers. Transparent stickers. Anything that will have this 'bump'.

What do you think?
Is this idea valid?
Would it help you?

I think it would help me. 😅

Bash magic spell to replace files

Maciek Chmura — Fri, 04 Jan 2019 07:22:47 +0000

Most recently, at my work project, I assigned myself to a task to replace a png file across the project with new graphics.
Same file name, different pixels.

A quick search for the file in VSCode showed around 35 results across different folders.

But why there are 35 copies of the same png in the project?

Good question for which I have no answer 🤔

What a can be done here to complete the task?

Manually track all the files in file explorer and replace them. This can take around 15 to 25 minutes depending if you double check copies and how fast you click... boooooring!
Or find a bash command to do the work for you.

Challenge accepted!
What should be done?

have a reference to file with new data
find the file by name
replace found file with new data
repeat until all files in the folder are changed

After some googling, reading stack overflow and MAN pages, I stitched this line to replace a file with new data:

find . -print -type f -name apple.PNG -execdir cp /mnt/c/Users/Maciej_Chmura/replace_source/orange.PNG {} \;

Let's break it down to know exactly what is happening:

find 👉 bash find command
. 👉 current execution context, current folder
-print 👉 log the process
-type f 👉 specify to look for files
-name file_name 👉 specify file name to search
-execdir 👉 execute command from the subdirectory
cp from_file to_file 👉 copy from one file to another
{} 👉 is a placeholder for file that `find` will find

Don't stop here, learn more about these commands:

find
cp

With this little line, all files in the current folder and subfolders will be replaced.

After this research, I thought of another use case.
What if you need to rename the file?
The command is almost the same:

find . -print -type f -name apple.PNG -execdir mv {} orange.PNG \;

Hopefully, this will save you some time in the future when encountered in a similar case.

Do you know any magic bash spells?

How I stay productive in a big project

Maciek Chmura — Tue, 18 Dec 2018 21:10:30 +0000

...and not get lost on the way.

Problem

For almost a year I've been a part of a big and mature JavaScript project. No frameworks. Just Node, JS and MVC. Often times when I am fixing a bug I have to jump into multiple files and classes for investigation. My open files tab gets full really quickly. My main problem is jumping between different solutions for a particular fix.

I want to perform some change in code, test it and leave it for later to go find a different approach. I repeat these steps a few times. Then, when I have a fix that is the best fit, in my opinion, I can make a PR for code review or discuss it with my team.

So ideally I would like to quickly switch between possible fixes.
For this, I have two approaches.

Save a diff file

git diff > fix1.diff

Git will generate a patch file with all the changes made to the repository. I can send this file to someone, open it in its own window to compare with the current state, etc.
Very easy for quick verification.

To apply this file:

git apply fix1.diff

This is the simplest workflow for progressively save your work between commits.
I have just a file with all of the changes.
This is nice and simple, but there are better solutions.

Git Stash

Stashing is saving work for later.
There are many great tutorials and documentation on this topic.
atlassian
git-scm

I found this 2 commands helpful in my case:

git stash save <message>
git stash apply

git stash save will save the changes and clean my working directory, soo to continue working I must apply them back. (git stash pop will also apply changes but they will be deleted from stash).

Now I have a saved point in working "timeline" that I can easily evaluate or revert back to.
This can also be done inside VScode(if you use it) with Gitlens plugin(Webstorm also has this functionality)

** Update
As highlighted by

Heber QuequejanaFollow

I'm from Perú 🇵🇪, I work as web developer 👨🏽‍💻. I like learning about computing topics.

git stash save is deprecated. Please use git stash push

Micro-tip: personalized comments

I put a comment in this manner:

// @mch <what I think is happening here>

mch > my initials

Within editor, I've set up a rule to highlight @mch string.
For VScode there is nice plugin: TODO

I've customized it with:

"todohighlight.keywords": [
    {
      "text": "TODO",
      "color": "#000000",
      "backgroundColor": "gold",
      "borderRadius": "2px",
    },
    {
      "text": "@mch",
      "color": "#66ffdd",
      "backgroundColor": "#116644",
      "borderRadius": "2px",
    },
  ],

This is helpful to quickly lookup all the places that cought my eye.
Ctrl + Shift + F for them with @mch or use TODO plugin lookup.

These 3 tips help me with day to day work.
What are your hacks for productive work??

Disclaimer:
This post is my first blog'ish publication like ever ever :D
Thank you DEV team for making it possible for me to share :D