DEV Community: Adrian Zinko

Can we cut the trees from the Virtual DOM forest?

Adrian Zinko — Tue, 11 Oct 2022 07:12:47 +0000

Virtual DOM in React make us able to define the view declaratively. We write what the view is and what is it’s content.

There is no need to instruct interpreter where it should update particular html tag or what should be added/deleted to the specific node. Our job ends up on view declaration, the engine is responsible for the underlying mechanism of DOM manipulation.

The issue is, in order to declare view in React and then run render phase (in which we check what has changed etc.) the engine needs to build entire Virtual DOM. It runs diffing algorithm to compare the previous tree with the new one. This process is called reconciliation. The old Virtual DOM persists just to be compared with the new one after each render, which might run on every state change.

In this way Virtual DOM stores the canonical representation of the DOM in memory. This of course is fast. Exceptionally faster than solution designed by jQuery or AngularJS. That is the obvious reason why React dominated these technologies, not to mention the strong community around React. Right, it’s fast but it also has some drawbacks. The creation of the Virtual DOM trees happens in runtime. Created objects obviously consume additional memory. It might happen with every state change. On every atomic change. The engine needs to do the same job again and again.

So the question may come to your mind - Can we eliminate this repeated process? It turns out that the answer is (maybe not surprisingly) yes. The well-known Virtual DOM it’s not the goal by itself. If only there was a better idea to improve performance then Virtual DOM is no longer needed. Apparently, there is a better approach to achieve the same and consume less. It’s called Incremental DOM. We can find it’s implementation in Angular engine (from the v9) - Ivy. Another example is Svelte which uses it under the hood of its compiler. In basic terms, this approach gets rid of artificial DOM objects (which is the foundation of Virtual DOM). Rather tools that implement Incremental DOM are compiled based on the context of the particular view.

Compiler analyses what is the template of the view and how the app changes its state. Based on that data it indirectly makes updates to the view. The mechanism tracks which variable impacts re-rendering of which HTML tag. Instead of creating an entirely new object which represents the current state of DOM listening on each user event or state change that propagates DOM manipulation in runtime the compiler generates a sequence of instructions (creating a div, adding attributes, deleting particular node) and adds it to the final bundle. Incremental DOM is thus tree shakable - we know in advance what will be needed in runtime This code is mounted in a place where the change of the state happens. In the process, no additional memory is consumed which has implications for memory-constrained devices.

Now you may ask - So which approach would be the best for my app? - The answer is what you may expect from these kinds of questions - It depends ;) Ultimately it depends on which device your dear users uses your app (memory constraints are largely impacted by the hardware of the device) and on which browser (rendering speed is largely impacted by the browser’s rendering engine).

As always use the right weapon for the right enemy. Don’t assume that one or the other is the best in any case.

Data management strategies for microservices - 100 Days od CSH #4

Adrian Zinko — Tue, 25 Jan 2022 22:58:42 +0000

You might have taken same CS classes on online courses on networking. Than you want to immerse yourself in JavaScript world. After couple of unslept nights, litters of coffee and dozens of unfinished personal projects you're ready for the next challenges.

The world of application architecture

At this point you see that JavaScript have opened not only frontend development path for you (with all the React,Vue,Angular and you name it possibilities) but also complete fullstack development where you can structure your entire backend API design, routing and db connections on Node servers. You can eventually create start up idea app and see that it needs to scale pretty damn' efficiently. This brings me back to the topic I discussed yesterday - intro into application architecture.

If you decided that microservices are the way you go with your app you may quickly encounter big challenge - data management between each of them. The idea behind this architectural approach is that we want to create independent database per service. How come? - you might immediately ask. So, basically we want each service to run independently of other services. The argument in this case is that our database schema might change unexpectedly or just from the optimization point of view some services might function more efficiently with different types of DB's (sql vs nosql).

You want to keep this independence and for that you have to think about the strategy that would come in handy for your services on how to manage data access in different app workflow scenarios.

Microservices data management strategies

There are two categories of these strategies: sync and async communication.

In sync approach there is just one request call made to end service that communicates with all the concurrent services it needs to gather requested data from. This service make direct requests to these services and when it gathers all the data needed it eventually responds to the initial request.

