Beskar

Search

Search for products, tools and blog posts.

A Brief Introduction to Modern Frontend Engineering

A high-level overview on the tools and technologies in frontend engineering... without getting too technical.

A quick introduction to URLs

Galactic coordinates for the internet

Adding a basic pre-commit check to a Next.js app

When building a Next.js app, it can be a good idea to add some simple checks for Typescript and ESLint when you commit new code.

Alchemy

A visual journey of The Alchemist, powered by Midjourney.

Automated refactoring with codemods

Codemods are scripts that can automatically transform code from one syntax to another, making it easy to refactor or update large codebases.

Award-Winning 2021 Portfolio Template

Last updated Aug 27, 2023

BokehTransferred

Meet your new photography portfolio.

CarbonAds

Last updated Oct 6, 2021

Case Study Elements

Last updated Dec 8, 2022

ComlinkInternal

Beskar Labs mailing system, built on Vercel, Resend and react.email

Creating a no-auth Spotify playlist preview with Next.js

Let's build a simple Spotify playlist previewer without any user authentication required on Next.js!

Creating a standalone contact form with Next.js

Forms, files and fun with Next.js and Nodemailer.

Creating active link class modifiers with Tailwind and Next.js 13

React 18 allows you to build client and server components, which can be tricky for adding client-based styles to elements.

Creating defensibility through design

Convincing your company to invest in product design and design teams can be tough, so here are a few arguments you can use.

DesyncTransferred

A place to share and find inspiration from AI-generated art!

Desync has a new home with Surge Studio

Share and find inspiration from AI-generated art.

Enabling HSTS Preload in Next.js

Learn how to enable HSTS preload in Next.js to improve your website's security.

FaviconsTransferred

Node.js Favicon Generator. My first project to reach 1K stars.

Finding a user's friends in their Contacts with Firebase and Expo

How to fetch contacts off your user's phone, then see which of those contacts are also using your app.

Forge

Boilerplate for Beskar apps using Next.js, Typescript and Tailwind.

From Product Designer to Agency Director

A few tips and tricks for designers hoping to kickstart their own studio or agency, from our own experience.

Gravity

Internal Beskar Labs design system for our various products.

Hancock

Simple email signature generator.

Handy Body and Error Parsing Utilities for Next.js

A couple of useful functions for parsing and validating data in Next.js API routes.

Harmony

Unified, strict editor configuration for modern React apps.

Implementing a simple OTA update function with Typescript and Expo 44+

Handy scripts for handling OTA updates in an Expo app.

Implementing a smart analytics hook for Firebase and Amplitude in Expo 44+

Let's build a unified, promise-based, error-resilient, privacy-respecting, debuggable analytics hook for Expo 44+.

Implementing Google and Apple login hooks with Expo 43 and Firebase v9

How to implement an auth system with using neat hooks and a credential-based social login system.

Implementing iOS 14.5 Tracking Transparency in Expo SDK41

Starting with iOS 14.5, iPadOS 14.5, and tvOS 14.5, developers are required to ask users for permission to track.

Implementing Push Notifications with Expo and Firebase Cloud Functions

Despite how complex Expo's diagrams appear, it's actually remarkably simple to add Push Notifications to your app!

Implementing simple, secure passphrase authentication in Next.js 10 and Vercel

I'm working on publishing some private case studies on my personal website at the moment and wanted a simple way of adding passphrase security.

Intercom Widget

Last updated Nov 20, 2022

Jellypepper Illustrations

Last updated Dec 19, 2022

Making react-syntax-highlighter "editable"

react-syntax-highlighter is a great tool for highlighting code snippets, but it is not editable. Let's hack an editable state together!

Minimal, One-Page Portfolio Template

Last updated Dec 7, 2022

Neat User and Profile React Hooks for Firebase V9

Writing your own little hooks for the two most common types of Firebase objects - Users and Profiles.

Neutral APIJoin the waitlist

Global reforestation through code.

Neutral App

Join the carbon neutral community.

Optimizing Next.js images for speed and quality

Next.js' Image component is highly reliable and configurable. Here's how to get the most out of it.

Optimizing your Next.js personal website's SEO with next-seo

Using JSON-LD utility components provided by next-seo, we can make our personal website more friendly to structured data parsers.

PhantomTransferred

A blog theme for Ghost.

PresumiShut down

How I started a data analytics startup and partnered with SEEK.

Pure functional design and its role in products

The industrialisation of product design has had a profound impact on the modern interpretation of design.

RefractionAcquired

Generate unit tests and refactor code using AI.

Refraction has been acquired by Twistag

We're excited for Refraction to join the Twistag family and continue our mission to help developers building great software with less effort.

Replacing JS Libraries with Intl

Strip down your bundle size by replacing some of the most popular JS libraries with native browser APIs.

San Andreas Radio

All you had to do was follow the damn train, CJ!

Shapes

Last updated Aug 30, 2023

Spline Gradient Portfolio Template

Last updated Dec 7, 2022

Streaming OpenAI completions with the Vercel Edge Runtime

I recently built my first AI-powered app on Vercel. Here's how I did it.

Stripe PaymentSheet subscriptions with Apple / Google Pay on Expo and Firebase

Let's put together a full, end-to-end Stripe subscription flow in our Expo app with Firebase.

SuperlightJoin the waitlist

A lightweight platform for running syncs.

texts.runJoin the waitlist

Create a simple, messenger-style personal webpage.

The industrialisation of digital product design

How does the growth of systematic and reusable design systems in product design impact our creativity and freedom as designers?

Three methods for typing strings in Typescript

How to use Enums, Union Types and Const Assertions to reduce runtime errors for strings.

Token Design System

Last updated Feb 8, 2023

Upload images to Firebase using Expo 39+ managed workflow

Typically, uploading images to Firebase using the JavaScript SDK is pretty straightforward. In Expo, it's a bit trickier.

Using clsx with Tailwind CSS for element style composition

Tailwind's class names can get a bit unwieldy. clsx can help.

Using the Firebase Local Emulator with Expo's managed workflow

While the Local Emulator Suite is super easy to set up on a web app project, it's a little bit trickier for React Native / Expo.

Vercel for VS Code

Deployment status in VS Code.

Waitlist

Fast, unbranded waitlists for developers.

Why Figma's AutoLayout system is brilliant for writing code

While it looks simple, Figma's AutoLayout system is actually designed on the Flexbox CSS model.

Join our mailing list and stay up to date with the latest Beskar Labs news.