or “Good Morning” in Arabic 😁 I hope you are still keeping it together with everything going on in this world and apparently we are heading to a new world order mixed with wars, a climate crisis and a financial crisis but we have to do what we can do, and do it together.

At least you weren’t hacked like what happened to me on a staging environment that I sat up to late find out someone is using it for a phishing attack. More on this story later in the newsletter 👀

In This Issue

• News & Articles: Rheinmetall data breach, 4chan got hacked, Japanese Web design, 70+ Tech jobboards.

• Poll: Were you laid off recently?

• Weekly Summary:

  • Form Submission Encoding

  • Open-Source Intelligence (OSINT)

  • How A Hacker Used My Staging Environment for Phishing

• Weekly Videos:

  • Reality of Cybersecurity

  • Design Better Than 99% of UI Designers

News & Articles

• German Weapon Manufacturer Rheinmetall got compromised

• 4chan got hacked

• Why Japanese Websites Look So Different

• The peculiar case of Japanese web design

• 70+ Job Find Websites For Developers & Other Tech Professionals

Poll

This week’s Summaries

Form Submission Encoding

Form submission encoding refers to the process of formatting and encoding form data before it is sent to the processing agent (such as a server). The encoding method depends on the content type specified in the form's enctype attribute.

There are two main types of commonly used encoding:

• application/x-www-form-urlencoded

  • Simple format and it’s similar to what you see in the query parameters

  • It can be sent in get or post

  • Consists of pairs of keys and values separated by the & symbol

  • Can’t be used to send files

• multipart/form-data

  • More complex and covers all types of data that needs to be sent

  • Can be used to send files

  • The encoding separate between different values with a boundary

  • It can be used to upload multiple files using a Content-Type multipart/mixed and creates a separate boundary for it

Read more:

• W3 Official Documentation on Form submission

Open-Source Intelligence (OSINT)

Open-source intelligence (OSINT) is the process of gathering and analyzing publicly available information to answer specific questions mostly about a person, organization, or event. It is widely used in various fields, including cybersecurity, law enforcement, journalism, and business intelligence.

Key points about OSINT:

• Sources: News articles, social media, government records, company websites, images, videos, web archive, wikipedia, news, ...etc.

• Methods: Searching, cross-referencing, analyzing, and drawing conclusions, ...etc.

• Uses: Security investigations, market research, competitive analysis, due diligence, ...etc.

• Benefits: Cost-effective, legal, and readily available information.

• Ethics: Respect copyright, privacy, and avoid spreading misinformation.

Read more:

• OSINT Frameworkopen in new window

• OSINT: How to Find Information about ANYONE!

How A Hacker Used My Staging Environment for Phishing

It’s never expected when you become a victim of a hacking attack but it all happen all of a sudden. I can say I have seen some hacks in my career and found a way to stop them.

But this one was very interesting!

Not because it was brilliant or something but because the hacker found my staging server which has a very weird long name including random numbers like this one: “http://editor-1733357790….wpmt.test/”

You can read the article on my blog for the full story and learnings. The article is behind a paywall but you can read it for free from here 😉

Videos of the Week

Reality of Cybersecurity

Design Better Than 99% of UI Designers

What a week, huh? Too many things happening both personally and around the world, while at the same time trying to figure out German healthcare system and how it will fit into my upcoming freelancing journey.

Turns out, German healthcare system is tooooo expensive and costs a lot of money. There are many horror stories especially from migrants about how inadequate the service can be. But this story is for another day.

In This Issue

• News & Articles: Tech Compensation, 23andMe Bankruptcy, Lieferando Layoffs, Zalando’s scandal, EU Open Source Catalogue

• Poll: Interested into Self-employment?

• Weekly Summary:

  • Diffie-Hellman Key Exchange

  • Multiple Github SSH Accounts

  • URL vs URI vs URN

• Weekly Videos

  • How to Start a SOLO Agency Step-By-Step

  • World's shortest UI/UX design course

News & Articles

• Trimodal Nature of Tech Compensation in the US, UK and India

• DNA of 15 Million People for Sale in 23andMe Bankruptcy

• Lieferando couriers fear massive cuts

• Court Rules Against Zalando for Racist, Unlawful Dismissal

• The EU Open Source Solutions Catalogue is now live

Poll

This week’s Summaries

Diffie-Hellman Key Exchange

Diffie-Hellman Key Exchange is a method to securely exchange cryptographic keys over a public channel. It uses a mix of asymmetric and symmetric encryption to create a secure channel.

We have three parties: Client, Server, and Attacker.

The steps are:

1. The client and server agree on two numbers: a prime number, and a base number.

2. The client and server generate a private key and a public key.

3. The client and server exchange their public keys which has the following formula: public_key = (base_number ^ private_key) % prime_number.

4. They then exchange the public keys and generate a shared secret key using the following formula: shared_secret_key = (public key of the other party ^ private key) % prime_number.

5. Doing this, mathematically, the shared secret key will be the same for both the client and server.

6. The client and server can now communicate securely using the shared secret key.

Diffie-Hellman protects against Forward Secrecy, which means that if the attacker gets the private key, they can't decrypt the previous messages.

Protecting against Forward Secrecy is important because if the attacker gets the private key, they can decrypt all the previous messages. With Diffie-Hellman, the attacker can't decrypt the previous messages because the shared secret key is only used for the current session and every session has a different shared secret key.

Read more:

• Explaining the Diffie-Hellman Key Exchange

• Secret Key Exchange (Diffie-Hellman) - Computerphile

• Diffie Hellman -the Mathematics bit- Computerphile

• Perfect Forward Secrecy

Multiple Github SSH Accounts

This is useful when you have multiple accounts for github or any other git repo provider on the same machine (ex: Work and Personal accounts).

The concept is that we need to:

• Generate different SSH keys for each account

• Add ssh keys to ~/.ssh/config with separate hosts

• Add condition to .gitconfig to use certain user for a certain directory for example

• We pull the repo using a specific host name (not the domain)

Steps:

1. Generate SSH keys:

ssh-keygen -t ed25519 -C "<email_address>"

1. Add the keys to ~/.ssh/config:

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519

Host github.com-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_ed25519_personal

1. Add the condition to .gitconfig:

[includeIf "gitdir:~/work/"]
  path = .gitconfig-work

Then create a .gitconfig-work file with the following content:

[user]
  email = <email_address>
  name = <name>
[core]
    sshCommand = "ssh -i /path/to/work/ssh/file -o IdentitiesOnly=yes"

1. Clone the repo using the specific host:

git clone git@github.com:repo_org/repo_name.git

For the personal account:

git clone git@github.com-personal:repo_org/repo_name.git

and afterwards, you can use git commands normally and it will know which credentials to use.