Pros of this approach:

conceptually easy to understand
there is no need for service D to have another data storage

Cons of this approach:

it introduces a dependency between services
if any service request fails, the overall request fails
the entire request is only as fast as the slowest request
upcoming requests can easily grow to the infinite amount

Second strategy to the rescue! In async approach services communicate with each other using events.

Again there is a single request call made but in this case we emit an event storing relevant information about requested data, which flows to the event bus (more on that in upcoming articles). The event bus than takes that event and sends it to any interested services. The relevant information is stored on dedicated database from which data can but easily retrieved for desired request.

Pros of this approach:

service D does not have any dependencies on other services
data access will be extremely fast

Cons of this approach:

pretty complex approach
there is data duplication and another db needed

In the upcoming articles I'll be showing code implementation of this async data management strategy approach.

⏬ DAILY CHECK OUT ⏬
According to the work I've done today:

I've practice some Ankies (general stuff about js fullstack),
I've attended holacracy tactical meeting as a secretary,
I've created 1 article on dev.to,
I've spent 6 full 25/5 pomodoro interval sessions following Stephen Grider course on Udemy

Tomorrow I'm going to:

Spend at least 1 full hour our focusing on my project
Spend at least 25 mins preparing flashcards on holacracy topic
Spend at least 25 mins preparing flashcards on fullstack topic
Study at least 20 Anki flashcards
Spend at least 1 hour on Stephen Grider course on Udemy
Read 1 full article on Medium.com
Read book for at least 30 mins - Cut Off the Tension (polish translation: Odetnij napięcie) written by Rebekkah LaDyne

Have a wonderful day! 🔥 See you in the next one 😉

Monolith vs Microservices Architecture - 100 Days of CSH #3

Adrian Zinko — Mon, 24 Jan 2022 20:55:13 +0000

Hello on Monday 😉! In today's quick session I want to share some knowledge from the course I'm currently attending on daily basis.
As I said before I'm working as a JavaScript Developer and there is right now a big interest from my side on the architecture part of any application. It's a time for me I really want to dive deep into it and this course might helps me achieving that.
The first couple of lectures are concentrated basically on the theory behind microservices.

The first question is...

What is a microservice?

To better understand the answer let's compare this architectural approach with commonly known monolith pattern.

Side note: Most of the outlined resources (including diagrams) come from Stephen Grider's course Microservices with Node.js and React

Application built as Monolith includes all of the routing, middlewares, business logic and database access to implement all upcoming features.
Everything is tightly coupled, depended on each other. If any part of the app fails, the whole app is broken.

On the other building microservices infrastructure gives you the power of independence. App built that way is scalable and reliable.

In Monolith application there may be a huge database that stores the whole app data.
When it comes to microservices, each service keeps its own data storage and there is no way to access that data from the other service.

This approach is known as Database Per Service.

The challenge that occurs in microservices app architecture is data management between services, basically the way in which we store data inside of a service and how we communicate that data between different services.

This problem is addressed and covered in great detail in the course I'm currently following. I'll be touching more on this in the next articles.

According to the work I've done today:

I've practice some Ankies (general stuff about js fullstack),
I've added user auth session logic to my personal project,
I've created 1 article on dev.to
I've spent 8 full 25/5 pomodoro interval sessions following Stephen Grider course on Udemy

Tomorrow I'm going to:

See you in the next one! 😉

Welcome to decentralized management - 100 Days of CSH #2

Adrian Zinko — Fri, 21 Jan 2022 21:06:51 +0000

In today's article I'll explain a bit more about the work management which company I currently work for follows.

