DEV Community: George K.

How to reset scroll position to top in React Router

George K. — Mon, 07 Jul 2025 16:28:00 +0000

With React Router navigation if your links are located somewhere not in the top of the page once you go to a new page your scroll position would be where it was, sometimes in the bottom of the page. There is an easy fix to that.

The idea is to create a useEffect watching any changes in the URL and once triggered it will scroll the current view to top. Pretty simple.

We can create a component ScrollToTop.js:

import { useEffect } from "react";
import { useLocation } from "react-router";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Optional if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}

And then in you main file where you declare routes import it and add inside the Router before the Routes, for example:

      <Router>
        <ScrollToTop />
            <Routes>
              <Route path="/" element={<Home />} />
              {/* rest of your routes */}
            </Routes>
      </Router>

And that's all. Now even if you click on a link somewhere in the bottom of your page to change the URL the new view will open scrolled to top.

Thanks!

Deploying a MERN full-stack web application on vercel.com (with Express and Vite as a monorepo)

George K. — Sun, 18 May 2025 16:04:50 +0000

Deploying a full-stack web application on vercel.com

Vercel offers free hosting with quite a generous possibilities, at least at the time of writing this in May 2025. It is a serverless configuration, which mean we do not start Express server normally but there is a way to overcome this limitation and in this guiide we will see how to deploy a full-stack web application with Express server and React (Vite) in the frontend.

Create an account at Vercel with GitHub and authorize Vercel to see your private repo(s).

We can deply a full-stack app in 2 ways:

as 2 separate apps (server and client)
as one app from teh monorepo

Let's see the second option as if you are working as a solo developer on the app you are doing both, a server and a client, anyway.

Organizing the files and folders

| For this guide we will assume that your server's main file is called index.js.

For this approach to work we need to have the following structure of the app where in the root of your project is the client and the server is inside root/api:

root
/api (in this folder you have your entire server with all the related files, for example:)
    /models
    /controllers
    /routes
    /node_modules
    index.js
    package.json
index.html
package.json
/public
/src
vite.config.js

In root/vite.config.js we need to make sure to set the base url for the frontend and the output production folder. Also we can clean the dist folder everytime we rebuild to make sure there are no artefacts left from the previous builds:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: "/",  
  build: {
    outDir: "dist",
    emptyOutDir: true  // Clean the dist folder before building
  }
});

In the root/ create a file vercel.json where we will provide the following config:

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/index.vercel.js"
    },
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

This will make sure that the reuqest to server's api go where they hav to and the frontend routes will be treated accordingly.

Now for this to work we need to check if the routing system in the server is setup properly. so all the backend routes start with /api prefix.

You can add it as the first part for all route in your main server's file (ie, index.js):

app.use("/api", require("./routes/routes.js"));

In root/package.json make the scripts section to be like so which will allow us to test the production build before uploading to Vercel:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "nodemon ./api/index.js"
  }

This will allow to start a server from teh root with npm run start and client with npm run dev in development. And if you'd want to test the production build from teh zdistz folder you can build it with npm run build, start the server with npm run start and open localhost:SERVER_PORT_NUMBER in your browser.

Config for the client to see correct URL of the backend

If you do not have it yet, add a config.js file in your fronend src/ folder to dynamically choose to which server connect, either the loca one while developing or the deployed on in production:

export const URL = window.location.href.includes('localhost')
  ? 'http://localhost:4444'
  : 'https://wallpapers-by-alex.vercel.app';

The deployed URL is the one you will get from Vercel.

To use this URL in your code where needed to send a request to a server first import it:

import {URL} from "../config";

And the add to the request's URL like so:

      const response = await axios.post(`${URL}/api/create-checkout-session`, dataToSend, {
        headers: {
                    "Content-Type": "application/json",
                 }
  });

| Another way could be to add /api prefix for all the backend request right into config:

export const URL = window.location.href.includes('localhost')
  ? 'http://localhost:4444'
  : 'https://wallpapers-by-alex.vercel.app/api';

Then in frontend's request you ca just use:

      const response = await axios.post(`${URL}/create-checkout-session`, dataToSend, {
        headers: {
                    "Content-Type": "application/json",
                 }
  });

without ading api before route name as /create-checkout-session in this example.

Server's setup

To prepare your Express server to run in Vercel's serverless environment inside your api/ folder create a new file called index.vercel.js.

We will import the server's main file (ie index.js) and and export a serverless function handler:

// Import your server main file
const app = require('./index');

// Export a serverless function handler
module.exports = (req, res) => {
  return app(req, res);
};

The index.js, the main server file, should be modified in a way that it doesnt start in porduction environment, but rather is only exported.

For example:

// Main server file, ie index.js
// Imports and initializations
const express = require("express");
const app = express();
require("dotenv").config();
const cors = require("cors");

// Cors setup to allow requests in production from the client
app.use(cors({
  origin: "*",
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization", "Accept", "X-Requested-With"],
  preflightContinue: false,
  optionsSuccessStatus: 204
}));

// Enabling requests body handling by Express
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Importing routes and using api prefix for them
app.use("/api", require("./routes/routes.js"));

// Export the Express API to be available for the serverless function handler
module.exports = app;


// And for development only start the server if we're not in a serverless environment
// This will only happen locally in development mode
if (process.env.NODE_ENV !== 'production') {

  // Serve static files from the dist directory
  app.use(express.static("dist"));
  // Serve index.html for all other requests
  app.get("/{*splat}", (req, res) => {
    res.sendFile(__dirname + "/dist/index.html");
  });
  // Start the server
  const port = process.env.PORT || 4444;
  app.listen(port, () => console.log("🚀 Listening on port: " + port + " 🚀"));
}

In root/api/package.json check the scripts to tell Vercel that there is no build commands for the server:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "build": "echo 'No build step required'",
    "vercel-build": "echo 'No build step required'"
  },

The rest of the app stays all teh same.

Deploying to Vercel

Commit all the changes and push to GitHub.

In "Import Git Repository" choose the repo with your project and import it.

Give it a name.

In "Framework Preset" choose "Vite"

In "Root Directly" keep it ./

Expand "Build and Output Settings".

We need to change "Install command" to install npm packages for both clietn and server:
npm i && cd api && npm i

Press "Deploy" button.

After deployment process finished get back to the dashboard and check the URL of deployemnt, your website should be visible now. Copy the URL and update your root/src/config.js for your client to reach the server at the current production URL, such as 'https://your-new-website-address.vercel.app'.

Commit the changes and push to GitHub. Vercel will automatically re-deploy your project and you client will be able to communicate with your server properly.

Environment variables

In the project "Settings" on Vercel there is a section "Environment variables" where you need to put all the variables you have in .env file (if any). Things like your DB connection string, any API keys and so on...

Running the app locally in development with this setup

To start the development version of your app locally with this setup from the root folder of your project start the frontend with npm run dev.

From the /api folder start the server with nodemon index.js.

