Forem: Manea Adrian

New project in Next.js? Let's set up 🔒Authentication | Bank Grade Security

Manea Adrian — Mon, 12 Sep 2022 14:42:57 +0000

Zalter Identity is an identity and authentication provider service based on signatures rather than tokens. It provides a very secure authentication system which protects your users even against Active Man In the Middle Attacks as well as protection for all the user requests ensuring that all of these requests do come from the intended user.

GitHub Repo

Clone the sample app here

Introduction

This is a demonstration on how to add the user authentication and do basic processing of signatures in your backend. Please keep in mind that this is made only for demonstration purpose as it does not go into detail with the best security practices in order to increase the security past the level provided by a simple OAuth or token based authentication. It should be understood that it still is at least as secure as OAuth2 or other authentication systems but can be better than that.

Before you start

To get the most of this guide, you'll need:

Follow Project Setup

Setup application

Create a new Next.js application.

npx create-next-app demo

Install the SDKs

npm install --save @zalter/identity @zalter/identity-js

Client side

Initialize the auth library

// lib/auth.js

import { Auth } from '@zalter/identity-js';

export const auth = new Auth({
  projectId: '<your-project-id>'
});

Create the sign-in page

This page has two forms, one for the email address and one for the code that will be received to complete the authentication.

// pages/sign-in.js

import { useState } from 'react';
import Router from 'next/router';
import { auth } from '../lib/auth';

export default function SignIn() {
  const [email, setEmail] = useState('');
  const [emailSent, setEmailSent] = useState(false);
  const [code, setCode] = useState('');
  const [error, setError] = useState('');

  const onEmailSubmit = async (event) => {
    event.preventDefault();

    try {
      await auth.signInWithCode('start', {
        email
      });
      setEmailSent(true);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Something went wrong');
    }
  };

  const onCodeSubmit = async (event) => {
    event.preventDefault();

    try {
      await auth.signInWithCode('finalize', {
        code
      });

      // Now you can redirect the user to a private page
      Router.push('/dashboard').catch(console.error);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Something went wrong');
      // Zalter Identity service allows only one try per code.
      // The user has to request another code.
      // This allows Zalter to prevent man-in-the-middle attacks.
      setCode('');
      setEmailSent(false);
    }
  };

  return (
    <div>
      {!emailSent ? (
        <form onSubmit={onEmailSubmit}>
          <h3>Enter your email</h3>
          <div>
            <input
              name="email"
              onChange={(event) => setEmail(event.target.value)}
              placeholder="Email address"
              type="email"
              value={email}
            />
          </div>
          {error && (
            <div>
              {error}
            </div>
          )}
          <button type="submit">
            Continue
          </button>
        </form>
      ) : (
        <form onSubmit={onCodeSubmit}>
          <h3>Enter your code</h3>
          <div>
            <input
              name="code"
              onChange={(event) => setCode(event.target.value)}
              placeholder="Code"
              type="text"
              value={code}
            />
          </div>
          <button type="submit">
            Continue
          </button>
        </form>
      )}
    </div>
  );
}

Routing

You can use the auth.isAuthenticated() function to check whether the user has been authenticated in case of a page refresh and in order to route the user to one page or another.

if (await auth.isAuthenticated()) {
  // show the user back-office pages
} else {
  // show the login page.
}

Sign out

// pages/dashboard.js

import Router from 'next/router';
import { auth } from '../lib/auth';

export default function Dashboard() {
  const onSignOut = async () => {
    try {
      await auth.signOut();

      // Redirect user to a public page
      Router.push('/').catch(console.error);
    } catch (err) {
      console.error(err);
    }
  };

  return (
     <div>
      <h1>Dashboard</h1>
      <button onClick={onSignOut}>
        Sign out
      </button>
     </div>
  );
}

Retrieve current authenticated user

To sign a message, you can get the current authenticated user which exposes the necessary utility functions.

const user = await auth.getCurrentUser();

Sign / authorize requests

Now that the user has been successfully authenticated, you can sign all the requests that you need the user to be authenticated in order for them to perform.

/*
 * Signing helper function that accepts a requestInit, similar to fetch.
 * @param {RequestInit} request
 * @return {Promise<RequestInit>}
 */