URL vs URI vs URN

This topic might be very technical but it explains the different names and what are the different parts used to find a resource on the internet.

Let's take the following:

https://john.doe@www.example.com:123/form/questions/?tag=networking&order=news#top

It consists of:

• https: Scheme. This can be HTTP, HTTPS, FTP, MAILTO, IRC, FILE, etc

• john.doe: Userinfo

• www.example.com: host

• 123: Port

• john.doe@www.example.com:123: Authority

• /form/questions: Path

• ?tag=networking&order=news: Query

• #top: fragment

This full thing is called a Universal Resource Locator (URL). It's used to locate exactly where is the resource.

Meanwhile, Universal Resource Identifier (URI) is used to uniquely identify a resource but not necessarily how to locate it. So, URL is just a URN + Scheme (how to locate a resource)

Uniform Resource Name (URN) are names like URI but they should be unique across space and time. They are more regulated and they usually start with the prefix urn:.

Read more:

• The Real Difference Between a URL and a URI

• What is the difference between a URI, a URL, and a URN?

• Why is URN one of more popular formats used to uniquely identify the resource?

Videos of the Week

How to Start a SOLO Agency Step-By-Step

World's shortest UI/UX design course

It has been a long time since I last sent this newsletter and a lot has changed the past few months with too many layoffs in the tech sector.

I started full self-employment, back to hitting the gym again, reading a lot of books and articles, becoming more active for migrants rights and anti-racism in Germany and I passed my German B1 Telc exam then I became shocked at what’s written by German media about migrants as I started to understand them 😳

But it’s good to be back posting again bi-weekly summaries about interesting tech topics I have found to accelerate your growth as a software engineer!

So let’s get into it 🚀

This week’s News

• Thousands of GitHub repositories exposed via Microsoft Copilot

• Signal's CEO: Then We're Leaving Sweden

• EA just open sourced Command & Conquer, Red Alert, Renegade and Generals

• Anyone Can Push Updates to the DOGE.gov Website

• Here is NASA’s Contract with Clearview AI

This week’s Summaries

CommonJS Circular Dependency

This week I had an issue with Circular dependency. Basically I had the issue that Package A was importing Package B but Package B was also importing Package C and then importing Package D. But suddenly I found this last one was importing Package A.

So, it was like this: A -> B -> C -> D -> A

Of course, Webpack was importing A into D as an empty null and causing it to fail. The reason is not Webpack but rather CommonJs’s behaviour to avoid going into infinite loops in Circular Dependencies. It defines them as empty objects first and then adds the properties later. It works like this:

• It first Loads A

• It sees A requires B

• It goes to import B

• ….

• It then finds D needs A

• It sees it’s already there as an empty object

• It then returns to D an empty object

A solution would be to add the imports at the end of A so it exports first before importing it’s dependencies

Read more:

• Circular imports with webpack returning empty object

Evil maid attack

The attack happens by gaining physical access to the device and trying to install firmware or software that can intercept the data or the encryption keys (ex: key logger). This can happen especially in hotels or at airports or when arrested by law enforcement personnel.

To protect against this attack, you will need to monitor the devices physically and there is also the use of TPM to check the integrity of the device and the firmware.

Some ways to protect against this attack:

• Using glitter nail polish to seal the screws

• Using tamper-evident stickers on ports

• Using a secure boot process to check the integrity of the firmware

• Using Haven app to monitor the device using the phone sensors

Read more:

• Evil maid attack

• Evil Maid goes after TrueCrypt!

S.T.A.R. Method

The STAR method is a structured way to provide briefings, whether in job interviews, meetings or just talking with a potential client. It entails the following structure:

Situation: Give context before telling anything.

Task: What was the challenge.

Action: What was your own contribution. It can also be multiple actions.

Result: What was the outcome of each action.

Read more:

• STAR Interview method

Videos of the Week

The Chinese Century is here

10 Gmail Productivity Tips that Changed My Life!

How Sr Devs are *really* made

I have been busy the past week to plan for the revival of my YouTube Channel again with new content and new plans. So stay tuned 😉

I am sure some of you have read something interesting this week, maybe you can send it over to me? and I will include it in the next issue 🙏

If you also live in Germany and plan to start your own business, I am running a survey to understand the challenges that migrants face when starting a business in Germany. If you are interested, please fill out this survey:

https://forms.gle/1tUp8mnSDDXR9jtt6

This week’s News

Let’s try a section about some interesting tech news

• Telegram messaging app CEO Durov arrested in France

• A tech revolution in rural India: Training poor women in STEM

• UK: Big Tech platforms play an active role in fuelling racist violence

• Skilled professionals leaving Germany for other English speaking countries

• Latvia’s emerging tech ecosystem

• Meta’s Open Source LLM Model Llama 3.1 is released

This week’s Summaries

Quick DDoS Protection

One of my client's website got under a DDoS attack and I needed to act quickly. But first I needed to confirm it was a DDoS attack and not something else:

• At first, I noticed there was a spike in CPU usage on the hosting Dashboard which could indicate many things not necessarily a DDoS attack but maybe a stuck request, an infinite loop or a bug in one of WordPress plugins or even an issue with the MySQL engine.

• I logged into the server an ran the command ps -aux to check all currently running processes and see which one consumes the highest CPU usage and it turns out it was the PHP Engine php-fpm

• I checked the logs and found out there was a massive number of requests which just confirmed it's a DDoS attack.

That's where it was confirmed it was a DDoS attack and needed to stop it in few easy steps:

• First, I updated Nginx configs with a directive to limit the number of open connections per ip to only 10 connections

limit_conn_zone $binary_remote_addr zone=addr:10m;

server {
    limit_conn addr 10;
}

• I then added a deny directive to the problematic IP address

http {
    deny 94.158.245.100
}

Voilà! the CPU usage just dropped to almost normal usage thanks to Nginx's high throughput to just deny a high amount of requests easily. Of course a better option is to use CloudFlare but when under attack, one must act quickly to keep the website afloat compared to just shutting down the server!

Read more:

• How to prevent DDoS Attacks

• Mitigating DDoS Attacks with NGINX and NGINX Plus

• NGINX rate limiting

Using Docker-in-Docker

Using Docker-in-Docker or DinD is useful for docker development or when you want to have different isolated environments for a complex application like CI for example. Though I needed to use this approach to run a WordPress Multi-tenant architecture and it worked nicely.

There are two ways to run a DinD:

• Run a Docker container inside another Docker container and it will have its own Docker daemon and spawned containers

• Run a Docker container and share the host Docker socket with the container so that it runs containers on the host directly

I needed to use the second approach. The idea is to share the host socket /var/run/docker.sock:/var/run/docker.sock with the Docker container.

So an example command will be like this

