DEV Community: Bartłomiej Stefański

🎒 Bringing Back Gitk on macOS

Bartłomiej Stefański — Tue, 28 Mar 2023 00:00:00 +0000

In today's blog post, let's talk about Git GUIs! As someone who has always stuck to the command line and git aliases for Git adventures, it may be surprising to find out there's an instance where even I can't resist the charm of a good ol' GUI! And that's when casually browsing the Git tree to check out the changes made and where they've been sprinkled.

In the past, the built-in Git tool called gitk was used for this purpose. But it seems like in the latest versions of macOS, it's not included by default, so a little extra effort is needed to get it back.

To bring gitk back into action, just run the following commands:


brew update 

brew install git

brew install git-gui

And voilà! The gitk command should be up and running, ready to help navigate that Git tree with ease.

🤖 Installing Pip on macOS

Bartłomiej Stefański — Mon, 27 Mar 2023 00:00:00 +0000

In this blog post, I'll discuss a situation where I wanted to install a module using pip (the package installer for Python) but encountered an unexpected error: zsh: command not found: pip. This was quite surprising, as I assumed that Python, along with pip, was installed by default on macOS.

As it turns out, while Python is indeed installed by default on macOS, pip is not, and you'll need to download it separately. Additionally, the downloaded version is pip3, so you'll have to create an alias for pip since some tools or documentation still reference the older command.

To accomplish this, you can use the following one-liner:


python3 -m ensurepip && echo 'alias pip=pip3' >>~/.bash\_profile && source ~/.bash\_profile

This command does the following:

Installs pip directly from the Python3 library
Adds an alias pip -> pip3 to your ~/.bash_profile, ensuring that you don't have to recreate the alias every time you restart your computer
Reloads the ~/.bash_profile file

After running this command, you should be able to execute the pip command without any issues.

🥴 Resolving a JSON Import Issue with Linaria

Bartłomiej Stefański — Sun, 26 Mar 2023 00:00:00 +0000

Recently, I faced a bug related to the Linaria library that prevented my page from building. I stumbled upon this issue when attempting to import JSON files in a component where Linaria was utilized. Instead of processing the JSON file correctly, Linaria treated it like a JavaScript file, leading to parsing errors. I attempted to exclude all JSON files in the Linaria configuration using a simple regex, but it didn't seem to work properly.

Here's a screenshot of the exact error I encountered: (screenshot here).

Before fixing the issue, my configuration looked like this:


const shaker = require('@linaria/shaker').default;

module.exports = {

 rules: [

{

 test:/.json/,

 action: "ignore"

},

{

 test: /node\_modules/,

 action: 'ignore'

},

{

 action: shaker 

},

]

}

As you can see, I'm ignoring all the .json files and node_modules. Additionally, I have the shaker plugin added as the last rule.

After some debugging and setting breakpoints in the code, I discovered that the issue was being caused by the shaker plugin. Under the hood, the rules are applied in reverse order, and the order matters. Since I set the shaker as the last rule, it ran as the first one. As a result, it didn't respect the other rules and failed to ignore the files I intended to exclude, causing the issue.

To fix this problem, I simply needed to place the shaker action as the first rule:


const shaker = require('@linaria/shaker').default;

module.exports = {

 rules: [

{

 action: shaker 

},

{

 test:/.json/,

 action: "ignore"

},

{

 test: /node\_modules/,

 action: 'ignore'

},

]

}

By placing the shaker action as the first rule, I was able to resolve the issue and successfully exclude the JSON files and node_modules from processing.

😎 Unlocking Next.js Benefits: No SSR? No Problem!

Bartłomiej Stefański — Wed, 22 Mar 2023 00:00:00 +0000

Next.js is a powerful framework built on top of React.js, offering numerous advantages over using React.js on its own.

A common misconception in the industry is that if your application doesn't require Server Side Rendering (SSR), then you shouldn't use Next.js, which is simply not true. Here are some of the beneficial features Next.js offers that can enhance app development:

Granular Error Handling at the component level in the app directory
SSR (Server Side Rendering) enables moving some heavy logic to the server without involving the backend team, speeding up development. SSR and Static Site Generation (SSG) also prevent Layout Shifts and Loading Screens.
SSG (Static Site Generation) improves page transitions even when SEO isn't a crucial factor. You can easily switch between SSG and client-side pages with minimal code changes.
Code Splitting is supported out of the box, with page-based splitting as the default behavior, unlike bare React. This can be achieved using next/dynamic.
Next.js provides a production-ready, battle-tested Webpack config that is open for extensions, ensuring optimal performance and short build times.
The next/image component, co-created with Google developers, optimizes image loading and display , following best practices.
The next/font module prevents Layout Shifts and enhances developer experience by handling 95% of the work, while ensuring top-notch performance.
API Routes allow moving heavy logic to the server and work best on AWS Lambda, acting as simple, small, independent Node servers.
Opinionated routing creates a consistent app architecture, making it easier to understand across millions of apps.
Prefetching links speeds up subsequent requests by prefetching links when hovered or visible in the viewport, which is difficult to achieve in bare React.
Layouts contribute to a consistent and clean architecture in the app directory, which is hard to achieve in bare React without complex abstraction.
Most common polyfills are included by default, ensuring compatibility across various browsers.
Advanced i18n support allows for flexible i18n features without altering routing structures.

