Forem: Ozan Bolel

Send Images from React Native to Serverless Functions

Ozan Bolel — Tue, 17 Nov 2020 14:50:02 +0000

Sending files to your backend in React Native can be tricky especially on Android. If you are going to use your REST API to do that, perhaps making a multipart/form-data request is the most straight forward option. But parsing that request in a serverless environment can be equally torturous. Luckily there are some libraries out there, making it a lot easier. In this post, we are going to use two of those libraries. One for making a form-data request in React Native, and one for parsing that request on server side. I will be using Vercel Serverless Funtions on the server side to give you an example, but all the steps you are going to follow in this post are applicable to other services like AWS Lambda, Netlify Functions, or etc. This should also be noted that: Due to the limitations of AWS Lambda, which is the underlying infrastructure of most of those services including Vercel Serverless Functions, the maximum payload size for the request body is 5 MB. So I strongly discourage you from using this method for uploading large files or videos. This post is meant to show you how to make a form-data request and how to handle that request in a serverless environment. If you need a complete media solution, you should look into services like AWS S3, Cloudinary, or Firebase Cloud Storage. Even with those services, you still might need to follow the first two steps for React Native. With that being said, let's get started with the main course.

1. Selecting an Image

To be able to select an image we are going to use react-native-image-crop-picker. I won't go into details on how to install it, because it's not the main scope of this post. Just follow their instructions and you should be fine. And assuming you did, here's how our code looks like for now:

import * as React from "react";
import ImagePicker from "react-native-image-crop-picker";
import { Button } from "react-native";

const Screen: React.FC = () => {
  const onPressSelectImage = () => {
    ImagePicker.openPicker({
      width: 480,
      height: 480,
      cropping: true
    }).then((image) => {
      console.warn(image.path);
    });
  };

  return <Button title="Select Image" onPress={onPressSelectImage} />;
};

export default Screen;

2. Making a Request

Regular fetch packages causes problems on Android with multipart/form-data requests. Therefore we are going to use rn-fetch-blob, even though it's a more comprehensive library than what we're going to use it for. Again, you can follow installation instructions on their GitHub repo. Here's how your code should look like now:

import * as React from "react";
import ImagePicker from "react-native-image-crop-picker";
import RNFetchBlob from "rn-fetch-blob";
import { Button, Platform } from "react-native";

const fetchWithImage = async (imagePath: string) => {
  const body = [
    {
      name: "my_image",
      filename: Date.now().toString(),
      data: RNFetchBlob.wrap(Platform.OS === "android" ? imagePath : imagePath.replace("file://", ""))
    }
  ];

  const response = await RNFetchBlob.fetch(
    "POST",
    "https://example.com/example",
    {
      "Content-Type": "multipart/form-data"
    },
    body
  );

  return await response.json();
};

const Screen: React.FC = () => {
  const onPressSelectImage = () => {
    ImagePicker.openPicker({
      width: 480,
      height: 480,
      cropping: true
    }).then((image) => {
      fetchWithImage(image.path);
    });
  };

  return <Button title="Select Image" onPress={onPressSelectImage} />;
};

export default Screen;

We wrap our image with RNFetchBlob by providing the image path which we trim the "file://" part according to the current OS. "name" will be the object name we will recieve on server side, and "filename" is something we should temporarily provide a random string.

3. Handling the Request

The rest is easy. We are going to use a library called multiparty. It makes handling multipart/form-data requests effortless, especially in serverless functions since we can't use any middleware like we would do in an Express.js application. Here is an example with a barebone Vercel Serverless Function:

import multiparty from "multiparty";
import { NowRequest, NowResponse } from "@vercel/node";

export default (request: NowRequest, response: NowResponse) => {
  new multiparty.Form().parse(request, async (error, fields, files) => {
    const image = files.my_image[0];
    const imagePath = image.path;

    // Handle your business logic using imagePath

    response.status(200).send("OK");
  });
};

