kozubek.dev

How do I share my bookmarks on the web

2020-11-15T00:00:00+00:00

Whenever I read something valuable around software engineering I save it in categorized browser bookmarks. You can find them in the Awesome section on this website as well. In this article I described how they are kept in sync.

Find the repo here

by Chiara F

I thought it would be worth sharing them with the world. As for myself, I would love to see what particular materials my colleagues find interesting.

So there are bookmarks in my browser and the platform I use to share my thoughts is this very blog. How about creating a page with a list of awesome links, kept in sync with my bookmarks so I don’t need to upload it manually each time I add a new awesome article.

This blog is using jekyll platform to create and deploy content on GitHub in a famous Jamstack manner. The process of how I create a blog post is:

create a markdown file with the article content in a blog repository
as far as the article is git pushed, GitHub handles the build process, deploy and make it available to the world. The process is so simple because of GitHub Pages & Jekyll integration

Coming back to the bookmarks, the first step was to check how I can approach them in a machine-friendly manner to automate the process. The answer I found was chrome.bookmarks api available for Google Chrome extensions.

With the above knowledge I came out with the process on how to go from awesome bookmarks to the awesome links page on my blog:

Create a chrome extension able to get my bookmarks
Send serialized bookmarks over HTTP to a simple node app
On the node app:

Clone the blog repository
Parse bookmarks and create awesome-links.md page which will be compiled to a HTML page in build process later
Commit changes and push to the repo

Wait until the page is deployed and available on kozubek.dev/awesome-links

chrome extension

Bookmarks are available as a tree, getting them and sending to the node app was pretty straightforward:

function sendAwesomeBookmarks() {
  chrome.bookmarks.getTree(async (bookmarks) => {
    const awesomeBookmarks = bookmarks[0].children
      .find(({ id }) => id === "1")
      .children.find(({ children, title }) => children && title === "awesome")
      .children.map(({ title, children }) => ({
        title,
        children: children.map(({ title, url, id }) => ({ id, title, url })),
      }));

    await fetch(process.env.API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        bookmarks: awesomeBookmarks,
        secret: process.env.SECRET, // more on that later ;p
      }),
    });
  });
}

How to handle git operations in a node app

I tried some git specific node libraries like nodegit and it was a hard experience. I felt like I used an overcomplicated tool for basic git operations, whereas you can simply run a shell command from your node script with a built-in child_process library.

const util = require("util");
const exec = util.promisify(require("child_process").exec);

async function main() {
  await exec('git clone "https://github.com/archiewald/archiewald.github.io"');
  const { stdout } = await exec("git status", {
    cwd: "./archiewald.github.io", // required if you want to run a command in a different folder
  });
  console.log(stdout); // On branch master Your branch is up to date with 'origin/master'...
}

main();

Few things happen here. Since most of the node api was built when promises were not available yet, typically it uses callbacks to handle asynchronous operations which results in hardly maintainable code because of callback hell. That’s why we wrap it with, builtin as well, util.promisify(). It’s doing a great job transforming a callback style (err, value) => ... function into a version that returns a promise.

Interestingly, there is a util.callbackify() function available as well, if you need one :)

On the other hand, the file system library has a promises API already available via require("fs").promises.

Making it secure enough

A disclaimer: I consider below solution good enough for my personal scripting project but it shouldn’t be used in production for customer-oriented web apps - keeping API Access Tokens on the client side hardcoded wouldn’t be a good idea!

I needed some pain-free GitHub integration to commit updated bookmarks to the blog repo. As I learned, perhaps the easiest to do it is passing the credentials when cloning the repository:

git clone "https://<GIT_USERNAME>:<GIT_PERSONAL_ACCESS_TOKEN>@github.com/archiewald/archiewald.github.io

But I wouldn’t dare to pass my personal, real GitHub account credentials there. I came out with a hacky solution - just creating a new GitHub user with the one and only responsibility - to commit and push awesome bookmarks updates. Then the account was added as a collaborator to this particular repo.