docker run -it -v /var/run/docker.sock:/var/run/docker.sock docker:26-cli docker run nginx

This will run a nginx container from a docker container all shared on the same docker host

Read more:

• Using Docker-in-Docker for your CI or testing environment? Think twice

Videos of the Week

Our Privacy Is In Serious Danger By The Government Right Now...

Is Google Training AI on YouTube Videos?

You might have noticed that the newsletter is now under a new domain “justenough.dev“. That’s because I am launching my knowledge base into a website instead of keeping it private 🚀

You can now visit it here and check out content for courses and backlog for this newsletter. Soon I will open also the source code for everyone to contribute 👨‍💻

Let’s strengthen our Collective Knowledge 💪

Check it out here: https://justenough.dev/

This week’s Summaries

UUID

It is a 128-bit identifier standardized by the Open Software Foundation (OSF) to create unique identifiers for digital objects. UUIDs are commonly used in various information systems and are particularly useful in distributed systems where unique identifiers are needed without central coordination.

UUIDs are generated using algorithms designed to ensure uniqueness across space and time, even in distributed systems where multiple UUIDs might be generated concurrently. The structure of a UUID is standardized, consisting of 32 hexadecimal digits displayed in five groups separated by hyphens, like this: 8-4-4-4-12, where each digit represents four bits.

There are several versions of UUIDs, each generated using different algorithms, and they have different properties and intended uses:

• Version 1 (UUID based on timestamp and MAC address): This version uses the current timestamp and the MAC address of the computer generating the UUID to create a unique identifier. It is primarily used in scenarios where uniqueness and time-based sorting are essential.

• Version 2 (DCE security version): Similar to version 1 but with modifications to include POSIX UID/GID.

• Version 3 (MD5 hash of a namespace and name): This version generates UUIDs based on a namespace identifier and a name. It uses the MD5 hashing algorithm to produce the UUID. This version is deterministic; given the same namespace and name, it will always produce the same UUID.

• Version 5 (SHA-1 hash of a namespace and name): Similar to version 3 but uses the SHA-1 hashing algorithm instead of MD5. Like version 3, it is deterministic.