We recieved our file with the name we specified in the previous step. From there, you can use imagePath to handle your business logic whether it's uploading the file to other services or using it for something else.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Fit Your UI to the Screen on Mobile Browsers

Ozan Bolel — Thu, 09 Jul 2020 12:03:32 +0000

Fitting your UI to the screen on mobile devices gets weird sometimes. Most mobile browsers have navigation bars or applications menus that hide itself while user is scrolling down throughout the page. This causes the actual height of the window to change. What difference does it make? Let's say you want your footer to be fixed at the bottom of every page. Without a proper fix, it won't work. Here is the difference:

I know my drawing is bad, but I hope you got the idea. This is even more important when working with modals on mobile:

If you can't fit your modals to the screen, users won't see some parts of your UI. Maybe they will miss some important buttons. How to fix this? Well, it's very easy.

1. Add The Viewport Metatag



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

I know this is Responsive 101, but begginners tend to forget about this. So, just in case...

2. Set CSS Variable



  const resizeOps = () => {
    document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
  };

  resizeOps();
  window.addEventListener("resize", resizeOps);

This block should run as soon as your app starts. It will set 1% of the actual view height of the window as a CSS variable whenever the window resizes. We'll use this variable in the next and the last step.

3. Adjust Your CSS



html, body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

First height property is for older browser in case if the browser doesn't support CSS variables. You can see its support table here. If you don't want your whole page to behave in this way, you can also do something like this:



.modal {
  width: 50vw;
  height: 50vh;
  height: calc(var(--vh, 1vh) * 50);
}

In short; for individual UI elements, all you need to do is using calc(var(--vh, 1vh) * 50) instead of 50vh.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Stop Formatting Your JavaScript Code Manually

Ozan Bolel — Thu, 25 Jun 2020 10:39:14 +0000

Are you still formatting your code by hand? Ain't nobody got time for that. In this post I'll show you how to install Prettier and EditorConfig on VSCode. I am assuming you are relatively new to JavaScript, so I'll be only focusing on formatting rather than linting. Trust me, this will increase your quality of life by a margin. And, in my opinion, this is the easiest way to get formatting work on VSCode.

What is Prettier?

Prettier is an opinionated code formatter which supports JavaScript, JSX, JSON, React, Vue, Angular, etc. Prettier is not a linter. It only follows formatting rules, not code-quality rules. You can see which rules it supports here, and create your own config file: Prettier Playground.

1. Install Prettier and EditorConfig

Open VSCode and press CTRL + P. After that enter this:

ext install esbenp.prettier-vscode

And this:

ext install EditorConfig

After installations are done; go to Settings, and search for formatOnSave. Make sure it is ticked.

2. Add Configuration Files to Your Project

You need to have these config files in every project you want formatting to work. Create a .prettierrc file in the root folder of your project. You can use mine to get started:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css"
}

Lastly, let's create a .editorconfig file in the root folder, so that VSCode knows you want your tabs to be 2 spaces long:

root = true

[*]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

That's it! Now every time you save your code, it'll automatically get formatted.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Installing TypeScript and Setting Up Your Development Environment on Node

Ozan Bolel — Wed, 24 Jun 2020 11:38:03 +0000

In this post we'll make developing with TypeScript easy, mainly for server development with Node.js. First we'll install TypeScript and we'll watch for file changes. Then we'll be compiling our project into a single JavaScript file with webpack. Let's dive into the setup!

1. Install TypeScript

First run this on command line in your project's root folder:

npm i --save-dev typescript

Now we'll create our TypeScript config file. Create a file in your root folder and name it tsconfig.json. Here is mine, so you can copypasta:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "removeComments": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

If you aren't comfortable with TypeScript yet, you can set strict to false.

2. Watch For File Changes

We need two modules for that. Again, run those on command line in your project's root folder:

npm i --save-dev nodemon
npm i --save-dev ts-node

Nodemon watches for changes in your files, and ts-node executes your TypeScript code. We will connect them in nodemon's config file to ease our development. Create nodemon.json in your root folder:

{
  "watch": "**/*",
  "ext": "ts, json",
  "exec": "ts-node src/app.ts"
}

Be aware that the entry point of my project is src/app.ts. You might want to change that exec field if your entry point is different. To watch your changes, add this line to your scripts field in package.json:

"start": "nodemon"

When you run npm run start or nodemon on command line, your server will start and whenever you made a change in one of your files the server will restart.

3. Install Webpack

You know what to do:

npm i --save-dev webpack
npm i --save-dev webpack-cli
npm i --save-dev webpack-node-externals
npm i --save-dev ts-loader

Now we have to configure webpack. Create a webpack.config.js file in your root folder. Again, you can copypasta mine:

const nodeExternals = require("webpack-node-externals");
const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  target: "node",
  externals: [nodeExternals()],
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    modules: ["src"],
    extensions: [".ts", ".js"]
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  }
};

There are some important fields here. entry is of course the starting point of your app. In output, filename is the file name of the output file webpack builds for us. And the path is the location where you want webpack to put it. In my case, it's the dist folder.

4. Compile Your Project

Since we have everything ready, you can add this to the scripts field in your package.json:

"build": "npx webpack"

When you run npm run build or npx webpack, webpack will compile your project and put the output file to dist folder. If you want the deploy your project on some service, /dist/app.js is the file what you should be deploying.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Deploying Apollo Server with TypeScript Path Aliases to Vercel

Ozan Bolel — Tue, 23 Jun 2020 11:39:03 +0000

In my previous post, I mentioned I had some difficulties with deploying my backend. In this post, I'll be talking about what those difficulties were, and how you can deploy your Apollo Server with TypeScript using path aliases without going through all the hassle I experienced. I hear you asking why did I choose Vercel? I'm a simple man; I see good UI, I deploy... You might be also wondering what's up with that cover image? Don't worry, I don't know how my mind works either. Let's start with explaining what path aliases are and explaining the problem, then we'll continue with the setup.

Path Alias

A path alias is a representation of a certain path that you don't want to hardcode everytime you import something. So, instead of this:

import { normalizeString } from "../../../../../../../../tools";

You can do this:

import { normalizeString } from "tools";

Aliases are very handy for keeping your project sane. The problem with my setup though; you have to specify your aliases for both TypeScript and webpack.

The Problem

At first, I tried both Vercel and Heroku. Both were unable to run TypeScript directly. Since I like its UI, I decided on Vercel for going forward. When I tried to deploy the project again by compiling it to JavaScript first, the output file didn't work. The reason for that is I used path aliases in the project, but TypeScript doesn't convert them into real paths when compiling. For that, I used webpack with ts-loader to compile the project into JavaScript. I also configured my path aliases in webpack config too. Now the build file was working on localhost. Once again, I tried to deploy it to Vercel, but again, it didn't work. Turns out, you shouldn't be containing your app.listen() function inside another function. And I was doing that, because I was using TypeORM at that time. And TypeORM requires you to wrap your app.listen() function inside its initialization function so that you can establish your database connection before your API starts running. So I switched to Mongoose and it was a better choice to be honest since I was using a NoSQL database anyway. And I tried to deploy the project, again. Well.. It didn't work, again. I figured that I had to specify my API route in vercel.json, so I tried again. This time, it worked! Everything was flawless after that. Now I deploy the project with npm run deploy without any problems. However, enough stories. Now we'll talk about how you can do that too.

1. Configure TypeScript

Here is how my tsconfig.json looks like:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "removeComments": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": "./",
    "paths": {
      "config": ["config"],
      "interfaces": ["interfaces"],
      "services": ["services"],
      "entities": ["entities"],
      "resolvers": ["resolvers"]
    }
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