In conclusion, Next.js offers numerous performance-related features and accelerates development without sacrificing flexibility. Contrary to requiring more code or configuration, Next.js simplifies development. Configuring React (especially Webpack) to match Next.js's capabilities is no easy task, and every library in the React ecosystem is compatible with Next.js.

🌌 Fixing Kubernetes OpenLens Blank Screen Issue

Bartłomiej Stefański — Wed, 22 Mar 2023 00:00:00 +0000

I recently attempted to set up OpenLens to work with kubectl, but all I encountered was a blank white screen. Despite having everything configured correctly and being able to list all the clusters, the connection seemed established. To verify if you have a similar connection, you can try running this command:


$ kubectl get pods

The expected output of this command should display a list of your available pods. If the connection is established correctly, you'll see something like:


NAME READY STATUS RESTARTS AGE 

your-pod-name-11/1 Running 01d 

your-pod-name-21/1 Running 01d

I soon discovered that OpenLens is built using Electron and React, which led me to a simple solution. By pressing cmd + R to refresh the view, I managed to fix the issue, and the clusters view appeared as expected. This quick refresh can be a helpful trick if you ever find yourself facing the same problem when working with OpenLens and kubectl.

🐯 Opening New Tabs on Mobile Devices with JavaScript, Safari-Friendly

Bartłomiej Stefański — Tue, 21 Mar 2023 00:00:00 +0000

I recently encountered a situation where I needed to open a new tab on mobile devices using JavaScript. Initially, I used the following code:


window.open(url, '\_blank');

It worked well, but when I tested it on Safari, I quickly discovered that Safari's security policies prevent opening a new tab within an asynchronous function, such as inside a promise. To address this issue, I had to find a workaround.

The most effective workaround I found involved the following steps:


var windowReference = window.open();

myService.getUrl().then(function(url) {

 windowReference.location = url;

});

The key here is to declare a variable with a reference to the window.open() object outside of the asynchronous function. Then, reassign the location to the desired URL where you previously called the window.open function.

🛠️ Quickly Launch VSCode from Terminal as Admin (2023)

Bartłomiej Stefański — Tue, 21 Mar 2023 00:00:00 +0000

I wanted to utilize the code . command in the terminal to directly open VSCode in my desired directory. To achieve this, I navigated to the VSCode Command Palette and chose >Shell Command: Install 'code' command in PATH. However, I encountered an error message stating "permissions denied" and that administrator access was required for this action.

After some searching, I discovered several solutions to run VSCode as an administrator. The following command was the only one that worked for me:


$ sudo /Applications/Visual Studio Code.app/Contents/MacOS/Electron; exit

Upon executing this command, VSCode should open, allowing you to select the >Shell Command: Install 'code' command in PATH option.

🕹️ How to prettify your cat command

Bartłomiej Stefański — Fri, 24 Feb 2023 00:00:00 +0000

I have always used the cat command to quickly preview some files or to copy the contents of them to a clipboard. The second part was always working great, but previewing a let's say JavaScript file or RC file was painful, because of the lack of syntax highlighting.

I was too lazy to search for solutions, but my colleague recently showed me something called bat, which is a cat, but on steroids. Here's a little preview of what it looks like:

Installation and theme setup

You can install it through brew, just like this:

$ brew install bat

and if you don't like the default theme, you can choose some that are installed out of the box or install the custom one. I decided to use Nord, which was already installed, here's how I did it:

$ mkdir ~/.config/bat $ sudo vim ~/.config/bat/config # remember to run it in sudo mode

then paste this line into the config

--theme="Nord"

and exit vim with :wq and you're done!

P.S you can still copy the contents of the file with bat something.txt | pbcopy! 🤠

🛡️ Prevent Chrome from redirecting your HTTP localhost to HTTPS

Bartłomiej Stefański — Tue, 21 Feb 2023 00:00:00 +0000

Every time I tried setting up custom /etc/hosts for local development, chrome kept redirecting my service from HTTP to HTTPS.

Probably because there was already an existing website with the same hostname and SSL that I previously visited.

To fix that you need to go to chrome://net-internals/#hsts and put your service's URL in the input located under the Delete domain security policies section. Click delete and voilà!