• Version 4 (Randomly generated UUID: This version generates UUIDs using random or pseudo-random numbers. It provides a high probability of uniqueness. It is widely used in various applications where uniqueness is the primary concern.

The differences between these versions primarily lie in the algorithms used for generation, the sources of randomness, and the properties of the resulting UUIDs, such as determinism and uniqueness guarantees. Each version is suitable for different use cases depending on the requirements for uniqueness, determinism, and collision resistance.

Read more:

• Universally unique identifier

• The effect of Random UUID on database performance

• How Shopify’s engineering improved database writes by 50% with ULID

SearXNG

Did you know that each search entry you make on Google is stored and used to build a profile about you? and that Google is using this to sell your data to advertisers or even to governments intelligence agencies?

That's why SearXNG is here to help you. SearXNG is a privacy-respecting search engine that doesn't track you. It is an open source meta-search engine that aggregates results from more than 70 search services. It is a great alternative to Google and other search engines. Also, it's much better to bypass results censorship and manipulation by these big tech companies.

You can use one of the public instances or host your own instance.

Let's De-Googlify our lives!

Read more:

• SearXNG on GitHub

Videos of the Week

Making a Game with Java with No Experience

Every Developer Needs a Raspberry Pi

Do you create tech content? have you read something interesting?

Send me your links and I'll attach a summary for it here and we both learn something new from each other 🤗

Let's increase our collective knowledge ❤️

I am finally making progress to clean up my 567 Chrome tabs 🙈 and making use of my new mini whiteboard to organize my daily todos. Very handy and only costs €5 from Woolworth ❤️

Using physical todos is more satisfying than complex Notion setups 😌

This week’s Summaries

OPTIONS vs HEAD methods

OPTIONS is used to get the allowed methods for an endpoint

HEAD is used to get meta information about the resource. They should have the same headers as the GET method response without the body. Also, this helps to check if the a cached resource should be invalided and a GET request should be initiated.

Read more:

• RESTful API methods; HEAD & OPTIONS

OAuth vs SAML vs Kerberos

They are all ways to help authenticate and authorize users or services to another service through an identity provider.

They use different strategies and have some differences between them.

OAuth:

• Parties are: Client, Service Provider, and Authorization Provider

• Main task: It gives a service provider access to some resource through the Authorization Provider requiring Client’s consent

• OAuth allows to give scopes to these service providers to have certain access

• OAuth returns an Access Token to be used by the service provider

• OAuth can have an identity layer and it’s named OpenId Connect or OIDC, it returns also an Id Token which is used to identify the user

• JSON-Based and uses JWTs

• More modern and used by newer apps

• Doesn’t require prior introduction between the Authorization Provider and Service Provider making it easy to setup

SAML:

• Used mainly for Authentication but can have an authorization layer

• Parties are: Client, Service Provider and Identity provider

• Main task: it gives access to a client to a service provider through the identity provider

• Very similar to OIDC

• XML based and used by older applications and government software

Kerberos:

• Used mainly for Authentication & Authorization among a bunch of services with asymmetric keys (no public key) and avoid sharing keys between these many services

• Parties: many services and a Key Distribution Center which includes two servers Authentication server and Ticket Granting server

• Main Task: Gives access and keys to a service to communicate with another service using a session key

Read more:

• An Illustrated Guide to OAuth and OpenID Connect

• How SAML Authentication Works

• Taming Kerberos - Computerphile

• What is the difference between OpenID and SAML?

Videos of the Week

Blue Light Glasses: A Waste of Money? Explained by an MD

Why Corporate America Is Obsessed With "Company Culture"

Do you create tech content? have you read something interesting?

Send me your links and I'll attach a summary for it here and we both learn something new from each other 🤗

Let's increase our collective knowledge ❤️

Good morning lovely people! This is Abdu from “Software Summaries” now rebranded as “Just Enough” 🚀

After a long absence, I am finally back to posting again and with strong content and energy to share and spread the knowledge I learned during the week with you.

The past couple of months weren’t the nicest and gave me a different prospective towards life and priority re-ordering. There is going to be changes upcoming and I would like you all to be part of it!

This week’s Summaries

5-eyes, 9-eyes, 14-eyes

With the rise of Far-right and weakened democracies, privacy is a becoming a concern for many people. Awareness is the first step to protect your privacy especially if you are doing things your state might not like.

The 5-eyes, 9-eyes and 14-eyes are intelligence alliances between countries to share intelligence information between them:

• 5-eyes: US, UK, Canada, Australia, New Zealand

• 9-eyes: 5-eyes + Denmark, France, Netherlands, Norway

• 14-eyes: 9-eyes + Germany, Belgium, Italy, Spain, Sweden

They share a wide range of intelligence information between them and they are known to spy on their citizens and other countries.

So if you are doing something that might be illegal (event activism work) in these countries, you might want to use a services (ex: Mail, Hosting, VPN, ...etc) that is not based in these countries.

Read more:

• Five Eyes, Nine Eyes, 14 Eyes (What to Avoid in 2024)

Passkeys

Passkeys are a new way to authenticate users without the need for passwords. It's a more secure and user-friendly method that uses public-key cryptography to verify the user's identity.

The passkey is generated by the user's device and it generates a public and private key pair. The public key is sent to the server, while the private key remains on the user's device. When the user wants to authenticate, the server sends a challenge to the user's device, which is signed with the private key. The server then verifies the signature using the public key and authenticates the user.

This approach eliminates the need for passwords, which are often weak and easily compromised. It also provides a more secure and user-friendly authentication method that is resistant to phishing attacks and other security threats.

Read more:

• FIDO Promises a Life Without Passwords

DOMParser

DOMParser is used for converting strings into DOM elements aka. parsing HTML string into a structured document using the parseFromString method and it will return a Document object which we can then use adoptNode to transfer a node from one document to another or use cloneNode to create a copy of a node within a document.

It’s similar to innerHTML but it’s safer as it doesn’t run the JS Code inline of the string which allows also to do transformations before appendChild it to the current Document.

// Create an HTML string
const htmlString = "<div><p>Hello, DOMParser!</p></div>";

// Create a new DOMParser
const parser = new DOMParser();

// Use the parseFromString method to parse the HTML string
const parsedDocument = parser.parseFromString(htmlString, "text/html");

// Get the first element from the parsed document
const parsedNode = parsedDocument.body.firstChild;

// Get the parent element in the current document where the parsed node will be appended
const parentElement = document.getElementById("parent");

// Adopt the parsed node to the current document
const adoptedNode = document.adoptNode(parsedNode);

// Append the adopted node to the parent element
parentElement.appendChild(adoptedNode);

Read more:

• DOMParser by mdn

• document.adoptNode by mdn

• document.cloneNode by mdn

Videos of the Week

Advanced React Course

MacBook for $36 👀

Do you create tech content? have you read something interesting?

Send me your links and I'll attach a summary for it here and we both learn something new from each other 🤗

Let's increase our collective knowledge ❤️

Hope you are all having a good time and getting ready for Spring 🌷

The past two weeks were a bit relaxing but most importantly I officially started working 6hrs/day with my current employer and also got a promotion 🚀

I am going to collect learnings from the 6hrs/day experiment and will share them with you all soon.

Wish you all a nice start to the week and enjoy a mindful time 🙏

This week’s Summaries

Product Development for Developers

During a recent Lunchclub meeting, I had the pleasure of speaking with Kamil Bukala, the Co-Founder and CTO of TabsFolders.com. Our conversation revolved around how developers can begin building their own products instead of solely working on projects for clients or employers. Kamil shared some valuable insights that I would like to share with you.

• One idea that Kamil presented was to repurpose an existing product, changing how it's perceived, rather than starting from scratch. This approach can be beneficial for testing out ideas before moving on to actual implementation and saving time and money in the product development process.

• Another suggestion was to modify an existing source code to achieve our core concepts. This way, we can gain valuable insights and lessons early on in the product development process. This approach can also help save time and money, as we are building upon an already-existing foundation.

• Hiring remote teams for building a prototype at a relatively cheaper cost. Platforms such as Upwork and Fiverr are great resources for finding remote teams to create easy prototypes. These prototypes can be used to collect feedback from potential customers.

• Finally, Kamil mentioned that originality is not always necessary when attempting to solve a problem. One can find existing products and copy their ideas, targeting different markets with different demographics or geographics. This approach is similar to what Rocket Internet does, and it can be a successful strategy for building a product that meets the needs of a specific market.

How the Internet works

The internet consists of 7 network layers to communicate with each other which are:

1. Physical layer: Wires and transmission that handle physical aspects of networking.

2. Data link layer: Reliablity transmission of data over a physical link by implementing error detection and correction mechanisms.

3. Network layer: Handles the routing of data between different networks by using protocols such as IP (Internet Protocol).

4. Transport layer: Provides end-to-end data transfer between two devices by using protocols such as TCP and UDP.

5. Session layer: Establishes and manages communication sessions between devices, including authentication and encryption.

6. Presentation layer: Responsible for data formatting, encryption, and compression.

7. Application layer: Provides services to applications such as email, web browsing, and file transfer. (HTTP protocol is here!)

This video by Rhymu is a great intro for in-depth details of how the Internet works

PoC vs Prototype vs MVP

We usually use these terms while working as they are the same but they are quite different.

PoC (Proof of Concept):

• Used to check if our idea is technically feasible and possible to implement

• Mainly for internal purposes and neglects UI, security, and development best practices

• Example: Simple Script without any clean code or infrastructure

Prototype:

• Early product sample to demonstrate a business concept before implementing it.

• Good for understanding the product and user journey to find any gaps that exist

• Examples: Miro Boards, Figma Designs

MVP (Minimum Viable Product)

• It’s a product with the minimum features that can be launched to market

• Used to validate the idea with real users and get feedback

• Examples: Using No-tools apps and WordPress SaaS

Read more:

• PoC vs Prototype vs MVP: What's the difference? How to choose?

Hope you all doing alright and having a nice start to the week ❤️

A bit of a long time since I published the last issue but it has been quite a ride since then :D I finally got my tax refund sorted with the Tax office, am about to finish a huge project I am working on with a client, traveled to lovely Passau, and focusing now to get in shape and finaaallly to get better in Deutsch 🇩🇪

This week’s summary is packed with good stuff and I am sure you will like it!

Wish you all stay healthy, and fit and enjoy the upcoming good weather ☀️

This week’s Summaries

Github X

I have been working on a huge consultation project for the past few months building a system similar to Monday.com or Personio but for nursing facilities with the help of Github Copilot which has been an arsenal on its own helping me programming in .NET which I never used before.

Now, GitHub has announced GitHub Copliot X which is the upcoming generation of Github Copilot and a few upcoming features will be:

• Integrating the same model as ChatGPT-4

• Integrating Chat into VSCode which will help you understand pieces of code within the IDE

• Writing unit tests

• Writing Pull Requests descriptions

• Integration with Frameworks docs

Programming is never going to be the same and too much fun is coming up with this new toy :D

Read more:

• GitHub Copilot X: The AI-powered developer experience

6 Steps to Tackle Technical Debt by Seifeldin Mahjoub

Seif managed to transform a UI design system with a heavy technical debt to have repaid all of it with full interest :D

In his article, he shares tips and ideas on how to practically tackle technical debt both from engineering and management perspectives:

• Building trust among team members is crucial for tackling technical debt effectively. This involves being open and honest in communication, treating others with respect and kindness, and focusing on a shared vision.

• Making technical debt visible through tools like a tech debt radar can help prioritize the most pressing issues and drive progress.

• It's important to prove the need for technical debt management to stakeholders, highlighting the risks and financial impact of neglecting it.

• Breaking down technical debt into smaller, manageable phases and prioritizing using frameworks like the Cyfin framework can help make the job more manageable.

• Allocating dedicated time for technical improvements and making it a part of the development process can help drive progress.

• Engineers should take ownership of the code and lead by example in tackling technical debt, ultimately leading to improved results for the team and the company.

Read the full article:

• From Technical Debt to Technical Wealth: A Team Approach

SELinux

SELinux (Security-Enhanced Linux) is a security mechanism that provides an additional layer of protection to Linux systems. It is built into the Linux kernel and uses a Mandatory Access Control (MAC) model to enforce access controls and restrict unauthorized access to system resources.

SELinux's security mechanism is based on security contexts or labels assigned to files, processes, and other resources. The context is a combination of a user identity, role, and type that defines the level of access a resource has.

It was developed by the US National Security Agency (NSA) and is now included in most modern Linux distributions.

Some of the most important components of SELinux are:

• Security server: responsible for enforcing security policies and access controls.

• Security Policy: a set of rules and guidelines that define how the Security server should enforce access controls on the system.

• SELinux Utilities: command-line tools that allow system administrators to manage and configure SELinux policies, contexts, and other related settings.

• Audit system: logs security events and other system activity for troubleshooting, tracking system activity, and providing forensic analysis in case of a security breach.

• Security Contexts: are assigned to files, processes, and network resources, and define their level of access.

SELinux can be used with container technologies such as Docker and Kubernetes to enhance their security. By enabling SELinux, access controls can be restricted, preventing unauthorized access to system resources, and improving the overall security of containerized applications.

Read more:

• Security-Enhanced Linux for mere mortals by Thomas Cameron

Missed the past week’s issue as I got pretty sick but I am better now and found out that in Germany you can book a video call with a doctor which is pretty cool!

Anyways, enough rest and time to get back to discovering cool tech :D

Hope you all are healthy and having a productive week ❤️

This week’s Summaries

History API

The History API allows to manage and manipulate the browser's history and gives the ability to update the URL displayed in the browser's address bar without reloading the page, which results in a better user experience and is a core component of routing libraries such as react-router and vue-router.

Here's an example of using the History API:

// Using the pushState method to add a new history entry
history.pushState({
  page: 1
}, "Page 1", "/page1");

// Using the replaceState method to update the current history entry
history.replaceState({
  page: 2
}, "Page 2", "/page2");

// Listening for the popstate event to handle back/forward navigation
window.addEventListener("popstate", function(event) {
  console.log("Page:", event.state.page);
});

In this example, the pushState method is used to add a new history entry to the browser's history, with the state { page: 1 }, the title "Page 1", and the URL "/page1". The replaceState method updates the current history entry with the state { page: 2 }, the title "Page 2", and the URL "/page2".

Finally, the popstate event is listened for and logged to the console, which will be triggered when the user navigates back or forward through the history.

Read More:

• History API by mdn

• Example code for internals in a router

BroadcastChannel API

The BroadcastChannel API allows communication between different browsing contexts (e.g. windows, tabs, iframes) and workers in the same origin. It provides a way to broadcast a message to all listening contexts.

Here is an example of using the BroadcastChannel API to send a message from a parent window to all of its child iframes:

// In the parent window
const channel = new BroadcastChannel('channel-name');

channel.postMessage('Hello, world!');

// In the child iframe
const channel = new BroadcastChannel('channel-name');

channel.addEventListener('message', event => {
  console.log(event.data); // 'Hello, world!'
});

You can also use the BroadcastChannel API to communicate between different tabs or windows. In this case, you would need to open the same channel in both tabs or windows and then use postMessage to send a message from one tab or window to the other.

// In one tab or window
const channel = new BroadcastChannel('channel-name');

channel.addEventListener('message', event => {
  console.log(event.data); // 'Hello, other tab or window!'
});

// In another tab or window
const channel = new BroadcastChannel('channel-name');

channel.postMessage('Hello, other tab or window!');

Note that the BroadcastChannel API is not intended for communication with servers, as it only works within the same origin. If you need to communicate with a server, you can use other APIs such as WebSockets or the Fetch API.

Read more:

• BroadcastChannel API by mdn

Importmap

Import maps are a way to specify custom module resolution for JavaScript projects natively in the browser without using bundlers like Webpack or Vite. They allow you to map specific import statements to different locations, giving you more control over how your code is organized and loaded.

You can use an import map to specify that all imports starting with @/components should be resolved to the src/components folder, and all imports starting with @/utils should be resolved to the src/utils folder. Your import map file would look like this:

{
  "imports": {
    "@/components/*": "./src/components/*",
    "@/utils/*": "./src/utils/*"
  }
}

In your code, you can then use the following import statements:

import Button from '@/components/button';
import { helper } from '@/utils/helper';

You can also use importmap to point to external libraries or CDN.

{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"
  }
}