Another problem is how to keep my credentials out of the repository. You can create an .env file to be consumed by webpack so the api url and secret are injected in the build process:

// in .env

API_URL="awesome-links.example.com";

// in webpack.config.js:

const webpack = require("webpack");
const dotenv = require("dotenv");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
};

// in script.js:

await fetch(process.env.API_URL);

// in build/script.js:

await fetch({ API_URL: "awesome-links.example.com" }.API_URL);

The pomodoro app is out 🍅❤

2020-07-13T00:00:00+00:00

Check out on yapa.kozubek.dev

Yapa code is open-source:

by Alex Gzilla

Deep work app I am about to create

2020-03-19T00:00:00+00:00

I am creating a tool to help with focused yet healthy work with a computer. Doing it for myself because I didn’t find an app which meets my expectation in 100%. I don’t plan to make a fortune out of it, rather develop a simple open-source, free to use app.

TLDR: pomodoro 🍅 timer + todo-list + healthy habits reminder + reports to track your progress. Does it click for you? Please read further and let me know what do you think in the comments.

by Filipe de Rodrigues

Struggling to stay focused

Looking back in the past I reckon myself as a kid who was hard to distract from a cognitive task. If there was a piece of work to be made and I enjoyed it - like preparation for a math competition, physics test - it was relatively easy for me to stay focused for a few hours. That stuff was quite comparable to my current day to day work. Yet I feel now it is much harder for me to keep myself undistracted. Had anything changed since that time?

Certainly it did. To start with, I work on a computer. All day long. I don’t think this will ever change - maybe the form of what a personal computer itself is, but I am pretty sure I will be around creating/handling digital products - like many of us.

And as much as I love it and feel this is a right environment for me, being able to stay focused on an assigned task becomes much more challenging. Digital services I daily use are craving for my attention all the time. With the content, with the way they look, with the User Experience they offer. There are top paid engineers and marketers who have a clear goal - make me stay on their portals as long as it is possible and bring me back when I leave.

Deep work as a valuable skill

Another interesting perspective I got from a book Deep Work by Cal Newport. What he says makes much sense with my experience - staying focused on a task gets harder so learning it gives you a competitive advantage.

One of the most valuable skills in our economy is becoming increasingly rare. If you master this skill, you’ll achieve extraordinary results.

Deep work is the ability to focus without distraction on a cognitively demanding task. It’s a skill that allows you to quickly master complicated information and produce better results in less time. Deep work will make you better at what you do and provide the sense of true fulfillment that comes from craftsmanship. In short, deep work is like a super power in our increasingly competitive twenty-first century economy. And yet, most people have lost the ability to go deep-spending their days instead in a frantic blur of e-mail and social media, not even realizing there’s a better way.

🍅⌚

I arranged a toolset to fight with digital interruptions. Pomodoro technique is I believe the most important one. How it works? After the author

Choose a task you’d like to get done

Set the Pomodoro for 25 minutes

Work on the task until the Pomodoro rings

When the Pomodoro rings, put a checkmark on a paper

Take a short break

Every 4 pomodoros, take a longer break

It works very well for me when I’m programming or writing. Every time I switched OS I find some app to serve me :

on macOS I used beFocused
on Linux I used Gnome Pomodoro
on Windows I am using Pomotodo - actually the best among these

Clearly I can call myself a pomodoro app heavy user :)

Work ergonomics

Who made me think about it was a lecturer at Berkeley University of Computer Science course I used to listen.

We rarely have an opportunity to listen the elder people talking about using a computer or programming. So I believe if one has some piece of advice for you it worths listen:

Among the few rules he mentions, the most important one - take a break every ~ half an hour. Plays very well with Pomodoro technique, right?

These breaks we can use even further for our health. Sure there is an app for this purpose, let me introduce you Safe Eyes.

Safe Eyes break screen

It does a great job of presenting you exercise each break, preventing you from repetitive strain injuries (RSI). But, in my case, it needs to be in sync with pomodoro app as well so using it day to day was a pain in the ass.

The perfect app

What would make a great tool to enhance a deep and healthy workflow with a computer?