async function signRequest(request) {
  const { method, headers, body } = request;

  // Load current user
  const user = await auth.getCurrentUser();

  // Get signing key ID
  const keyId = user.subSigKeyId;

  // Convert the body from String to Uint8Array
  const dataToSign = new TextEncoder().encode(body);

  // Sign the data using the user credentials
  const sig = await user.signMessage(dataToSign);

  // Convert the sig from Uint8Array to Base64
  // You might need an external package to handle Base64 encode/decode
  // https://www.npmjs.com/package/buffer
  const encodedSig = Buffer.from(sig).toString('base64');

  return {
    method,
    headers: {
      ...headers,
      'x-signature': `${keyId};${encodedSig}`
    },
    body
  };
}

// Lets say that we want to make a POST request to an API

const request = await signRequest({
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    email: 'john@example.com'
  })
});

const response = await fetch('/api/orders', request);

This example only signs the body, but it can be adapted to sign other data, such as current timestamp, expire date, request headers, etc.

Server side

Initialize the identity client

In order for the SDK to be usable on the server side it needs to be initialized using the service account credentials.

// lib/identity.js

import { IdentityClient } from '@zalter/identity';

const config = {
  projectId: '<your-project-id>',
  credentials: '<your-credentials>'
};

export const identityClient = new IdentityClient(config);

Retrieve the user public key

Once the client has been initiated you can easily retrieve the public key for the user making any requests to your server, and verify their signature once you have their key.

Please note that the public key may be invalidated for a lot of reasons, and you should try not to cache it for long as you'd put your server in situations where it would process a key that is no longer valid (say for example the user logged out from all sessions).

const keyId = ''; // retrieve key ID from 'x-signature' header

const keyRecord = await identityClient.getPublicKey(keyId);

Create body parser middleware

Currently Next.js does not expose the raw data of the request. It automatically handles the request and parses the body based on the request content-type header. So we need to handle it ourselves.

// lib/middlewares/body-parser-middleware.js

import bodyParser from 'body-parser';

export const bodyParserMiddleware = bodyParser.json({
  verify: (req, res, buf) => {
    req.rawBody = buf
  }
});

Create authorization middleware

This middleware retrieves the value of the x-signature header sent from the client side.
Extracts the keyId to get the public key from Zalter Identity service, and the sig to verify
the request.

// lib/middlewares/auth-middleware.js

import { Verifier } from '@zalter/identity';
import { identityClient } from './identity';

export async function authMiddleware(req, res, next) {
  const signatureHeader = req.headers['x-signature'];

  if (!signatureHeader) {
    console.log('Missing signature header');
    res.status(401).json({ message: 'Not authorized' });
    return;
  }

  // Get the key ID and sig
  const [keyId, sig] = signatureHeader.split(';');

  if (!keyId || !sig) {
    console.log('Invalid signature header format');
    res.status(401).json({ message: 'Not authorized' });
    return;
  }

  // Decode sig to get the signature bytes
  const rawSig = new Uint8Array(Buffer.from(sig, 'base64'));

  // Fetch the user public key from Zalter Identity service
  let keyRecord;

  try {
    keyRecord = await identityClient.getPublicKey(keyId);
  } catch (err) {
    console.error(err);

    if (err.statusCode === 404) {
      console.log('Public key not found');
      res.status(401).json({ message: 'Not authorized' });
      return;
    }

    res.status(500).json({ message: 'Internal Server Error' });
    return;
  }

  // Get the raw body of the message
  // Remember to add your own bodyParser since Next.js server does not expose the raw body
  const { rawBody } = req;

  // Construct data to verify (must be the same value as the data signed on the browser side)
  const dataToVerify = rawBody ? new Uint8Array(rawBody) : new Uint8Array(0);

  // Verify the signature
  const isValid = Verifier.verify(
    keyRecord.key,
    keyRecord.alg,
    rawSig,
    dataToVerify
  );

  if (!isValid) {
    console.log('Invalid signature');
    res.status(401).json({ message: 'Not authorized' });
    return;
  }

  // Persist user ID for other use
  // We can use any storage strategy. Here we simulate the "res.locals" from Express.
  res.locals = res.locals || {};
  res.locals.userId = keyRecord.subId;

  // Continue to the next middleware / handler
  next();
}