As you can see I have 5 path aliases named config, interfaces, services, entities and resolvers. They all located at the root of the project, so the baseUrl is "./". Don't forget to specify that.

2. Install and Configure Webpack

First let's install webpack and other dependencies we need:

npm i --save-dev webpack
npm i --save-dev webpack-cli
npm i --save-dev webpack-node-externals
npm i --save-dev ts-loader

Now we need to create a config file named webpack.config.js. Create that in your root folder. You can copypasta and edit mine:

const nodeExternals = require("webpack-node-externals");
const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  target: "node",
  externals: [nodeExternals()],
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      config: path.resolve(__dirname, "config"),
      interfaces: path.resolve(__dirname, "interfaces"),
      services: path.resolve(__dirname, "services"),
      entities: path.resolve(__dirname, "entities"),
      resolvers: path.resolve(__dirname, "resolvers")
    },
    modules: ["src"],
    extensions: [".ts", ".js"]
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  }
};

There are some important fields here. entry is of course the starting point of your app. In alias, you have to specify all the path aliases you also configured in your tsconfig.json. In output, filename is the file name of the output file webpack builds for us. And the path is the location where you want webpack to put it. In my case, it's the "dist" folder.

3. Compile Your Project with Webpack

Open the command line in your root folder and run:

npx webpack

If you configured your webpack.config.js same as mine, your output file should be located at the dist folder. This is what we will be deploying to Vercel.

4. Install Vercel CLI and Login

To install:

npm i -g vercel

And to login:

vercel login

It'll send you an email, don't forget to check your junks folder.

If you use Windows and you are getting an security error in the command line, launch command line again as administrator and type:

Set-ExecutionPolicy RemoteSigned

Press A and enter. Then run the login command again.

5. Configure Your Vercel Deployment

Create a vercel.json file at the root folder of your project. And again, just copypasta mine and edit if you need to:

{
  "version": 2,
  "builds": [{ "src": "dist/app.js", "use": "@now/node" }],
  "routes": [{ "src": "/", "dest": "dist/app.js" }]
}

This tells Vercel to run your API on the root directory with node runtime. Here is the important part; the path you specified in vercel.json must match with the path you specified in Apollo's applyMiddleware() function. This is what I'm talking about:

server.applyMiddleware({
  app,
  path: "/"
});

This is a simplified version of my usage of applyMiddleware() function. If I wanted to run my API in the "/api" directory, the vercel.json would look like this:

{
  "version": 2,
  "builds": [{ "src": "dist/app.js", "use": "@now/node" }],
  "routes": [{ "src": "/api", "dest": "dist/app.js" }]
}

And my applyMiddleware() function would look like this:

server.applyMiddleware({
  app,
  path: "/api"
});

With that, we're done with the setup.

6. Deploy Your App to Vercel

This is the hardest part. I'm kidding, just run this on command line:

vercel --prod

In your first deployment, it'll ask you some properties to create your project on Vercel. After your deployment is done, it'll show you the link and it'll automatically copy that link to your clipboard. You can also add these lines in the scripts field of your package.json file for easing future deployments:

"build": "npx webpack",
"deploy": "npm run build && vercel --prod"

Conclusion

I wanted to post this because the first few steps are the same for every platform. However, I think Vercel is more intended to be used with serverless functions. And as far as I know it doesn't support web sockets in serverside, so be aware of that. Considering those, you might want to rethink your architecture according to your needs. Although in my case, my project -which I talked about in this post- was a small scaled personal one. You might want to go with Heroku, AWS or Netlify, but in my opinion this is also a good option for hobbyists.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

What Have I Learned from My Recent Tech Stack?

Ozan Bolel — Fri, 19 Jun 2020 10:54:24 +0000