a tomato timer with editable work/break/long break time
present healthy short exercises to do each break
ability to put the pomodoros I have done in some context (simple todo-list and/or tagging system like #work #blog #studies etc)
statistics of how much deep work time I was able to perform each day/week
get reports presenting above with some nice looking charts (in weekly emails?)
multiplatform desktop app - would like it to run on Windows/macOS/Linux since I tend to switch between them a lot

The closest I found is Pomotodo, but it doesn’t have the healthy tips and is not so UX friendly, at least the Windows version.

About the tech

So, I am about to make such. I am excited to use Progressive Web App approach to create a multiplatform app, it seems like PWA support on desktop should bring me there ❤.

It is far from being finished but is already useful enough for me to use it - basic pomodoro timer with desktop notification.

Here it is, ~~Yet Another Pomodoro App (CLICK ME)~~ (Yapa is out! Find more). It is super simple and ugly. As long as you open it in Google Chrome on any system, you should be able to install it as a stand-alone, offline first app. It is a website but you don’t need an internet connection to use it after you enter it! This is probably the future of how apps, both desktop and mobile, will be distributed.

the ugliest pomodoro app - installable and offline first

Code repository

What next

I am about to add next features to Yet Another Pomodoro App (and think about some proper name, though YAPA acronym sounds tempting). And sure, polish it to look much better ;) Would love to get some feedback about the idea. Do you find such problems in your workflow? Do you use any tools in this area that I might check for reference? Would you use YAPA when it’s finished? Let me know guys!

Web development setup on Ubuntu

2019-12-12T00:00:00+00:00

A shortlist on how I create a basic web development setup on Ubuntu system. Not really a blog post, something to warm up after I abounded blogging for some time, definitely needed such thing, maybe you find it useful too.

by Kevin Horvat

Shell

Zsh

sudo apt install zsh
chsh -s $(which zsh)

Oh My Zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

The command could not be located because '/snap/bin' is not included in the PATH environment variable

Path error solution

Code editor

Snap

sudo apt install snapd

Visual Studio Code

sudo snap install code --classic

set up as default code editor

xdg-mime default code.desktop text/plain

git/github

xclip

sudo apt install xclip

Follow:

authenticate to github with zsh
manage multiple github/gitlab accounts - for example home with work one

yadm

sudo apt install yadm
yadm clone https://github.com/archiewald/dev-configs.git

Set powerline font in editor/terminal

jekyll

follow this

node

follow this

Create React App with TypeScript tutorial

2019-03-31T00:00:00+00:00

This tutorial followed step by step will help you understand why TypeScript + React are awesome 💪 while building a simple to-do app. I made it beginner friendly but it requires some basic React and JavaScript knowledge.

BTW StackBlitz (tool for online editing used above) is powered with VS Code and great TypeScript support. You can check most of the TypeScript features just manipulating the code there!

by NESA by Makers

TypeScript can help you create maintainable and scalable web apps. It is ready to use with React out of the box! Thanks to Create React App package with TypeScript support, configuration part is very easy nowadays.

Why use TypeScript (in React)

Recognize those silly errors

I ❤️ TypeScript for giving me instant feedback if I am wrong with my code. Look for top 10 JavaScript error. I am sure that as a web developer you know them well.

top 10 JavaScript errors in 1000 projects by Rollbar

7 of them are about mixing up your types, not accessing the right variable, object property, etc. With TypeScript, you will rarely see them! Your configured IDE will tell you about them in advance.

Another thing is code maintaining and refactor. Did you ever modified some property in your large app and went through all the classes and properties wondering what you just messed up and fixing here and there? Here TypeScript + your IDE will be your help as well.

Fits React very well

If you ever liked Angular for having TypeScript support you will love React even more. Template engine from a developer point of view is very different - in Angular you have dummy HTML-like files, in React there is JSX, turning into TSX with TypeScript. This means you get static type checking in your templates as well!

Supported via Create React App

As our prophet once announced, Create React App supports TypeScript out of the box, which makes starting a new app (also migrating from these relatively new) A LOT EASIER 🎉

Create React App 2.1 + TypeScript = 💜 https://t.co/tpb04toZ95 pic.twitter.com/zBTVb0qa3U
— Dan Abramov (@dan_abramov) October 30, 2018

Got super trendy

Just see the results from the latest State of JS survey:

State of JS 2019 - JavaScript flavors

TypeScript is gaining popularity of Flow which is a very similar library of Facebook. Even Jest, the 1st choice testing library in React ecosystem, got migrated to TypeScript.

Summing up, I heard a nice comparison on the React Podcast which was more less:

TypeScript is like a cool buddy you would like to pair program with 💪

How to start 🚀

The right IDE

For your best experience, you should use VS Code. It is Microsoft open-source IDE and TypeScript is from Microsoft as well. You will have the best integration there and I know people moved from WebStorm to VS Code since they started using TypeScript.

TypeScript is all about developer experience, what is going on in your IDE. How fast and well will you be informed about errors you are about to make

Create React App

We start with lunching create-react-app project. It is recommended by CRA creators to use npx instead of installing create-react-app globally, to make sure you start with the latest version.

Important! Before running below make sure you don’t have CRA globally installed anymore! You might encounter issues like here
npm uninstall -g create-react-app

We will make use of a fresh new --typescript flag.

npx create-react-app react-ts --typescript
cd react-ts

and then your TS based app should appear. Check if it starts with npm start. Then have a quick look at how it differs from regular CRA starter:

.ts and .tsx files

.ts are regular TypeScript files, basically replacing .js. While using .jsx for files containing React Components with JSX code is not mandatory, with TypeScript you need to always use .tsx when you write TSX code.

tsconfig.json

This file indicates that the directory is a root of a TypeScript project. It is a starting point for compiler so it contains some configuration options:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

You can look up what particular options are for in docs.

An interesting one is strict which is provided by default in CRA configuration. Following documentation:

Enable all strict type checking options. Enabling –strict enables –noImplicitAny, –noImplicitThis, –alwaysStrict, –strictBindCallApply, –strictNullChecks, –strictFunctionTypes and –strictPropertyInitialization.

Strict mode enables you to use the power of TypeScript and not neglecting type checks possibilities. You might not turn it on if you transfer your JavaScript app to TypeScript but for a start it is definitely recommended.

Coding the app

Let’s clear the app, delete App.css and leave only a dummy skeleton in App.tsx .

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <h2>Hello React TS!</h2>
      </div>
    );
  }
}

export default App;

So far it looks identical to a JS React component. Next thing we might consider is what data will our app keep. Basically, some tasks. We will define a model of a task in a separate folder which is a good practice. In src/models/task.ts:

export interface Task {
  id: number;
  name: string;
}

You might see people adding an I prefix to annotate that this is an interface (like ITask here), mostly coming from Java or C# background. I wouldn’t consider it a good practice. I didn’t see any case ever in my TypeScript code to use it and certainly we are good with simple Task here.

Creating a task

Let’s create our first component in components/NewTaskForm.tsx

import React, { FunctionComponent } from "react";
import { Task } from "../models/task";

interface Props {
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onAdd: (event: React.FormEvent<HTMLFormElement>) => void;
  task: Task;
}

export const NewTaskForm: FunctionComponent<Props> = ({
  onChange,
  onAdd,
  task
}) => (
  <form onSubmit={onAdd}>
    <input onChange={onChange} value={task.name} />
    <button type="submit">Add a task</button>
  </form>
);

You need to annotate a type to NewTaskForm component, which is FunctionComponent imported from react . The funny <> brackets indicates that this is a generic interface. Thanks to this you can get type checking inside of the component in your TSX code. You are supposed to put your Props interface, which describes what properties this component gets from the parent one.

Props interface looks bit cryptic with these callbacks. onChange property expects to get a function with one event argument. If you ever dealt with forms in React you probably know this one well. We will use data from the event object in the parent component, so we need to annotate its type. It’s not that hard as you might think!

Just move your mouse over the form onSubmit and your IDE should help you to find out what property type is expected. We pass a callback to form instead of a button to get action on both clicking the button end hitting enter after typing.

VS Code + TypeScript being helpful with callback types

Anyway, if annotating types is somehow blocking you, or isn’t possible at the moment, you can always get away with:

// TODO: annotate event types properly
interface Props {
  onChange: (event: any) => void;
  onAdd: (event: any) => void;
  task: Task;
}

Bringing to life

We will use React State to handle tasks changes so we need to annotate a type to it as well. In src/App.tsx:

interface State {
  newTask: Task;
  tasks: Task[];
}

class App extends Component<{}, State> {
  state = {
    newTask: {
      id: 1,
      name: ""
    },
    tasks: []
  };

  render() {
    return (
      <div>
        <h2>Hello React TS!</h2>
        <NewTaskForm
          task={this.state.newTask}
          onAdd={this.addTask}
          onChange={this.handleTaskChange}
        />
      </div>
    );
  }
}

This time we annotated State interface and put it into a generic Component interface as a second argument. The first one is Props again, since App component doesn’t have any, we put an empty object.

Since we don’t need to perform any tasks in the class constructor we are ok to use a class property state to define it. Just look how TypeScript is making sure we declare it properly, say we forgot to initialize tasks with an empty array:

TypeScript helping us with initializing state

Cool stuff!

Lets add some methods to make NewTaskForm component work and finally render something:

private addTask = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();

  this.setState(previousState => ({
    newTask: {
      id: previousState.newTask.id + 1,
      name: ""
    },
    tasks: [...previousState.tasks, previousState.newTask]
  }));
};

private handleTaskChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  this.setState({
    newTask: {
      ...this.state.newTask,
      name: event.target.value
    }
  });
};

We mark them private since this is how we annotate methods which shouldn’t be accessed outside of the class. state property doesn’t have such prefix, so it’s public - this is a default behavior you can read more about here. Try to mark it as private, TypeScript won’t let you!

If you write them by yourself, you will see how helpful TypeScript is with autocompletion. If we would annotate event as any, we wouldn’t get any help with it, just with React setState method.

You should see only a simple form where you can name a task and add it since we do not render this.state.tasks yet. Let’s make it happen!

Render tasks and delete

To complete our simple app let’s add a method to delete a task.

private deleteTask = (taskToDelete: Task) => {
  this.setState(previousState => ({
    tasks: [
      ...previousState.tasks.filter(task => task.id !== taskToDelete.id)
    ]
  }));
};

Then a task list with an item inside:

In src/components/TaskList.tsx:

import React, { FunctionComponent } from "react";

import { Task } from "../models/task";
import { TaskListItem } from "./TasksListItem";

interface Props {
  tasks: Task[];
  onDelete: (task: Task) => void;
}

export const TasksList: FunctionComponent<Props> = ({ tasks, onDelete }) => (
  <ul>
    {tasks.map(task => (
      <TaskListItem task={task} onDelete={onDelete} />
    ))}
  </ul>
);

In src/components/TaskListItem.tsx:

import React, { FunctionComponent } from "react";

import { Task } from "../models/task";

interface Props {
  task: Task;
  onDelete: (task: Task) => void;
}

export const TaskListItem: FunctionComponent<Props> = ({ task, onDelete }) => {
  const onClick = () => {
    onDelete(task);
  };

  return (
    <li>
      {task.name} <button onClick={onClick}>X</button>
    </li>
  );
};

Since I don’t use any event item in deleteTask method I decided to not pass it, rather just the task itself. This might be handled many other ways :)

Summary

After we add the TaskList component in App.tsx we are done with creating a simple to-do list app with React + TypeScript! I am so excited how Create React App with --typescript flag made the configuration part so simple. As you see, writing components, TSX, handling state doesn’t differ much! After you combine it with static types with superfast feedback from your IDE you might get in love in TypeScript like me ❤️.

There are many other areas worth explanation where TypeScript helps. Refactoring, handling external libraries and so on… I will made next parts of this tutorial which will emphasize these parts.