Create middleware helper

This helper allows us to run middlewares in any API handler.

// lib/run-middleware.js

export function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}

Create an API route

Now that we have the auth middleware we can protect any route. Until Next.js offers a solution, we need to disable the default body-parser and use our own implementation.

// pages/api/orders.js

import { authMiddleware } from '../../lib/middlewares/auth-middleware';
import { bodyParserMiddleware } from '../../lib/middlewares/body-parser-middleware';
import { runMiddleware } from '../../lib/run-middleware';

// Disable default body parser middleware
export const config = {
  api: {
    bodyParser: false
  }
};

export default async function(req, res) {
  await runMiddleware(req, res, bodyParserMiddleware);
  await runMiddleware(req, res, authMiddleware);

  // To retrieve the user ID set in auth middleware you can use
  // res.locals.userId

  // Now you can retrieve the user data from your database.

  res.status(200).json({
    message: 'It works!'
  });
}

Final notes

Hopefully this article makes the integration a little less scary and may even get you excited about our new approach to user authentication. We’re constantly updating our API and products as a result of feedback from developers - we want to hear from you. Reach out on Discord or by email.

How Secure Are Token-Based Authentication Systems like JWT?

Manea Adrian — Fri, 19 Aug 2022 07:35:40 +0000

Some token-based authentication systems use some signature mechanism but this is usually tied to the server who does the authentication signing the token and then handing it as it is to the user. This token is valid for a period of time, and the user can request another signed token from the identity provider. This is the case for oAuth2 for example.

One would obviously understand that if a such token is intercepted in any way, be it the refresh token or the authentication token, the attacker would be granted full access to the user account.
Below you can find a few attacks that can be made on such systems:

1. Cookie Stealing

This type of attack relies on the fact that the cookies are being sent over the network as simple headers, part of the request. Meanwhile, the HTTPS protocol can alleviate some stress caused by this problem by encrypting the payload, one has to keep in mind the advent of HTTPS certificate miss-issuance and intentional certificate changing on people's machines. One should also keep in mind that the way that the HTTP requests are arranged, the cookies are part of the headers and thus being sent in a set portion of the request. This means that with certain cyphers and HTTPs TLS versions, the attacker only has to analyze which part contains the token header encrypted, by trial and error.

2. Man-in-the-middle cookie stealing

This type of attack relies on the problem explained above where the attacker is already able to present the user with a certificate but the certificate is not the real certificate of the website they are visiting and, as an effect, the attacker; otherwise called a Man-in-the-Middle; is able to read and completely get hold of as well as change any of the requests or responses from and to the server. They can use this to literally get the refresh token or the access token and do whatever they please with them impersonating the user and making other requests on their behalf.

3. Replaying certain requests multiple times

For this type of attack, the attacker doesn't even need to decrypt or have the tokens; all they have to know is what a certain request contains and then repeat said request as many times as they need.

4. Changing the contents of the request

This requires either a man-in-the-middle attack or simply the attacker to change random bits of information on the request and get what comes out of it. Since the request is not signed, there's nothing to tell whether the request was indeed as the server received it.
As you can see above; the token-based systems have a bunch of attacks that can render their whole security completely useless to an attacker. The attacker can simply analyze the requests and with a bit of effort can impersonate a user. With all the attacks that were publicized lately where access tokens have been stolen from people's social media websites and then used to mount even worse attacks on them, one can already notice that this is no longer a thing that won't happen often enough for it to not be a problem. It is an issue and must be addressed.

Ok, but what alternative we have? Signature-based authentication systems

All signature-based authentication systems are immune to the first two problems due to the way that every single request needs to be signed, but poorly designed ones can still be attacked with point 3. of the above list: "Replaying certain requests multiple times". This type of attack usually called a "replay attack" can render a request like Send 100$ USD to John into a possible attack where the request is being replayed multiple times and the server finds it valid.

Zalter's signature-based systems one can easily sign anything so there are certain pieces of information one can sign which render this type of attack impossible.

For HTTP requests, it is recommended to sign all the important headers that are required for the request to work: content-type for all HTTP requests, :path and :method for the HTTP/2 requests, or simply the method name and the actual path in the case of HTTP1.1 regardless of whether they were headers or not and any other important custom headers you may have sent. You can also sign the length of the request in order to prevent padding attacks (CRLF attacks). This latter option can also be done for Websocket requests.

The most important thing to sign, though, is a way for you to ensure the request can not be replayed and that's to either add a creation date and expiration date and if necessary add an idempotency id in order to allow your server to decide whether the request has been replayed or it's an old request and whether the request has already been acted upon.
In Zalter Identity, the requests we send from the client to our servers sign the date of the request creation as well as the expiration date, and this expiration date is set to be no higher than a few seconds to allow for high latency but not for a replay attack.

So what are your thoughts about this? Let us know in the comments down below.

Signature-based Auth + Next.js? How to integrate Zalter under 10 minutes

Manea Adrian — Mon, 01 Aug 2022 13:57:22 +0000

Zalter is currently in closed-beta, but we usually accept any type of organisations and projects! If you have any questions regarding integrations or bug reports please join the discussion on our Discord server

GitHub Repo

Clone the sample app here

Introduction

Before you start

To get the most of this guide, you'll need:

Follow Project Setup

Setup application

Create a new Next.js application.

npx create-next-app demo

Install the SDKs

npm install --save @zalter/identity @zalter/identity-js

Client side

Initialize the auth library

// lib/auth.js

import { Auth } from '@zalter/identity-js';

export const auth = new Auth({
  projectId: '<your-project-id>'
});

Create the sign-in page

This page has two forms, one for the email address and one for the code that will be received to complete the authentication.

// pages/sign-in.js

import { useState } from 'react';
import Router from 'next/router';
import { auth } from '../lib/auth';

export default function SignIn() {
  const [email, setEmail] = useState('');
  const [emailSent, setEmailSent] = useState(false);
  const [code, setCode] = useState('');
  const [error, setError] = useState('');

  const onEmailSubmit = async (event) => {
    event.preventDefault();

    try {
      await auth.signInWithCode('start', {
        email
      });
      setEmailSent(true);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Something went wrong');
    }
  };

  const onCodeSubmit = async (event) => {
    event.preventDefault();

    try {
      await auth.signInWithCode('finalize', {
        code
      });

      // Now you can redirect the user to a private page
      Router.push('/dashboard').catch(console.error);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Something went wrong');
      // Zalter Identity service allows only one try per code.
      // The user has to request another code.
      // This allows Zalter to prevent man-in-the-middle attacks.
      setCode('');
      setEmailSent(false);
    }
  };

  return (
    <div>
      {!emailSent ? (
        <form onSubmit={onEmailSubmit}>
          <h3>Enter your email</h3>
          <div>
            <input
              name="email"
              onChange={(event) => setEmail(event.target.value)}
              placeholder="Email address"
              type="email"
              value={email}
            />
          </div>
          {error && (
            <div>
              {error}
            </div>
          )}
          <button type="submit">
            Continue
          </button>
        </form>
      ) : (
        <form onSubmit={onCodeSubmit}>
          <h3>Enter your code</h3>
          <div>
            <input
              name="code"
              onChange={(event) => setCode(event.target.value)}
              placeholder="Code"
              type="text"
              value={code}
            />
          </div>
          <button type="submit">
            Continue
          </button>
        </form>
      )}
    </div>
  );
}

Routing

You can use the auth.isAuthenticated() function to check whether the user has been authenticated in case of a page refresh and in order to route the user to one page or another.

if (await auth.isAuthenticated()) {
  // show the user back-office pages
} else {
  // show the login page.
}

Sign out

// pages/dashboard.js

import Router from 'next/router';
import { auth } from '../lib/auth';

export default function Dashboard() {
  const onSignOut = async () => {
    try {
      await auth.signOut();

      // Redirect user to a public page
      Router.push('/').catch(console.error);
    } catch (err) {
      console.error(err);
    }
  };

  return (
     <div>
      <h1>Dashboard</h1>
      <button onClick={onSignOut}>
        Sign out
      </button>
     </div>
  );
}

Retrieve current authenticated user

To sign a message, you can get the current authenticated user which exposes the necessary utility functions.

const user = await auth.getCurrentUser();

Sign / authorize requests

Now that the user has been successfully authenticated, you can sign all the requests that you need the user to be authenticated in order for them to perform.

/*
 * Signing helper function that accepts a requestInit, similar to fetch.
 * @param {RequestInit} request
 * @return {Promise<RequestInit>}
 */
async function signRequest(request) {
  const { method, headers, body } = request;

  // Load current user
  const user = await auth.getCurrentUser();

  // Get signing key ID
  const keyId = user.subSigKeyId;

  // Convert the body from String to Uint8Array
  const dataToSign = new TextEncoder().encode(body);

  // Sign the data using the user credentials
  const sig = await user.signMessage(dataToSign);

  // Convert the sig from Uint8Array to Base64
  // You might need an external package to handle Base64 encode/decode
  // https://www.npmjs.com/package/buffer
  const encodedSig = Buffer.from(sig).toString('base64');

  return {
    method,
    headers: {
      ...headers,
      'x-signature': `${keyId};${encodedSig}`
    },
    body
  };
}

// Lets say that we want to make a POST request to an API

const request = await signRequest({
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    email: 'john@example.com'
  })
});

const response = await fetch('/api/orders', request);

This example only signs the body, but it can be adapted to sign other data, such as current timestamp, expire date, request headers, etc.

Server side

Initialize the identity client

In order for the SDK to be usable on the server side it needs to be initialized using the service account credentials.

// lib/identity.js

import { IdentityClient } from '@zalter/identity';

const config = {
  projectId: '<your-project-id>',
  credentials: '<your-credentials>'
};

export const identityClient = new IdentityClient(config);

Retrieve the user public key

Once the client has been initiated you can easily retrieve the public key for the user making any requests to your server, and verify their signature once you have their key.

const keyId = ''; // retrieve key ID from 'x-signature' header

const keyRecord = await identityClient.getPublicKey(keyId);

Create body parser middleware

Currently Next.js does not expose the raw data of the request. It automatically handles the request and parses the body based on the request content-type header. So we need to handle it ourselves.

// lib/middlewares/body-parser-middleware.js

import bodyParser from 'body-parser';

export const bodyParserMiddleware = bodyParser.json({
  verify: (req, res, buf) => {
    req.rawBody = buf
  }
});

Create authorization middleware

// lib/middlewares/auth-middleware.js

import { Verifier } from '@zalter/identity';
import { identityClient } from './identity';

export async function authMiddleware(req, res, next) {
  const signatureHeader = req.headers['x-signature'];

  if (!signatureHeader) {
    console.log('Missing signature header');
    res.status(401).json({ message: 'Not authorized' });
    return;
  }

  // Get the key ID and sig
  const [keyId, sig] = signatureHeader.split(';');

  if (!keyId || !sig) {
    console.log('Invalid signature header format');
    res.status(401).json({ message: 'Not authorized' });
    return;
  }

  // Decode sig to get the signature bytes
  const rawSig = new Uint8Array(Buffer.from(sig, 'base64'));

  // Fetch the user public key from Zalter Identity service
  let keyRecord;

  try {
    keyRecord = await identityClient.getPublicKey(keyId);
  } catch (err) {
    console.error(err);

    if (err.statusCode === 404) {
      console.log('Public key not found');
      res.status(401).json({ message: 'Not authorized' });
      return;
    }

    res.status(500).json({ message: 'Internal Server Error' });
    return;
  }

  // Get the raw body of the message
  // Remember to add your own bodyParser since Next.js server does not expose the raw body
  const { rawBody } = req;

  // Construct data to verify (must be the same value as the data signed on the browser side)
  const dataToVerify = rawBody ? new Uint8Array(rawBody) : new Uint8Array(0);

  // Verify the signature
  const isValid = Verifier.verify(
    keyRecord.key,
    keyRecord.alg,
    rawSig,
    dataToVerify
  );

  if (!isValid) {
    console.log('Invalid signature');
    res.status(401).json({ message: 'Not authorized' });
    return;
  }

  // Persist user ID for other use
  // We can use any storage strategy. Here we simulate the "res.locals" from Express.
  res.locals = res.locals || {};
  res.locals.userId = keyRecord.subId;

  // Continue to the next middleware / handler
  next();
}

Create middleware helper

This helper allows us to run middlewares in any API handler.

// lib/run-middleware.js

export function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}

Create an API route

Now that we have the auth middleware we can protect any route. Until Next.js offers a solution, we need to disable the default body-parser and use our own implementation.

// pages/api/orders.js

import { authMiddleware } from '../../lib/middlewares/auth-middleware';
import { bodyParserMiddleware } from '../../lib/middlewares/body-parser-middleware';
import { runMiddleware } from '../../lib/run-middleware';

// Disable default body parser middleware
export const config = {
  api: {
    bodyParser: false
  }
};

export default async function(req, res) {
  await runMiddleware(req, res, bodyParserMiddleware);
  await runMiddleware(req, res, authMiddleware);

  // To retrieve the user ID set in auth middleware you can use
  // res.locals.userId

  // Now you can retrieve the user data from your database.

  res.status(200).json({
    message: 'It works!'
  });
}

Final notes

5 Free Tools That Will Make You More Productive

Manea Adrian — Mon, 27 Apr 2020 12:31:19 +0000

One of the best ways to work smarter as a developer is to use tools that can help you write less code but provide the same value (does that make sense?), so in this short blog post, I will show you 5 free amazing tools that will make you more overall productive developer. Also, you can watch this 5-minute YouTube video of me speaking about these if you like video content more.

I know you don't have much time procrastinating so I will just list the essential features of each tool instead of writing long marketing descriptions. Kind of grab and go blog post. Also, I have no affiliation with any of these products, I just want to share with you the value they bring to the table. If you find these tools as useful as I did please consider following me.

So without a particular order let's start with a tool called

1. Excalidraw

If you are designing software architecture like flowcharts or other related diagrams there is this amazing tool called Excalidraw which enables you to draw diagrams with your team immediately in the browser. We use Excalidraw here at Devias to brainstorm our website’s user flows and back end architecture. As I mentioned earlier you can also invite people to build diagrams together which really cool especially in these times of isolation where remote collaboration is essential. The only downside of this app because it is open source and free there is no cloud storage like saving your work in your account but honestly that's not that big of a deal because you can save your files locally after you finished and open them later just like any source file.

2. Nucleo Icon Transition

Let's get more practical now with a small tool created by the folks from Nucleo app which quickly generates icon transitions from two SVG icons. You can change the effect of the transition to rotate or scale and also choose the event type which will fire the transition, to hover or click. The web tool generates one SVG file with both icons inside which also contains the JavaScript code for making this transition happen. What the tool does behind the doors is just adding some classes to the icons which are targeted by the script.

To add an animated icon into your website download the SVG you just created and simply add it in your HTML.

And voila:

If you are planning to use more than one icon transitions you can remove the script as it is the same for all icons.

3. Typescale

If you are like me and you create websites from scratch frequently you should use this tool called typescale which can help you create your typography much faster. You can export CSS code based on font selected and scale - which can vary from small to big incremental ratios. You can also add a secondary body typography for stuff like paragraphs which can have its own font, and they also have some dummy text there to help you pair fonts much easier. I personally use this tool whenever I'm starting a new project that needs custom fonts and I don't want to waste time choosing the right line-height, sizes, fonts and so on.

4. RoamResearch

Something that keeps me productive is having a to-do list of everything that needs to be done every single day, so I'm using Roam Research which a interesting and weird to do app in a sense that you can create your to-dos with references to other to-dos in kind of markdown language. This referencing technique creates an interconnection of your lists which can help you go back and forth to the original idea of the to-do. It's a weird way to explain or I'm just awful at making sense but I just started using it a few days ago and I must say I really like the idea behind this product probably because it forces me to take small important notes instead of long lines of text which I never read. Right now they don't have a pricing plan because it's a new app but I'm pretty sure they will always have a free tier as well.

5. HappyHues

Let's turn the page now with a tool for developers who also do some design work on the side with a website called Happy Hues. This is not really an application but rather a resource for people who are not that great with choosing color pallets like me. This website provides so many color combinations to choose from that's impossible to not find the one that suits your style. I always keep this resource close in my bookmarks whenever I need to find a good color combination that just works well in terms of contrast ratios and passes the accessibility tests

So this would be my secret list of apps that makes me a more productive developer overall, I encourage you to try some of them and let me know what you think in the comments or if you have a suggestion of a tool that you can't live without please let us in the comments.

Follow me on YouTube / Twitter

3 Design Principles For Frontend Developers

Manea Adrian — Tue, 31 Mar 2020 13:16:20 +0000

You can write the best code in the world but if your website doesn't follow the most basic principles of design your app or page will probably fail in search score, user experience and much more so in this post we will dive into 3 design principles for developers or any other tech person who codes websites.

Hei, my name is Adrian and I'm a UX Developer for about a decade now (and yes, that sounds quite a lot when I say it out loud) - but anyways please let me know if you like this post by commenting down below.

Also I have created some Google Slides and also an Youtube Video on this exact post if you like like to consume this in other ways!

1. Master hierarchy, you master design

Hierarchy is a basic design principle which helps the viewer focus on key information. A good hierarchy will lead the viewer smoothly through processes like buying a product or finding the information they seek effortlessly.

Image source - React Material-ui Kit Pro

As you can probably tell, the key information on the version with the check mark is a lot more obvious.

First, the page title which is big enough to quickly read what the project is about and underneath we have the brief details which occupies most of the real estate and in this context is the key information. So first you need to know what's the thing your viewers or customers are looking for the most and use hierarchy to emphasize it.

So you can get away with hierarchy by just making the important stuff bigger, but keep in mind that if everything looks important nothing is important anymore, so hold your horses with to that font paddle.

Another way to make the most of this principle is to make use of colors, but attention, use three colors at most. One primary color (used for body text), one secondary color (a subtle color, muted) and one accent color which in my case is used for the most important purpose, to apply for the project.

Big doesn't necessarily mean obvious

There will be cases in which size can't save you. So what do we do then? Well, there's a thing called font weight which if used correctly your hierarchy will be on point. So let's see some examples:

I'd say these small details gives a stronger clarity to the viewer and that's really important for metrics like bounce rates and plus it looks like it has more space. So, next time instead of just throwing some sizes to your elements add some extra weights here and there, it will make a huge difference!

3. Flexibility is overrated

We as human beings hate chaos and uncertainty so that's why you should always work either with a library (design system) or create your own small one if the project is not that big. That way you will never waste time over decisions like "should I use 13 or 15px here?".

Define some paddings and margins from the beginning and just use those, avoid using values that are unusual. I usually work with multiples of 4 (8, 16, 24, 32, etc) and if something looks like it has too little padding, just go up one staircase at a time and vice versa.

A quick tip that I've learned is to start with a very big spacing between elements and just adjust from there. That way there's a high chance of giving your items more breathing room.

If you truly want to create a design system yourself which is more then just a choosing a typography and colors you might need to define the following:

• Font weight
• Line height
• Color
• Margin
• Padding
• Width
• Height
• Box shadows
• Border radius
• Border width
• Opacity

...that's why it sounds better to work with a library which offers all these out of the box.

Stick to your Typography

Use the same strategy with typography—and that is defining one from the beginning and sticking to it and you can use a tool like Typescale to ease your efforts in choosing the proper line-height, sizes, and so on.

In case you have to use more then one font in a project I suggest using a font pair tool like Typewolf because you need to try out many fonts in order to find a good balance and these guys know what they are doing.

Define your colors

When it comes to colors, you will need more shades than you think. There's cases where you need to use 3 different shades of a grey just in one screen and because that's pretty tough to choose the shades especially if you not a designer and what I recommend is using shades of colors from systems like Material or Tailwind—that way you can't go wrong as it takes a while to develop an eye for good color combinations—even today I'm still struggling finding the right balance between neutral colors and brand (accent colors).

3. Readability above everything else

Readability is mostly given by typography and white spacing so we'll explore a few solutions on how to make your page more digestible.