In your code, you can then use the following import statements:

import _ from 'lodash';

It is important to note that import maps are not yet widely supported and require a browser with support for the 'import-maps' feature flag, or a tool like es-dev-server to work.

Read more:

• Improtmap by mdn

Hope you all had a good time the past weeks and managed to start hitting those 2023 goals list. I missed issuing a newsletter the past week but for a good reason as I gave all my energy to get my free Advanced React Course published on YouTube, also tried out my Play Station 5 as I finally got it :D

Wish you all a nice and productive week ❤️

This week’s Summaries

Trusted Events: The Anti-bot web solution

Bots are automated software programs that are designed to perform tasks on the internet. They can be used for a wide range of purposes, such as scraping websites for information, posting spam comments, or simulating human behavior on social media. While bots can be useful in certain situations, they can also cause problems by overwhelming websites with traffic, spreading misinformation, or stealing sensitive information.

Javascript Web APIs support isTrusted which is a read-only prop and can be used in combination with pageX and pageY to enforce checking whether an event is user-generated or not. Here is a sample of this code

function isTrustedEvent(event) {
  if (!event) {
    return false;
  }

  if (event.isTrusted === true) {
    return true;
  }

  return event.pageX !== 0 || event.pageY !== 0;
}

Consumer-Driven Contracts

Consumer-driven contracts help ensure that the interactions between different components of a software system are correct and consistent. This is particularly important in the context of microservices, where a single application may be composed of many different services that communicate with each other through APIs.