In basic term Holacracy is a system for managing a company where employees have the flexibility to take on various tasks and move between teams freely. The organizational structure of a holacracy is rather flat, with there being little hierarchy. Thus I named it decentralized in the title. There are about 200 people working in the company I work for and this system is working well so far (it's been actually more than 3 years since the change).

Unlike traditional management, power is not given to people or positions, but to roles and circles.
There are four roles that make up the basic structure. They are: Lead Link, Rep Link, Facilitator and Secretary. I'll describe each of them throughout the next articles.

⏬ Daily progress check update ⏬

According to the work I've done on the first day:

I've practiced some Ankies (general stuff about js fullstack),
I've add some Ankies (general stuff about holacracy),
I've spent some time researching sources I can share with my fiance who apparently wants to start learning more about programming
I've planned to introduce her to the 'Hello, World' by designing simple web game, we'll try to make this as pair-programming session (more on that in the next articles)
I've created 1 article on dev.to

Tomorrow I'm going to:

Spend at least 1 full hour our focusing on my project
Spend at least 25 mins preparing flashcards on holacracy topic
Spend at least 25 mins preparing flashcards on fullstack topic
Study at least 20 Anki flashcards
Spend at least 1 hour on Stephen Grider course on Udemy
Read 1 full article on Medium.com
Read book for at least 30 mins - the confidence gap (from page 130) - yep, didn't happen yesterday 😉

Are you working in a company with the same (or similar) structure, or it's totally different in your case?
Are you happy with it or is there anything that you'd likely change if it depended on you?

See you tomorrow! Happy weekend! 🌴

The only 3 tools you need to accomplish anything - 100 Days of CSH #1

Adrian Zinko — Thu, 20 Jan 2022 08:48:37 +0000

In this post I'm going to share some of the tools I use to help me achieve sustain outcome and eventually get towards any ambitious goal.

TL;DR
I share three tools I'll use daily throughout this challenge - Anki, Notion and Pomodoro.
At the bottom section I summarize what I've done this day regarding the post title.

Without any further ado I'd like to share a link to Github :octocat: repository, the place from where I get ideas for creating flashcards - JavaScript Interview Questions & Answers.

You can use Anki https://apps.ankiweb.net/ as a tool while learning actually anything (in theory) from another language, guitar chords, geography or... programming 😉 There is a broad use of this tool among law or medical students.

Anki uses various learning techniques to help memorize terms for longer. It's backed by science (spaced repetition, active recall testing). You can learn more about impact it makes on learning process for CS students from this article.

So, there is this one tool and one thing it help me with - effective memorizing. The next one I'd to mention is a tool for planning strategies - Notion. Following this challenge I'll use it to structure my day to day work.

The screenshot above shows kanban board I've created to track my progress on current personal project. Kanban helps me a lot (even if I'm doing house chores sometimes I use similar boards to optimize my time).
I personally use Notion also to add some notes, make bullet lists, or even collect the reviews of books/podcasts I've completed.

The last tool on my today's list is an app from App Store Be Focused. It's basically a time tracker which uses broadly known technique - Pomodoro.

If you're not familiar Pomodoro uses structured time intervals (default is 25 minutes of work followed by 5 minutes of break, then after 4 full intervals there is a long break period 15/20 minutes and the whole cycle starts all over again. You can ofc customize this interval periods to your needs, try out what suits best for you. The most important part is - it works for me. Impact it can make is successively measure by scientists. Learn more on the official website.

I try to minimize the tool chain to keep me get going with the work I have, so these three tools I've mentioned suits me the most. From time to time I jump to something new for a little while as a refresher but that's my foundation.

According to the work I've done on the first day:

I've practice some Ankies (general stuff about js fullstack),
I've built crud operations for notes on the backend for my personal app,
I've created 2 articles on dev.to

Today I'm going to:

Spend at least 1 full hour our focusing on my project
Spend at least 25 mins preparing flashcards on holacracy topic
Spend at least 25 mins preparing flashcards on fullstack topic
Study at least 20 Anki flashcards
Spend at least 1 hour on Stephen Grider course on Udemy
Read 1 full article on Medium.com
Read book for at least 30 mins - the confidence gap (from page 130)

See you tomorrow! 😉

100 Days of Coding & Scrum & Holacracy #0

Adrian Zinko — Wed, 19 Jan 2022 13:22:32 +0000

This is the very beginning of my 100 days coding (and more 😅) challenge. In this post I'd like to get the overview of whole idea, who I am, where I came from and why this challenge may can help you (and me) going forward. Let's jump right into it! 🔥

So, at the beginning of this month I've joined Software House company, which is located in Poland - Boldare as a Junior JavaScript Dev (React,Node). Previously I worked for a couple of month as a Frontend Developer, my whole programming career begun about 2 years ago.