🩹 Generating and applying git patches

Bartłomiej Stefański — Mon, 20 Feb 2023 00:00:00 +0000

Git has a feature called patches that is great for quickly delivering stuff to other teams when there's a fire happening.

It might not be the most elegant solution, since sending the code in a form of file doesn't sound too safe, but hey, it works and does the job!

In the nice happy world you would just add another remote and cherry pick stuff from one to another.

This sounds solid, but sometimes takes quite a while, especially if you want to push to some new repository, on a different git provider and you need to setup a new SSH keys just for one pull and one push.

Doesn't seem pragmatic to me. In such cases, I tend to just go with the patches. There are two ways of patching that you can choose from.

Multiple patch files

The first one will generate multiple patch files. One per commit. Here's how you do this:

$ git format-patch -3

It will create a patch files from the last three commits. And then apply it with (not sure what am acronym means, but I always translate it to apply many)

$ git am

Git will automatically scan for those files and apply them in correct order.

Single patch file

Or the second way, my favorite, is squashing everything into one patch file, like so:

$ git format-patch -3 --stdout > your-patch-name.patch

and then applying it with

$ git apply your-patch-name.patch

🤖 Quickly scrape tweets without API or headless browser

Bartłomiej Stefański — Mon, 20 Feb 2023 00:00:00 +0000

Writing a scraping tool is a boring process, you have to use headless browser or an API (but that wouldn't be called scraping, would it?).

It takes a lot of time to develop and run such a tool. Whenever possible, it's best to avoid writing a standalone application for that.

My goal was to gather links to some tweets that were listed under Twitter's search page. I went to the search page, put this little snippet that I wrote in the DevTools and started scrolling until I was satisfied with the results.

It will probably stop working in the near future, since it is fully based on text content of some DOM nodes, but you can of course take a look at Twitter's DOM and modify it to your needs.


const links = new Set();

window.addEventListener('scroll', () =>

[...document.querySelector('[aria-label="Timeline: Search timeline"').children[0].children].forEach((el) => {

const singleLink = el.querySelectorAll('a')[3];

if (singleLink) {

 links.add(singleLink.getAttribute('href'));

}

}),

);

console.log(links);

🔑 Open ID Connect vs OAuth2

Bartłomiej Stefański — Mon, 12 Dec 2022 00:00:00 +0000

OpenID Connect is a protocol that allows you to authenticate your users in a secure, standardized, and centralized manner. It also provides identity management. It relies on Identity Providers (the official term for that is Authorization Server ) to handle authentication securely and verify the identities.

I was wondering why everyone says I can't use OAuth2 for authentication. How is that not possible? I have been doing that for years and after those years of unsecured authentication, it finally clicked.

It can be used for authentication and it still is by a lot of small services with bad engineering practices. There's one major problem with using it, it is not safe. You can save the Access Token returned from Resource Server and act like it's proof that the user is authenticated, but it's not. The user could lo-gin into some shady website, and leave their (user) access token there. The token could get stolen or exposed and then possibly used to authenticate the user in your app.

With OIDC you get ID Token in a form of JWT (in a standardized way). The token contains registered claims that inform you about when and where the token was issued, and this gives you proof that the Token is valid and the user is authenticated.

Entity vs Identity

An entity is a thing that exists as an individual unit while identity is a set of attributes (called Claims) that you can use to distinguish this entity within a context. For example, you are an entity, but not an identity. Your attributes, so for example, name, age, or your mother's name are the attributes that create your identity.
An entity can have more than one identity that will have different attributes depending on the context. When you go to the bank, they perceive you differently than your mother does. That means, you have multiple identities and you can use the one that is matching the context.

Authorization vs Authentication

This is quite simple, but most articles make it sound like a complicated thing. So, authenticating means you're trying to verify that the identity belongs to you. Whereas authorizing refers to you using the identity to ask if you can access some resource or ask what actions you can do. You can use authentication for authorization, but not the other way around.

OIDC vs OAuth2

Many features of OIDC match OAuth2 features because OIDC is a superset of OAuth2, that adds authentication to the mix.

Typical OAuth2 flow would look like this:

A user (Resource Owner) clicks the button on your page to authorize the application (Client) to post videos on their Youtube channel, on their behalf.
It redirects the user to Youtube API (Resource Server) to ask if they agree to grant the application access to your Youtube channel.
If the user agrees, the Resource Server will redirect back to the Client with a token called Access Token that can be used for authorization. Some Resource Providers, like Facebook, return a short-lived token that you have to exchange for a long-lived one.

You can't use that Access Token to authenticate or log in to their Youtube channel, but you can use it to perform some actions. With OIDC, the flow would look very similar, but instead of Access Token, you would get ID Token containing information about your entity.

Sources: