DEV Community: Jakub Smetanka

Weekly dev insights (week 37)

Jakub Smetanka — Sun, 18 Sep 2022 10:41:42 +0000

TL;DR

1. Where to find remote work

Useful list of platforms where you can find remote work

Finding remote work in 2022

Kristian Ivanov ・ Sep 11 ・ 5 min read

#remote #interview #career #jobs

2.Angular project structure

How to structure Angular project, what is part of core, shared, and features module? Of course, if you are still using NgModules you can read here

Angular File Structure and Best Practices (that help to scale) | by Shijin Nath | Medium

Shijin Nath ・ Apr 26, 2020 ・
Medium

3. RxJS patterns in Angular

Check RxJS patterns by Deborah Kurata from ng-conf2020 on pluralsight for free

What are your insights from last week? Feel free to share.

If you like this short article, feel free to comment, or share it. If you dont like, do it as well and tell me your remarks ;)

Don't miss any new blog by following me here.
Follow me on Twitter

Visit my website smetankajakub.com

Where to find ui/ux designer? (discussion)

Jakub Smetanka — Thu, 08 Sep 2022 11:16:49 +0000

Hi,

I am looking for a ui/ux designer, to design web platform intended for managing sport events.

What is the best platform to find them? How do you decide whom to contact?

Thanks

3 resources, I found the most useful (week 33)

Jakub Smetanka — Mon, 29 Aug 2022 07:45:00 +0000

TL;DR

git push config
npm/yarn patch package
Angular Standalone components

1. git push config

Are you frustrated about setting upstream branch while pushing commits? Don't have to, since git 2.37 release its not a problem anymore.

⚙ This new GIT push config will save you lot of frustration!

Leonardo Montini for This is Learning ・ Aug 2 ・ 2 min read

#git #beginners #github #tutorial

2.Resolve a bug w/ patch

Here is the situation, you have found a bug in package dependency and upgrading the package would impact versions of other packages, trust me you don't want to upgrade each package. The easy solution is a patch package.

The easiest way to patch your npm package when there is a 🐛

Zhitomir Oreshenski ・ Dec 5 '20 ・ 2 min read

#npm #productivity #javascript #webdev

3. Angular Standalone Components

As you already probably know, since Angular v14 new feature called Standalone components is available, quick tutorial for those who want to try it.

If you like this short article, feel free to comment, or share it. If you dont like, do it as well and tell me your remarks ;)

Don't miss any new blog by following me here.
Follow me on Twitter

Visit my website smetankajakub.com

Share your personal website

Jakub Smetanka — Wed, 06 Jul 2022 19:56:11 +0000

Finally, it's here. I am online now smetankajakub.com. What do you think?

Do you have your own website, feel free to share it. :)

How to integrate Husky, ESLint, Prettier to project in less than 15 minutes (step-by-step guide)

Jakub Smetanka — Sat, 04 Dec 2021 11:58:00 +0000

Usage of code formatter increases the readability of code and helps to keep the same style in the whole project. In this article, we will go through one of the most popular linter ESLint, which is intended for Javascript and Typescript. Next, we will set code formatter for HTML and other files called Prettier. When we add to them Husky hooks after that, we will be able to ensure the same code style for each member of the team, or contributor to our project.

NB: You can skip 1. section if you have already installed Prettier and ESLint extensions in VS Code.

1. Add extensions to VSCode (Optional)

In first step add extension to your VSCode (Ctrl + Shift + X)

2. Install Prettier and pretty-quick

Install packages using npm:

npm install --save-dev prettier pretty-quick

2.1 configuration of Prettier - Code formatter

Create 2 files in a directory where you have package.json

.prettierignore.json

package.json
package-lock.json
yarn.lock
dist
node_modules

.prettierrc

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}

The Directory should look as follow:

If you were asking why is needed pretty-quick, now it's time to use it. With pretty-quick you can run formatter on all files (or only staged etc.) using one command.

npx pretty-quick

We will integrate this tool later together with husky hooks.

NB: If you are using Windows Powershell and have problem run npx command, you have to change execution policy

set-executionpolicy remotesigned

3. Install ESLint

For local install of package use:

npm install eslint

For global install

npm install -g eslint

For generating configuration file for ESLint .eslintrc.json you can choose from two options:

3.1. Use VSCode command pallete

Open command pallete in VSCode (Ctrl + Shift + P).
and run ESLint: Create ESLInt configuration. It will directly open a terminal and start a process of configuration.

3.2. Use npm

If you have installed ESLint package globally to generate file use