The rule of thumb when you have doubts weather your text should be centered or left aligned (or right if we're talking about a RTL website) go with left aligned, there's less change of screwing up. But here's a case when centered text looks like a good idea.

If your copy is small enough to fit inside a 2 lines, centering makes sense, otherwise left align all elements which are in the context.

That's it! Thanks for reading this to the end.

Follow me on:
⚡️ https://twitter.com/shpadrian

Subscribe to my newsletter on:
⚡️ https://devias.io

How to be Consistent when Learning? Do this exercise.

Manea Adrian — Wed, 29 May 2019 16:00:38 +0000

I also made a video on this topic, so if you prefer to watch instead of reading 🤓 https://www.youtube.com/watch?v=vznNct98OqE

Consistency is a big problem with learning a new skill, especially programming. Here's a quote from one of my favourite books that should give you a glance and summary of what I'm going to teach you in this post

“Most enjoyable activities are not natural; they demand an effort that initially one is reluctant to make. But once the interaction starts to provide feedback to the person's skills, it usually begins to be intrinsically rewarding.”
Mihaly Csikszentmihalyi, Flow: The Psychology of Optimal Experience

In this post I'm going to show an exercises that I do every single day that keeps my productive and consistent with my work. Before we dive into that, there's a two rules you need to know in order for this exercise to work properly.

First Rule. Don't get fooled by social media

So let's get some context. Last year I decided to make a shift in my career, I was a web designer and I wasn't quite happy with the value I was producing to my clients. Probably I had some bad client experiences but looking back, now I'm happy I did. So like any other self thought programmers we all got our motivation to learn either from a friend, colleague or (the worst case) from social media. And that's because no one will ever document (or post on instagram) the frustration behind the scenes when they can't find a bug in their software, and the reason is quite obvious. No one likes to see people mad. So why do many developers get burnt out? Well that's because you create a misleading reality of what you think normal programmers do in these positions, like solving problems and receiving their reward immediately so when you have a moment of frustration and discomfort you feel like an impostor, because you think that's not part of the package. So the zero rule (get it?) towards consistency is to find your motivation not based on others lifestyle but construct your own without restrictions and fences.

Second Rule. Don't get fooled by yourself

Ok that sounds a bit cheesy but stay with me. I've noticed something that a lot of my friends were guilty of awhile ago. We were all fooling ourselves about the time we were dedicating towards a project or learning a new technology. We were fooling ourselves that were 'grinding', we were 'hustling' but the reality was that none of were really honest with the time we've invested into that particular project. And that's not the bad part. By fooling ourselves that we invested a lot of effort into something (even tough from a full day of 'hustling' just one hour was spent in 'VSCode') we end up burning out because we don't see feedback and reward. You know that saying fake it til you make it? Well that applies too, if you tell your brain that you spent 50 hours a week learning web development without any progress it might actually believe you. And that's when frustration gets into place.

The exercise

The most practical way of documenting your progress is to journal every day progress and work. Last year I would probably label this in the 'lame' category but if you really want to see real data of your progress use technology or a pen and paper. So keep a journal using a free app called Coda in a similar way I have here:

Coda allows you to create sections into folders so I'm using this feature to organise my weekly progress. The rules are simple. I have daily documentation and at the end of the week I have weekly documentation. This technique of organising I've learned from a YouTuber called Ran Segall

Daily Documentation

This is a simple yet powerful exercise. People who do this every day make faster progress than those who don't. This is a non-negotiable step and it takes 10 minutes.

Each day, answer:

What progress did you make on the projects (client work, learning, etc)
What did you do well in relation with these tasks? Why? (This must be input related - not results)
Where are you getting stuck with these tasks? What is impending you? How can you overcome it, and how will you stop yourself from being impeded by this in the future?
How will tomorrow be better?

Weekly Documentation

At the end of every week, sit down and read over your weekly entries. What patterns are you noticing? What momentum have you built? This is how you identify the actions and mental patterns that aren't serving you in this game, and double down on the ones that are.

As you review the week, think about what made it successful, and what will make the next week even more successful. Then plan your week.

If you're serious about it, I don't even have to convince you to try this. For me it works, I have never been so data-driven about my productiveness before.