Success! Right?

And here is a repo with an example of a project setup to give you an idea.

Make your website visible with meta tags

George K. — Wed, 07 May 2025 15:28:25 +0000

We, the people, we open a website and we read the text and see the images. Computers see our pages slightly differently. While search engines can analyze the content and deside on ranking based on keyword density and other content parameters, they also rely on metadata to understand the context of the page.

Meta tags are snippets of text that describe a page's content. They don't appear on the page itself, but only in the page's code.

Meta tags are used to provide information about the webpage to search engines and other web services. They can help improve the visibility of your website in search engine results pagesand enhance the user experience.

On top of that with meta tags we can control the appearance of those preview cards we see when we share a link through a messanger app or a some social media.

Having proper metadata set for your website is like a cherry on top of a cake, absence of metadata make ruin the impression of otherwise a perfectly made website and it can negatively affect the SEO of your website. Bummer.

How to check the metadata of your website?

There are many tools available to check the metadata of your website. One of the most popular ones is Check Yo Meta. This tool allows you to enter your website's URL and view all the meta tags present on the page. It also provides information about the title, description, keywords, and other important metadata.

On top of that you can check some crucial SEO metrics and Accessibility issues of your page.

If you enter the websiite's domain or URL in the input field and click on the "Check Yo Meta" button, you will see a detailed report of the metadata present on the page. The report includes information about the title, description, keywords, Open Graph tags, Twitter Card tags, and other important metadata.

You can see a preview of the social cards that will be displayed when the page is shared on social media platforms and if your website's URL is shared through some messaging app.

With the meta tags editor you can add or update the tags and see the results in the preview cards.

Finally you can get the metadata code snippet which is updated in real-time as you are changing any metadata in the form and add it to yur website's <head></head> section.

So let's make sure we have it all set up properly.

What are the most important metadata affecting your website SEO and visibility?

Title tag

The title tag is an HTML element that specifies the title of a webpage. It is displayed in the browser's title bar or tab and is also used by search engines as the clickable headline for search results. The title tag should be concise, descriptive, and relevant to the content of the page.
It should ideally be between 50-60 characters long and include relevant keywords.

<title>Your Page Title</title>

Meta description

The meta description is a brief summary of the webpage's content. It appears below the title in search engine results and provides users with a preview of what to expect on the page. A well-written meta description can improve click-through rates (CTR) and attract more visitors to your site.

It should be between 150-160 characters long and include relevant keywords.

<meta name="description" content="A brief description of your webpage's content.">

Meta keywords

The meta keywords tag is used to specify a list of keywords relevant to the webpage's content. However, most search engines no longer use this tag for ranking purposes, as it was often abused by webmasters. It's still a good practice to include it for completeness, but it may not have a significant impact on SEO.

<meta name="keywords" content="keyword1, keyword2, keyword3">

Robots meta tag

The robots meta tag is used to control how search engines index and crawl a webpage. It can be used to prevent search engines from indexing a page, following links, or archiving content. This tag is useful for controlling the visibility of certain pages on your site.

<meta name="robots" content="noindex, nofollow">

Open Graph meta tags

Open Graph meta tags are used to control how your webpage appears when shared on social media platforms like Facebook and Twitter. These tags allow you to specify the title, description, and image that will be displayed when your page is shared. This can significantly improve the appearance of your links on social media and increase engagement.

<meta property="og:title" content="Your Open Graph Title">
<meta property="og:description" content="Your Open Graph Description">
<meta property="og:image" content="URL to your image">          
<meta property="og:url" content="URL of your webpage">

Twitter Card meta tags

Twitter Card meta tags are similar to Open Graph tags but specifically designed for Twitter. They allow you to control how your content appears when shared on Twitter, including the title, description, and image.

<meta name="twitter:card" content="summary_large_image">    
<meta name="twitter:title" content="Your Twitter Card Title">
<meta name="twitter:description" content="Your Twitter Card Description">
<meta name="twitter:image" content="URL to your image">

Canonical tag

The canonical tag is used to indicate the preferred version of a webpage when there are multiple versions with similar content. This helps search engines understand which version to index and rank, preventing duplicate content issues.

<link rel="canonical" href="https://www.example.com/your-page-url">

Viewport meta tag

The viewport meta tag is essential for responsive web design. It controls how a webpage is displayed on different devices, ensuring that it looks good on both desktop and mobile screens, by setting the initial scale of a webpage to be calculated based on the screensize of a user device. This tag is crucial for improving user experience and SEO.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Charset meta tag

The charset meta tag specifies the character encoding for the HTML document. It ensures that the text is displayed correctly in different browsers and devices, especially for non-latin characters. The most common encoding is UTF-8.

<meta charset="UTF-8">

Author meta tag

The author meta tag is used to specify the name of the author of the webpage. While it doesn't directly impact SEO, it can provide additional context about the content and its creator.

<meta name="author" content="Your Name">

Language meta tag

The language meta tag specifies the primary language of the webpage's content. This helps search engines understand the language of the page and can improve its visibility in relevant search results.

Also, the browser's built-in language translation features will rely in this tag to understand the original language of the page and offer your visitors corect translation features if needed.

<meta http-equiv="Content-Language" content="en">

Adding the meta tags to your website

To add meta tags to your website, you can include them in the <head> section of your HTML document. Here's an example of how to structure your HTML with meta tags:

<!DOCTYPE html>
<html lang="en">    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A brief description of your webpage's content.">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Your Name">
    <meta http-equiv="Content-Language" content="en">
    <title>Your Page Title</title>

    <!-- Open Graph tags -->
    <meta property="og:title" content="Your Open Graph Title">
    <meta property="og:description" content="Your Open Graph Description">
    <meta property="og:image" content="URL to your image">          
    <meta property="og:url" content="URL of your webpage">

    <!-- Twitter Card tags -->
    <meta name="twitter:card" content="summary_large_image">    
    <meta name="twitter:title" content="Your Twitter Card Title">
    <meta name="twitter:description" content="Your Twitter Card Description">
    <meta name="twitter:image" content="URL to your image">
    <link rel="canonical" href="https://www.example.com/your-page-url">
</head>
<body>
    <!-- Your webpage content goes here -->
</body>
</html>

Best practices for meta tags

Keep it concise: Meta tags should be brief and to the point. Avoid using unnecessary words or phrases.
Use relevant keywords: Include keywords that are relevant to the content of the page. This can help improve SEO and make it easier for users to find your site.
Avoid keyword stuffing: Don't overuse keywords in your meta tags. This can lead to penalties from search engines and negatively impact your SEO.
Use unique meta tags for each page: Each page on your website should have its own unique set of meta tags. This helps search engines understand the context of each page and improves SEO.
Test your meta tags: Use tools like Google's Structured Data Testing Tool to test your meta tags and ensure they are working correctly.
Monitor performance: Keep an eye on your website's performance in search engine results and social media shares. Adjust your meta tags as needed to improve visibility and engagement.
Stay updated: SEO best practices and social media platforms' requirements can change over time. Stay informed about the latest trends and updates to ensure your meta tags remain effective.
Use structured data: Consider using structured data markup (Schema.org) to provide additional context about your content. This can help search engines better understand your website and improve its visibility in search results.
Optimize for mobile: Ensure that your meta tags are optimized for mobile devices, as more users are accessing websites on their smartphones and tablets.