In a consumer-driven contract, the consumer of an API defines the contract that specifies the expectations for the provider of the API. This contract typically includes things like the input and output parameters of the API, as well as any constraints or requirements on the behavior of the provider. The provider then implements the API in such a way that it meets the contract defined by the consumer.

This approach has several benefits. First, it allows for more flexible and scalable testing, as the consumer can easily switch between different providers without having to rewrite their tests. This is because the consumer's tests are based on the contract, rather than the specific implementation of the provider. Second, it allows for more collaboration between the consumer and the provider, as they can work together to define the contract and ensure that it accurately reflects the needs of the consumer.

Overall, consumer-driven contracts help to ensure that the interactions between different software components are correct and consistent, which is essential for the development of robust and scalable microservice-based systems.

Read more:

• Consumer-Driven Contracts: A Service Evolution Pattern

Community Share: Technical Debt by Ahmed Hassanein

In his awesome blog post, Ahmed shares how we can approach solving technical debt as it should be taken seriously and dealt with in a timely manner to avoid rooting the codebase and it is important to recognize when it is ok to leave some technical debt and when it is necessary to take the time to address it.

A few tips are:

• Include the product owner early in the process and rally your team for support

• Have a meeting to discuss the pain points caused by technical debts and what are the logical approaches to solve them.

• Create sub-tasks to detail the technical debt so we have a tracked ticket to solve them. Don’t solve them on-spot to avoid consuming time.

• When the time for work planning arrives, vote to tackle them and hopefully you already have your team’s support

• Repeat the cycle as technical debt is a long-term commitment and won’t be solved in one day

Read the full article:

• Technical debt: How to kill the weeds in your codebase garden!

Use import natively

Browsers nowadays have native support for the import statement, which allows you to use JavaScript modules in your code without the need for a build tool or transpiler. This means that you can directly use the import statement in your JavaScript code and the browser will handle the loading and execution of the modules.

For example, In button.js

export function sayHello(){
  console.log("Hello World")
}

We can import button directly to index.js without bundling at all

import { sayHello } from './src/components/button.js';

sayHello(); //"Hello World"

And we can include the above index.js in the index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Project</title>
  </head>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

Note that we need to define the type of script tag as module to make sure the browser understands that we can use import statements

This allows you to organize your code into reusable modules, making it easier to manage and maintain. It is important to note that not all browsers support this feature, and you should check for browser compatibility before using it in production.

Read more:

• import statement by mdn

The past two weeks were relaxing so far, most of my work colleagues took long vacations like most Germans. So, it’s going to be less stressful and it’s time to reflect on this year and plan for my goals for 2023 🚀

I have big plans for my career like getting into Machine Learning, Data Science, and Cyber Security, and my content creation to make more videos consistently on my YouTube channel.

Wish you all a good time and prepare your amazing 2023 goals 🎯

This week’s Summaries

requestAnimationFrame

It's part of the Web APIs and it runs a function depending on the refresh rate of the screen (60 Hz, 120 Hz or 144 Hz). For example for a screen with refresh rate of 120 Hz, it will run the method for 120 time in a second.

The question that comes in mind is what is the difference between it and setInterval. and is that setInterval runs a a function based on how many times you would like to run and it's inacurate. and if we have multiple setIntervals to do two animations, they will be out of sync and consume too much GPU power

But requestAnimationFrame will batch those requests and do them all at once depending on the frequency.

Another important related method is cancelAnimationFrame which is like removeEventListner and it's used to cancel an animation request when we want to stop animating when the DOM element is removed for example.

requestAnimationFrame callback will get the the current timestamp and a group of batched callbacks will get the same timesatamp. If you also subtract the previous timestamp and current you will get the time period which is the inverse of the screen frequency. This is important to make sure that your animation don't run faster than needed.

requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.

More reads:

• Window.requestAnimationFrame()

• Why is requestAnimationFrame better than setInterval or setTimeout

• The Hidden World of requestAnimationFrame

Web Streams

Web streams are APIs that allow for the delivery of multiple values or parts of a larger value gradually over time. They can be used to improve the speed of content delivery by handling and processing data bit by bit, allowing for the rendering of some content before all of the data has been received. Streams offer benefits such as the ability to handle errors and support cancellation, as well as flow control, which allows the stream to react to the speed of the reader. The fetch API now includes support for streams, allowing developers to access the underlying stream of a response object and read it in a variety of formats.

Combining Streams API + Service Workers can yield almost same or even better performance than SSR as we can cache the App and then use Service workers to stream the content from the server and show it to the user.

Read more:

• 2016 - the year of web streams by Jake Archibald

CEO-less Companies

Co-op companies, also known as cooperatives, are businesses that are owned and operated by a group of people who come together to meet a common need or goal. These types of companies are typically formed to provide goods or services to their members, who are also the owners of the business. Co-op companies are based on the principles of democracy, equality, and solidarity, and profits are typically distributed among the members rather than going to external shareholders.

Do you think the current dominant company model we have where a CEO holds most of the power is more like a dictatorship?

Interesting Links

• How to Build Software like an SRE

• You don't (may not) need Lodash/Underscore

• What is .NET?

The past two weeks were like two months of a lifetime :D

I did a lot of traveling, gave a talk on Developer Productivity at work, almost got fined 60 euros for an incorrect ticket on the DB train, and spent too much time discovering ChatGPT which is part of this issue’s summary.

Upcoming weeks will be relaxed playing some Watch Dogs Legion on my PS4 and enjoying the holidays and Christmas 🎄

Wish you all also Happy Holidays and Merry Christmas 🎁

This week’s Summaries

ASCII Art

Past weeks, we worked on a task to show the company’s logo in the Console and my colleague, Lisa, told me about ASCII art which is a technique that uses the characters of the ASCII character set to create images.

To create ASCII art, we typically use the characters in the ASCII character set to represent different shades of gray or colors. For example, the character "." might be used to represent the lightest shade of gray, while the character "8" could be used to represent a darker shade. We can then combine these characters to create a picture or image.

ASCII art is often used in computer programs and online forums as a form of artistic expression. It is a popular way to create and share art online, and many websites and forums have dedicated sections for ASCII art. Some people even use ASCII art as a form of digital graffiti, posting it on websites and forums without the permission of the site's owner. Despite its limitations, ASCII art continues to be a popular and creative way for people to express themselves online.

Find more:

• Coding Challenge 166: ASCII Text Images

Kubernetes

Kubernetes is an open-source platform for automating the deployment, scaling, and management of containerized applications. It consists of several components that work together to provide a complete solution for managing and deploying applications. Some of the key components of Kubernetes include:

• The Kubernetes master: This is the main control plane for the Kubernetes cluster. It consists of several components, such as the API server, which is the main entry point for interacting with the cluster, and the etcd distributed key-value store, which stores the cluster's configuration data.

• The Kubernetes nodes: These are the worker machines that run the containerized applications. Each node runs a kubelet, which is the agent that communicates with the Kubernetes master and manages the containers on the node.

• The Kubernetes pod: This is the basic unit of deployment in Kubernetes. A pod is a logical host for one or more containers, which share the same network namespace and can communicate with each other easily.

• The Kubernetes deployment: This is a higher-level object that manages the deployment and scaling of one or more replicas of a pod. The deployment manages the rolling update process, which allows you to update the containers in a pod without downtime.

• The Kubernetes service: This is an abstract way to expose the pods to the outside world. A service defines a logical set of pods and a policy for accessing them, and it provides a stable IP address and DNS name for the pods.

Read more:

• This is an upcoming full summary on Kubernetes that I am preparing and will make a video for it.

ChatGPT

I think this has been the hype for the past few weeks and probably you have used it or knew someone used it. If not, it’s basically a general-purpose chat AI developed by OpenAI. It can answer any question you ask it and it will reply with a good answer.

I asked it to write a poem on Kubernetes, solve global warming, some political questions, translate text into German with a Bavarian dialect, and even asked it questions in Arabic with an Egyptian Dialect.

Of course, I am aware it doesn’t understand what I mean and it lacks creativity as it’s eventually a model trained on a massive amount of data. It’s similar to AI models used to predict the stock market, they are good for past predictions but not for the unknown future which still requires the creativity of the human element.

It’s a great tool to try and learn as it can be integrated into your workflow and multiply your productivity similar to what Github Co-pilot is doing now.

Read more:

• ChatGPT by OpenAI

Non-tech Interesting Video

What’s Really Happening in the Bermuda Triangle

It has been a while since I was able to send newsletters but I managed to adjust my schedule now and it hopefully would work this time.

This week I am going to do a lot of traveling. To Passau, Munich, and Dresden and get my React free course ready, and publish it on my channel. It will include a bonus section about SSR in a new unique way not found on other tutorials and courses.

A long week is coming up but hopefully will be productive and I wish you as well a productive nice start to the week :)

This week’s Summaries

Fluent Interface

It’s the concept of creating a more “Fluent” code that is easier to read by chaining methods. Here, methods on their own don’t show their intent but chaining them shows a more declarative meaning.

The best examples are: LINQ queries in C#, Jest & jQuery in Javascript, and jMock in Java.

IEnumerable<string> query = translations
	.Where(t => t.Key.Contains("a"))
	.OrderBy(t => t.Value.Length)
	.Select(t => t.Value.ToUpper());

Read More:

• Fluent Interface by Martin Fowler

• Fluent Interface on Wikipedia

getComputedStyle

One task I needed to deal with the past week is to find a way to set a child’s height based on the parent’s CSS min-height.

Problem is that there is no DOM property to get this minHeight.

A quick search and I came across a DOM API called getComputedStyle and it returns the computed style of the component based on the different classes and styles and CSS properties including the minHeight that I needed.

getComputedStyle(element)
getComputedStyle(element, pseudoElt)

Read more:

• MDN docs on getComputedStyle

dependency vs devDependencies vs peerDependencies

They are how we define dependencies in Javascript-based projects

• "dependencies": Packages required by your application in production.

• "devDependencies": Packages that are only needed for local development and testing. NPM won’t install them when someone installs our dependency.

• "peerDependencies": When someone installs our package, our package expects theirs to have these dependencies. If they don’t have it, NPM will still install them

Read more:

• dependencies vs devDependencies vs peerDependencies in package.json

Interesting Video

The Many Meanings of Event-Driven Architecture by Martin Fowler @ GOTO 2017

I hope this week has been going great for you so far and everything is going well and you getting ready for the weekend ^_^

I apologize for not posting any newsletters over the past weeks but I am back again and stronger than ever and hopefully we share our knowledge together!

Hope you will like this Newsletter Issue, Enjoy!

HoC vs Inheritance

Higher-Order Component or HoC is a way to add extra stuff over a function or an object. We basically “curry” it by wrapping the original function with extra logic.

withLogging(component){
   console.log('I am an HoC');
   return function(){
       return component;
   }
}

const button = () => document.createElement('button')

const buttonWithLogging = withLogging(button());

But you might ask what is the difference between it and inheritance then.

And it’s the idea of reusing the logic again with other components to create new components with the same logic.

Another thing I have noticed while playing with VueJs is that VueJs has mixins that do a very similar job to HoC

Except that mixins will overwrite the existing options aka. inheritance while HoC will isolate the original component and wrap it with a new extra logic

It basically a form of the Adapter or Proxy design pattern.

MutationObserver

It’s a native JavaScript interface that provides the ability to watch changes that happens to the DOM. It’s like the reverse of what UI libraries do. So instead of React or Vue for example changing the DOM, you can create a listener on the DOM to listen to these manipulations and apply a certain method or effect when this happens.

I encountered it while I was trying to search for a way to listen to CSS changes and this was a supported method to apply it

You can read more about it in the official documentation