You can learn more about Boldare at the official website.

The most curious thing for me is their work management system which have its roots in holacracy.

As a newbie in this area I'd like to explore as much as I can in the following months so I'll post daily some more insightful explanation regarding this topic.

Not only that but also I'd like to structure and consolidate my JavaScript knowledge, which special focus on backend workflow, deployment, CI/CD and more..

Throughout the next 100 days I'll follow Udemy course created by Stephen Grider - Microservices with Node and React. Also, I have some follow up personal project which is just simple notes app with login auth that I'd like to work on in a meantime.

The last thing I'd like to at least touch daily is Scrum. Currently I don't have the opportunity to work in any team as I'm just getting into company, many things are new to me, so I need to give me some time to grasp everything.

To learn & practice theory I've started using Anki flashcards. So far it's the most efficient tool for me that follows spaced repetition learning technique.

So, will see where I can get from this point in the next 100 days. I hope anyone interesting in areas I'd like to cover may get something valuable from this series. See you tomorrow 😉

Practical Approach To Testing React App With Jest - Part #1

Adrian Zinko — Sat, 15 Aug 2020 11:43:55 +0000

In this article I'd like to introduce you to a React Testing Tool - Jest. As it's well covered on Wiki - Jest is a JavaScript testing framework maintained by Facebook, Inc. with a focus on simplicity. Basically it is designed to test React components. The library that comes very well with Jest which is Enzyme - all docs available on Github repo if you want to learn more about it. Enzyme is a JavaScript Testing tool created by Airbnb for React, which helps to do assertions, manipulations, and traversals in React Components’ output.As you follow we'll cover a bunch of Jest testing paths. In the first part you'll become familiar with theory that stays behind testing as well as creating and configuring files structure for testing basic React components cases. In the future parts we'll cover best practices, snapshot testing and dive deeper into Enzyme.

This post can be extremely helpful for you especially if you're testing newbie 'cause we will start just from scratch. By the end, you’ll be up and running, testing React applications using Jest and Enzyme. You should be familiar with React in order to follow this tutorial.

Let's just jump right into it! Testing to the rescue 🦸‍♂️

Software Testing in general

Testing software can be defined as an activity to check whether the actual results match the expected results and to ensure that the software system is defect free. It involves the execution of a software component or system component to evaluate one or more properties of interest. Software testing also helps to identify errors, gaps, or missing requirements in contrary to the actual requirements. It can be either done manually or using automated tools.

Different Types of Software Testing

We can go over and explain some of the types of testing methods:

1. Unit Testing
Testing each component or module of your software project is known as unit testing. To perform this kind of testing, knowledge of programming is necessary. So only programmers do this kind of tests, not testers.

You have to do a great deal of unit testing as you should test each and every unit of code in your project.

2. Integration testing
After integrating the modules, you need to see if the combined modules work together or not. This type of testing is known as integration testing. You need to perform fewer integration tests than unit tests.

3. End-to-end Testing
End-to-end testing is the functional testing of the entire software system. When you test the complete software system, such testing is called end-to-end testing. You need to perform fewer end-to-end tests than integration tests.

Pros & Cons of Testing

As it every software mechanism also testing has advantages and disadvantages.

Pros

it prevents unexpected regression,
it allows the developer to focus on the current task, rather than worrying about the past,
it allows modular construction of an application that would otherwise be too complex to build,
it reduces the need for manual verification.

Cons

you need to write more code, as well as debug and maintain,
non-critical test failures might cause the app to be rejected in terms of continuous integration.

React Testing Tools

Jest

test runner, which can run tests in parallel to maximize the performance,
assertion library, where you do not need to install Chai, Should.js, etc. to do the assertions,
mocking library, where you do not need to install separate libraries like proxyquire, sinon, testdouble etc,
provides the facility to create coverage reports as built-in functionality. Fewer configurations to be done when using Jest.

Enzyme

can only be used with React whereas Jest can be used to test any JavaScript app,
needs to be paired with Jest or any other test runner in order to function while Jest can be used without Enzyme,
provides additional functionality when interacting with elements while testing.

