People can't define all the possible directions information shapes an opinion. Did you ask yourself why a text was written? What goal did the author follow? There are no facts, only interpretations, and it's alluring to perceive someone's perspective as a fact. Every author tries to deliver their ideas but the author's unique experience already frames them.

Even after understanding most of those ideas, did the author have other motivations rather than merely delivering information to you?

Do you agree or disagree with the author and why? Disregard this exercise and you consume information automatically without constructing and outlining your opinion. Neglect creating your attitude and you may discover you don't have many of them. Or, you don't have any of them at all — only those perceived and formed automatically but not yours.

Ask yourself too.

From today's perspective, it's both good and bad. It's good because humans can spend fewer resources on the same amount of work. It's bad because some people will be looking for new jobs and won't be able to find those: why pay someone for doing the routine work if a machine can do it much cheaper and faster?

To tackle the bad part, humanity should evolve: in its beliefs, systems they build, and concepts they operate.

The "evolve" part is the difficult one. To slightly initiate on that matter: humans require money to operate daily. To receive money, humans should bring value to society. What does society perceive as value? Is it a human that can do some work for others or the human itself? If we value the current operational value(=human work), a machine can bring that value for much fewer resources. If we value a human itself, we have the option to see an interesting future.

It allows us to make nonlinear stories. It can be presentations, fiction, or text-adventure games. In a nutshell, Twine creates an HTML file with all the content. So, it looks like a usual web page, and the tool is the constructor. You can upload such a "website" on the web or mobile platforms, i.e., anywhere that can parse HTML.

If you're particularly interested in games / interactive fiction, see an extensive collection of them. So what sort of games are possible? All of them since we can add Javascript. However, the easiest way is to do text-adventure games. Why? You don't need to program anything or much. You add stories and connect them in a meaningful way using links. I.e., if you choose "A", the story "AA" will be shown, if you choose "B", the story "BB" will be shown.

See also what you can create with the tool from their docs.

Creating such a page takes a few minutes on the Twine website(you can do that online). You can add Javascript, videos, music, images, customize styles via CSS and do the linking and playing around. It's a great way to start. Next, I will show you a different approach if you're used to coding in any developer's editor and want version control.

Try online first, especially if your story/game is small and only needs a little custom functionality.

Why you may need Javascript

You can go without it and feel fine. But if you have custom stuff, you'll use some macros and scripts. What are they? Imagine Twine as a core, but it has various engines that do things differently. It supports four such engines(story formats) to make the creation process more accessible. Each of them varies in complexity. In this article, I'll be using SugarCube.

This story format has many built-in things you may need. For example:

1. Saving a game, resuming it from a save.
2. Various events to react to. E.g., when a story is rendered, started rendering, etc.
3. Macros, i.e., useful built-in blocks/functions. For example, buttons, custom links, conditional rendering, setting variables, DOM manipulations, etc.
4. Audio handling.
5. And many other valuable things.

A Twine project in a developer way

Let's create a simple project where we want to use custom Javascript and CSS styles, but more importantly - we want to have version control! I don't use the tool's online or desktop version because I can only manage stories as files and have their versions by commit.

You'll need to install Tweego, a tool that can parse stories as files in any preferred text editor. Be aware of its limitations, though:

1. When writing this article, the last update of Tweego was two years ago.
2. Thus, you may not have all of the features from the supported story formats(e.g., Sugarcube).

Now you need to create a project folder:

$ mkdir twine-project
$ cd twine-project
$ git init

You can move the Tweego executable to this folder as well and add it to .gitignore

It's up to you how to organize files now! An example structure may look like the following:

.gitignore
README.md
bin/
src/
├─ config.tw
├─ styles/
│  ├─ menu.css
│  ├─ main.css
├─ modules/
│  ├─ menu/
│  │  ├─ menu.tw
│  │  ├─ menu.js

In the bin folder you have the Tweego executable to build the output to HTML(we'll get to that). All the story(game)-related code is under src folder. Tweego will put all Twine(`.tw`) files, CSS styles, Javascript scripts into one HTML. Therefore, it doesn't matter what project structure you have.

Twine format

Now, closer to the coding: what is config.tw? This is where your code will be in Twine format. Take a look at the specification. You may name this file whatever you want. It's named config for readability. There, we specify the settings for our game:

:: StoryTitle
My first game

:: StoryData
{
	"ifid": <a serial number of your game>,
	"format": "SugarCube",
	"format-version": "2.30.0",
	"start": <a name of the story that will be shown first>
}

:: StoryAuthor
<your name if you want>


<<script>>
// in case you'll need to have 3rd-party scripts
// remove this <<script>> section at all for now
importScripts(
	'https://cdn.jsdelivr.net/npm/chance'
)
<</script>>

You need to generate a serial number for your game, i.e., IFID. Read more about how to do that here. But for now, you can use 0000A000-A0E0-00C0-00B0-CF000E000D0E to skip this boring step.

format tells Tweego which story format to use. We'll use SugarCube. format-version is a version for this story format, currently supported is 2.30.0 only. However, there are newer versions(a limitation of Tweego).

start is a story that will be shown first. Let's create a file start.tw with this content:

:: StartOfMyGame

This is the first screen of my game, yay!

[[Start playing]]
[[Read about the author]]

The :: here indicates the ID of your passage(i.e., a page). It can be anything, e.g., :: start-of-my-game or :: something like this. Now that you have the ID, change your config.tw to have:

"start": "StartOfMyGame"

After the passage(page) ID, you do whatever you want. In our case, we wrote, "This is the first screen of my game, yay!", and it'll be rendered as regular text, that's it! The [[Start playing]] thing is a link to another passage(page).

To build that to HTML, run Tweego(it'll be watching for files changes):

$ ./bin/tweego -w src -o ./output/index.html

Here, we're telling it to watch the src folder and build an output HTML into the output folder as index.html. Run this command, and you'll see the HTML output in that folder. Don't forget to add output to .gitignore. Open output/index.html in a browser and you'll see something like this(with a more dark background color):

We create the links, but we also need to create such pages. So, we need to change the start.tw:

:: StartOfMyGame

This is the first screen of my game, yay!

[[Start playing]]
[[Read about the author]]

:: Start playing
<<back>>
It's another page called "Start playing".

:: Read about the author
<<back>>
I'm the author. This is my page.

We've added two more pages, so whenever you click on, for example, "Start playing", you'll be redirected to the "Start playing" passage:

We see a new link here - "Back"! <<back>> is a SugarCube macro that redirects a user to the previous passage(`StartOfMyGame`). It's a more convenient way of doing that than storing a navigation history each time.

We might create these two new passages in the other files or create all the game passages in one file. It doesn't matter because Tweego puts all of the files together into a single HTML file. You don't need to care about importing something!

Adding Javascript to Twine stories

Let's imagine we want to store some information about a player's choices. There are two approaches:

1. We may use the <<set>> macro.
2. We may use Javascript.

When using <<set>>:

:: StartOfMyGame

This is the first screen of my game, yay!

<<link "Start playing" "StartPlaying">>
	<<set $choice to "StartPlaying">>
<</link>>
<<link "Read about the author" "AboutTheAuthor">>
	<<set $choice to "AboutTheAuthor">>
<</link>>

:: StartPlaying
<<back>>
It's another page called "Start playing".
The choice is <<= $choice>>

:: AboutTheAuthor
<<back>>
I'm the author. This is my page.
The choice is <<= $choice>>

A few new things here:

1. <<link>> macro does the same as [[ ]], but it adds more customizability. In our case, we kept the link text, but indicated a different passage ID(`StartPlaying`, e.g.). Also, we can do something when a link is pressed, e.g., a <<set>> instruction below.
2. <<set>> macro stores a variable.
3. <<= $choice>> is a macro to evaluate expressions. In our case, it's displaying $choice variable we set before.

We can achieve the same using Javascript(however, it seems unnecessary complicated in this example):

:: StartOfMyGame

This is the first screen of my game, yay!

<<link "Start playing" "StartPlaying">>
	<<script>>
		State.setVar('$choice', 'StartPlaying (Javascript)')
	<</script>>
<</link>>


:: StartPlaying
<<back>>
It's another page called "Start playing".
The choice is <<= $choice>>

I removed the second passage to not duplicate the code. Here are a few new things:

1. We still do the scripting inside <<link>> macro. But we use <<script>> macro now. Inside of it, we use a global object State's method setVar which does the same as <<set>> in the previous example.
2. We still display the $choice variable not using Javascript, but we could find that HTML block using jQuery(which is built-in in SugarCube scripts), and then set the value of it to $choice, but it's unnecessary.

When you use Javascript, you have access to the story format's APIs, so it's more customizability. However, you may not encounter such complexity in your game.

That's it for now! There are more things to do in a game, of course. But you have the documentation and tools to discover and learn more independently.

See also why I use Next.js in my projects.

Advantages of React.js

If you don't know what React is, it's an instrument that simplifies the development of web pages. It allows you to build components(thus, separating your pages and UI elements into convenient parts) using an advantageous markup(JSX).

Angular and Vue do the same job with some implementation differences. However, these tools bring us convenience in developing the web.

With React, it's simple to start a project(use create-react-app), and we have a bundler and a compiler. The next step is to run the app with one command. "We got it. It's simple, fine, fine!"

To compare React and Next.js, let's look at what Next allows us to do.

Next.js benefits

A satisfactory tl;dr would be: "Next.js is React but with more features." Next is a framework that uses React. React is a library that gives you the pros you read above, but also it gives you freedom of choice. You may use a different compiler or bundler, or you may use it in the react-native platform. Also, you choose your set of tools: a routing system, an SCSS compiler(if you need SCSS over CSS), and so on.

Next.js gives you React but with an improved developer experience. You don't need to spend time making the choices. But if you want, you can, of course.

Let's look at the specific benefits of Next over React.

Routing

Why care: you don't need to spend time choosing a router. There are many routers for React, and you may not know the best fit for your situation.

Next has the router built-in. You only need to put your pages in the `src/pages` folder. So, the "contact.tsx"(`tsx` is a JSX with Typescript) file will be available as a page at "yourAppAddress/contact". There is dynamic routes support too.

Static pages generation

Why care: if you need static pages for your app(e.g., a landing page that leads to the app), and you don't want to make them dynamic(because of the performance), you'll need to configure a server that will serve HTML pages in addition to your React app.

You can generate static pages with Next.js because it has a built-in server.

Server-side rendering

Why care: the same thing as above, except that you want to generate a page upon each request.

Static generation outputs the HTML that will be reused on each request. The Server-side rendering method will generate HTML upon each request. The former is recommended because of better performance.

Data Fetching

Why care: if you want to fetch data skipping CORS or get data from the database directly from your app or read files, you'll need a server.

Next.js data-fetching methods allow you to do all of that without configuring a server. For example, you can generate a static page using fetching local files at build time. Or, you can request a third-party server omitting CORS because Next has an intermediary - an API server.

Image optimization

Why care: you don't need to think about image optimization. I.e., how to reduce an image size, what format to choose, and how to lazy-load the images.

There are usually two apparent problems with images:

1. Image size. I.e., reducing a 3MB JPG into a 40KB Webp.
2. Loading them after a page is rendered to reduce the network load.

Next solves these problems for a developer, so they can think about the other parts of the app. All the images inside that use `next/image` will be optimized and lazy-loaded. Also, you may set a loading priority for each of them.

It uses SWC

Why care: you need faster build times.

Next uses SWC, which is, according to their claim, "20x faster than Babel on a single thread and 70x faster on four cores". Such speeds are a good enhancement during build times and "hot" reloading.

Built-in ESlint

Why care: you spend time configuring ESlint.

Imagine you wrote a few lines of code and already have the lint issues warnings.

Built-in TypeScript support

Why care: you want to write in Typescript, but configuring it takes some time.

This feature is a huge dealbreaker for me because configuring Typescript takes time. Sometimes it's merely installing the package(`npm install typescript`), and adding the basic `tsconfig.json`. Still, you need to configure it correctly according to your project needs. Since you have various files in a Next.js project(stylesheets, `public` files, JSX, js), imagine going through them to figure out what can be ignored, what rules(configuration) to add, and then to have to break changes with the framework updates.

Next.js does it for us, yay!

Environment Variables

Why care: if you want to store some private information like secrets, API keys, etc., and you don't want to expose them in an app's bundle. You may create a server to pull that data from or use some third-party provider, but it takes time and one more place for your code.

The framework supports `.env` files: create a `.env.local`, add the secrets, and nobody will see them. You may also expose some by prefixing them with `NEXT_PUBLIC_`.

Scripts handling and performance

Why care: you're thinking about lazy-loading some Javascript scripts(3rd-party ones, too), loading them first, or setting any other priority.

Next.js can do all of that if you use `<Script>` instead of the standard `<script>`. Also, it can offload the scripts to a web worker using Partytown.

It has a server

Why care: you need a server environment. E.g., to make database queries.

We talked about it in the Data fetching section, but it's a good point to highlight one more time because you may need a server for not data fetching only. For example, maybe you need to do some filesystem-heavy logic and then fetch the results via Next.js API server.

So, why React, then?

Next.js has more features than I described here(those I like personally and wanted to highlight). So, we come to the question of why we need React when starting a new project.

Sometimes, you don't need such a beast for a simple use-case. For example, if you have a single static page and you don't fetch any data. Also, you don't have much dynamic logic. Thus, there's no need to bring all of the mentioned features because you need to learn the framework(though its docs are great) and the resources to support the build overhead. I.e., why configure the Next.js CI process if you can have merely an HTML page?

Choose Next.js for a better developer experience, so you don't need to spend time configuring some tools but coding.

Hint: you may find actionable advice at the end of this article.

I missed the details: what exactly do economists and mathematicians calculate? How do musicians and actors make money? Is it interesting to be an engineer or designer? How to know the answers to these questions when you don't have much experience?

Lack of knowledge

Many students don't know how they want their life to look. And if they do, their plan will probably change in the future. The same applies to adults. Our goals change. The things I enjoyed ten years ago today may not be so enjoyable because I find new things to want more.

The problem(when choosing something now) is that our desires change when we change. And the latter happens constantly.

The students' problem when pondering "what profession should I choose" is that they don't have much data about how they, society, and the world function. I don't know many things, but the information I collected through the years, career, communication with people, and books helped me better understand what I want and where I want to be in the next few years.

It starts with the most meaningful question

What do I want to do in life? "I enjoy eating, playing games, and watching movies, but that won't make me money" - I thought. So I should get a job somewhen. And for this, I need to go to college or university(do I?). But why do I need money? To live, in general: get food, have a place to live, and if something is left, I may spend the rest on something I enjoy.

So I have things I enjoy doing, and I should have a job that pays the bills. Maybe I may combine the two? So now I have a plan:

1. Get a job that pays the bills.
2. Enjoy things I like doing.

Getting a job that pays the bills

Many people get this step wrong: they study at a university or college to get a waiter's-like job. Some of them pay a lot for such an education. Then, they pay the debt by working a waiter's-like job (while in and) after the university.

Many jobs on the market require a human's basics: eyes, mouth, and ability to speak. Then, some jobs require more domain knowledge. But, still, one doesn't need to study for five years for them. And some jobs require you the fundamentals and domain knowledge - doctors, for example.

So if I didn't know what I wanted to do, I'd find some entry-level job that could pay me for rent and food. From there, I might research the market and myself better.

If I enjoy programming, I can learn it for free and get a job. On the other hand, if I tried this path and didn't like it, I may try copywriting and see how it goes.

If I didn't know what job I might take, I'd go to a jobs aggregator website and scan all the job postings I see there. It gives me an overview of the current market needs. For example, I know that a YouTube blogger will pay me to edit their videos - now I know how much money I may be paid for such a job. Or, I know that a restaurant owner will pay $Y per hour if I bring food from the kitchen to customers' tables.

University/college approach

When choosing a skills direction first, for example, I want to be a singer, I study first, then look at the market needs and don't understand what the world may pay me.

If I did the market research first, it's an excellent way to go: I know what skills I need and study them.

If I don't care about money (because I know I can find any entry-level job anytime) and want to pursue the things I enjoy(e.g., singing), it's also a good approach - in this case, though, I flip the priorities order. I choose the things I enjoy(singing) over the money to pay rent or food.

As a conclusion

1. People constantly change as well as their needs, ambitions, and desires.
2. If a young person tries to understand what they want to do, it's more difficult because of a lack of knowledge.
3. The world is constantly changing.

Combining these three facets and the answer to what to do in life becomes even more complicated.

For young people trying to understand what skills they should learn or what profession they should choose:

1. Determine if there's an activity you enjoy doing and want to be paid for. I.e., if it's possible to combine a job and the things you enjoy doing.
2. Research the [job] market: how much may it pay for this kind of job? What skills does one need to get it? What is the best way to get the skills - university, online courses, books, etc.?
3. If you don't know what you enjoy or at least what you can do for money: find a balance between the money the market gives a person for a particular job and the time one needs to learn the skills for it. For example, if you already know two languages, you may become a translator without learning additional skills. If you want to be paid more than a translator(in this example), and you know that a copywriter may earn 60% more, and you need a month to learn(or improve) your skills, it's worth switching to the latter if you like doing that of course.

According to Wikipedia:

Creativity is a phenomenon whereby something new and valuable is formed

I'll describe a few ideas in this article, but they aren't new. So, is this article a creative work?

According to the definition - yes, it requires some combination of my current knowledge, thus creating a new way to deliver such a topic. It's valuable because someone will find new ideas here. However, the very ideas aren't new, and one may find a different way of delivering them on the Internet.

Can a natural language generation model create such an article? Not quite like this, but a similar one that will be better and worse, depending on the random selection of many generated texts. So, yes, it can already.

Can we presume the same for music, movies, and image creation? With a working model and many examples, this is what neural networks do today. The quality of that art is disputable and depends on the patterns and story complexity.

What is new?

The "new" in the creativity definition is significantly relative. This article is original only in terms of deliverability to readers. The hand-drawn images here are authentic only in my unique hand movements, not in the ideas they present. Therefore, re-creating a similar article by the models trained on a lot of data is possible.

Let's assume the originality of my ideas in this article is 0.0001 out of 1. And let's assume that Einstein's theory of relativity is 1. The models that generate text may reach a similar to this article, relatively small originality score because they combine the examples given to them by humans. They can't produce a 0.9 of 1 of the novelty score if they work like pattern distinguishing algorithms.

Humans are pattern distinguishers too. However, some of us can produce more novelty in our ideas. But we're entirely different than those programs, aren't we? Yes, we are because we aren't merely pattern recognizers. Instead, we can understand the information and create models of how the world works. The neural network models don't do that.

A program that creates models

How can humans do that? We have a model for this, but we don't know how it works in reality. Our brain is astonishingly complex. The cells there, as in any other tissues in our body, are created by other cells' that have instructions on how to do so. The living organisms' cells know how to encode the instructions and then extract them to make new cells.

The instructions don't necessarily tell every brain cell how to think about something; they're telling cells how to function. And then you have billions of such cells that work together, forming a complex structure. So DNA instructions don't convey to a brain cell how to think, but they contain a base set of instructions to let it function with other such cells and transmit signals.

We're programmed. But our "codebase" is much more complicated than any other one. We're programmed to create models, understand, and recognize patterns. Thus, we can produce more novelty in the existing ideas.

Can we program machines to do so? It's possible in principle because it's possible with humans. But, can we, humans, program a machine to think? It requires us to create a model of how we work(we still don't know many things about how we function). Or to create a model of how a machine may construct models. I.e., a hypothesis, not an exact human "program" reproduction.

Summary

It's possible to program creativity in machines, in principle. We were programmed(not necessarily by something, it might be a random coincidence), so why it's not possible with other matter? The different question is if humans can do that. And the answer depends on our mental ability to understand how to create a working model that can "think." In a digital world, it's called AI. But who knows, maybe we'll be programming stones.

I wasn't used to writing ideas down since I didn't value them enough(I have a dozen of them every moment, so why care?). However, let's skip the reasoning on why people write their ideas. Instead, I want to share one concept in this article: having a middle space between a never-ending thoughts waterfall and a notebook.

Problem: you don't always have your notebook near you

Sometimes, you don't have access to a notebook or a smartphone with a note-taking app.

Then make sure you do!

Yes, you could try, but there are cases when it's not convenient or possible:

1. You drive a car.
2. You stand in a crowd.
3. You have your smartphone or notebook 50 meters from you.
4. You're on a rollercoaster, on a surgeon's table, etc.

An obvious solution could be remembering a thought and keeping it in mind. The difficulty is in focusing on that single thought and not getting bombed by dozens of other ideas and distractions.

Keeping ideas in mind

I use the apparent solution mentioned above, but with some tricks. I imagine one visual and well-familiar place [1] where I place a thought's visual representation [2]. You may think of the memory palace technique, and you're correct.

If you're familiar with the mind palace method, you know how and why it works.

[1] Well-familiar and pre-defined place. This component allows you to locate where exactly you've left the information. Such an approach reduces time and mental effort in finding associations(thoughts) that led to the idea you want to hold.

How do I usually remember something: what I was thinking about that led me to that thought? What was I doing at that time? Slowly, I build a track of thoughts, and sometimes, I find the one I wanted to remember.

Since I can't extract any information by having a memory address like in electronics, the better way is to represent this address visually and virtually in my head.

A place should be thought out beforehand not to waste time when I need it quickly. Otherwise, I may start to find suitable locations, and my idea will be gone.

A place should be well-familiar to me. Otherwise, I may start wasting efforts to draw the missing details. Good examples of a suitable location are a room in my house or a garden I visit often.

[2] A visual representation of a thought. I remember visual information better. Also, I can put it in a virtual place in my mind. Combining that with a place where we can go directly (in thoughts) gives us a great approach to save any information quickly and access it even after a few days.

But I don't need to access that idea after a few days. I need to keep it for a few hours at maximum, and then I'll write it down.

Why don't we use our minds to store information if this approach is superior?

You can try, but our mind isn't a perfect place to store anything. So I prefer writing everything down. This method is suitable as a temporal place to store ideas until you get access to better storage. However, no one stops you from building huge associations and developing ideas in that semi-temporal space.

How did I develop web apps/websites before

It's sort of a retrospective on how things were before fancy technologies. It's a short journey on how do we come up with React. Feel free to skip it and read more about Next.js in the next sections.

Pure HTML, CSS era: simple websites

When I was getting started with web development, I put simple <div> blocks into Notepad, adding some CSS styles. It's straightforward. I don't need to know any frameworks, additional technologies. A few more <div> blocks, then some text and buttons, and I got a sidebar, a menu, and a content block with text.

The problem with this approach begins when I want to add more pages: I should copy-paste those sidebar and menu codes into the new page. As a result, I should amend the code on every page if I want to change, say, the color of the button placed on every page in a header.

Not an ideal method, but it works well for a plain one-page website.

Using template engines to re-use components

There were(and still are) tools that decreased code duplication. Tools like Pug and others are Javascript scripts that compile custom HTML syntax into standard HTML. With their help, a developer can create one component(e.g. a header with links) and put it on many pages without duplicating the component code. If I need to change the component style or structure, I alter the code in one place.

They also provide helpers to format HTML. For example, Javascript functions to capitalize text. Now it's easier to build a multi-page website. I create multiple fundamental components for my website and I re-use them on almost every page.

From websites to web apps: handling an app's state

There was a time when businesses started to replace desktop apps with web apps. The other ones wanted to automate many things for customers. They began creating websites to receive orders, for example. When we create a many-page website with custom logic to handle users' input, sending data to a server, showing errors, etc., it becomes harder to manage the state. State? We need to store, memorize what users want, what did we show/tell them, and so on.

We may keep state on a server, but in such a way we add more complexity there. Also, it's not always convenient. For example, I want to store a lot of info about the current user and use it immediately on the next page, then forget about it. Say, it's transforming a picture into a black-and-white one via Javascript. It'd be more efficient to not load our server and make such a transformation client-side.

We could store a state, or even many states, in a browser's local storage, or IndexedDB, right? Correct. However, we then need to have a logic to update our UI if the state changes. We might update everything when anything in our state changes, but then another issue appears. Our website's responsiveness isn't fine: performance is bad.

React, Vue, and similar tools

React, for example, solves the components issue(templating), state management problem. With it, I may create optimized web apps, simplify interactions between many components. Why choose React or Vue? They ease the development of complicated web apps. Handling local(component-level) and global state is simpler. Re-using components is much simpler. These tools are libraries, not opinionated, hence not giving you plain constraints: what you should and shouldn't do. Instead, they tell you rules of good behavior - what code is better to avoid, for example, when writing components.

React: pros and cons

Pro: reusability of components

We talked about how it was difficult to not duplicate code in other web pages. React allows a developer to create small, large components and re-use them anywhere. We may include small components into bigger ones and include them in larger components. Thus, we diminish repeatable code and we have full control of a local component state. Hence, we optimize a web app(or, we make it worse).

Pro: it's performant because of virtual DOM

React creates an additional layer of API of DOM to optimize performance. Since the library allows you to create UI consisting of many components, it tries to update an as small number of them as possible to avoid the standard load on a browser's re-rendering. By standard, I mean not updating the entire web page when we have only a minor state change. Why re-draw all elements in DOM if we can re-draw the ones that depend on the modified data, right?

Pro: a massive community

Any great technology is backed up by a large community. If it's not large, then it's difficult to find answers on weird(or any) issues on Stackoverflow, or, to find a library to draw a simple green circle. In the Javascript world, this community is among the largest. The same applies to React, a part of it.

If I need to make a well-styled table in React, I may find it in a moment on Google. If I have hard times figuring out some peculiar behavior with the library, it's easy to find an answer.

Cons: not for me

React works well for the problems it solves. It's easy to instantiate a new project and start coding. For me, it's not difficult to learn. And, later, it speeds up the development. Then why this article about Next.js?

Next.js advantages after using React

React community created create-react-app CLI tool to instantiate a new project and see the result immediately. And I liked that for my simple web apps.

However, my next projects had public pages, a blog. A solution could be to set up a server and render the pages there, to return prepared HTML. Or, to bring other tools: a blog engine, a static site engine.

Built-in server/static rendering

Next.js cares about this and lets a developer continue writing code. It's why I didn't need to use other tools to build a blog or a regular page optimized for search engines and performance.

Why care about server rendering?

When exposing a web page to search engines, it's better to provide them HTML page without Javascript. Google, for example, can also understand Javascript there(hence a regular React app can be "understood"), but it sends a website to a rendering queue, which takes more time than processing pages when a Googlebot is reading a website right now.

Server rendering may come with a complex setup if one tries this for the first time: I need a server, at least, to render those web pages there.

The other thing intertwined with the previous one is improved performance for users(and search bots). A server renders a page and browsers show it without the necessity to compile Javascript. It comes with an additional load on the server though: it should render a page for every user(especially if the page consists of dynamic data).

We could cache such pages or make them not so dynamic. Anyway, they will be fetched and shown fast for a user. Consequently, our web vitals become better.

Next.js allows me to create a page that is pre-rendered by default. Either at build time(static generation, pages are reused for every request) or at a compile-time(SSR, hence rendering on every request). Static generation is a preferred way since it generates pages at build time. Even if I have dynamic data on the pages but I can fetch it at build time, it's an ideal way to optimize performance.

Programmatic SEO

Programmatic SEO is a technique to automate creating a lot of web pages that target almost similar keywords. They may have one search intent but it varies in details. Imagine you have an agency that lists realtors in different cities and countries: to help people who look for an apartment to find agents quickly. You make a website with the primary keyword "best realtors". However, this keyword is popular and a new website won't gain traction from Google. Hence, we may target long-tail keywords: we save the primary intent("best realtors") but specify a location. In this way, "best realtors in Kyiv" isn't as popular as "best realtors" and we target more specific intent on our web page.

However, we'd require more time to build such pages one by one, right? Most of the code could be copy-pasted, only the list with realtors differs. If we target "best realtors" in 10,000 various cities, it's a lot of work. What if we want then to target for "best agents in Kyiv"-like keywords? We alter a word, and we require additional 10,000 web pages.

Here's the thing: we have the realtors lists in various cities already, we have a web page template. With Next.js, building a lot of pages for programmatic SEO is simple. Have a list of keywords, have one code(template) and the framework will build a page for every keyword you specified.

Built-in routing

Remember how do you choose a router for a new React project? They're almost the same, have some differences, and some libraries are stable. With a Next.js project, I don't need to think about what router to use this time(maybe some other library?). It has a built-in router. And it's a simple one: you put a file in the pages folder and it becomes a page.

For example, I want to make a page with the URL <myapp>/sign-in. I put sign-in.tsx component or sign-in folder with index.tsx component there and it works.

The router provides all the necessary features: dynamic routes, nested routes, linking pages.

Built-in API server

There's pages/api folder where I may specify API endpoints. Some good use cases are:

1. API middlewares. When I want to alter a request(e.g. its headers) to make another one to a different server, for example.
2. Request resources on other domains. To avoid the CORS issue(an example project). Oftentimes, I need to request some 3rd-party resource, but I can't due to CORS. One solution is to make a server, make the request there, and then redirect it to the 3rd-party. Let's save time though. For simple requests(and even a bit complicated, Next.js can handle it too), it'd better use pages/api.

Build-in images and fonts optimization

I don't want to optimize such assets on every page I code. At the beginning of some project, it's usually not a top priority. But it's great when the framework does the 80%-like(there are other complicated optimization tricks we usually don't need) job at optimizing assets. You paste an image and it's automatically smaller, without layout shifts, and it lazy-loads!

Environment variables

There are 2 environments that are available when you code a Next.js app: a browser, a server. Environment variables in a browser are visible if one wants to find them in the bundled code. The server variables are hidden since users don't have access to remote hosts and their code.

With Next.js, I can create both env. variables without setting up webpack and installing another library to handle env. vars for a server. The framework has built-in support for them!

There's a .env file where I specify server vars, and in the same file I may specify browser vars by adding a prefix to a var - NEXT_PUBLIC_. Incredibly convenient to me.

Summary

Next.js saves me time a lot with current and new projects. I can combine a few apps seamlessly and have one codebase only. The advantages I wrote about may not apply to your use case though. If you use React now, it's worth trying: the framework adds up useful features on top of the React pros.

If you have questions or feedback, let me know.

And these notifications on the web that we hate because every spam site asks our permissions about sending us their spam. However, the technology itself is useful. I didn't implement web push notifications before. There was no such case, but recently I needed to notify my users about important information as soon as possible. Email is good, but a user should open an email client first. With notifications, you see the popup immediately.

I decided to write this article because I didn't find comprehensive information about implementing browser notifications for React, Next.JS, Node apps. We'll be using Firebase for this purpose, to save time ourselves by not building solutions from scratch.

Overview of browser push notifications

So as we said, it's like those mobile notifications but used in browsers mostly for spamming. It's worth noting, that you need to send them to a user if that's really what he subscribed to. Examples:

• new comments under the user's post;
• new message on some platform;
• important information that should be handled fast;

The other non-important things may go to email.

How does it work

First, you ask a user permission to show the notifications. If you get an acceptance, your website installs a service worker that'll be handling the notifications. You also send the request to register this particular user in a messaging server, you'll be asking it to send a notification to someone.

When a messaging server registers your users, it'll send you a unique for your user token that you'll be using as an addressee to send push notifications programmatically.

You save the registration token from a messaging server. When you want to send a notification, you'll point out this token for the user you want to send a message to, thus the messaging server understands to whom to send the notification. When a user agrees to receive notifications, your website installs a service worker, it's a background script that'll be running on the user's browser. It's programmed to handle the messages from the messaging server. When it receives one, it'll assemble a notification to show to this user.

Messaging server? This is any server that knows how to communicate with your service worker. You can build it by yourself and code a service worker that will be managing messages from there. But we won't complicate our life and we'll be using Firebase.

Firebase push notifications

If we use Firebase, we don't care about the proper messaging server setup because we got covered. What we need is to code logic to ask for the notifications permissions, install a service worker and write a logic to send notifications from our app.

For further setup, you should create a project in the Firebase Console, and have config from there(a JSON file).

Front-end set up

I have a Next.js app, but this algorithm covers any app written in Javascript, it's a library- and framework-independent.

Install Firebase to your project so we can leverage simple functions rather than doing requests to FCM(Firebase Cloud Messaging) manually.

$ npm install firebase
# or
$ yarn add firebase

Find a place where do you want to ask a user about the notification permission. For example, it can be a button that says "Subscribe to browser notifications". On this button click, you'll be calling a function getFCMToken() written below:

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken } from 'firebase/messaging';

// Replace these values with your project's ones
// (you can find such code in the Console)
const firebaseConfig = {
    apiKey: 'xxxxx-xxx',
    authDomain: 'xxxx.firebaseapp.com',
    projectId: 'xxxx-xxxx',
    storageBucket: 'xxxx.appspot.com',
    messagingSenderId: '00000000',
    appId: '0:00000:00000000'
};

export const app = initializeApp(firebaseConfig);
const messaging = getMessaging();

export async function getFCMToken() {
    try {
        // Don't forget to paste your VAPID key here
		// (you can find it in the Console too)
        const token = await getToken(messaging, { vapidKey: <YOUR_VAPID_KEY> });
        return token;
    } catch (e) {
        console.log('getFCMToken error', e);
        return undefined
    }
}

With this code, we initialize the Firebase library and write this getFCMToken() function. It retrieves a registration token from FCM, and it also asks a user for notification permission. If the permissions are accepted, only then it'll communicate with FCM to register this user. Otherwise, the code throws an error, which you catch in the catch block.

Then, you get an FCM token(a user's unique token in the FCM system), which you'll be using to send notifications. So you need to store it somewhere. Usually, you have a server where you may send the token and it'll save it in the database for this particular user. Otherwise, you won't be able to send notifications to users. It's required to have the Firebase Admin SDK, which is available on server environments.

There are some exceptions though. In some cases when you want only to subscribe users to your notifications like in a newsletter, you may not store the FCM tokens. Firebase has them and you can send the notifications manually from the Console. But it's not possible to send them automatically(programmatically) because you can't differentiate users(you don't have the tokens).

And the last thing is to have a service worker that will handle the notifications from FCM. Create a file that'll be available on the root of your web app, the file named firebase-messaging-sw.js. It should be accessible on https://yourwebsite.com/firebase-messaging-sw.js. Its contents:

// It's a static script file, so it won't be covered by a module bundling system
// hence, it uses "importScripts" function to load the other libs
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Replace the values with yours
const firebaseConfig = {
    apiKey: 'xxx',
    authDomain: 'xxx',
    projectId: 'xxx',
    storageBucket: 'xxx',
    messagingSenderId: 'xxx',
    appId: 'xxx'
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

// Not necessary, but if you want to handle clicks on notifications
self.addEventListener('notificationclick', (event) => {
    event.notification.close()

    const pathname = event.notification?.data?.FCM_MSG?.notification?.data?.link
    if (!pathname) return
    const url = new URL(pathname, self.location.origin).href

    event.waitUntil(
        self.clients
            .matchAll({ type: 'window', includeUncontrolled: true })
            .then((clientsArr) => {
                const hadWindowToFocus = clientsArr.some((windowClient) =>
                    windowClient.url === url ? (windowClient.focus(), true) : false
                )

                if (!hadWindowToFocus)
                    self.clients
                        .openWindow(url)
                        .then((windowClient) =>
                            windowClient ? windowClient.focus() : null
                        )
            })
    )
})

That's all on the front-end side! You can test your button, on the press, it should ask your permission(a browser asks, to be precise) to send you notifications. When you allow it, you should see an FCM token(console.log it somewhere)

Sending notifications from the server

In my case, it's a Node.js server and we'll be installing the SDK for it, but the general principle is the same for other languages/platforms.

$ npm install firebase-admin

You also have a configuration for the backend in the Console. It differs from the client-side one because it has a private key that you need to sign your notification, which will be sent to FCM. Put this firebase.json file(it's called service account) somewhere to be accessible from code, you may put it as an environment variable.

Then you should initialize the Firebase library on a server start(or later if you want to control the flow). I've put this logic into a separate file:

import admin from 'firebase-admin';

import serviceAccount from './config/firebase.json';

export function init() {
    admin.initializeApp({
        credential: admin.credential.cert(serviceAccount),
    });
}

On a server start, call init() and Firebase is ready to serve you.

I won't cover storing the FCM tokens, I'm sure you know how to do it and it's not the purpose of this article. So, given you have an initialized Firebase on the server(from the last paragraph) and you have a user's FCM token, you're ready to send push notifications to a user's browser! It looks like this:

import { getMessaging } from 'firebase-admin/messaging';

// I use Typescript, you may not, but types will help you
// to understand what data structures FCM expects.
// It's an internal structure though, firebase-admin has
// good typings in the library
interface Message {
	title: string;
    body: string;
    requireInteraction?: boolean;
    link?: string;
}

// Use this function to send push notifications to a specific user
export async function sendFCMMessage(fcmToken: string, msg: Message): Promise<string> {
    try {
        const res = await getMessaging().send({
            webpush: {
                notification: {
                    ...msg,
                    icon: 'https://your-website.com/favicon.png',
                    requireInteraction: msg.requireInteraction ?? false,
                    actions: [{
                        title: 'Open',
                        action: 'open',
                    }],
                    data: {
                        link: msg.link,
                    },
                },
            },
            token: fcmToken,
        });
        return res;
    } catch (e) {
        console.error('sendFCMMessage error', e);
    }
}

Now, some details on the notification payload. Firebase supports various platforms, here I use the webpush field for my payload. FCM supports other fields:

interface BaseMessage {
    data?: {
        [key: string]: string;
    };
    notification?: Notification;
    android?: AndroidConfig;
    webpush?: WebpushConfig;
    apns?: ApnsConfig;
    fcmOptions?: FcmOptions;
}

I've tried to use notification as a general-purpose one, but I had issues with clicking on notifications, a browser didn't handle clicks(the service worker had the click handler). Plus, there were problems with showing icons on notifications. It's better to use webpush if you target desktop users. An FCM token can be for various platforms: Android, iOS, web.

Inside webpush, there are title and body that correspond to a notification's title and body. There's icon if you want your notification to have an icon. Put a publicly accessible image you want to be shown. Set requireInteraction to true if you don't want the notification to be closed after a few seconds, it should wait for the user's explicit reaction.
There's a custom link field inside data, it's aimed for the service worker to be read and handle the click on notifications correctly.

I don't know about all browsers, but my browser(Brave) doesn't handle the default notification click on the whole area, there should be custom buttons. I define them in the actions field. It seems it doesn't matter what buttons with actions I put, the "Open" button(action) will open the URL from data.link property I send.

Summary

Web push notifications aren't difficult to implement if you can use Firebase. Also, it's easy to send messages to various devices on different platforms. Only obtain an FCM token client-side(on a mobile, web, or desktop), and send notifications from a server.

Blog

In 2021 I started this blog. I decided to share my learning and thoughts on programming, to write more to clarify the thinking process. I wrote 21 articles starting from March 2021. I wrote about non-programming topics too, the most popular article was about a memorizing technique. I posted it on HackerNews, got 229 upvotes, and 6k visitors to my website.
Writing is great at finding new ideas too, not only understanding the current topic one started pondering about. Sometimes I find myself thinking about new topic ideas when writing the initial article.

What I like is the low-maintenance cost of this website: a server's expenses and the thing runs on free Ghost. The people work hard on it, thus I don't need to create my blog engine(however, I do that for one of my projects, more on it later). It's convenient - I write an article, publish it, and all of the other things like SEO are getting care of. Hence, I should only produce content and not focus on miscellaneous and not productive stuff.

In terms of SEO, I got 181 unique visitors for the past 28 days. The engagement time is 46s, which could be more. I expect it to increase when I have more organic search traffic.

Mobile game

In the November of 2020, I started creating a mobile game about playing as an AI that wants to escape from a digital lab. There were such games but I had some new ideas I wanted to play with. An inspiration for me was this CLI-like game. It took me around 4 months to finish an alpha version, which I published to Google Play.
It's still in beta with ~20-40mins of gameplay time. People liked the game from what I see on Google Play reviews. I wanted to expand the plot, but I took other projects to work on. Maybe in the future, I'll continue working on it. Or, create a similar game with a different idea. For example, a universe simulation.

What I've learned is that it's better to create a plot and then design beforehand. The plot was changing during the creation and it took a lot of time to change this or that. Also, it's better to spend more time on architectural decisions and documentation. Now, when I'm returning to the codebase, I don't want to disentangle many parts of it. Somewhere it's difficult to understand why such a decision was made. However, it was a side project and it's fun to just create things and not think about documentation and long-term support.

Reddit project

Around 6 months ago I started a project that aimed to help me find real problems to solve. The real problem is to find people's and businesses' problems they face every day(preferably), that are important enough to these people they spend money on a solution. I found Reddit to be a great place for such a purpose.

The searching process was straightforward using some specific keywords. The issue there was to filter the results. How to automate that? We got natural language processing. I spent some time experimenting with multiple technologies. The first and the simplest solution could cover some cases, but the overall accuracy was low. Then I went a hard way by creating my NLP models. The accuracy was still low, yet sometimes it could be okay. Though it didn't classify more difficult texts.
The experiments were fun but I needed a working solution. I switched to pre-trained models. TensorFlow has Javascript functionality, and they say you could connect Python pre-trained models to the JS library. In reality, it didn't work. Hence I outsourced the NLP filtering completely to Python. So, a project was on Javascript(UI and the server), but the filtering workflow was on Python.

The project was released to the public in November. After some time I thought about pivoting it.  So, the tool that will help not only indie makers and me but other people that struggle searching for something on Reddit. After a few months of searching Reddit for various things, I understood that it could be done much better. Also, people may look for not only problems to solve but many various things.

I spent 2 weeks pivoting and a month plus more to analyze the feedback to enhance it. I currently work on this project, but mostly on the marketing side. Now I spend more time writing content. By the way, it's Next.JS that parses markdown. I could employ a ready-made blog engine, but I thought it'd be enough. Well, it is, however, there are some minor issues.

Olwi now is aiming to help marketers, business owners, indie makers, and other people to find what they need on Reddit. For example, potential problems to solve, what people say about their brand or competitors, search for their potential customers. I plan to collect more feedback. For this, I improve my SEO and write more content to attract more organic visitors.

Twitter

I registered on Twitter at the start of 2020. Then I started using it more actively in 2021 by building in public, sharing learnings, and so on. I tried to engage with more people to get more visibility of my profile. Eventually, I followed around a thousand profiles and got a feed that has more garbage than interesting thoughts.

I could follow fewer people, and anyway I would see irrelevant tweets sometimes. My initial goal was to gain an audience for the future exposure of my person and projects. But faking the whole process for the sake of attracting other fake followers isn't worth it.

Twitter is full of people who are fixated on the idea of gaining more followers to sell info products. Or, gaining more followers to expose their thoughts on something they don't have real experience. Twitter is a good platform to engage with tweets you're interested in to spark intriguing conversations. Hence, to even find friends. But it's difficult to find such conversations without following a bunch of people and scrolling through a thousand irrelevant tweets.

Plans for 2022

I'll continue working on Olwi. Creating more content on this blog. But also I want to create some other projects(bad for focus though, so not sure I will). The burnout problem comes closer with more work though. I want to learn how to better handle my mental health. I should do it my first priority.

I want to point out that I'm not a machine learning engineer. I'll cover simple cases with no deep explanations of the underlying algorithms.

There are manageable cases when you may try JS packages that do the classification. In some others, and if you understand ML concepts, you may create custom models using TensorFlow.js.

My case seemed simple. I wanted to classify potential business problems(opportunities) for my Reddit advanced search tool. I'll tell you soon how it went, once we cover the tools. Let's start with simple cases.

Natural.js

It's a package for Node.js that helps deal with natural language. It has many useful built-in helpers. For example, it can do a sentiment analysis from the box and without any setup. Let's install it:

$ npm install --save natural

Easy sentiment analysis, right?

const { SentimentAnalyzer, PorterStemmer } = require('natural');

const analyzer = new SentimentAnalyzer("English", PorterStemmer, "afinn");
const result = analyzer.getSentiment(["I", "love", "cakes"]);

console.log(result); // 0.66
// values greater than 0 indicate a positive sentiment
// values smaller than 0 indicate a negative sentiment

Yes, it's easy. PorterStemmer is a transformation function that converts words to theirs stems. To their original form, simply put. We pass an array of words to getSentiment function, but we may use built-in tokenizers to do so automatically.

Where is a promised text classification, Lebowski?

I wanted to show the simplicity of usage, without even training some complex algorithms. Now let's see how it deals with text classification.

The package supports the Naive Bayes classifier and logistic regression. They work differently, so try each one and see what fits your case better.

const { BayesClassifier } = require('natural');

const classifier = new BayesClassifier();

classifier.addDocument('buy our limited offer', 'spam');
classifier.addDocument('grow your audience with us', 'spam');
classifier.addDocument('our company provides a great deal', 'spam');
classifier.addDocument('I like to read books and watch movies', 'regular');
classifier.addDocument('My friend likes to walk near the mall', 'regular');
classifier.addDocument('Pizza was awesome yesterday', 'regular');

classifier.train();

console.log(classifier.classify('we would like to propose our offer')); // spam
console.log(classifier.classify('I\'m feeling tired and want to watch something')); // regular

Usually, you need a lot of examples. With a small amount of them, any method you choose(this library or a custom model) will output not the best results. Pay vast attention to your data, it's a major element in text classification. Maybe Natural.js will cover your case and you can finish the reading. If you need a more custom setup(if you think so, review your data again), read further.

Brain.js

This library helps you to build neural networks. Natural works with more simple algorithms. Neural networks are many algorithms that work as one, simply saying. They reflect the behavior of biological neurons that are great at recognizing patterns.

Now you can customize the algorithms. Specifically, you can build your own neural networks architectures - specify how many layers you need, activation functions, learning rate, and other parameters. This is where it gets trickier. There are no "gold rules" at building neural net architectures. The process greatly varies from a use case. We may use the default options in the cases like defining a color from RGB params:

const brain = require('brain.js');

// Build a default neural net
const net = new brain.NeuralNetwork();

// This is where we specify our data: input and the result(output)
// the data is an array of examples(input and output).
// And then the network trains on them.
net.train([
  // we tell it: if "r" from RGB scheme is 0.03, and "g" is 0.7
  // then the output should be "black"
  { input: { r: 0.03, g: 0.7 }, output: { black: 1 } },
    
  // notice that we skip some values from RGB, in this case we
  // missed "g"
  { input: { r: 0.16, b: 0.2 }, output: { white: 1 } },
    
  // here we point out all the RGB values
  { input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 } },
]);

// This is how we run the network to get a prediction
const output = net.run({ r: 1, g: 0.4, b: 0 }); // { white: 0.81, black: 0.18 }

It's a powerful way to build such a network without understanding the underlying concepts, data normalization. Just point out a few examples and you're done. However, in reality, you need more examples for better precision.

Transforming text to numeric vectors

Now we're talking about data normalization. For text classification, we need to transform the text into numeric values because Brain.js doesn't have custom data transformation flow for regular neural nets, yet you may try it for LSTM, for example. Why convert strings to numbers? Neural networks training is a process of many math calculations, which require numbers, not other data types. You might use raw strings, they would be converted to their numeric representations, however, not to the format you(and the algorithms) probably want. What these "algorithms" do is figure out the patterns of the input to build a function that can calculate the output based on the input. So it's important how you do this transformation.

The first option, you may propose, is to convert every character to their numeric order in the alphabet. For instance, "a" is 0, "b" is 1, "c" is 2 and so on. Thus, we will have 26 possible values for every character. It means, the word "car" can be represented as [2, 0, 17]. In this case, if your task is to classify text with many sentences, your input dimensionality becomes 2D, which isn't fine, because input should be 1D. We might flatten the 2D array, but then it gets delicate. It means, the text like this "I want apples" converts to "iwantapples"(and then to a numeric 1D vector). It may be fine, yet we're not sure the network recognizes a pattern there to classify correctly.

The big problem with such an approach is that every character is seen by a net independently, not as a word. Thus, "car" is [2, 0, 17], and the resulting function(a set of functions that process the input) may "think" it's almost the same as "bar" - [1, 0, 17]. It doesn't think, of course, but the pattern says so. Thus, it's difficult to retrieve any context, we just perceive every character independently.

The second option is to do the same, but for words. In reality, we retrieve context mainly from words, not by characters separately. Such an approach also simplifies the calculations: we don't need to convert 2D input into 1D and a neural network gets fewer numbers to process, which is a performance boost. To convert words to a number, we should figure out what numbers to assign to them. You may create examples of text you will be training on, tokenize it into words(omitting punctuation because it doesn't add context), make a dictionary of these words, where every one of them gets an ordering number. It's like adding words to a Set and their number is an order in which they appear in it. E.g. if I have a text "I want apples.", my dictionary is ["i", "want", "apples"], where the word "I" will be assigned to 0, "want" to 1, and "apples" to 2.

We may optimize this approach by also stemming words to their root form, e.g. "apples" become "apple" because the net doesn't need to know(except the use cases where your task is to classify singular or plural forms) whether it's a singular or a plural form, it's better to have a numeric representation for a word abstraction - apples("apple", "apples").

It's the most simple method to vectorize text. Though, it also has problems. In cases, where you need your neural net to "figure out" the context by looking for a set of words, it's difficult because in the example above, "I" and "want" are placed as neighbors (0 and 1 accordingly), but they aren't similar, they mean different things. For example, "car" and "automobile" mean the same but can be represented as 14 and 8233 with this approach. Thus, your model may derive different results based on whether your examples have synonyms.

The third option is to use pre-generated vectors. The ones that were generated by processing a lot of texts and deriving which words are similar, and which ones are different. Thus, for example, a vector for "car" may be [0.45, 0.78, 0.97, 0.34, 0.87], and for "automobile" it may be [0.49, 0.73, 0.98, 0.33, 0.88]. As you noticed, they're not single numbers, but vectors for every word. Thus, you get a 2D array for the whole text. I'd suggest you go with pre-generated vectors such as GloVe.

Getting back to Brain.js

Now you know how to convert strings to vectors, you can use the library to help you. It has various types of pre-defined neural networks. The one we saw before is the feedforward neural net with backpropagation. This is where things get delicate too, again - in choosing the right network type. A feedforward net is a simple one that takes an input, does some calculations-transformations, and returns the results. It sees every input independently, it doesn't have a memory. It means it can't derive context from multiple words. If your task requires so, you better choose recurring neural nets such as RNN or LSTM(see the Brain.js details on them).

TensorFlow.js

This is a path where you decided you require more custom setup. This is a Javascript version of a powerful machine learning framework for Python. It allows you to build any models or use already created ones by the community. However, they don't have much. And their functionality of converting Python models to JS ones and vice versa doesn't work well enough yet.

The code may look like this:

const tf = require('@tensorflow/tfjs-node');

const data = {
    // assume we already have vector representations of the text examples
    inputs: vectorRepresentations,
    // imagine we have such 3 classes
    output: [0, 0, 2, 1, 2, 1, 0, 1],
}

// tensors are TensorFlow vectors to simplify the internal
// processing for the library
const inputTensors = tf.tensor(data.inputs);
const outputTensors = tf.tensor(data.outputs);

const model = tf.sequential();

// 1st layer: a 1d convolutional network
model.add(tf.layers.conv1d({
	filters: 100,
	kernelSize: 3,
	strides: 1,
	activation: 'relu',
	padding: 'valid',
	inputShape: [MAX_WORDS_LENGTH, GLOVE_VECTOR_DIMENSIONS],
}));

// transform 2d input into 1d
model.add(tf.layers.globalMaxPool1d({}));

// the final layer with one neuron
model.add(tf.layers.dense({ units: 1, activation: 'sigmoid' }));

// here are some tuning, read in the TF docs for more
model.compile({
    optimizer: tf.train.adam(LEARNING_RATE),
    loss: 'binaryCrossentropy',
    metrics: ['accuracy'],
});

// print the model architecture
model.summary();

// train the model
await model.fit(inputs, answers, {
    // the default size, how many inputs to process per time
    batchSize: 32,
    
    // how many times to "process", simply put
    epochs: EPOCHS,
    
    // the fraction of the inputs to be in the validation set:
    // the set, which isn't trained on, but participates in calculating
    // the model's metrics such as accuracy and loss
    validationSplit: 0.2,
    
    // shuffle inputs randomly to have a different starting seed every time
    shuffle: true,
});

// save the model to load in the future and run classifications
await model.save('file://./data/models/myFirstModel');

Here we built a model to do text classification for 3 pseudo-classes(0, 1, 2). We used a 1d convolutional network for the 1st layer. TensorFlow allows you to specify any amount of layers you want, set training epochs, validation split, choose different ML algorithms, activation functions for every layer, and many other options. Though, we need to know how to build ML models. If we don't, we may add anything, tune parameters, and won't receive good results.

I went to TensorFlow.js for more customizability but spent months on adjusting a lot of stuff and didn't get great results. I learned many things along the way, but still, I'm not an ML engineer, so it's better(faster) to use models built by professionals and not create your own wheel. But if it's for fun, why not! Then, let's understand the code I wrote.

I chose this architecture due to its performance: convolutional networks are faster for text processing and also they process input in a kind of context. They're mainly used in computer vision because they process input matrices, not just 1d arrays of numbers. So, for example, if you get an image, 100x100 px, a convolutional network may process 5x5 pixel window per time. Thus, some noise and details can be classified correctly. For text, it's almost the same - we need to take multiple words in a batch and don't process them independently. Thus, simplifying a model's job in recognizing patterns.

I chose GloVe vector representations, so my input data was a 2D array of numbers, where every subarray was a word representation. The kernelSize parameter in a convolutional network is responsible for the "sliding window" - those 5x5 pixels to process per time. In my case, I specified kernelSize to 3. It means the network processes 3 vectors(3 words) per time. The filters param tells how many neurons you want. strides means how many "steps" to take per once when moving the "sliding window". For example, for the text "I want to eat apples tomorrow", the first batch is ["i", "want", "to"], the second batch is ["want", "to", "eat"], the 3rd is ["to", "eat", "apples"] , and so on. So, it moves by one word per time to the right.

General learnings

I spent some time with Natural.js, then Brain.js, and TensorFlow. I went to the last one for custom configuration and spent a lot of time building custom models. It'd be better to use an already built model for text classification. However, I didn't find a good way to transform Python TensorFlow models into Javascript ones, that's why in the end I switched to a Python setup with HuggingFace. But my task wasn't so straightforward. I wanted to classify potential people's problems and pains: where someone hates using something or complaining about things.

There were some things I learned while building custom models with tensorFlow.js I wish I knew earlier. Write your experiments in a logbook. You'll be building various models with various hyperparameters and it becomes difficult to recall what worked well for you and what didn't. Also, don't forget about the test set(assuming you have a validation one too).

There is a lot of things to mention about building ML models. Here are some I highlighted in my logbook. I hope it saves someone's time in narrowing the search when troubleshooting.

When to stop training. If a validation loss starts increasing. It should be similar to but slightly higher than a training loss. If it's lower or almost equal to a training loss, a model requires more training. If training loss is reducing without an increase in validation loss then again keep doing more training.

You have 1.0 accuracy. In most cases, if you have 100% train accuracy, you've probably greatly overfitted. Or, a model recognized a "false" pattern in your data.

Overfitting? A big topic. Here's some reference(not mine, but I can't find the source):

If validation loss >> training loss you can call it overfitting.
If validation loss  > training loss you can call it some overfitting.
If validation loss  < training loss you can call it some underfitting.
If validation loss << training loss you can call it underfitting.

A higher than training loss validation loss means overfitting, a model learned the patterns that happen to be true in training data, but they're not in real-world data.

If you have a too powerful model(the one that has too many parameters and not much training data, see model.summary()), review it again and simplify, because for me some of the models memorized the data, and thus, have greatly overfitted.

Another evidence of overfitting is that your loss is increasing, Loss is measured more precisely, it's more sensitive to the noisy prediction if it's not squashed by sigmoids/thresholds (which seems to be your case for the Loss itself). Intuitively, you can imagine a situation when the network is too sure about output (when it's wrong), so it gives a value far away from the threshold in case of random misclassification.

Accuracy or loss fluctuates.

some portion of examples is classified randomly, which produces fluctuations, as the number of correct random guesses always fluctuates (imagine accuracy when coin should always return "heads"). Basically, sensitivity to noise (when classification produces random results) is a common definition of overfitting

The training loss at each epoch is usually computed on the entire training set.  The validation loss at each epoch is usually computed on one minibatch of the validation set, so it is normal for it to be noisier.

Take care of your batch size. Sometimes it needs to be adjusted:

Smaller batch sizes give noisy gradients but they converge faster because per epoch you have more updates. If your batch size is 1 you will have N updates per epoch. If it is N, you will only have 1 update per epoch. On the other hand, larger batch sizes give a more informative gradient but they convergence slower and increase computational complexity.

At university, I had English lessons for 2 years. No benefits.

I also was learning Italian for multiple months and reached a basic level. I studied German for 2 months in a free university course. I studied Spanish with Duolingo. I forgot all these languages while having some basic level of understanding.

A few observations at this moment:

• it's easy to forget a language you don't use;
• it's hard to learn a language if you don't know its application in real life;

I started noticing I need English for my first software development job. Software documentation is better written and updated in English. The customers send their requirements in the language as well. I should have googled problems in my native language because I'd get poor answers otherwise. It seemed like decent reasons to start worrying about language learning again. But this time, more productive.

Why school language classes are boring?

Reading and memorizing useless information doesn't make sense, right? That is how it seems to us when we study something at school or university. Without a clear indication of real-world usage, we don't see a point in learning anything. We could have non-boring classes and teachers, it'd help to encourage interest. Yet I, at least, should understand the real-world application of a thing I try to learn.

Educational establishments give us the necessary and unnecessary fundamentals. Though they don't provide information on how, when, and why to use them. They give us many things to memorize, yet they don't say why we need them.

Learning a language is difficult and requires a long-term commitment. How to do this effectively when you don't know the end goal? "It's important to know a foreign language". I got this, but where exactly it's important? Why should I use a foreign language?

Defining a goal

So, back to my first IT job. I started using English every day when writing or reading documentation, talking to clients, googling information. I got used to reading content in a foreign language. I started using Reddit, reading books with parallel translation(and without it too), watching movies and series.

I knew I'll be using the language more and it's super applicable to daily life. That's why learning becomes much easier. Now I'm gonna describe what I've tried, what worked for me, and what didn't - to make this article useful a bit. These tips apply to any language you learn.

Reading books. In the language you learn, of course. I was reading mostly programming books at that time. The technical language was simpler to start with. I downloaded English versions of some programming-related books and started reading them. It was unusual at first, I didn't understand much. Though after reading more and more, it became easier. After some time I tried the same approach with not only technical books. It was more difficult than reading technical information. Fiction books are the hardest because there are many adjectives and phrases people don't usually use.

It's an effective technique to learn how to use and interconnect the words and build sentences. This method also improves your talking(makes words simpler to produce with your mouth) if you read aloud.

Memorizing words. When you just started it's useful to know the fundamental words you can use. It's worth remembering the top 100 or so of the most used words in the language. Later, the situation becomes complicated. Rote words memorizing doesn't help much if you don't use the words you memorize. Don't forget about the forgetting curve.

I tried writing words down, making visual associations to every word. It didn't help in a long-term perspective. The words I remember are the ones I met in some context more than once.

Talking. It helps to automate producing phrases in your brain. To improve this skill, you should, guess what, talk. I found multiple language exchange buddies that helped me with English and I helped them with Ukrainian or Russian. Reddit has such subreddits, or you may take a look at various Discord servers.

This method also means chatting and speaking with people without exchange, just usual talk. Find communities where you can share your opinion and read what other people talk about. Engage in discussions. I used Google Translate when I talked on such platforms at first.

Listening. It also means watching videos, listening to podcasts. It helps you get used to how people talk in the language. I tried listening to podcasts, but it doesn't help much and it's boring when you don't understand most parts of it. However, there are podcasts for entry-level practitioners, they may be fun. I tried to watch movies, but it wasn't a fun experience. It's active learning, not laying on a bed and enjoying. Yet it's an effective way to get used to how others pronounce words and connect them into sentences.

Writing. It's an underrated exercise. Join various communities you like and chat with people. And, don't skip this one, write notes. Create a diary, if you don't have one. Or, start a blog. Or, a private notes space. Write your thoughts, plans, goals, fairytales somewhere. Writing helps you connect all the aforementioned skills to produce meaningful text. It indicates what words you don't know, don't understand, and grammar rules you miss.

If you noticed, I didn't include a grammar section. You should know its basics, but if you don't understand some parts, it's okay. Go practice and you see what are your weak parts in understanding it.

If you don't know what to write about, I suggest these exercises:

• Write what do you see now, describe everything.
• Pick a random word and write its definition. It can be a noun, adjective, concept, etc. We all know what water, car, and cynism mean, but try to explain their meanings. Then, pick another word from a previous sentence or a random one again and explain it.

The most important thing to do is to find what interests you and integrate language learning there. You may find watching movies stupid, but you like playing games. Think of how to play games and learn the language. Maybe playing some game with foreign people with whom you can talk? If you like science, you may try watching YouTube videos explaining some aspects of it in the language you learn. Or, find scientific papers and read them. There are many possibilities. Try something and see what do you enjoy.

We're bad at remembering

The brain isn't good at storing things but generating ideas. It also depends on what sort of things, but we tend to forget them anyway. If something is unique or interesting, it's simpler to remember, right?

Hermann Ebbinghaus ran memory experiments on himself. He tried to remember nonsense syllables like "ATF", "UBH". Then, tested how well he could retain the data he's learned. Thus, the forgetting curve appeared.

Some people recollect specific formats of information better. For example, as mentioned, unique or compelling. A well-rhymed poem or a song, which we can't get rid of sometimes. Maybe you also noticed it's simple to remember spatial information. You know where the nearest shop is and where to find the section with bread. Or, where the things are placed at home. You don't remember intentionally where your microwave is, do you? Yes, you see it many times and it stuck in your head well. But even the first time you brought it home - you didn't memorize the place.

You may try to list formats of information you memorize better. In this article, however, I'll talk about spatial representation and associations. These two are the building blocks of a memory palace.

It's a system to connect information, to memorize and retain it better. It's not exactly a particular place, because one may have multiple palaces. However, you may have an entry point to access the other places. Without a place, the method downgrades to devising associations. Which is not bad too.

Simply speaking, it's a private space in your head where you remember where did you "put" some information. If you have a big palace, you can stroll there looking for what you need or having nostalgia. The good thing is it's completely yours, no one can see it! Also, it's not required to be a palace or castle. It can be anything spatial. If you can conceive higher dimensions, you're welcome to create such a place too.

My story of usage

I knew about this technique since school while watching The Sherlock series. It showed how neat-looking those palaces are. In university, I ran against the need to pass the tests. I needed to remember completely impractical information, such as names, dates, and terminology. At the time, I didn't hesitate in my choice of the place to study. I didn't know what I want to do. So I was down to non-global choices: how to pass the exams.

The first approach is to cheat by using prepared answers on small papers. There were some exams where students couldn't use them due to high observability.

The second approach is rote learning. A few hundred questions and answers on average. Boring and not effective.

The third approach is learning to understand. It takes more time because I should have to study many related materials to fully understand a topic. And what's a sense of doing it if I don't need the information in my life? Impractical.

The fifth approach was to memorize the exam's answers but effectively. I love experiments, so I went with this one. I recalled the memory palace method, read more theory and started practicing. It took me a few days to memorize all the answers from one exam. I passed it and got a high grade. Not the highest because I did poor work during the semester, so how can I get it? Though, the exam answers were perfect. But not my knowledge(yet the tests' aim wasn't to estimate the knowledge).

I loved the experiment and decided to continue memorizing other than exams information. For example, historical dates, public transportation schedule, information about other people I met(hobbies, sayings, phone numbers), etc.

6 years later, I don't use this technique currently. As I know what I want to pursue, I'm more interested in learning rather than storing raw information. It doesn't mean the method is bad. One should use it either out of curiosity or for specific cases.

Is a memory palace for you?

This system has its limitations and use cases. It's good for memorizing data in a format, which fits you best, in a particular space. Thus, you can "retrieve" the information with ease, mimicking the usual walking in familiar places.

While the method is prominent to memorize almost anything, it doesn't help you understand the data. You won't learn by only memorizing. What you do is having raw information. When you retrieve it, you can then explore it better. So, one may store ideas to retrieve them later for further "investigation". However, you can use usual note-taking for it(as for other raw information too).

It also isn't gonna work for you if you don't want to spend time every day reviewing what you've put in the palace. The same rules of forgetting apply to memory palaces: you will be forgetting the associations you made. Though, some of them aren't so easy to forget due to their uniqueness or ridicule. What seems you remember forever, you're going to forget sooner or later.

Use cases? If you need to remember any information without its understanding, you can use the approach. When you can courageously use the memory palaces:

1. Preparing for exams. Teachers still require students to know useless information such as random facts, numbers for the tests. You can courageously use memory palaces.

2. Speech or presentation. While talking, walk through familiar places to retrieve necessary images to remember what are the next points you want to deliver to the audience. The method is especially good at storing data sequences.

3. Remembering phone numbers. And other raw information that's difficult to memorize usually: dates, time, codes.

And the cases when a memory palace isn't the best fit:

1. You want to understand the information. I.e. learning.
2. You don't have time to review the palace regularly. In the beginning, it'll be every day. We still are humans that forget any kind of information sooner or later.
3. You have problems creating visual associations or navigating in space. At least, it's worth trying to see whether the method works for you. Note that most people don't have such problems, I'm talking more about such issues as aphantasia.

How to create a memory palace

One only needs to have a familiar place such as a home to store the associations. It can be even one room, or a road to a shop, work, etc. The most important point is a place should be familiar to you. Otherwise, it's easy to lose stored information due to lost/distorted space.

Let me show you a brief example, then we'll talk about creating palaces for more heavy use.

Close your eyes and visualize your way to the shop in the head. Now you have storage space. Let's "put" some information there. For example, we need to memorize a shopping list: bread, milk, batteries, cheese, coca-cola, sugar, 2 carrots, and jelly.

A regular way would be putting the items as they are in a sequence along your familiar way to a shop. Now you'll remember you have a shopping list, and maybe even the first few items. However, without linking such raw information, it's difficult.

A memory palace way is following. Put a bakery near the beginning of your path to the shop. As soon as you come out home, you see a bakery and a tall guy near it suggesting you free bread. The bread gets a yellow pack of milk out of its pocket and tells you to taste it(yes, it can be absurd, even better). You enjoy milk and feel how its taste becomes so bitter that you drop it. The package broke up into small batteries, which spark. You move away from the bakery and see an enormous piece of cheese. It seems like a building! There is an entrance door. When you open it, you see the small coca-cola-looking creatures that sell sugar on a sugar fair. 2 coca-cola-like creatures swim in 2 sugar pools, where they dissolve. The pools' sugar transforms into carrots! The carrots become bigger and bigger until the moment they're bigger than the cheese building. Bam! An explosion. All the things became a jelly mass.

Was it difficult to remember? I presume not. Why? It was absurd(see Why the peculiar stands out in memory), funny, and linked. The associations you've used mean real-world things you wanted to memorize. Plus, all of them were connected with a story. A sequence of visuals is simple to remember.

See also:

• What makes an image memorable?

Associations

You could utilize usual real-world objects without any absurdity. The problem is you get the same representation for an object. If you want to use a "carrot" in multiple stories, you'll get into a situation of mixing things up. Also, it's not memorable. You may see carrots every day, but not a talking bread with big pockets.

Make ludicrous, absurd associations with the objects you want to remember.

The second issue you may encounter is it's simple to have these absurd associations separately, but you forget them in a story. Because of a poor connection. We got a swimming coca-cola, but what's next? You should devise a story about where it swims, what happens next, how do you see that. It's even more important to have a good linkage between images than an absurd association for an image.

Summary of what do you need to create the first palace:

• A place to store objects. A road, street, room, other familiar places.
• An association with real-world information you want to remember. It may be absurd, but the connection is more important.
• A connection between associations. These should be unique and funny, to better memorize a story.

I'll refer to associations with the connections as a story.

Palace of stories

The palace in "memory palace" stands for many places. A place where you have access to other places and information. So you can have many locations where to put the stories. You may think you need a big location, like a real palace or castle. Thinking about your house, rooms there and all the roads you know, it may seem that it's not a lot of stories you can place there.

What you should have is an entrance location where you store all kinds of data: stories or other locations. Otherwise, it's easy to forget where did you store something. Try to walk through the same path. Entrance point(e.g. your entrance door in a house), then take any direction you want. Later, when you get used to your location, you may walk backward, jump to other places and so.

What to do with large amounts of data? Some of it can't be placed inside one familiar space. I used 2 approaches. You may experiment with others and see what works best for you.

Choose bigger locations. Thus, you can hold more stories inside one. But still, follow the rule of knowing the location well.

Resize objects. If you have to put a house inside a familiar room, you gonna resize either the house or the room. Resizing helps to have fewer locations. However, a new issue appears. It's harder to have more than <X> objects inside a particular area. Especially, if there are no unique dividers. For example, you decided to store a book summary inside one room on your mouse pad. The mouse pad area is a square where the objects won't have recognizable transitions. So you need to put more effort into making better associations and their interconnection.

However, aren't all the places part of something bigger? A room is in a house, a house is on a street, a street is in a city, and so on. It's simpler to remember a few objects inside one location. But if you scale a place down to details, you may put more! The difference is in the place details. Do you remember a book shelf's color, size? Your desktop accessories placement? If you don't, it's better to not scale things much.

A good memory palace properties

You can think up a lot of places to accumulate the stories. However, there are preferences I'd suggest taking a look at.

• Good lighting. A place shouldn't be dark because it eliminates its unique properties. All you see is some more some less dark things. It's almost the same as using a one-color empty room. Only the strong connections between objects allow you to remember a story. The method though suggests using places as an additional feature to enhance remembering.
• Familiarity. If you don't remember a space you put things, they can be lost or become distorted.
• No many repeatable objects because you may mix the stories up. Come up with more or less unique features for every object you want to memorize.
• It should be big enough to contain spare stories. In case, you need to alter a story and add or remove objects there.
• It should be categorized. E.g. a separate house for work-related information, a few houses for my personal thoughts, a street with all its shops for book summaries, etc. It's easy to store everything on the go, but it becomes harder to look for things because they can be everywhere.

Regarding the last point, you may have a place where you put everything you should remember and categorize it later. It's useful when you don't have time or are in doubt where exactly to "put" the objects. Yet don't forget to clean up the place for temporary stories.

Numbers

You may be noticed that some data is difficult to memorize. A firm example is numbers. How can you associate numbers? If you're a football fan, recall the players' numbers on t-shirts. But even then, it becomes hard when players start to repeat.

Putting a word into a palace is simple because it's easy to visualize it. Yet it's more arduous to visualize a definition, concept. Then, one may need a few images. Words are abstracts that represent something you may interact with. Numbers constitute a different concept, they're more abstract.

A possible solution is to give every number from 0 to 100 its image association. Thus a phone number becomes a sequence of 5 images that's easier to memorize. A strategy to pick an association for one number may vary. It's a topic for another article. You can read about the approaches in the Further reading section.

Advanced techniques

When you have many things to store in a palace but struggle to find new places, this may help you. While using ready-made spaces is easier, one may also create his/her own versions or completely new spaces.

There is software that allows people to design a room, a house, or even bigger places. This also allows you to have instant access to a place in case you forget some detail.

There is Minecraft also. It's simple to create places there. I was experimenting with it myself. A good thing is I don't need to spend a lot of time designing a place because all I have are cubic-like structures. It seems it doesn't provide a possibility to create details, but it's not true. There are peculiar blocks I can put to make a place unique and memorable.

An advantage I may extract from such techniques is the possibility to customize places for my needs. E.g. I can design a large house specifically for book notes. There will be bookshelves, unique doors, and paths.

If you don't want to spend time creating places from scratch, you may try to search for Minecraft maps. There are whole cities there! And castles, large houses, etc. There is even the Hogwartz map from Harry Potter.

The other alternative is to look for other virtual places. For example, in games, movies. Notice though, the fewer details, the more unique spaces you need.

Summary

Memory palaces are suitable for you if you need to store raw data. They don't help you learn but memorize much information. The idea is to have a space where you can store the data in a form of visualizations. Along with spatial representation, visualizations are easy for the brain to memorize fast and remember. A good memory palace has 2 key features: organized space to "put" things and unique connections between the things. The space helps you to find the first element in the story. Unique connections help you to recall the other elements.

Keep in mind you need to review your palace periodically: walking there and see what you've put. Without it, the images are going to disappear or alter, so the original information becomes distorted.

Now, you understand the key principles of the technique. Experiment and see what works for you and what doesn't.

If you have questions or feedback(I would like to extend the guide to make it more ultimate-like), drop me a message on Twitter.

Further reading

You also may be interested in reading the following:

• Mnemonic Association System for Numbers.
• Augmenting Long-term Memory by Michael Nielsen.
• Moonwalking with Einstein. The book I highly recommend reading if you want to explore other mnemonics techniques(and memory palaces too).
• What active learning is.

You can try and get bored. It's normal. Instantly I want to do something useful or enjoyable. Taking a pause and doing nothing isn't regarded so. We like doing something. Staring at the ceiling, and/or contemplating the thoughts isn't "useful". But isn't it?
We like to consume a lot of information. A new video about cosmos, nice. A new book recommendation, gonna read it immediately! If I'm tired, I watch something.

Consuming feels great. The issue I face is producing new ideas.

Well, consume relevant information to get ideas from there?

Yes, but also why not "connecting the dots" by ourselves? We may produce interesting ideas while having only a few. And engaging thoughts about a topic. The brain is so great, it does some thinking in the background. While we sleep, it consolidates the information we consumed that day. While we walk, eat, swim, it creates new neuron connections and "forgets" the others.

Take a pause and do nothing. Leave the thoughts about a desire to eat. What do you see? Random stuff, but sometimes gems. Write them down. Continue the contemplation.

I added 15 mins of the "do nothing" time slot in my schedule. I don't stick to it much, but I try to. It helps to realize I have an intriguing perspective on 10 pages of the book I've read recently. Or, a new project idea out of nothing. Another issue is not to forget to write it somewhere. That's another topic, but I want to mention the importance of note-taking too.

Isn't it better to have all the ideas you produced rather than a few you've remembered? The brain isn't a great place to store information, but to produce it. How to understand what to write down? I try to write all ideas, even those I may reject in the future. It's laziness that doesn't allow us to write all the notes down. We need to reach a smartphone or laptop, open a note-taking app, find a suitable place to put a note...

Even though we think we should do useful or enjoyable stuff, we also should get bored from time to time. Get bored -> wrote interesting thoughts -> review them later. After consuming content, it's worth taking a break and ponder about it. Fake busyness pulls out our time. I can't keep track of the time I lost while being in the "flow". The flow is any action that the brain automates, or allocates resources to tackle a task. For example, watching a movie, walking, doing a routine. Close the active and pending tasks to see what's left.

The fake busyness also consumes a conscious time we're aware of. That's where the thoughts about time moving fast come from. Time goes fast when we don't feel it. The flow does so.