JS be fun!

How to recognize when you're ready for being a senior developer? Well, it can come gradually but there are some signs: You are given more and more responsibility and trust. Well remember that nobody trusted you when you were a junior dev? And they were given to you only some not very important things. As a mid developer you would usually still feel this kind of hierarchy and superiority from more senior developers. And now - when a team trusts you and gives you most important parts of software - this is a sign that other people perceive your seniority. You often mentor other people in team. As a junior dev, you are taught by others, as a mid dev, you're doing your thing, as a senior dev, you help others to be more productive. You're starting to see things in more holistic way, you can take programmer perspective but also business perspective or look from perspective of end user. You become better communicator and help other people on your team to communicate ...

Front-end is often overlooked. People treat it as it would be super trivial or something that is so dirty nobody wants to touch (back-end developers often have this kind of disdain for front-end). When you have such negative views of front-end dev in your team, you would have self full-filling prophecy. The truth is different - front-end in 2023 can be as professional as "real" programming. But you have to treat it seriously. Let's dive in and check if you have things below in your front-end project: people - when you need back-end code, you need back-end developer, when you need front-end, you will need a front-end developer. And you need good developers with strong skills and professional responsibility. obvious things - Git, package.json, probably bundler (e.g. Esbuild, Webpack etc.), CI/CD pipeline for deploying tests - front-end code is still a code, so you can write unit tests for many things in frontend. Though unit testing GUI maybe won't be...

Software architecture needs boundaries. But what does it mean? Well. It means that when you have many things in your app - multiple classes, multiple modules etc. you don't want them to depend freely on each other: But you want something more similar to this: Notice that on both images there are 6 boxes. On the second image though we have clear boundaries of which modules can communicate with which other modules: So basically you could say that I drew aggregates and aggregates roots from DDD(Domain Driven Design), but I think this approach is not limited to DDD. You don't need to practice full blown DDD to create such boundaries in your project. You could similar approach e.g. for separating groups of React components. But what boundaries mean in React app? State - if you're lifting state up, you lift only to the boundary of subtree Props - if you make prop drilling, you limit this practice to boundary of "aggregate" Context - you limi...

If you're a junior developer , don't be afraid of asking questions. How does particular module in project work? There's things that are not on the internet. And other programmers have knowledge you need to be good junior developer. But when you have your answer, write it down, so that you won't be asking the same thing twice. Remember also about internet, documentations, source code, issue tracker... sometimes you don't need to ask if you can check it yourself. But overally asking is way to go. There's many thing specific for project (e.g. requirements) that you won't predict if you don't ask If you're a regular developer , you still will need to ask questions if you don't know something, but you need to be more proactive in your communication. You shouldn't be only focused on your task, but communicate to help other people or to gain insights about project/its progress/implementation details/architecture approach etc. It's time to be m...

Now I'm learning how to make REST API in Next.js It turns out that you have to create route.js/.ts file somewhere in your app folder (even in some deep folder). So it's somewhat like page.jsx/.tsx. In this file you have to export functions that are called same as HTTP method. So if you want to handle POST method, you have to export POST function. And it's pretty easy e.g. import { NextResponse } from 'next/server'; export async function POST(request) { const d = await request.json(); return NextResponse.json({ok: true, d}); } first I coded something like that: const d = await request.json(); return NextResponse.json({ok: true, d: await request.json()}); but this generated error - error TypeError: disturbed at NextRequest.blob (node:internal/deps/undici/undici:1795:21) at NextRequest.text (node:internal/deps/undici/undici:1813:33) at NextRequest.json (node:internal/deps/undici/undici:1817:38) It turns out that you shou...

Learning about sending/receiving HTML forms. I rarely write forms nowadays but it's useful skill to have. Express side Created simple Express application, how could I receive form fields in it? Well, it's not straightforward, I had to use body parser const express = require('express') const bodyParser = require('body-parser') const app = express(); app.use(express.json()) app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})); app.post('/', (req, res) => { console.log(req.body); res.send('OKEJ!') }); //... Which always seemed strange for me. Few years ago I used Express and I thought maybe in 2023 this could be more simple. I mean, ofc it's few lines of code on beginning of project, but still. Too low level. I kind of expect that such basic thing would work outof the box. HTML side Right now I'm sending this form via HTML but what if I wanted to send via fetch? Well I had problem with sendin...

I'm learning how to create middleware in Next.js app router. https://nextjs.org/docs/app/building-your-application/routing/middleware There's one middleware per project which was WTF for me, but they write that you could put some ifs in your codebase: https://nextjs.org/docs/app/building-your-application/routing/middleware#conditional-statements so maybe it's not a limitation after all. First I used NextResponse.redirect but this changed my URL so I used NextResponse.rewrite so I am returning some content but URL stays the same I haven't play with cookies or headers yet And authentication - big thing to know. Besides I wonder where to put data fetching in my SSG app. I'm making something that read some files on disk and I don't want to fetch same JSON file over and over. I thought maybe I could read data in middleware and pass to views but I think this is not really how you should do it in Next.js (well, there's possibility to pass data to routes...