Adding meta tags to your website is a simple yet effective way to improve its visibility and SEO. By including relevant title tags, meta descriptions, Open Graph tags, and other important metadata, you can enhance the user experience and increase the chances of your website ranking higher in search engine results.

Meta tags provide valuable information to search engines and social media platforms, helping them understand the context of your content.

By following best practices for meta tags, you can ensure that your website is well-optimized for search engines and provides a great user experience.

Yours truly,
GK

Creating custom commands in your terminal

George K. — Thu, 03 Apr 2025 11:55:45 +0000

Creating you own terminal commands

Did you know that you can create your own custom commands to run in the terminal? Similar to how you use cd, ls and so on...

Why bother?

Sure you can live without it but once you get tired of repetitive commands you have to type in the terminal again and again you might appreciate the benefits if it.

For example, every day I clone student's projects and have to install node modules and then start the app.

If it's a client, I do:

npm i
npm start

Once i got tired of typing that i created my own command istart which executes both of the above mentioned commands and starts a client after installing all the node modules.

How?

On most systems, there's a file like .bash_profile, .bashrc, or .zshrc depending on your shell in the root folder which can help us to do so.

First we need to find this file on your system.

On Mac

Go to the root folder by running cd without anything else in the terminal.

Check with pwd if you are in the right place. The output is something like /Users/YourUserName where YourUserName is your username on your Mac.

Run ls -a to see the hidden files and scroll to see if you have a file named .bash_profile.

Note: macOS now uses the zsh shell by default, so instead of .bash_profile, you might want to use .zshrc. To check which shell you're using, run:

echo $SHELL

Open it in your code editor or create it if you do not have it.

In this file you might see something like:

export PATH=/usr/local/bin:$PATH
export PATH=/Applications:$PATH
export REACT_APP_EDITOR=code
export PATH="$HOME/.composer/vendor/bin:$PATH"

On Windows (with GitBash)

Locate or create your .bashrc file -- GitBash uses the .bashrc file to load custom configurations and aliases.

Open GitBash and navigate to your home directory by running:

cd ~

Check if the .bashrc file exists:

ls -a

If it's not there, you can create it with:

touch .bashrc

Open .bashrc in your code editor.

Both systems: adding aliases

This is where we are going to create our custom commands. The format is:

alias YourCustomCommand="what to do for this command"

Let's test it by making a new line after all the code you already have in this file and adding this:

alias test="echo 'hello'"

Now save the file, go to the terminal and run source ~/.bash_profile for Mac or source ~/.bashrc for Windows for the changes to take effect.

Try if it works by running test command which should print "hello" in the terminal.

If it works -- success!

Now for our case where we want to create istart which will install node modules and start the client app we will add a new line with the following code:

alias istart="npm i && npm start"

Since it executes 2 commands in sequence we can use logical && to run them one after another.

Another case is for pushing to GitHub again and again:

alias pushgh="git add . && git commit -m "updates" && git push"

Now by running pushgh you will add the current folder to a commit and push it to GitHub.

However, it will always push with the same commit description -- "updates".

This is not ideal. If you want to do a step further you can use the shell scripts to make it dynamic.

Create a new file called "autopush.sh" in the same root user's folder. Open it in code editor and put the following code there:

str="$*"
echo $str
git add .
git commit -m "$str"
git push

It will take a string argument for the commit's decription and use it in git commit command.

Now back in you .bash_profile add an alias to run this script:

alias apush="sh ~/autopush.sh"

And now we can run apush 'actual commit description' which will use sh to run the shell script 'autopush.sh' and it will pass the 'actual commit description' to be used as a description of the current commit!

Isn't it wonderful?

Your truly,
GK

How to Detect if an Element is in View with React

George K. — Tue, 20 Aug 2024 09:08:53 +0000

Sometimes we want to know if a particular element is in view to take some action. This can be useful for triggering animations, lazy loading images, or, as in our case, simply dynamically changing the background color of a section when a specific paragraph comes into view.

In this post, we will walk through how to implement this with a custom React hook, useIsVisible, to detect the visibility of the paragraph.

In the App.js file, we create a ref using useRef() and assign it to the paragraph element that we want to track. We pass this ref to the useIsVisible hook. The hook uses IntersectionObserver to observe when the paragraph is visible in the viewport.

// ... other code ...

// create a ref
const targetParagraph = useRef();
// send ref to our hook to return true or false based on visibility of ref in view
const targetParagraphVisible = useIsVisible(targetParagraph);

// ... other code ...

// styles
const styles = {
    dynamicBackground: {
    // !!! Here based on the value of targetParagraphVisible which will be true or falce we will assign pink or yellow background
      backgroundColor: targetParagraphVisible ? 'pink' : 'yellow',
    },
    // static styles
    fullViewportContainer: {
      height: '100vh',
      width: '100vw',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
    },
  };

// ... other code ...

// in the render part set ref to the paragraph
<p ref={targetParagraph}>It is initially yellow but as soon as this paragraph is visible, the background will change to pink</p>

The useIsVisible hook is the core part of our solution. This hook uses the IntersectionObserver API to detect whether the referenced element is currently in the viewport.

The hook returns a boolean (true or false) based on the visibility of the paragraph. This boolean is then used to dynamically change the background color of the section containing the paragraph.

Here’s how the useIsVisible hook is implemented in /hooks/useIsVisible.js:

import { useState, useEffect } from 'react';

export default function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    // Create an IntersectionObserver to observe the ref's visibility
    const observer = new IntersectionObserver(([entry]) => 
      setIntersecting(entry.isIntersecting)
    );

    // Start observing the element
    observer.observe(ref.current);

    // Cleanup the observer when the component unmounts or ref changes
    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return isIntersecting;
}

When the user scrolls down the page, the paragraph initially starts outside the viewport. As the user scrolls and the paragraph enters the viewport, the background color of the section changes from yellow to pink. This change is triggered by the useIsVisible hook, which detects the paragraph's visibility and updates the state accordingly.

Here is the final App.js:

import './App.css';
import useIsVisible from './hooks/useIsVisible.js';
import { useRef } from 'react';

function App() {
  // Create a ref for the paragraph which should trigger the background color change 
  const targetParagraph = useRef();

  // Pass it into our useIsVisible hook to determine if it's in view. The hook will return true or false which we will use for conditional styling
  const targetParagraphVisible = useIsVisible(targetParagraph);

  // Define static styles which will not change
  const styles = {
    fullViewportContainer: {
      height: '100vh',
      width: '100vw',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
    },
    dynamicBackground: {
    // !!! Here based on the value of targetParagraphVisible which will be true or falce we will assign pink or yellow background
      backgroundColor: targetParagraphVisible ? 'pink' : 'yellow',
    },
  };

  return (
    <div className="App">
      <section style={styles.fullViewportContainer}>
        <h1>First section</h1>
        <p>There is more content below the fold which is not currently visible in the viewport, scroll down</p>
      </section>

      <section style={{ ...styles.fullViewportContainer, ...styles.dynamicBackground }}>
        <h1>Second section</h1>

        {/* Assign the ref to the paragraph */}
        <p ref={targetParagraph}>It is initially yellow but as soon as this paragraph is visible, the background will change to pink</p>
      </section>
    </div>
  );
}

export default App;

Hope this helps!

GitHub repo with full code: https://github.com/barcelonacodeschool/check_if_element_is_in_the_view_react/tree/main

How to fix nested git submodules

George K. — Tue, 19 Mar 2024 20:10:48 +0000

What to do when you accidentally initialized a git inside another git and you can not push to GitHub...

How to fix nested git - YouTube

youtube.com

Automating Routine Tasks with Cron on Mac and Linux

George K. — Fri, 08 Dec 2023 10:23:39 +0000

Automating routine tasks is something we start doing once and never look back.

For example, I work with many node projects during the day running them locally and each require node_modules. In the end of the day I like to delete all the modules because I might not need them till next time I need them. To save space on my hard drive I run

find . -name node_modules -exec rm -rf {} \;

from the work folder and it goes through all the nested folders looking for and removing node_modules folders. Every time it's several GBs of freed up space.

Surely it can be placed into the .bash_profile with an alias to make it quicker:

alias rmnm='find . -name node_modules -exec rm -rf {} \;'

With that I can just run rmnm command which is my custom alias meaning "remove node modules" and now we can save time by typing only rmnm from any folder and it will recursively delete all the node_modules folders found.

But... It's still manual labor.

With cron we can automate such tasks, let's see how.

Unleashing the Power of Cron Jobs

Cron jobs are like silent assistants working in the background, executing tasks based on a predefined schedule. They can perform anything from simple scripts to complex operations, making them an invaluable tool for system management.

Getting Started with Cron

To check your existing cron jobs, open your terminal and type:

crontab -l

This will list all the scheduled tasks associated with your user.

Edit Your Cron Jobs

To add or modify cron jobs, type:

crontab -e

This opens the crontab file for editing, where you can unleash the magic of automation.

Anatomy of a Cron Job

A cron job entry follows this pattern:

* * * * * command_to_be_executed

The asterisks represent minute, hour, day of the month, month, and day of the week. You can customize these values or use special characters to define the schedule.

Example: automating removal of node_modules

Open crontab by doing

crontab -e

Schedule the removal command to run daily at let's say 6pm inside the folder code_projects. We will define the schedule pattern as 0 18 * * * which mean at 0 minutes at 18 hours every day and we will go into the folder with all the coding projects, let's say /Users/mike/code_projects (absolute path) and run the removal command:

0 18 * * * cd /Users/mike/code_projects && find . -name node_modules -exec rm -rf {} \;

Now every day at 18:00 it will run and delete all the node_modules within any nested folders of code_projects.

Another example if we want to clean pm2 logs on our Ubuntu server which with time eat up a lot of space:

0 0 * * * pm2 flush

Now every midnight the logs will be removed.

We can also run Node file easily. For example, our app writes files inside the project/server/output folder and we want to delete files older than 10 days.

Node.js Script (deleteOldFiles.js) which for example sits in the server's root folder project/server:

const fs = require('fs');
const path = require('path');

const outputFolderPath = path.join(__dirname, 'output');
const daysThreshold = 10 * 24 * 60 * 60 * 1000; // 10 days in milliseconds

fs.readdir(outputFolderPath, (err, files) => {
  if (err) {
    console.error('Error reading directory:', err);
    return;
  }

  const currentDate = new Date();

  files.forEach((file) => {
    const filePath = path.join(outputFolderPath, file);
    const stats = fs.statSync(filePath);
    const fileAge = currentDate - stats.mtime;

    if (fileAge > daysThreshold) {
      fs.unlink(filePath, (unlinkErr) => {
        if (unlinkErr) {
          console.error('Error deleting file:', unlinkErr);
        } else {
          console.log(`Deleted file: ${file}`);
        }
      });
    }
  });
});

Make it executable:

chmod +x deleteOldFiles.js

Cron Job: Open your crontab:

crontab -e

Add the following line to run the script daily at midnight:

0 0 * * * /path/to/your/project/server/deleteOldFiles.js

| This path has to be absolute, to find it out run pwd from you server folder.

Save and exit.

Once you've edited your crontab, you're all set. Cron will take care of the rest, executing your scheduled tasks at the specified intervals.

Pretty handy, isn't it?

Group objects with Object.groupBy()

George K. — Tue, 21 Nov 2023 08:15:24 +0000

Let's take an array with objects with different values of the key language:

const dictionary = [
    {phrase:'hello', language:'english'},
    {phrase:'hola', language:'spanish'},
    {phrase:'good morning', language:'english'},
    {phrase:'ciao', language:'italian'},
    {phrase:'おはよう', language:'japanese'},
    ]

We can group the entries by language with Object.groupBy() method and get an object with organized phrases inside arrays for each language:

const organized = Object.groupBy(dictionary, ({language})=> language)

/* we get an object with sorted and grouped entries
{
english:[
{phrase: 'hello', language: 'english'},
{phrase: 'good morning', language: 'english'}
],
italian:[
{phrase: 'ciao', language: 'italian'}
],
japanese:[
{phrase: 'おはよう', language: 'japanese'}
],
spanish:[
{phrase: 'hola', language: 'spanish'}
]
}
*/

We can also group by one of the nested properties, for example this data structure:

const veryComplexDictionary = [
{
  phrase: 'hello',
  details: {
    origin: 'earth',
    translations: { spanish: 'hola', italian: 'ciao' },
    meta: { level: 1, category: 'greeting' },
  },
  language: 'english',
},
{
  phrase: 'hola',
  details: {
    origin: 'earth',
    translations: { english: 'hello', italian: 'ciao' },
    meta: { level: 1, category: 'greeting' },
  },
  language: 'spanish',
},
{
  phrase: 'good bye',
  details: {
    origin: 'earth',
    translations: { italian: 'ciao' },
    meta: { level: 2, category: 'farewell' },
  },
  language: 'english',
},
{
  phrase: 'ciao',
  details: {
    origin: 'earth',
    translations: { english: 'hello', spanish: 'hola' },
    meta: { level: 1, category: 'greeting' },
  },
  language: 'italian',
},
{
  phrase: 'おはよう',
  details: {
    origin: 'earth',
    translations: { japanese: 'こんにちは' },
    meta: { level: 2, category: 'greeting' },
  },
  language: 'japanese',
},
];

And let's say we want to group data by category, such as greeting, farewell:

const organizedVeryComplex = Object.groupBy(veryComplexDictionary, ({ details }) => details.meta.category);
console.log(organizedVeryComplex);

Of we can implement the same method with reduce():

const organized = dictionary.reduce((accumulator, item) => {

  const { language } = item; // item is an object, language is the name of a language

  accumulator[language] = accumulator[language] || []; // assign an empty array for the current language or if it exists already assign itself

  accumulator[language].push(item); // push current object into the current language array

  return accumulator;
}, {});

And we can achieve the same results with a for...of loop:

const organized = {};

for (const entry of dictionary) {
  const { phrase, language } = entry

  if (!organized[language]) {
    organized[language] = []
  }

  organized[language].push({ phrase, language })
}

Mastering logical thinking for programming

George K. — Wed, 24 May 2023 10:50:29 +0000

Distilling logic to come up with an algorithm before coding aka Logic —> Pseudocode —> Code approach

Programming is all about logic. In fact, we might even say that programming is a reflection of the logic implemented in a certain programming language.

So before we start writing code it's a great idea to think about logic and figure it out first.

Especially if you feel like "I'm not sure where to start", "I understand it but don't know what code to use", "I don't know how to solve it", etc..

I’d say if we start with the logic we do not even care about any exact programming concepts, rather just trying to come up with an algorithm to solve this as a purely logical task.

First we need to clearly understand what we are being asked to do. Let's take this coding exercise as an example:

// Write a function called getWords which takes a string as an argument.
// The string will contain some uppercase and lowercase letters mixed with some numbers.
// Create a function which will return this string without numbers all in lowercase and 
// with spaces between words.

//======================  EXAMPLE  ========================

// original sentence = An2323t2323one32llo123455Likes567323Play323ing567243G2323a3mes345

// function call
getWords("An2323t2323one32llo123455Likes567323Play323ing567243G2323a3mes345")

// expected output
"antonello likes playing games"

In this case — we take a mix of letters and digits and we need to discard all the digits and only have letters; before every letter in uppercase we need to have a space since they signify beginning of a new word.

So once we understand what is the final goal we focus on the logic. We can ask ourselves a question — how do I do it in real life, without thinking of programming. Of course initial response our brain will give is “I just see letters among those numbers”. But we need to force ourselves to distill all the tiny steps we do unconsciously behind that.

For example, below we can show the process of thinking about logic and writing it down. Shown in several versions to illustrate the progress but of course we do not need to do it in real life, we just working on one algorithm iterating and updating it along the process of our thinking. At this point we do not care how we are going to do it, we care about what we want to do:

LOGIC VERSION 1

We get a string of letters mixed with digits
We start from the beginning of the string and look at each character
1. If this character is a letter we want to keep it |––> at this point of writing we realize that we want some place to keep discovered letters so we can go back to before point 2 and inject one more step there

LOGIC VERSION 2

We get a string of letters mixed with digits
Create a place to keep discovered letter
We start from the beginning of the string and look at each character
1. If this character is a letter we want to keep it in our “discovered letters place”
2. If it’s a digit we do nothing
After we finished going through the string and discovered all the letters we have a string of text with words but no spaces |––> we can now think about this step and iterate again over step 3.1 above to think about how to add spaces

LOGIC VERSION 3

We get a string of letters mixed with digits
Create a place to keep discovered letter
We start from the beginning of the string and look at each character
1. If this character is a letter
  1. And it is in lowercase we want to keep it in our “discovered letters place”
  2. And it is in uppercase we want to add a space before it and keep it in our “discovered letters place”
2. If it’s a digit we do nothing
After we finished going through the string and discovered all the letters we have a string of text with words divided by spaces
Make them all lowercase
Task is completed and we have final results in our "discovered letters place"

Now our logic seems to be solid and we can move to the next step of writing language-agnostic pseudo code which can be implemented in any programming language. If we discover some flaws in our logic we can modify it, it’s not set in stone. But most likely it will be minor changes.

We can copy our final version algorithm, comment it out, and use it as a blueprint of for the pseudocode. Now we can use the programming concept like function. loop, condition, but we do not care about particular syntax, since it is language-agnostic.

PSEUDOCODE VERSION 1

// 1. We get a string of letters mixed with digits 
declare a function which takes one argument a string, lets call this string "str"

// 2. Create a place to keep discovered letter 
declare a variable to keep results and let's call it "results"

// 3. We start from the beginning of the string and look at each character
start loop on the "str" to have a character for every iteration

    // 1. If this character is a letter 
    condition A to check if current character is a letter (not a number)

        // 1. And it is in lowercase we want to keep it in our “discovered letters place”
        condition B to check if current letter is lowercase
            if it is we concatenate it with "results"

        // 2. And it is in uppercase we want to add a space before it and keep it in our “discovered letters place”
            if it is uppercase we join it with a space before and concatenate them with "results"
        close condition B 
    close condition A 

    // 2. If it’s a digit we do nothing
    Do nothing means we can just ignore it completely 

// 4. After we finished going through the string and discovered all the letters we have a string of text with words divided by spaces
close loop 

// 5. Make them all lowercase
Modify string to make it all lowercase

// 6. Task is completed and we have final results in our "discovered letters place"
Now we can output the "results"

close function

Now we have the pseudo code and we can try to implement it in a programming language. Now the psudo code will be commented out since we are relying on it while writing code.

Let's go with JavaScript:

CODE VERSION 1

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{
// declare a variable to keep results and let's call it "results"

// start loop on the "str" to have a character for every iteration

//     condition A to check if current character is a letter (not a number)

//         condition B to check if current letter is lowercase
//             if it is we concatenate it with "results"

//             if it is uppercase we join it with a space before and concatenate them with "results"
//         close condition B 
//     close condition A 

//     Do nothing means we can just ignore it completely 

// close loop 

// Modify string to make it all lowercase

// Now we can output the "results"

// close function 
}

CODE VERSION 2

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{
// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string
// start loop on the "str" to have a character for every iteration

//     condition A to check if current character is a letter (not a number)

//         condition B to check if current letter is lowercase
//             if it is we concatenate it with "results"

//             if it is uppercase we join it with a space before and concatenate them with "results"
//         close condition B 
//     close condition A 

//     Do nothing means we can just ignore it completely 

// close loop 

// Modify string to make it all lowercase

// Now we can output the "results"

// close function 
}

CODE VERSION 3

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{
// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string
// start loop on the "str" to have a character for every iteration

//NOW: if we are not sure which loop to use we can check reference for which loop works with a string in JS
for(character of str){

//     condition A to check if current character is a letter (not a number)

//         condition B to check if current letter is lowercase
//             if it is we concatenate it with "results"

//             if it is uppercase we join it with a space before and concatenate them with "results"
//         close condition B 
//     close condition A 

//     Do nothing means we can just ignore it completely 

// close loop 
}

// Modify string to make it all lowercase

// Now we can output the "results"

// close function 
}