Couple of months ago I started building a mini project called ToolDeck. It's basically a launchpad for little tools developers and designers use. As its backbone; it uses Next.js for frontend, and Apollo Server for backend. MongoDB was also my choice of storing data. On top of that, everything is written in TypeScript, and I used SASS with modules for styling. I also made a mistake of using React Spring for some animations. I'll get to that in a bit... Now it's time for me to dive into the clusterfuck I created. Let's get started!

Next.js

I like the routing API of Next.js, and I certainly don't like creating a webpack project with bunch of external packages like SASS and TypeScript. Since it handles all of that, I'm happy with my decision. I made sure to waste all the time it saved me on other parts of the project with completely unnecessary details.

SASS

I used SASS with a header file that contains all the variables like colors, paddings, etc. And since I hate naming classes, I used it with modules. It's very easy to get SASS modules running in Next.js. This setup, in my opinion, is a very comfortable way of working with CSS.

React Spring

Oh boy... Don't get me wrong; React Spring is a very powerful tool for animations, and it currently powers the animated grid in the deck page of ToolDeck. Also it's fun to work with too, unless.. Unless you use it with TypeScipt. In VSCode, with every single code you wrote in a TypeScript file you import React Spring, IntelliSense loses its mind. And whole editor keeps lagging. I don't know what, but something is wrong with its type package. If you're going to use it with JavaScript, go ahead. It's a great library, but it's an awful experience with TypeScript.

Apollo React Client

Querying your GraphQL requests is effortless with Apollo React Client. It also takes care of most of the caching you'd normally do with Redux or other state management options. However, when it comes to altering that cache, it lacks simplicity. It isn't as easy as React Query's mutation function for instance. If you are aiming for creating an optimistic UI as I do, it'll fire back.

Apollo

I mentioned I used TypeScript across the project right? Well... This is a day in ToolDeckLand:

1) Write types for mongoose models
2) Write types for resolvers with TypeScript
3) Write types for GraphQL schema
4) Write Apollo Client queries
5) Write types for Apollo Client queries with TypeScript

Yes, I should have used codegen. But this is a small project and it shouldn't have that kind of complexity. Of course I knew this stack would be an overkill for a project in this scale, but I thought it would be fun. Turns out it's not... Writing same queries and same types over and over again takes away all the fun of adding new features. And I always miss something with either query fields or types. It easily becomes another debug adventure.

MongoDB

MongoDB was a good choice for this project. And MongoDB Atlas made it even easier to implement. You might need to do some configurations for Mongoose to work with findById or etc., but I had no serious problems while working with Mongoose.

Conclusion

Personal take; use REST API with React Query next time for a project with this scale. I also could have written my API with Next.js too, but I didn't want a monolith structure. And I'll be moving on to Framer Motion in the furute. I like React Spring, but I like TypeScript more. It's also worth mentioning that I deployed both frontend and backend to Vercel. But that's a story for another post, since I used TypeScript with path aliases and I had to compile my backend to JavaScript to be able to deploy. Maybe you should follow...

This project lives here if you're curious: tooldeckhq.com.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Roadmap for Modern Frontend Web Development

Ozan Bolel — Wed, 17 Jun 2020 12:44:29 +0000

I am posting this for those who are just getting started with frontend development. If you are new to coding, it could be better for you to learn a low level programming language first to have a deeper understanding of algorithms and computers. In this post however, I'll be giving a roadmap for frontend newbies. Of course this isn't the only way, but I wanted to share the way I know with you in the style of a questionnaire. So, let's get started!

Should I start with React, or Vue, or Angular?

None. Of. Them. I understand that React, Vue, Angular and TikTok are too darn popular at the moment, but if you want to be good at any of them, you’ll need to have a good grasp on JavaScript. Those frameworks are built on top of JavaScript, not the other way around. Start with learning frontend, not with learning frameworks, and please don’t use TikTok.

Where should I start learning frontend?