npm eslint --init

If you have installed your ESLint package locally then you should use slightly different command for (Windows):

 .\node_modules\.bin\eslint --init

and for Linux and Mac:

./node_modules/.bin/eslint --init

Both approaches come to the same configuration process where you have to answer some questions about linter settings.

After answering all questions, the configuration file is generated and all required packages are installed.

Example of .eslintrc.json if you have the same answers as on previous picture should look similar as follow:

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

5. Husky

Git has a way how to trigger custom scripts when some action occurs i.e commit or push. You can use it to lint your commit messages, run tests, lint code, etc. when you commit or push. Husky supports all Git hooks.

npm install --save-dev husky

5.1 Add husky hooks to package.json

"husky": {
    "hooks": {
      "pre-commit": "npx pretty-quick --staged ng lint ng test",
      "pre-push": "ng build --aot true"
    }

5.2 Add prepare script to package.json

"prepare": "cd .. && husky install client/.husky"

NB: You have to install husky from root directory where git repository is initialized, that's why I have to change directory before.

5.3 run prepare script

npm run prepare

5.4 create hook for pre-commit

npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"

It will be launched each time after we fire git commit.

5.5 Result

If you like this article, feel free to comment, or share it.

If you want to support me with coffee you can do it here:
I would be grateful ;)

Follow me on Twitter

Visit website smetankajakub.com

Resources

https://typicode.github.io/husky/#/
https://docs.microsoft.com/sk-sk/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1
https://prettier.io/
https://eslint.org/

VS Code extensions NOT only for Frontend developers

Jakub Smetanka — Thu, 04 Nov 2021 21:14:00 +0000

Prettier - Code formatter

It is code formatter with support of many languages. It can automatically format the code right after save which save your time and increase productivity.

Better comments

This extension is used for more friendly comments, you are able to customize tags by your own. Very easy configurations with support to plenty of programming languages.

Angular Snippets

Snippets for Angular, Typescript, HTML.

Intelisense path

Extension to autocomplete filenames.

IntelliSense for CSS class names in HTML

This extension take care of completion of CSS class in HTML.

Eslint

Javascript Linter extension.

GitLens

This extension provide to you useful information from git on hovering of each line. Easy to explore repository, with possibility to be fast redirected to requested file in your Source Control Client (GitHub, BitBucket, ...).

ThunderClient

Is lightweight Rest API Client. It is alternative to Postman not that heavy but still useful.

Live Server

Helps to launch local development server with live reloading of static and dynamic pages as well.

Follow me on Twitter

The most repeated questions I met with on job interviews (part 1)

Jakub Smetanka — Sun, 19 Sep 2021 15:17:00 +0000

A wiseman once said : "If you can not explain it, you do not understand it". A few years ago, when I had searched for a job as a student I went through a lot of interviews. For web positions related to Javascript, there were some questions which repeat regularly. And it makes sense, to asked them also today.

const vs let vs var

const keyword create block scope variable and prevents its value to be reassigned by a new value. However, important thing is that it does not restrict to change the internal state of the object.

let is block-scope variable while var is function-scope variable.

'===' vs '==' comparison

=== is strict comparison, it checks value and type of value as well, so 1 === "1" returns false, the opposite of that is == comaparison which checks only value so 1 == "1" returns true.

Can we compare two objects with '===' ?

NO. Object is reference type. Two distinct object never be equal even they have same property. That's why you will get false when you are using '===' comparison. In Javascript also exist built-in function Object.is(value1, value2) EDIT: ~~which returns true if objects are equals, otherwise it returns false.~~

Visit website smetankajakub.com

Follow me on Twitter

Resources

Eloquent Javascript
https://unsplash.com/photos/TFFn3BYLc5s?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

5 steps to resolve merge conflicts in Bitbucket repository with git bash

Jakub Smetanka — Tue, 31 Aug 2021 18:55:00 +0000

Before merging your branch to the main branch (develop, master, whatever), it occurs that your branch is many commits behind the destination branch and somebody pushed changes which have conflicts with yours. Before pushing your changed files you have to sync your branch with the destination branch and in case, that there are files with conflicts you have to resolve them. If you are a fan of git bash or command line, there are 5 steps how to manage merge.

1.Checkout the temporary branch with your changes.

This branch is created, when there are detected conflicts with your origin branch which are not possible to resolve with auto-merging .



git checkout <temporary-branch>

2.Merge destination branch to your detached branch.



git merge remotes/origin/<destination-branch>

This command will merge all files which can merge. In others, there are marked lines of code, which have to be merged manually