CODE VERSION 4

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{

// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string

// start loop on the "str" to have a character for every iteration

//NOW: if we are not sure which loop to use we can check reference for which loop works with a string in JS
for(character of str){

//     condition A to check if current character is a letter (not a number)
    if(isNaN(character)){

//         condition B to check if current letter is lowercase
//             if it is we concatenate it with "results"

//             if it is uppercase we join it with a space before and concatenate them with "results"
//         close condition B 
//     close condition A 
    }
//     Do nothing means we can just ignore it completely 

// close loop 
}

// Modify string to make it all lowercase

// Now we can output the "results"

// close function 
}

CODE VERSION 5

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{

// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string

// start loop on the "str" to have a character for every iteration

//NOW: if we are not sure which loop to use we can check reference for which loop works with a string in JS
for(character of str){

//     condition A to check if current character is a letter (not a number)
    if(isNaN(character)){

//         condition B to check if current letter is lowercase
        if(character === character.toLowerCase()){

//             if it is we concatenate it with "results"
        }else{
//             if it is uppercase we join it with a space before and concatenate them with "results"

        }
//         close condition B 


//     close condition A 
    }

//     Do nothing means we can just ignore it completely 

// close loop 
}
// Modify string to make it all lowercase

// Now we can output the "results"

// close function 
}

CODE VERSION 6

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{

// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string

// start loop on the "str" to have a character for every iteration

//NOW: if we are not sure which loop to use we can check reference for which loop works with a string in JS
for(character of str){

//     condition A to check if current character is a letter (not a number)
    if(isNaN(character)){

//         condition B to check if current letter is lowercase
        if(character === character.toLowerCase()){
//             if it is we concatenate it with "results"
                results+=character
        }else{
//             if it is uppercase we join it with a space before and concatenate them with "results"
                results+=(' '+character)
        }
//         close condition B 


//     close condition A 
    }

//     Do nothing means we can just ignore it completely 

// close loop 
}

// Modify string to make it all lowercase

// Now we can output the "results"

// close function 
}

CODE VERSION 7

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{

// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string

// start loop on the "str" to have a character for every iteration

//NOW: if we are not sure which loop to use we can check reference for which loop works with a string in JS
for(character of str){

//     condition A to check if current character is a letter (not a number)
    if(isNaN(character)){

//         condition B to check if current letter is lowercase
        if(character === character.toLowerCase()){
//             if it is we concatenate it with "results"
                results+=character
        }else{
//             if it is uppercase we join it with a space before and concatenate them with "results"
                results+=(' '+character)
        }
//         close condition B 


//     close condition A 
    }

//     Do nothing means we can just ignore it completely 

// close loop 
}

// Modify string to make it all lowercase
results = results.toLowerCase()

// Now we can output the "results"
return results

// close function 
}

Now let's try our function.

If we run it with some input data like so:

getWords("An2323t2323one32llo123455Likes567323Play323ing567243G2323a3mes345")

We will see the following output:

' antonello likes playing games'

Everything seems to work pretty much from the first attempt except we have an extra space in the beginning of the string. Why? Because the first word start with an uppercase letter and we are adding a space before every uppercase letter in out code. So all we have to do is to get rid of the first character in the "results" variable on our code before returning it.

We can do it in several ways, one of them can be .trim() method which removes spaces in the beginning and in the end of the string.

CODE VERSION 8

// declare a function which takes one argument a string, lets call this string "str"
const getWords=(str)=>{

// declare a variable to keep results and let's call it "results"
let results = "" // <-- since the final output is a string we can assign initial value of an empty string

// start loop on the "str" to have a character for every iteration

//NOW: if we are not sure which loop to use we can check reference for which loop works with a string in JS
for(character of str){

//     condition A to check if current character is a letter (not a number)
    if(isNaN(character)){

//         condition B to check if current letter is lowercase
        if(character === character.toLowerCase()){
//             if it is we concatenate it with "results"
                results+=character
        }else{
//             if it is uppercase we join it with a space before and concatenate them with "results"
                results+=(' '+character)
        }
//         close condition B 


//     close condition A 
    }

//     Do nothing means we can just ignore it completely 

// close loop 
}

// Modify string to make it all lowercase
results = results.toLowerCase()

// Now we can output the trimmed "results"
return results.trim()

// close function 
}

And we have the perfect output:

getWords("An2323t2323one32llo123455Likes567323Play323ing567243G2323a3mes345")

// the output is:
'antonello likes playing games'

Conclusion

By following this approach it is possible to not only improve your logical thinking which is the cornerstone in programming, but also being able to learn how to break bigger challenges into smaller chunks, come up with the plan before writing code and solve the logic before coding.

It would be anit-efficient to write code without understanding the logic to only realize at some point(s) that the approach chosen is not working or something important is missed out...

Logical thinking is regarded as one of the required skills for a developer. Sometimes people think that it's a skill that can't be acquired. But from what we've seen with our students if practiced properly everybody can improve their logical thinking and learn it. It's just a matter of practicing.

What is it Like to Be a User Experience Designer

George K. — Thu, 13 Apr 2023 11:51:00 +0000

Being one of the most creative fields in IT, User Experience Design, commonly known as UX Design is one of the best paths for people who want to be in tech but are not software engineers. It's an amazing combination of science, research and art allowing designers to construct and create beautiful products for millions of people to enjoy.

But what exactly is UX design, and what is it like to be a UX designer?

In this article, we will try to understand the meaning of UX design, explore the steps of the UX design process, see the difference between UX and UI design, outline the typical tasks of a UX designer, explore the job prospects in this field, identify the personality traits and skills that make one suitable for becoming a UX designer, and highlight the soft and hard skills that are important for success in this field.

What is User Experience Design?

Have you ever noticed that some apps you use daily are clear, intuitive and enjoyable to use? You know what to click when you need something and where to look for any feature you need. On the other hand, some apps are so confusing and difficult to use, the features you need are hard to find and you get annoyed when you can not do what this app is supposed to do? The answer is in good or bad UX Design...

UX Design is the process of creating digital products or services that provide meaningful and relevant experiences to users. UX design involves understanding the needs, preferences, and behaviors of users and designing products that are easy to use, visually appealing, and efficient in achieving their intended goals. The goal of UX design is to enhance user satisfaction and improve the overall user experience by focusing on factors such as usability, accessibility, aesthetics, and functionality.

A UX designer is responsible for creating intuitive and engaging user experiences through various design elements, such as user interfaces (UI), interactions, and visual design. A UX designer works closely with other members of the product development team, such as product managers, developers, and visual designers, to ensure that the final product meets the needs of the target users and aligns with the business goals of the organization.

What are the Steps of UX Design Process?