Start with basics. In frontend web development, you’ll be using different technologies in the same environment. It is for your best to thoroughly learn every one of them. The first thing you should learn is HTML. Then learn CSS for styling, and after that advance your skills in JavaScript. When you are comfortable with coding in HTML, CSS and JavaScript combined, you’ll have the fundamentals for building complex interfaces like a ninja, regardless of which framework you use.

<h1>Hello world!</h1>, am I set?

Umm, kinda. HTML is relatively easy, but you should understand things like inputs, forms, lists, tables and metatags. Experiment, don’t skip them just because they look easy. As I stated before, in frontend you’ll be using several technologies at the same time. You can never know which one will save you time in a random challenging situation.

This CSS boi is tricky.

Yes it is. Let's remember the legend:

When you first start writing CSS, it'll always has its own mind. Don’t let it intimidate you. As you practice more, you’ll realise it's fun to work with (IE developers might disagree). Remember; CSS is what users see, and every now and then it's what they experience. Learn it properly.

I’ll give some keywords that are crucial for you to research and study:

Viewport
EM and REM Units
Responsive Design
Flexbox
CSS Grid, FR Unit
CSS Variables

Tip: Use caniuse.com to determine which CSS or HTML features you can start using today. Not every browser support every feature or API.

What about Bootstrap?

Fuck it. Using Bootstrap too early will make you lazy and uncompetitive in the field. Once you learn CSS thoroughly, you can always create your own structures for styling.

I wanna dive into JavaScript.

Sure. But don’t dive too deep. Best way to learn JavaScript is to learn JavaScript. Not JQuery, not React, not Vue, not… Well, you got the point. JavaScript is an old pal, and it came a long way since its creation. Make sure your learning material covers the latest goodies. For mastering modern JavaScript; learn ES6 features and search what ECMAScript means.

Tip: Move from var to const and let.

Tip: Don't forget to look into async/await.

Wait... What about JQuery?

Fuck it too. Using JQuery too early will make you lazy and uncompetitive in the field. Once you learn JavaScript thoroughly, you will never need JQuery. And yes those sentences were copypasta from above, beacuse I used JQuery in the past and got lazy. You see it now?

Tip: What year is this?! Don’t use JQuery for a new project.

Should I know anything else before getting into a framework?

Yes dear reader. Here’s a list:

CSS Preprocessors
NPM
Babel
Webpack

You can learn a CSS preprocessor like SASS to give CSS superpowers. Also search for other items on the list to understand how today’s frameworks work. Try to create a webpack project with them for a deeper understanding.

Big question: Which one should I choose; React, Vue, or Angular?

React. Contrary to what you think, this answer is actually unopinionated. The reason why I’m giving you an one-word answer is purely because React is more common. And more importantly; choosing between them will kill you from the inside unless you start learning one of them.

Sure you can choose Vue for a different approach, or choose Angular for a reason only god knows why (well, that was opinionated). But the main point is no one is keeping you from learning all of them. Just don't waste your time and energy for choosing between them.

Also, when you got started, pay attention to state management. Learn Redux, Context API, Vuex, or other central state management tools depending on which framework you work on.

Tip: Next, Nuxt and Gatsby are great tools for eliminating the cons of clientside rendering and SPAs in genenal. If you don’t know what I mean, it's perfectly okay. Keep those tools in mind, and do your research.

What's next?

As a frontend developer, you should learn more about UI and UX. You are in a very critical position where user interacts with the app through you. Good knowledge in UX will carry you further in creating interfaces that users will love. Also, learn more about colors, typography, and negative space.

Definitely look into testing and TypeScript too. Other than that, I honestly don’t know. Once you taste the feeling of building things that people can interact with, trust me, you'll know what you’ll do next.

Tip: Look into tools like Jest for testing.

Dude, what?! There is so much to learn!

Do not rush it, take your time. Don’t jump from one thing to another, stay on course. Having good fundementals on core technologies is the key. Learn the basics, and more will follow. Don’t overload yourself with the idea of “learning everything”. You can’t, and you absolutely don’t need to.