I encourage you to write the code by yourself in your IDE, see if TypeScript helps you and play around with the app. In case of any problems - the comment section is here below with me eager to help 🙂

How to keep programming related notes

2019-03-11T00:00:00+00:00

Inspired by “The Pragmatic Programmer” book and “sharpening the saw” idea, I will write some posts on tools I use every day to be a more efficient developer. Lepton gist client is a way to keep your notes organized.

by JESHOOTS.COM

Why? 🤔

Once I found I need a systematic way to keep notes. There is something to learn each day and keeping notes:

helps to memorize stuff important for you,
with writing you go to another level of understanding since you need to explain it to your future self (at least),
if you keep it organized you will easily find an answer for a problem you already solved once but forgot.

Above combined makes you a more efficient developer 🤓

Options:

Notebook

I keep some stuff written in notebook or post-its. With a pen and paper you can express your thoughts quick and easy.

But you don’t want to keep code snippets or shell commands in your notebook to use daily. You would rather put that stuff in more copy-paste friendly environment.

I still use a notebook with my calendar to sum-up challenges I met every day. I write them as short tags I can recognize in few next days. When I find the time I evaluate them into digital notes with code snippets or so.

Google Keep

Someday I started using Google Keep. It is a simple app, has a nice UX and integrates easily with Chrome, Gmail, Google Calendar. What I missed is a code snippets/markdown support which is crucial to keep software related notes. The same goes for Evernote and every usual note capturing app.

Github gists

Most of us developers use Github every day to store git repositories and handle code development. The lesser-known Github feature is gists, they are something more light - you can keep code and markdown snippets there and then share easily.

But it lacks good UX. You can’t categorize them, can’t search through them quickly. So I use them as a storage for my notes + I can embed them easily in HTML as below:

Final choice - Lepton gist client!

Finally, I found an open-source desktop app which meets my expectations. Lepton gist client synchronizes with your GitHub account and lets you handle your snippets more efficient:

add a new one with keyboard shortcuts,
categorize via hashtags and snippets type,
search through your gists easily,
do all above with intuitive keyboard shortcuts.

Handling gists is a breeze now 🌊 Check out a short video on that below:

How to fix an npm package

2019-02-23T00:00:00+00:00

It might happen that an npm package you want to use has some bugs. Should you just wait for maintainers to fix them? Sure not 😉. You can eliminate the bug and host package by yourself. Then create a pull request and possibly become an open-source contributor 💪.

by rawpixel

Bugs happens 🐛

Recently I used a react-ga npm package to connect React based Single Page App to Google Analytics services.

To start I followed an usual procedure, including react-ga in package.json file. npm install went well, then on npm start:

Failed to compile.

/Users/arturkozubek/projects/orbicobeauty-web/node_modules/react-ga/types/index.d.ts
(87,20): A rest parameter must be of an array type.

🙀 This is unusual… Clearly there is a TypeScript related bug in this package… Having a look on the mentioned index.d.ts file, line 87:

export function ga(...args: any): void;

Well, I guess I just follow the message of TypeScript compiler and make it:

export function ga(...args: any[]): void;

So I saved the changes locally and tested. It worked! But you can’t just rely on modifying a node module source files… You probably ignore node_modules files in your repo, which is a good common practice. Any time you (or your colleague) reinstall the package it will be downloaded again from original source.

Fork and fix 🍴

Usually (if not always, not sure) package source code is served on github. What’s more, you can point a github repository in package.json to download a package from there. Can you see where it goes 😉?

I forked the package,
cloned to my machine so I can edit the source code git clone https://github.com/archiewald/react-ga.git,
created a fix branch, committed the fix,
pushed it to my forked repo.

In package.json, instead of version number, I pointed to the repo I just forked and created, with fix commit hash to make it explicit what code I refer to:

{
  ...

  "react-ga": "git+https://github.com/archiewald/react-ga.git#e9d592e940260017f23815bcee9703a2a4866705",

  ...
}

After re-npm install I could enjoy implementing this great package!

Contribute 💪