If we compare programmers to the construction builders, then UX designers are architects. Before we will start programming an app (building) we need to have clear and thought through design (architect blueprints)...

The UX design process typically involves several steps that guide designers in creating effective and user-centered products. The common stages of the UX design process:

Research: The first step in the UX design process is to conduct thorough research to understand the target users, their needs, preferences, and behaviors. This involves conducting user interviews, surveys, and usability testing to gather insights that inform the design decisions.

Analysis: Once the research is completed, the UX designer analyzes the data to identify patterns and trends, and to define the user requirements and design goals. This helps in creating a clear design direction for the project.

Design: Based on the research findings, the UX designer creates wireframes, prototypes, and mockups to visualize the design concepts. These design artifacts help in getting feedback from stakeholders and users, and iterate on the design until a final solution is reached.

Testing: After the design is finalized, the UX designer conducts usability testing to evaluate the effectiveness and efficiency of the design in meeting the user requirements. This helps in identifying any design flaws and making necessary adjustments to improve the user experience.

Implementation: Once the design is refined based on the testing feedback, the UX designer works closely with the development team to implement the final design. This involves providing design specifications, collaborating with developers, and conducting quality assurance to ensure that the design is accurately implemented.

Evaluation: After the product is launched, the UX designer evaluates the user feedback and conducts post-launch testing to measure the success of the design in meeting the user needs and business goals. This helps in continuously improving the product and refining the design for future iterations.

What is the Difference between UX and UI Design?

If a product looks nice, UI designer did a great job. But if it feels good to use, everything is easy and working as you expect it to be, that's a UX designer's achievement...

UX design and UI design are often used interchangeably, but they are not the same. While both are related to the user experience of a product, they have distinct roles and responsibilities.

UI design, or User Interface design, focuses on the visual and interactive elements of a product, such as buttons, icons, menus, and screens. UI designers are responsible for creating visually appealing and functional interfaces that users interact with. They work on the layout, typography, color schemes, and visual elements that make up the overall look and feel of a product. UI designers also ensure that the interface is easy to navigate, visually consistent, and visually communicates the purpose and functionality of different elements.

On the other hand, UX design is a broader field that encompasses the entire user experience of a product or service. UX designers are responsible for understanding the needs and behaviors of users and creating seamless, enjoyable, and meaningful experiences through various design elements, including the user interface. They focus on research, usability, information architecture, and interaction design to ensure that the product is user-friendly, efficient, and meets the needs of the target users.

In essence, UI design is a subset of UX design, where UI designers focus on the visual aspects of a product, while UX designers have a holistic approach that encompasses the entire user experience, including both the visual and functional aspects of a product.

What are the Typical Tasks of a UX designer?

Understanding the problem, researching and talking to the users, ideation, structuring information and, wireframing, designing UI, prototyping, validating, testing, iterating and continuously improving...

As a UX designer, you will have a wide range of tasks that are aimed at creating a user-centered and effective product. Some of the typical tasks of a UX designer include:

User Research: Conducting user interviews, surveys, and usability testing to gather insights into user needs, preferences, and behaviors.

Information Architecture: Creating the structure and organization of content and features in a product to ensure easy navigation and findability for users.

Interaction Design: Designing the interactions and flows that users will follow to complete tasks or achieve their goals in the product.

Wireframing and Prototyping: Creating visual representations of the design concepts through wireframes and prototypes to gather feedback and iterate on the design.

Visual Design: Collaborating with UI designers to create visually appealing interfaces that align with the overall design direction and brand identity.

Usability Testing: Conducting usability testing to evaluate the effectiveness and efficiency of the design and identifying areas of improvement.

Collaboration: Working closely with other members of the product development team, such as product managers, developers, and visual designers, to ensure that the final product meets the user requirements and business goals.

Continuous Improvement: Evaluating user feedback and post-launch data to continuously improve the product and refine the design for future iterations.

What are the Job Prospects of UX designers?

The job market is growing as more and more companies realizing the crucial role of UX design in making sure that the product will not disappoint users and saving costs thanks to thorough research before the release...

The field of UX design has been rapidly growing, and the job prospects for UX designers are very bright. With the increasing focus on creating user-centered products and services, there is a high demand for UX designers in various industries, including technology, finance, healthcare, e-commerce, and entertainment.

The growth in demand for the UX designers growth is driven by the increasing need for organizations to create user-friendly and efficient digital products to meet the changing needs and expectations of users.

Moreover, as the importance of UX design is recognized across industries, the job prospects for UX designers are not limited to traditional technology companies. Many companies in diverse industries are hiring UX designers to improve their products and services, making the field of UX design a versatile and promising career choice.

What Type of Personality is Most Suitable for Becoming a UX designer?

While we have students coming from all sorts of backgrounds to take the UX/UI Design Bootcamp, if we can outline some of the most beneficial personality traits they would be empathy, curiosity, creativity, flexibility and willingness to listen and take feedback in a productive way...

Some of the personality traits that are typically associated with successful UX designers include:

Empathy: UX designers need to have empathy towards users and understand their needs, preferences, and behaviors. Being able to put yourself in the shoes of the users and truly understand their perspective is crucial in creating meaningful user experiences.

Curiosity: UX designers should have a curious mindset, always eager to learn and explore new ideas, technologies, and design trends. Being curious allows UX designers to constantly seek out innovative solutions and stay up-to-date with the latest advancements in the field.

Creativity: UX design is all about finding creative solutions to complex problems. Having a creative mindset allows UX designers to think outside the box, come up with unique design ideas, and create engaging experiences for users.

Communication skills: UX designers need to be able to effectively communicate their design ideas and decisions to stakeholders, including clients, product managers, developers, and other team members. Strong communication skills help in building collaborative relationships and ensuring that everyone is on the same page throughout the design process.

Flexibility: UX design is an iterative process, and designers need to be open to feedback and willing to iterate on their designs. Being flexible and adaptable to changes in requirements, constraints, and feedback from users and team members is essential in creating successful user experiences.

Attention to detail: UX designers need to have a keen eye for detail to ensure that every element of the design contributes to a seamless and delightful user experience. Paying attention to small details, such as micro-interactions, visual consistency, and accessibility, can greatly impact the overall usability of a product.

Patience: UX design can sometimes be a challenging process that requires patience and perseverance. Dealing with complex problems, multiple iterations, and varying stakeholder opinions can be demanding, and having patience is crucial in navigating through the design process with a positive attitude.

Taking criticism in a positive way: While doing the user testing sometimes designer can see that their idea doesn't work, users are confused or not satisfied. This feedback should not be taken as an offense but rather as a valuable input to improve the product during the design stage instead of releasing flawed product to the market.

Wrapping it up

To sum it up, being a UX designer involves creating meaningful and delightful user experiences through a user-centered design process. It requires a combination of technical skills, creative thinking, empathy, and effective communication.