Example code from the documentation

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {

    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
            console.log(
              `The ${mutation.attributeName} attribute was modified.`
            );
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

Monorepo

We spoke about Monorepos in a previous Issue and now I have created a Just Enough Monorepo video that should cover everything you will need to understand the concepts behind Monorepos.

Monorepo is a repository set up to have different parts of your application microservices under a single repository to improve productivity.

If you have multiple packages or components that depend on each other, they usually have similar scripts, commands, and dependencies, then having a single repository with everything will reduce the number of duplications, and make it easy to access and update different modules and publish different versions at once. It will dramatically increase your team's productivity.

Something Made Me Laugh :D

Interesting Links

• Google’s Site Reliability Engineering

• The Marvellous Suspender Link

• Patterns.dev by Lydia Hallie and Addy Osmani

Technical Summaries

Default Import vs Alias Import

For example, it’s the difference between

import react from 'React'

// vs 

import * as react from 'React'

The first one will only import the default exports but the second one will import all exports.

The correct one to use is the latter one per what Dan said and is also mentioned in the React Docs

Tabindex=-1

A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.

It helped me when a modal opened and I wanted to close it when keydown Esc but at the same time I didn't want to attach the event to the body as it's not its concern and divs can’t listen on keydown events. So if you add the negative tabindex, it can now listen and you can focus it without affecting the normal tab sequence follow in the browser.

What are NFTs?

I am sure you have heard this word like a thousand times and still wonder what it is. In the very short term, you basically own a hash that represents a certain art like images for example and everyone agrees that you own that hash code. But the art itself is something that can be copied or used by anyone.

But then why it’s being sold very expensive you may ask? Imagine if I told you I will sell you some sand, you will say no thank you but if I told you this sand was in the hands of let’s say Queen Elizabeth or Elon Musk, probably you would assign some value to it, let’s say $10 and then you go to sell it to someone else to make a difference and so on.

That’s why it’s just another type of speculative asset. The bread you bake is worth to you a hundred times over the one you buy from the bakery because it has a story to you.

You can watch this video to get more details if you are interested

How to Maintain Focus at Work for Software Developers

Instant notifications, ad-hoc calls, slack messages, emails... an overwhelming load on our human brain to stay focused during a typical workday as software developers.

With all of these distractions, we will try to abstract some processes to lower their effects and how to live with them as they won't disappear any time soon.

Check out the new video from "Skilled Engineer" series

or read the full article.

Summary:

• Balanced-life in Sport, Nutrition, and Sleep

• Have 2 golden hours

• Snooze with Pomodoro

• Work with intention

• Have discipline by tracking progress

Technical Summaries

Git Rebase vs Git merge

They are very similar when comes to adding commits from a branch into the current branch. But the difference is that when you merge, you add the source branch to the top of the current branch, but with rebase, you will add the current branch’s base on top of the source branch.

Merge will keep the history, but rebase will change it.

Merge will be good when collaborating with other developers so as not to break their local git histories but rebase is good to keep the git history clean.

But in my opinion, realistically rebase will always become annoying if you work in a multi-developer branch which is the most common case. And rebase’s value is not comparable to having a good developer experience.

If you are the sole developer for a branch or you still haven’t pushed your commits then it’s okay, otherwise, always use merge.

More Reading: When do you use git rebase instead of git merge

Software Release Life Cycle

By no means this is something official and should be taken with a grain of salt and every company have its own adapted process and some do all of these steps in a matter of days or even hours especially for web applications

• Alpha: Planning, analysis, development, unit testing, quality testing, and value assurance. Still might be unstable and have serious bugs. Software is still inside the organization and it may not contain all features planned for the final release. The phase ends with a feature freeze when all is done and ready for thorough beta testing.

• Beta: Can be available publically. Usability testing is done at this stage and more bugs are closed. Closing major bugs or blockers.

• Release Candidate: All features are completed and no more features need to be added for the stable release. Documentation is done.

• Stable Release: Production release and marks the latest release candidate as done.

• Support: Includes patches and service packs for version maintenance, enhancements, and fixes

• End-of-life: When it’s deprecated and no longer supported but might still be used by customers

More Reading: Software Release Life Cycle

Keycloak

A complete solution to manage user authentication and authorization and it’s very easy to customize. This is really good for apps that need quick prototyping and don’t have time to create such solutions and at the same time, they need their data to be away from using cloud authentication services on AWS or GCP.

The only reason you might not use it is if you want to stay away from Java or you don’t have Java experience. Otherwise, go for it!

More Reading: Keycloak Main Website

Weekly YouTube Video

Starting a new job, whether it’s the first one or switching companies, it’s always exciting at first but without preparation and having a target with a defined plan, you might find yourself searching for a new one sooner and trying to escape it.

We will discuss in this episode from "Skilled Engineer" a structured way to control and conquer your new job with less anxiety and they have helped me with my new position and it will surely help you too.

Technical Summaries

Monorepos

Monorepo is a repository configuration to avoid having multiple repositories for your project. If you have multiple packages or components that depend on each other, they usually have similar scripts, commands, and dependencies, then having a single repository with everything will reduce the number of duplications, and make it easy to access and update different modules and publish different versions at once. It will dramatically increase your team's productivity.

Here is a quick summary of what needs to be done to allow Monorepos for a Javascript/Typescript project and can work with Nodejs too:

• Package Management: Enable npm workspaces mode by setting the main package.json file `private: true` and adding the `workspaces` to an array of available packages. You can use a wildcard `packages/*` to apply for all.

• Typescript: We need to create three tsconfig files; one which will be the main tsconfig file with all needed configs, the second one to import these configs inside each project and a third one is used to reference and build all projects with a single `tsc --build`. First, create the tsconfig at the top level, and then inside each project use the property `extends` and then pass a reference to the main JSON file with the full typescript configs needed. The build tsconfig file would be a separate file that has two properties; the property `references` set to point to every project and `files: []` which is an empty array to avoid building the project twice.

• Babel: You can create a main .babelrc file and then reference it inside each projects’ .babelrc with the property `extends: <path>`

• ESLint: Same like Babel we create `.eslintrc` file but on the root directory as IDEs tend to prefer them on the root to enforce the rules and then for each project you can create an internal config `.eslintrc` file and use the `extend` property.

• Lerna: It provides good tooling for Monorepos like running a certain command across all repositories, and linking between packages

• Scripty: Tool to manage scripts inside package.json and unify all of them in shell file instead of having a long command in package.json file.

• commitlint: In a Monorepo where many teams work together, it’s a great idea to unify how commits are made and their format and also supports automatic changelog. Using Lerna with commitlint and husky will do the required things and setup is very easy. Follow this link.

Test Doubles

We know tests contain E2E, Integration, and Unit tests. We use test doubles when we have indirect inputs (like queries), indirect outputs (like sending events to events stream or when you call API), or slow tests (when you call the server or the database or over the network). These mocks can have different types:

• Mocks: This is an object that you record what you do to it and record data and you can verify what has been done to the mock object. It’s more for testing behaviors.

• Stubs: Are simple and they provide indirect inputs for the system. It’s more for testing the state. Stubs never fail a test but mocks can (like out of order process). You assert against mocks but not against Stubs.

• Spies: They have a Call log, a Response list, and State Access. They are stubs but with a call log and they intercept real pieces of code.

• Dummies: Just values holder

• Fakes: replace real implementation with a fake implementation to simulate situations or for making tests faster. They

Note: across the community, the naming might be different and not unified. It’s enough to get the idea about them and use the proper construct

Jest mocks

For unit tests instead of including a module that has long nested children that we don’t care about, you can use the `mock` function to mock these internal libraries

jest.mock('../UserListContainer', () => () => 'UserListContainer');

Just make sure that the path is relative to the testing file and not the component

Useful Links

• Javascript and Typescript Monorepos

• Open Source Alternatives

• What's the difference between a mock & stub?

• Test Double

• Jest Mock Modules

Personal News

—I will leave this as a blank for now and you can reply to this email with what you like to know and hear about 😊—

Weekly YouTube Video

You will get this knowledge condensed in a weekly newsletter with links to resources to expand your software skills.

For the first 2000 active subscribers, it will be free forever!

Sign up now so you don’t miss the first issue.

Subscribe now

In the meantime, tell your friends!

Social media: Twitter, YouTube, LinkedIn, Instagram, and GitHub