Development

Utility to Parse and Validate Directory with Multiple Entries

Utility functions, parse and validate a given directory with multiple entries. npm install validate-access API parseDir Parse a given directory without validation // DEFAULT_DIR_FOLDERS = [“src”, “lib”, “dist”]; function parseDir( pureDir: string, targetedFolders: string[] | string = DEFAULT_DIR_FOLDERS, isEnforceSub: boolean = true ): { dir: string; subDir: string; filename: string; srcName: string; }; Example – […]

Building a realtime chat app with Next.js and Vercel

This post will walk through the creation of a realtime chat application with Next.js and deploying it to Vercel. You’ll learn how to: Create a brand new Next.js application Adding realtime functionality with Ably Create a Next.js Vercel Serverless API Use React Functional components and React Hooks with Ably Host your app on Vercel Check […]

Gyro-web: Accessing the device orientation in JavaScript

02 March, 2021 2 min to read Read this article on your mobile device to make the interactive examples work Accessing device orientation in pure JavaScript In Javascript you may access your device orientation data by listening to the deviceorientation[1] event. It is as easy as the following: window.addEventListener(‘deviceorientation’, handleOrientation); function handleOrientation(event) { const alpha […]

Tailwind JSX and class composition

After my initial look[1] at Tailwind CSS[2], I haven’t used it much. Like I’ve stated in my previous blog posts, my feelings around Tailwind were mixed. I appreciated the utility-first, constrained design but didn’t like how its classes “bloated” my HTML code or how tedious the configuration process was. With that said, I’ve taken another […]

Filament: the TALL Stack Admin Panel

Filament[1] is the elegant TALL stack admin for Laravel artisans. V1 has been in the works for over a year, and we are pleased to release it! [embedded content] The admin panel has simple foundations of pure Livewire components, with a powerful form and table builder that relies heavily on Alpine.js. The UI is a […]

Laravel ETag and Conditionals Package

Laravel ETag and Conditionals[1] is a package that provides a set of middleware for ETags[2] and HTTP conditional requests[3]. The goal of this package is to provide tools for better client-side caching for Laravel apps. Using the techniques supported by this middleware, browsers can handle the caching provided automatically based on ETag headers in HTTP […]

React.useRef() Guide

React.useRef() is a hook that solves 2 issues: holding mutable values that should persist between component renderings and reference DOM elements. In this post, you’ll learn in detail how useRef() and references work in React. Interesting demos included. Table of Contents 1. Mutable values The usage of useRef() hooks is pretty straigfoward: import { useRef […]

Vue with TSX – the perfect duo!?

From all the available JavaScript frameworks, I’d say that Vue and React are my favorites. React for its vast ecosystem, great TypeScript support, JSX, and Vue for its simplicity, performance, and some smaller life quality improvements, like auto-passing props, easy-to-use transitions system, directives, slots & more. So, how about getting the best of both worlds? […]

GraphQL on the client side with Apollo, React, and TypeScript

March 1, 2021 Recently, we’ve developed a GraphQL API in our NestJS series. NestJS under the hood uses Apollo Server. Although it is compatible with any GraphQL client, the Apollo platform also includes the Apollo Client. If you want to know more about GraphQL and how to develop a backend with it, check out API […]

Why Frontend Developers Need to be Webpack Experts

4 strong reasons to start learning Webpack in-depth today Modern web applications are not just about developing core functionalities. We also should pay attention to factors like application performance, development productivity, and efficiency to get the maximum out of our effort. But, are you aware that you can use Webpack to address some of these […]

Introduction to Index Types in TypeScript

This post will look at Index Types in TypeScript. It will go over what they are and also touch on two type-operators related to them. These type operators are the index type query operator and indexed access operators.  This post is part of the Introduction to Advanced Types in TypeScript series. To better understand, it […]

typetype: use object spread to create typescript type

TypeType is designed to generate complex typescript type with ease. Usage > npm i -D @mistlog/typetype import { transform } from “@mistlog/typetype”; const input = ` type function TypeName = (T) => ^{ if(T extends string) { return “string” } else { return “number” } } `; const output = transform(input).code; console.log(output); // output: type […]

Node.JS – Foal framework – Version 2.2 release notes

Version 2.2 of Foal has been released! Here are the improvements that it brings. New Look of the createapp Command#[1] The output of the createapp command has been prettified to be more “welcoming”. Authentication Improvement for Single-Page Applications (SPA)#[2] When building a SPA with cookie-based authentication, it can sometimes be difficult to know if the […]

JavaScript desktop apps – 5 framework/tool recommendations

Introduction Not long ago it was impossible to build a desktop app with JavaScript. Happily, these times are gone, and now JS developers can use their knowledge and web development expertise to create desktop applications with a native feel. As usual, it’s easier said than done. While doing our research, we noticed that there’s much […]

Voice Search in eCommerce

Search is a very important component for many apps and services and especially so in eCommerce. Voice offers many unique features[1] that are not possible by using more traditional approaches, such as: Learn the language your users are using of your products Accessibility benefits for people who have difficulties using keyboard and mouse Support users […]

Free Next.js landing page template

React and Next.js resources and landing page templates can be difficult to find on the internet, especially the ones that are not outdated or don’t have performance issues. STARTD is a free Next.js landing page template for SaaS products, online services and more. Technologies used: Next.js — An amazing React framework Twind — The smallest, […]

Airbnb Clone | Open Source Airbnb Clone Script | HomestayDNN

Trust & Verification for user engagement Authentication always sounds good for any kind of business. Not all the host receives the booking request, only a verified host’s property can be able to book. This airbnb clone equipped with various authentication method like E-mail verification, SMS verification and ID-Proof verification. Source: Echo Js

Laravel Sail adds support for choosing which services you'd like installed

Laravel Sail[1], a lightweight CLI for interacting with Laravel’s default docker environment, recently launched a new update that allows you to choose which services should be configured in your project’s docker-compose.yml file. Some of the options include MySQL, PostgresSQL, Redis, Memcached, Meilisearch, Selenium, and Mailhog. A new with parameter in the installer command determines what […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.