Before moving onto the testing part, it would be great if you have a basic understanding of “How to create a simple React application using Create React App?” and the structure of a React App. Please refer the official documentation

Getting Started

Step 1 — Create a React Application with create-react-app

Open up a terminal in the desired path and type the following to create a new react application

npx create-react-app testing-demo

Note - npx it's a package runner tool that comes with npm 5.2+

The above command will create a React project named as “testing-demo”.

Switch to the folder created for demo testing

cd testing-demo/

This is how the folder structure should looks like

Step 2 - Running a demo test with React Testing Tool - Jest

Delete the App.test.js file from the src directory.
Open up the package.json file from the root folder and change the test property under scripts into jest.

Create a new directory named as “test” inside the root folder and create a file named demo.test.js inside the test directory. (check the folder structure)

Now type the following code segment in demo.test.js file.

it("adds correctly", () => {
   expect(1+1).toEqual(2);
});

Open up a terminal and run the tests by typing the following command.

npm test

You should see the following output in your terminal

How does it work?

When you execute npm test, it starts to run Jest.
It's a good practice/advice to name the test files either with .test or .spec

<filename>.test.js or <filename>.spec.js

In here we used demo.test.js. So the Jest has the ability to automatically detect the tests (because of this naming pattern) and run them.
This simple test checks whether when 1 and 1 are added, is it equal to 2
You can see that the above test is passed, which means our expectation has met.

Now you're on a great way to start practice with testing

In the next lecture, I'll continue with best practices, snapshot testing, and dive deeper into Enzyme.
I've got you covered 🔥
Maybe a little bit more interested in testing. What are your thoughts about testing? Share your opinion in the comments section. See you 🙈👋

WTF - What the Flutter is actually like? And how it dominates over native apps

Adrian Zinko — Thu, 23 Jul 2020 21:33:20 +0000

Flutter - Introduction

Flutter is an app SDK for building high-performance, natively compiled UI apps for iOS && Android from a single Dart codebase.

I highly recommend checking out the technical overview and Write your first Flutter app codelab to better understand the basic underlying concepts behind Flutter.

If you're coming from another frontend platform check out those guides:

To learn more about Flutter's inner workings be sure to check out Inside Flutter documentation page.

For more general information and learning resources head to the official Flutter YouTube channel. Widget of the week and The Boring Flutter Development Show (deep dive, live coding) series are especially worth keeping an eye on.

Now that you can see some of the Flutter concepts better let's just jump right into it!

Widgets

Widgets are basic building blocks in Flutter. If you're coming from React you can think of Flutter widgets being like React components.

Stateless vs. stateful

In Flutter there are two types of widgets - stateless and stateful widgets.

Stateless widgets are simple and contain no internal state. They take parameters and return the widget tree from build method.

class NameLabel extends StatelessWidget {
  final String name;

  NameLabel({Key key, this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Hello $name"),
    );
  }
}

Differently, stateful widgets do contain internal state.

They are defined by two classes - one representing widget and the other one representing the state. The reason for this is that widgets are immutable. Since StatefulWidget extends Widget it, therefore, must be immutable too. Splitting the declaration into two classes allows both StatefulWidget to be immutable and State to be mutable.\
Moreover, widgets are instantiated using the new MyWidget() syntax. If we merged both classes into one, new MyWidget() would reset all the properties of the state every time its parent update.

class Counter extends StatefulWidget {
  Counter({Key key, this.name}) : super(key: key);