What kind of a roadmap is this? You didn’t even explain most of the things you mentioned?

Probably not the best kind, but this is the point. There are way too experienced and way too knowledgeable people than me. Search Egghead.io, search YouTube, search Twitter. Find them and learn from them. Make a habbit of Googling everything. In this profession you choose, you should always be searching, and learning. With this post, I'm just trying to light the way for newcomers, and give them a starting point.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Layout Persistence in Next.js

Ozan Bolel — Mon, 15 Jun 2020 10:34:26 +0000

Although the word layout is generally related to CSS page layout, the reason why I’m posting this is a bit different. Fixing the position of navbar to the top doesn't mean that the navbar wouldn't be unmounted when the user is directed to another page. For SPAs (Single Page Application), it's the expected behaviour that the navbar remains mounted throughout the routing. While it's easy to achieve this on CRA (Create React App), it can be difficult to maintain layout persistence in Gatsby or Next.js, since routing is different due to code-splitting. In this post, we will ensure the persistence of the layout component during page transitions without using any library in Next.js.

First of all, if it isn't already added, we need to add an “_app.js” file under ”/ pages”. In this way, we will be able to interfere with the initializing process of the application, and will be able to contain the page component in the layout component we will be creating soon. In its simplest form, an “_app.js” file looks like this:

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

This is where we'll be adding layout support for our app. Let’s change the “_app.js” file we created under “/ pages” as follows:

import React from "react";

export default function MyApp({ Component, pageProps }) {
  const Layout = Component.Layout ? Component.Layout : React.Fragment;

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Component here is the component that returns for the URL path you are on. For example; if you are on the homepage, the default export from “/pages/index.js” will return here. Therefore, we'll be adding layout components we created directly to the page components. We’ll get back to that later. Let’s create our layout. We can create it under “/layouts/MyLayout.js” to keep the project tidy:

import React, { useState } from "react";

export default function MyLayout({ children }) {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <p>      
        <button onClick={() => setCounter(counter + 1)}>
          Clicked {counter} Times
        </button>
      </p>

      {children}
    </>
  )
}

If we were able to achieve layout persistance with the voodoo we cast in “pages / _app.js”, the number shown by the button with the counter on it shouldn't reset during routing. So, let’s create two sample pages under the “pages” folder to test this. First, “/pages/profile.js”:

import Link from "next/link";

export default function Profile() {
  return (
    <div>
      <p>This is the Profile page.</p>
      <p>
        <Link href="/account">
          <a>Go: Account</a>
        </Link>
      </p>
    </div>
  );
}

So, how do we add the layout component we just created to this page component? As I mentioned before; directly…

import Link from "next/link";
import MyLayout from "../layouts/MyLayout";

export default function Profile() {
  return (
    <div>
      <p>This is the Profile page.</p>
      <p>
        <Link href="/account">
          <a>Go: Account</a>
        </Link>
      </p>
    </div>
  );
}

Profile.Layout = MyLayout;

Well, this is not even slightly complicated. Let’s continue by adding our second sample page under “/pages/account.js”:

import MyLayout from "../layouts/MyLayout";

export default function Account() {
  return (
    <div>
      <p>This is the Account page.</p>
      <p>
        <Link href="/profile">
          <a>Go: Profile</a>
        </Link>
      </p>
    </div>
  );
}

Account.Layout = MyLayout;

All preparations have been completed. Now I'll open the Profile page in the browser for you. And I'll click the button with the counter on it for 4 times. Then I'll go to the Account page, and the result will be:

The counter didn't reset during routing because these two pages share the same layout component. If I go to a different page, MyLayout will be unmounted and the counter will reset.

In this way, you can keep navigation elements like Tab Bars etc. persistent across pages. Or, you can go to the kitchen and bake a strawberry cake, I don’t know, I’m ending this post.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/ozanbll