3.Resolve conflicts

Compare yours and incoming changes and resolve them. If you have finished, you can mark the resolved file with git add.



git add 'path/resolved-file'

4.Commit resolved files



git commit

If you commit your resolved files you are in the detached branch so you have to push it to your branch.

5.Push detached branch to your branch



git push origin HEAD:<name-of-your-branch>

If it is successful, your branch is in sync with destination branch. You can continue with creating pull request or merging your branch to destination branch.

If you want to support me with coffee you can do it here:
I would be grateful ;)

Visit website smetankajakub.com

Follow me on Twitter

Photo by Yancy Min on Unsplash

10 simple VS code shortcuts that help me be more productive

Jakub Smetanka — Wed, 28 Jul 2021 20:31:42 +0000

In VS Code there exist bunch of keyboard shortcuts, which help programmers not use GUI or mouse, while they are writing code. Probably, its not possible to remember every shortcut. That's why we have keyboard shortcuts sheet, here is a link or open it via VS Code with Ctrl + K Ctrl + R (it's a bonus one). Important thing at beginning is start to use at least some of them.
If you are successful with using it, you should carry on with adding another ones. With everyday using, you will you use it automatically, and your writing will be less interrupted with using mouse or GUI, which makes you more productive.

I choose some useful shortcuts which was really easy to adapt and I use them on daily basis.

Ctrl + B

Open/Close left sidebar.

Ctrl + F

Find occurrences of keyword in a current file

Ctrl + Shift + F

Find occurrences of keyword in whole project

Alt + Left/Right Arrow

Return to previous / following position of cursor.

Ctrl + P

Search files by name. Hint: Don't have to write whole names just part of them.

Ctrl + Shift + P

Search in command palette

Ctrl + \

Split screen. Current file is opened in new split window

Alt + Shift + Up/Down Arrow

Copy whole current line up or down

Alt + Up/Down Arrow

Move line up or down

Ctrl + /

Comment whole line

If you know any simple helpful shortcut, feel free to comment.

Follow me on Twitter

DEV Community: Jakub Smetanka

Weekly dev insights (week 37)

1. Where to find remote work

Finding remote work in 2022

Kristian Ivanov ・ Sep 11 ・ 5 min read

2.Angular project structure

Angular File Structure and Best Practices (that help to scale) | by Shijin Nath | Medium

Shijin Nath ・ Apr 26, 2020 ・ Medium

3. RxJS patterns in Angular

What are your insights from last week? Feel free to share.

Where to find ui/ux designer? (discussion)

3 resources, I found the most useful (week 33)

1. git push config

⚙ This new GIT push config will save you lot of frustration!

Leonardo Montini for This is Learning ・ Aug 2 ・ 2 min read

2.Resolve a bug w/ patch

The easiest way to patch your npm package when there is a 🐛

Zhitomir Oreshenski ・ Dec 5 '20 ・ 2 min read

3. Angular Standalone Components

Share your personal website

How to integrate Husky, ESLint, Prettier to project in less than 15 minutes (step-by-step guide)

1. Add extensions to VSCode (Optional)

2. Install Prettier and pretty-quick

2.1 configuration of Prettier - Code formatter

3. Install ESLint

3.1. Use VSCode command pallete

3.2. Use npm

5. Husky

5.1 Add husky hooks to package.json

5.2 Add prepare script to package.json

5.3 run prepare script

5.4 create hook for pre-commit

5.5 Result

Resources

VS Code extensions NOT only for Frontend developers

Prettier - Code formatter

Better comments

Angular Snippets

Intelisense path

IntelliSense for CSS class names in HTML

Eslint

GitLens

ThunderClient

Live Server

The most repeated questions I met with on job interviews (part 1)

const vs let vs var

'===' vs '==' comparison

Can we compare two objects with '===' ?

Resources

5 steps to resolve merge conflicts in Bitbucket repository with git bash

1.Checkout the temporary branch with your changes.

2.Merge destination branch to your detached branch.

3.Resolve conflicts

4.Commit resolved files

5.Push detached branch to your branch

10 simple VS code shortcuts that help me be more productive

Ctrl + B

Ctrl + F

Ctrl + Shift + F

Alt + Left/Right Arrow

Ctrl + P

Ctrl + Shift + P

Ctrl + \

Alt + Shift + Up/Down Arrow

Alt + Up/Down Arrow

Ctrl + /

Picture by Daniel Agrelo from Pixabay

Shijin Nath ・ Apr 26, 2020 ・
Medium