  final String name;

  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('${this.widget.name} have pushed the button this many times: $_counter'),
        RaisedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

You can also see that

the state can be modified only inside setState callback
build method exists only in the state class - you can think of UI as a function of the state
you can access widget parameters using this.widget reference

For a complete look at widgets in Flutter follow widgets intro page in the documentation.

Declarative UI

If you have never worked with a declarative UI framework like React or SwiftUI you may want to check out Introduction to declarative UI.

UI layouts

To learn about UI layouts in Flutter check out Layouts in Flutter documentation page and Layout basics codelab.

Flexbox

Flutter supports building layouts in Flexbox model.

Widgets inside a Flex widget (eg. Column, Row) can be wrapped in the Flexible widget. The Flexible widget has flex property. Flutter has 3 flexible widgets: Flexible, Expanded and Spacer.

Example - row of images:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

Testing

Automated testing falls into a few categories:

A unit test tests a single function, method, or class.
A widget test (in other UI frameworks referred to as component test) tests a single widget.\ The goal of a widget test is to verify that the widget’s UI looks and interacts as expected.
An integration test tests a complete app or a large part of an app.\ Generally, an integration test runs on a real device or an OS emulator.

For more information check out page about testing in Flutter documentation.

Common patterns

Render widget conditionally in a list

return Column(
  children: [
    Text('foo'),
    if (isBar) Text('bar'),
    Text('baz'),
  ],
);

Flutter developer experience

IDE integrations

Flutter team officially supports two coding environments for Flutter - IntelliJ/Android Studio and Visual Studio Code. Read the Flutter documentation on how to setup IntelliJ integration and Visual Studio Code integration.

Useful VSCode settings

"dart.previewFlutterUiGuides"
Setting this value to true will render guides showing you how widgets are nested:
"dart.debugExternalLibraries", "dart.debugSdkLibraries"

Setting these values to false will disable stepping into external libraries and SDK while debugging.

Of course, as I mentioned Flutter is based on Dart programming language and it's better for you to at least become familiar with coding in Dart. I'll share another article specifically about some of the basics of this programming language in the future section. For know I'd like to thank you all for spending time reading this post.

What're your thoughts about Flutter? I encourage you to let me know what you're thinking wheater Flutter is new to you or you have already some experience with it. Share your opinion in the comments section below 🔥

Polish your swords ⚔📃 Quick Developer Portfolio Setup

Adrian Zinko — Sun, 28 Jun 2020 16:48:33 +0000

So, I've recently updated my portfolio website. Basically I switched to Gatsby due to its friendly environment as well as perfect compatibility with React.js and Netlify.

Few moments for the Great Gatsby

Gatsby is a React-based, GraphQL powered static site generator. Well, what does that even mean? Well, it weaves together the best parts of React, webpack, react-router, GraphQL, and other front-end tools into one very enjoyable developer experience. Don’t get hung up on the moniker ‘static site generator’. That term has been around for a while, but Gatsby is far more like a modern front-end framework than a static site generator of old.

You can read more on the official docs

In order to quickly jump in 👉 Install the Gatsby CLI

npm install -g gatsby-cli

Create a new site

gatsby new [name-of-your-website]

Change directories into site folder

cd [name-of-your-website]

From this position, you can start the development server

gatsby develop

Now it's your time to build your unique portfolio page 🔥

As a bonus tip, after you successfully build your website head over to Netlify Step-by-Step Deployment Guide for quick & easy deployment.

In my case, my previous personal website wasn't ykhym...well built for the lack of better word. This is how it looked before from the insides perspective.

Now, using React, I managed to divide my project structure to more flexible, readable components. Although I've also changed already some content the main goal was to prepare myself for future development, maybe adding some blog posts area as Gatsby works great as a CMS.

Right, I see it adds much more redundant complexity from the beginning but it's a part of my practice set, new learning skill and key for future development as I said before.

If you're willing to see the changes, as well as complete website demo, feel free to check it out

New portfolio:
Source code
Demo

Old portfolio:
Source code
Demo

The whole idea for this post was to show you that as a software developer you should always keep in mind that the tech industry grows at a very fast pace and you have to keep eye on the latest tech related releases, practice with them, decide what to choose for your own stack and don't hesitate to flip everything upside down.

Feel free to share your thoughts on this topic in the comments section. Leave some positive reaction ❤ 🦄 📖 Do you think it's always the best idea for switching to new technologies as they come and go?

Increase your productivity while washing hands with this WebDev Podcasts List 🤘🚀🤘

Adrian Zinko — Tue, 23 Jun 2020 13:18:06 +0000

Following this post, you'll find a full list of web development, software engineering podcasts (you name it, I'll have it 😉) I listen to on regular basics. Right now I'm mainly keeping eye on front end content but I'm also into AI, microcontrollers, tech startups. As a Polish person in my mind and in my blood, 🔥 I've also decided to put some Polish Podcast Influencers focused in this particular area of the topic for everyone interested. The podcasts are listed in my subjective order starting from the one I'm looking forward to the most.