UX designers need to understand the needs and behaviors of users, collaborate with cross-functional teams, and create intuitive and visually appealing designs. With the increasing demand for user-centered products and services, the job prospects for UX designers are promising.

So, if you are a creative problem solver with a passion for understanding users and creating impactful experiences, a career in UX design might be the right fit for you!

Our UX/UI Design Bootcamp offers a straightforward way to learn all the practical skills and land a job after graduation. It's a 9-week intensive hands-on full-time in-person experience to prepare you for starting a job as a UX designer. You will end with a portfolio of 2 complete projects – a group and individual one – and, what's more important, will be taken to the job-ready level.

Looking forward to see you in Barcelona Code School!

PS: Check out some of our graduates projects done during the bootcamp.

Movies for/about coders and such

George K. — Wed, 15 Feb 2023 16:51:56 +0000

Hi everyone!

Let's share our favourite movies/series about tech, coders, hackers and such. In other words, people like us. I'll start :)

Here is my unordered list:

The Gamechangers

https://www.imdb.com/title/tt4590930/

I'd say it's the best movie of Daniel Radcliffe so far, on par with Guns Akimbo. From a dream to big money and big responsibilities.

Mr. Robot

https://www.imdb.com/title/tt4158110/?ref_=fn_al_tt_1

What I loved is while being extremely fictionalised and far from reality technically speaking it is very atmospheric and inspiring in a way. Plus the story twist is super good.

Silicon Valley

https://www.imdb.com/title/tt2575988/

This one shows the eternal struggle and ups and downs of a tech startup. As I understand it's a comedy but the main character stress is something any founder can relate.

The Billion Dollar Code

https://www.imdb.com/title/tt15392100/?ref_=fn_al_tt_1

A typical story but the ay it is filmed and dramatised makes the characters very relatable, although the story is known and the ending is not a mystery it made me feeling and rooting for them anyway. On top of that the atmosphere of Berlin is shown in it's full glory!

Which one did you really liked? Please share 🙌

How to show a pop-up only once with React, localStorage and Material UI modal

George K. — Tue, 07 Feb 2023 14:11:10 +0000

Imagine we have a scenario where user comes to a website and has to see a pop-up or modal with some information and has to click it to see the main content.

For example, agree to Terms and Conditions, read an important warning or merely see a call to action.

But to make it less annoying, we only want to show it once to a new user and hide it for the returning users...

This can be easily done with localStorage where we can keep the data about user clicks on the pop-up.

The way it will work would be the following:

1: New user comes to the website

2: Our component renders

3: We check if we have data in localStorage about this user already clicked on the pop-up

4: If we do not have it, then in the state of component we set data displayPopUp to be true

4a: Once user clicked to close pop-up we set localStorage to popUpClickd to be true and state displayPopUp to be false

5: If we do have it we set state to displayPopUp to be false

First in our react component we will import modal:

// import useEffect and useState
import { useEffect, useState } from "react";
// import modal from material UI
import { Modal, Box } from "@mui/material";

Remember to install @mui/material with npm i @mui/material

Then let's declare a component with modal inside:

export default function Home() {
    // state variable to decide if we should render pop-up
  const [displayPopUp, setDisplayPopUp] = useState(true);

  // when pop-up is closed this function triggers, we pass it to 'onClose' property of the modal
  const closePopUp = () => {
    // setting key "seenPopUp" with value true into localStorage
    localStorage.setItem("seenPopUp", true);
    // setting state to false to not display pop-up
    setDisplayPopUp(false);
  };

  return (
    <>
      <div>
{/* conditional rendering, if displayPopUp is truthy we will show the modal */}
        {displayPopUp && (
          <Modal
            open={true}
// once pop-up will close "closePopUp" function will be executed
            onClose={closePopUp}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
          >
            <Box sx={style}>
{/* what user will see in the modal is defined below */}
              <h1>Very important message</h1>
              <h3>Just press OK button to never see it again</h3>
              <button onClick={closePopUp}>OK</button>
            </Box>
          </Modal>
        )}
      </div>
{/* this is the main content of this page */}
      <div>
        <h1>The main content</h1>
      </div>
    </>
  );
}

This will successfully render the page, display pop-up, close it when user clicks and save true in the key seenPopUp in the localStorage of a browser.

But now every time we refresh the page the pop-up will appear again although we've already seen it.

To solve this let's add the last step: useEffect to check if we have seenPopUp in localStorage:

  // the useEffect to trigger on first render and check if in the localStorage we already have data about user seen and closed the pop-up
  useEffect(() => {
    // getting value of "seenPopUp" key from localStorage
    let returningUser = localStorage.getItem("seenPopUp");
    // if it's not there, for a new user, it will be null
    // if it's there it will be boolean true
    // setting the opposite to state, false for returning user, true for a new user
    setDisplayPopUp(!returningUser);
  }, []);

Now the final code for this entire component will look like this:

// import useEffect and useState
import { useEffect, useState } from "react";
// import modal from material UI
import { Modal, Box } from "@mui/material";

// write some style to pass into modal
const style = {
  fontFamily: "Montserrat",
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 300,
  height: 200,
  border: "10px solid hotpink",
  boxShadow: 24,
  padding: 5,
  textAlign: "center",
  background: "#de4899"
};

export default function Home() {
  const [displayPopUp, setDisplayPopUp] = useState(true);

  // when pop-up is closed this function triggers
  const closePopUp = () => {
    // setting key "seenPopUp" with value true into localStorage
    localStorage.setItem("seenPopUp", true);
    // setting state to false to not display pop-up
    setDisplayPopUp(false);
  };

  // the useEffect to trigger on first render and check if in the localStorage we already have data about user seen and closed the pop-up
  useEffect(() => {
    // getting value of "seenPopUp" key from localStorage
    let returningUser = localStorage.getItem("seenPopUp");
    // if it's not there, for a new user, it will be null
    // if it's there it will be boolean true
    // setting the opposite to state, false for returning user, true for a new user
    setDisplayPopUp(!returningUser);
  }, []);

  return (
    <>
      <div>
{/* conditional rendering, if displayPopUp is truthy we will show the modal */}
        {displayPopUp && (
          <Modal
            open={true}
// once pop-up will close "closePopUp" function will be executed
            onClose={closePopUp}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
          >
{/* in the line below we pass our custom styles object to the modal via 'sx' prop*/}
            <Box sx={style}>
{/* what user will see in the modal is defined below */}
              <h1>Very important message</h1>
              <h3>Just press OK button to never see it again</h3>
              <button onClick={closePopUp}>OK</button>
            </Box>
          </Modal>
        )}
      </div>
{/* this is the main content of this page */}
      <div>
        <h1>The main content</h1>
      </div>
    </>
  );
}

Et voilà!

Please remember, that localStorage belongs to a specific browser, so if a user open this page in Safari, they will not see pop-up next time they open the page in the same Safari. But if they will open the page in another browser, for example in Google Chrome, they will see the pop-up again.

Link to the sandbox with code

Cheers!