Don’t be afraid to share your fix with the community! Raise an issue and create a pull request with your changes. Once you implemented them in your forked repo, it is easy!

Fix => contribute

Being a frontend developer for 1 year

2019-01-06T00:00:00+00:00

So here it is, another article summarizing how the 2018 was :) For me it was a very special time, since exactly on December 2017 I started my first job as a frontend developer. It was an intense year but I am happy to say that I’ve learned a lot, I feel bit more confident about my programming skills and look forward to learn new.

by Cristian Escobar

Software developer is a very demanding job. I worked before as a so-called Sales Engineer and as a Technical Support Engineer, each for around 1 year long. And I can say with no doubt that as a frontend developer I worked hardest, had to learn most and it was the most stressful time in my short professional career. But this is what I wanted - to have a challenging surrounding I can grow and eventually get well rewarded for my work.

What I like? 😍

I feel I work as a real engineer. I get specifications and transform it into solutions with my skills. Coding is my craft which I can polish every day, no one can take it from me - this gives me a great feeling of freedom.
Learning in IT feels much easier then in other businesses I worked. Literally, every person I met was eager to share his knowledge with me. Obviously there is a ton of materials in the net you can learn from. If you are lucky as I am, you will find a company which cares for a great growth environment as codequest does 🎉.
I am amazed by the power of open source, how much tools we get for our everyday work for free. It is really different from a Factory Automation business for example. There are PLC programmers who don’t have such easy ways to share their code with git, don’t have libraries for every problem they face, so many tools for project management etc. BTW I think this is a great niche for startups 🚀.
Javascript community in Warsaw is awesome. You can attend some meetup almost every week I think. Most of the time you will find well prepared speakers with a ton of knowledge to share and free snacks and beverages 🍻🍕. There is a special one I feel most grateful - WarsawJS I will write more about in the credits part :).
There is a huge demand for software developers on the market what make me feel secure about my career and finances.

What I don’t like? 😕

It was a really stressful time for me, especially at the beginning. With weekly sprints and daily standups I felt constant pressure that I need to provide a value in a short amount of time. Sure it got better after a year with my skills and self-confidence growing. If you are about to start working as a developer, just be prepared it might look the same for you :).
Impostor syndrome is a thing! I constantly felt I don’t belong here, that I lack some abilities, I am not smart enough, not fast enough, will not ever learn something etc. I still feel like this sometimes. I think I just got used to it and got an understanding that this is a common feeling in this dynamic IT industry.
I feel frontend stack is over-complicated. Because of so many libraries and frameworks available, there are tons of ways to do the same thing and multiple different stacks to learn. I feel it all should be much simpler. On the other hand, the simpler it gets then the less job will be there for us, frontend developers 🙀

1 project per month - how it went 🤔

There was a challenge I took in 2018 to make a blogpost about one technical project I made every month. I managed to write 9 posts, so for this part I made 75%. On my github there are few more projects made on WarsawJS workshops, which could make it for a blogpost after some polishing:

Count them in and we have 12! 🚀

Credits 🙏

It is a good moment do send kudos to people who helped me in the last year:

codequest - a great company I work in, I was really lucky I applied there and got hired as a freshman. Let me point out how much support I got:

2 interesting projects I was involved in, starting from their planning phase - no legacy code!
great mentorship by a skillful senior developer,
individual growth path with constant feedback from mentor and company heads,
few hours a week to spend on projects/courses of my choice for my individual growth, some of them were described here on this blog 💪,
lighting talks each week,
atmosphere of friendship and helping each other.

WarsawJS - local community giving so much to developers in Warsaw (not only). Extremely positive organizers make every event a pleasure to attend. Personally I participated in:

monthly meetups,
workshops - really cool events where you get a pro training in some frontend related topic for a fraction of usual costs. You can find what we did on each on my github. There is a post I wrote about one here.
slack group - I believe you need to attend some event to get an invitation. There is a lot of going on, you can get advices from other members of WarsawJS community, mostly frontend professionals who are really helpful!

There are even more initiatives you can read about here.