Syntax

by Scott Tolinski and Wes Bos

Syntax can be defined as a set of rules, principles, and processes that preside over the structuring of sentences in any given language...Oh...Say Wat?! Ok, back on the topic. 😅 In my opinion, it is one of the best podcast resource out there produced by Web Bos and Scott Tolinski. You'll find there all the basics you need to surround yourself with web development news, feeds, best practices and fundamentals.

Check out ▶ Syntax on Spotify
Head over to ▶ Syntax Website
Strongly recommended episode ▶ Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More

React Podcast

by Michael Chan

Although the content of this podcast is mainly focused you've guessed it - on React.js library - the topics covered diving deep into software architecture and broadly described developers routine activities.

Check out ▶ React Podcast on Spotify
Head over to ▶ React Podcast Website
Strongly recommended episode ▶ Break In with Scott Tolinski

JavaScript Jabber

by Devchat.tv

Javascript Jabber is a weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more. There are always a couple of people discussing the specific area of Web Development, including interviews with experienced developers.

Check out ▶ JavaScript Jabber on Spotify
Head over to ▶ JavaScript Jabber on devchat.tv
Strongly recommended episode ▶ The Evolution of JavaScript

Allegro Podcast

by Allegro Tech

For all of you interested in the biggest e-commerce company in Poland (one of the biggest in Europe) from the tech standpoint. Developed and managed by hundreds of people this transaction platform is consistently growing in terms of best practices providing the best quality customer service.

Check out ▶ Allegro Podcast
Head over to ▶ Allegro Tech Website
Strongly recommended episode ▶ Infrastructure for 1000 microservices in Allegro

Artificial Intelligence: AI Podcast

by Lex Friedman

Artificial Intelligence podcast (AI podcast) is a series of conversations about technology, science, and the human condition hosted by Lex Fridman. Author of this podcast is open-minded and host interviews with extreme professionalism.

Check out ▶ Artificial Intelligence(AI + Lex) on Spotify
Head over to ▶ Lex Friedman Website
Strongly recommended episode ▶ Elon Musk: Neuralink, AI, Autopilot, and the Pale Blue Dot

Porozmawiajmy o IT

by Krzysztof Kempiński

First from the list fully hosted in polish language podcast which I highly encourage you to check out - either if you fully understand the language or you're interested in jumping into it in this topic area. The high percentage of episodes is focused on intervening experienced people from the not only Front-End but also Back-End Technologies, Machine Learning and workflows in known companies.

Head over to ▶ Porozmawiajmy o IT Website
Check out ▶ Porozmawiajmy o IT on Spotify
Strongly recommended episode ▶ Full stack developer

DevTalk

by Maciej Aniserowicz

Maciej Aniserwicz is a well-known figure in technology architecture, web development area. The host of the 13-weeks practical front end programme in which I've had a pleasure to participate. He also has a youtube channel - Maciej Aniserowicz - where you can find helpful content about day to day life as a software developer, entrepreneur, husband and father.

Head over to ▶ DevTalk Website
Check out ▶ DevTalk on Spotify
Strongly recommended episode ▶ TypeScript with Tomasz Ducin

DVLPR-WNBE - Developer Wannabe

by Jędrzej Paulus

Jędrzej is a podcast producer whose main goal is to learn from experienced developers by interviews with them and create a strong community of people who wannabe software developers.

Check out ▶ DVLPR-WNBE on Spotify
Head over to ▶ DVLPR-WNBE on codeboy.pl
Strongly recommended episode ▶ React is awesome! Really?

That's it for now, my dear readers! I encourage you to share your thoughts on these listed podcasts with me in the comments area below. Also, don't hesitate to update this list with your strong recommendations. 😀
This is my first post on this platform. I'll try to make it my routine habit at least once a week. 💪

In a week I'm starting my new job as a software engineer in the e-commerce company. Let me know if want to follow my journey and hear more from my extending experience on this path! 🐱‍🏍👨‍🎓