DEV Community: Médéric Burlet

Typescript - T3 / Chakra UI Boilerplate

Médéric Burlet — Thu, 08 Jun 2023 14:14:34 +0000

Recently i've been working a lot with T3 stack.

I have loved using it but i've found tailwind to be too descriptive and thus wanted a version ready to use with chakra-ui.

crimson-med / t3-chakra-template

T3 template incorporating Chakra UI

Create T3 App

This is a T3 Stack project but that incorporates Chakra-UI and user login and password with prisma.

Installation

Run the installation with: yarn
Make a copy of .env.example to .env and fill in: NEXTAUTH_SECRET and NEXTAUTH_URL
Run the seeding to create users and posts: yarn migrate/seed you can find the passwords in: prisma/seed.ts
If you want to configure Discord Login you can add the API info in: .env and uncomment the discord config in src/server/auth.ts

Boilerplate Examples

This boilerplate shares a few different aspects of T3 while making a few changes.

Signin & Signup

This currently has nextauth which can integrate many login system: NextAuth.js

This template was also configured to allow signin / signup…

View on GitHub

For those unfamiliar with T3 it uses Next, NextAuth, Prisma, tRPC and in this case Chakra-UI.

For now it supports simple signup / signin with username and password.

A simple data seeding script creates 3 users with some random posts.

You can see your own posts once logged in.

All default passwords are in the seed file.

Burlet Mederic

https://twitter.com/crimson_med

Create Random team names for projects

Médéric Burlet — Tue, 22 Mar 2022 08:26:55 +0000

Introduction

Here at Pixium Digital we often need to create sets of random usernames or team names.

This is either due to bench-marking with a need to simulate individuals groups or users.

Or for a need to anonymize leader-boards in various applications. This can be due to the fact that some applications have big firms as client that they want to keep anonymous hence we generate a random team or group name that can be displayed publicly without risking information leakage.

For this we have decided to build a small library that we can re-use to help us generate this content easily.

Basics

We first started to create a list of various information we would need. This includes adjectives, nouns, gamertags, colors, extended colors.

You find the more detailed list here:

https://github.com/pixiumdigital/random-namer/tree/master/src/data

We then wanted to create the possibility to add an ID at the end of the random generated content (discord like) so we could have a result like this:

myC00lUsername#3948
thundering-memory#8682

For this we used a little trick of Math.random()

/**
 * Generates a random ID (discord style)
 * @returns string
 */
export const randomId = () => {
    return Math.random().toString().substring(2, 6)
}

Formats

Most of the random lists will be in the following format string[] however there will be specifications. For example teams will be composed in this format:

adjective-noun

For example:

[
    'icy-dinosaurs',
    'mighty-scarecrow',
    'aquatic-squirrels',
    'defiant-camp',
    'natural-memory'
]

Then we have the Extended Colors which are of the following format:

interface ExtendedColor {
    id: string
    name: string
    hex: string
    r: number
    g: number
    b: number
}

Usage

To use the library you simply need to do the following:

yarn install @pixium-digital/random-namer

Then you can use it like this:

import { RandomNamer, RandomType } from "@pixium-digital/random-namer"

const list = RandomNamer(RandomType.TEAM, { toGenerate: 3, allUnique: true, addId: true })
// ['voiceless-sea#4457', 'delicate-star#6563', 'even-nest#9988']

const list = RandomNamer(RandomType.GAMERTAG, { toGenerate: 2 })
// ['The Best Yoda', 'I_Cant_Play']

Link

pixiumdigital / random-namer

Simple random name generator for various utilities

Random Namer

This project aims to simply provide random usernames, team names, gamertags, adjectives, colors to use in testing data.

Installation

yarn install @pixium-digital/random-namer

Usage

import { RandomNamer, RandomType } from "@pixium-digital/random-namer"
const list = RandomNamer(RandomType.TEAM, { toGenerate: 3, allUnique: true, addId: true })
// ['voiceless-sea#4457', 'delicate-star#6563', 'even-nest#9988']

const list = RandomNamer(RandomType.GAMERTAG, { toGenerate: 2 })
// ['The Best Yoda', 'I_Cant_Play']

Here is the list of random types that can be passed:

export enum RandomType {
    ADJECTIVE,
    COLOR,
    EXTENDED_COLOR,
    GAMERTAG,
    NOUN,
    TEAM,
}

Here are the parameters available to pass to the function

{
    toGenerate: number // Number of items to generate
    allUnique?: boolean // Should the generated items be unique?
    addId?: boolean //

…

View on GitHub

Pixium Digital - Shaping your project with technology and innovation
https://pixiumdigital.com
https://github.com/pixiumdigital

How we handled 350+ online connections on a video game

Médéric Burlet — Mon, 20 Sep 2021 03:21:28 +0000

We were working with a client on building a video game that had multiplayer integrated.

The game is more of a tabletop turn based game (think monopoly, life). We had to make sure turns and actions were synchronized across the board.

Furthermore we had the restraint that only one of the players is essentially the one enables to perform the actions. This means we had to account for scenarios where the client would be disconnected and we had to pass the power of decision to another user.

Choosing the stack

Having had some experience with game jams and other multiplayer games we decided to go with a typescript server leveraging Socket.IO

This would let use easily create a client / server using the same typescript types for exchanging data information.

Session Context

Introduction

First we wanted to setup our context. This means we could then interact with any game session or client data throughout any Socket.IO event.

export class SessionContext {
    activeSessions: Record<string, GameSession>
    clientSockets: string[]
    constructor () {
        this.activeSessions = {};
        this.clientSockets = [];
    }
}

Here we can see our context is consisted of activeSessions and clientSockets

clientSockets is just an array of strings of the ids of each clients connection. This is used later on on handling disconnection.

activeSessions are were we have a list of game session. We use here the type Record as this lets us access information on a faster scale with just the following:

const mySession = sessionContext.activeSessions[sessionId]

Our class then had a few extra functions that don't need explanation such as (addActiveSession, getSessionByClientSocket, etc.)

Handling Disconnections

It was important for us to handle disconnections as if a client in power gets disconnected we want to give that power to someone else.

This is where the clientSockets comes in as it lets us do a difference with the list of clients handled by Socket.IO. This is needed as the disconnect event does not tell us exactly who disconnected.

We can then have something like this:

reconcileDisconnect(ioClients: string[], io: SocketIO.Server) {
    // Compare the list of the IO Server clients vs the one we stored
    const disconnectedClient = this.clientSockets.filter(x => !ioClients.includes(x));
    // If we have more than one disconnected user then we have discrepancy
    if (disconnectedClient.length > 0) {
        // Loop through all the disconnected clients
        for (let i = 0; i < disconnectedClient.length; i++) {
            // Init local variables for easy access
            const tmpClient = disconnectedClient[i]
            const sessionOfDisconnected = this.getSessionByClientSocket(tmpClient)
            // If disconnected client was in a session
            if (sessionOfDisconnected) {
                const tmpSession = this.activeSessions[sessionOfDisconnected]
                console.log("GM : " + tmpSession.master);
                // Remove him from the GameSession Client list
                delete tmpSession.clients[tmpClient]
                // Remove him from the global pool of connections
                this.clientSockets.splice(this.clientSockets.indexOf(tmpClient), 1)
                // Check if there are no more clients in the GameSession
                if (Object.keys(tmpSession.clients).length <= 0) {
                    // Delete GameSession if there are no more users
                    delete this.activeSessions[sessionOfDisconnected]
                } else {
                    // Check if he was has power
                    if (tmpSession.hasPower === tmpClient) {
                        // Log a message if we switched master
                        if (tmpSession.switchMaster()) {
                            log(`Power of the Session (${tmpSession.hash}) has been changed to Client (${tmpSession.hasPower})`);
                            let newPowerClient = tmpSession.getClientFromSocketId(tmpSession.hasPower);
                            tmpSession.broadcast({ type: "newGameMaster", query: newPowerClient.hash }, io, true);
                        }
                    }
                }
            }
        }
    }
}

And we now have a new person in power or our session deleted if the person was the last user in the session.

Conclusion

We have a few other functions for getting and setting information but the main point of this article was to show how to handle identity of disconnections and how to access data efficiently using context.

Pixium Digital - Shaping your project with technology and innovation
https://pixiumdigital.com
https://github.com/pixiumdigital

Deploying React with Express with route integrity

Médéric Burlet — Wed, 25 Aug 2021 03:36:34 +0000

Background

As you may or may not know React often uses routing through the browser history API

A few of the common libraries that you might encounter would be:

React Router DOM: https://www.npmjs.com/package/react-router-dom
Wouter: https://www.npmjs.com/package/wouter (personal favorite)

These libraries will let you define routes and which components are being rendered.

Quick Example:

<Route path="/about"><AboutPage/></Route>
<Route path="/user/:id">
    {params => <UserPage id={params.id} />}
</Route>

Running this in dev mode will work fine.

Issue

If you build the react app and try to host it with express you'll notice we run in an issue:

import * as express from 'express'
const app = express()
app.use(express.static(configuration.buildDirectory));
app.listen(8080, () => {
    console.log(`Server started on port 8080`);
});

If you navigate to http://127.0.0.1:8080 you'll see your react app.

However if you navigate to http://127.0.0.1:8080/about

You will receive an error:

Can't GET /about

Solving the Issue

Our issue comes from the fact that express will only allow the route '/' to be used.

The idea is that we want to preserve the routes but still display our built index.html

For this we can add the following statement:

app.all('*', (req, res) => {
    res.sendFile(path.join(configuration.buildDirectory, '/index.html'), (err) => {
        if (err) {
            res.status(500).send(err)
        }
    })
});

This means that for every route we will render the index.html however since we are not redirecting we will preserve the URL scheme.

Pixium Digital - Shaping your project with technology and innovation
https://pixiumdigital.com
https://github.com/pixiumdigital

No need to open 4 tabs in your terminal for your projects!

Médéric Burlet — Fri, 09 Jul 2021 14:26:42 +0000

Very often when working on full stack solutions we find ourselves opening 4+ tabs in our terminal. We would run a yarn dev for on micro-service then a yarn start for react and so on.

This has always been annoying to handle and so we built Child Manager which lets you manager child processes for your project from just a simple config file.

https://github.com/pixiumdigital/child-manager/

Installation

To install run the following commands:

yarn add @pixium-digital/child-manager

You can also use NPM

npm install @pixium-digital/child-manager

Run

To leverage child manager simply add a configuration file to your project (see below for config details)

You can run thew following command:

yarn child-manager

By default the loaded config will be at the source of the project and be named childmanager.json

If you wish to load a different file just pass the config option.

yarn child-manager --config="./myconfig.json"

You can then access the manager at the following:

http://localhost:7000

Configuration

Here is an example configuration

{
  "processes": [
    {
      "name": "Test Service",
      "command": {
        "executor": "node",
        "args": ["TestService.js"],
        "path": "./src/service",
        "isWindows": false
      },
      "maxLogs": 200
    },
    {
      "name": "Service 2",
      "command": {
        "executor": "yarn",
        "args": ["start"],
        "path": "./other-project/service",
        "isWindows": false
      },
      "maxLogs": 200
    }
  ],
  "captureExit": true,
  "longLive": false,
  "debug": false
}

Generic configurations:

debug: This will show more logs in the terminal in case something is not working
longLive: This is to force process to stay alive. Use carefully.
captureExit: This binds the exit of child manager so that it will kill all childs

Process configurations:

name: The name of your service
maxLogs: The max number of logs to keep in memory (recommended 200)
command: This houses the command line that will be launched
- executor: The command executor (yarn, npm, node)
- args: Array or extra arguments that should be passed
- path: Where the command should be executed
- isWindows: Is this running on windows system? if yes paths and executors will be automatically changed to be compatible

Conclusion

With the use of one simple configuration file we are now able to launch all our mini services efficiently and with ease regardless of the fact that it might be a yarn script a npm script or even a command line

If you wish to contribute feel free to check out the code:

https://github.com/pixiumdigital/child-manager/

About Us

Pixium Digital

https://pixiumdigital.com

https://github.com/pixiumdigital

You do not need NPM to work with NodeJS

Médéric Burlet — Thu, 18 Mar 2021 11:25:41 +0000

Introduction

So I was just scrolling the feed as usual when I cam across an article where the tittle caught my eye:

Article No Longer Available

I was reading the article and their was some interesting point but a lot of misunderstandings and non-comprehension of the JavaScript ecosystem.

After trying to explain in the comments what was the difference between NPM and Node.JS I thought it would be better to just create a post to stop the share of false information and to try and enlighten people.

Definitions

JavaScript

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.
src

Node.JS

Node.JS is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
src

NPM

NPM is the default package manager for the JavaScript runtime environment Node.JS. It consists of a command line client, also called NPM, and an online database of public and paid-for private packages, called the NPM registry.
src

Corrected Assumptions

Node.JS Does not need NPM to function

If we look at the post mentioned in the introduction we can see that it starts of talking about Node.JS and then switches to mention NPM as if they were the same. The post judges Node.JS on the the problems of NPM.

This is a big mistake in itself. Looking at the definition of NodeJS as well as the source code it is clear the Node.JS itself DOES NOT use NPM

Node.JS was created before NPM and had as a main goal to have a cross-platform environment for executing JavaScript as backend. Thus looking at the Node.JS source code we can easily see that its main languages are: JavaScript, Python and C++ (for bindings).

nodejs / node

Node.js JavaScript runtime ✨🐢🚀✨

Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser. For more information on using Node.js, see the Node.js Website.

The Node.js project uses an open governance model. The OpenJS Foundation provides support for the project.

This project is bound by a Code of Conduct.

Support

Looking for help? Check out the instructions for getting support.

Release types

Current: Under active development. Code for the Current release is in the branch for its major version number (for example v15.x). Node.js releases a new major version every 6 months, allowing for breaking changes. This happens in April and October every year. Releases appearing each…

View on GitHub

There is even a tutorial for building the source itself which means you still do not need NPM to build and run Node.JS as well as code in it.

NPM needs Node.JS to funtion

If we look at the NPM source code we can see it is fully coded in JavaScript

npm / cli

the package manager for JavaScript

npm - a JavaScript package manager

Requirements

Node.js v10 or higher must be installed to run this program

Installation

npm comes bundled with node, & most third-party distributions, by default. Officially supported downloads/distributions can be found at: nodejs.org/en/download

Direct Download

You can download & install npm directly from npmjs.com using our custom install.sh script:

curl -qL https://www.npmjs.com/install.sh | sh

Node Version Managers

If you're looking to manage multiple versions of node &/or npm, consider using a "Node Version Manager" such as:

Usage

npm <command>

Links & Resources

Documentation - Official docs & how-tos for all things npm
- Note: you can also search docs locally with npm help-search <query>
Bug Tracker - Search or submit bugs against the CLI
Roadmap - Track & follow along with our public roadmap
Feedback - Contribute ideas & discussion around the npm registry…

View on GitHub

For NPM to work on any Operating System it will require Node as that is what the packet manager was made to work with. This is even specified in the README.md

Node.js v10 or higher must be installed to run this program

Lock files and NPM

The article in the introduction does mention that lock files are important and on that part I totally agree. However lock files have become a standard already used in all big and structured files and even in CI / CD. Lock files have been around for more than a few years and are already industry standard we could say.

A good article that explains this is the following. I believe this is what the author of the article in the introduction was trying to explain in his own terms:

https://snyk.io/blog/what-is-package-lock-json/

Conclusions

What should we keep in mind after this article?

Node.JS does not need NPM to function
NPM needs Node.JS to function
JavaScript does not need NPM or Node.JS to function (can be served through web)

Burlet Mederic
https://medericburlet.com
https://mederic.me
https://twitter.com/crimson_med

Protect your PRIVACY from the next Cambridge Analytica 🔒🕵

Médéric Burlet — Thu, 24 Dec 2020 02:26:15 +0000

Nowadays there are data breaches on a daily basis. It has become the norm to see on the news that companies have been hacked. But some data breaches are worse than others!

We have recently been reviewing all company and personal emails through websites such as Have I Been Pwned. This website incorporates a massive amount of breached and leaks and let you check if your email has been pwned.

One specific breach caught our attention: People Data Labs (PDL)

People Data Labs

By looking at it's website they mention they have accumulated over 2.5 billion profiles from unique individuals.

Here is a partial sample of available fields when using their API:

Full name
First name
Middle name
Last name
Gender
Birth year
Birth date
LinkedIn url & username
Facebook url & username
Twitter url & username
GitHub url & username
Work email

This is just a small subset of the data collected on individuals by PDL.

Protecting your privacy

If you find yourself in the PDL breach we would recommend that you ask you data to be deleted by PDL. With current Data Privacy laws they had to make an easy to use opt-out form.

The form is available here: https://www.peopledatalabs.com/opt-out-form

HOWEVER BE WARY the phone number field is not mandatory and you don't have to fill it in to opt-out. The less data your share the better it always is.

On a side note if you see your email on Have I Been Pwned as part of other data breaches we would recommend to update all your passwords.

About Us

Pixium Digital is an agile software development company with their headquarters located in Singapore. We focus on shaping our clients project from ideas to successful project launch.

Cyber Security is a big part of any project we have to deliver. Very often we have been the witness of lack of awareness or caution from various providers or clients we have worked with. We aim to share those little tips to the community so that with everyone's effort, we can make the web a safer place.

🔨 Build a web package with typescript! 🔥

Médéric Burlet — Fri, 27 Nov 2020 10:13:59 +0000

👋🏻 Introduction

Here at Pixium we often find ourselves creating web packages for various websites.

This means a simple package that you can integrate via the script tag and then use in your code for example:

<script src="https://mycdn.a/latest/bundle.js"></script>
<script>
    pixiumPackage.helloWorld()
</script>

During the development of this package we often find ourselves recreating all the package.json scripts and information. Thus we decided to create a template that can easily be setup.

In this post we will look at what tools we use and how we came to creating this kick-ass template!

🔧 Tools Used

Here is a quick list of tools used and a quick description of how it is used in the project

Tool	Description
Yarn	Handle package installation
Npm	Publish the package to npm registry
Typescript	Strongly typed JavaScript
Webpack	Bundle the typescript into a single JavaScript Library
Snowpack	Hot Module Reload for testing
Concurrently	Start multiple commands at the same time

🗄️ Managing Structure

Let's take a look now at how we manage folders and files in our current project

webpack-demo/
├── README.md
├── dist
├────...
├── node_modules
├────...
├── package.json
├── snowpack.config.js
├── src
├────...
├── test
├────...
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

As we can see we have 4 main folders in our project:

Folder	Use
dist	Contains compiled ready for release bundle
node_modules	All the npm packages needed for the project
src	The source files of the library
test	A index file referencing the bundle to test in real time

🕸 Webpack

In this project we use webpack and ts-loader.

Webpack is used for bundling everything in a library that is exposed in the browser while ts-loader let's us handle all the typescript necessities.

For the webpack config we use the output:library property to specify the name of the exposed library.

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        // Define the package name
        library: 'pixiumPackage',
        libraryTarget: 'umd',
        globalObject: 'this',
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

This means we can then access the library like this:

<script>
    pixiumPackage.myFunctionName()
    pixiumPackage.myClassName()
</script>

❄️️ Snowpack

Snowpack is an awesome tool that we discovered recently at Pixium. It is a modern frontend build tool that is so fast!

In this project Snowpack has a very simple use. Rendering a test environment to visualize changes in real time. It supports Hot Module Replacement which means everytime webpack will recompile a new bundle after making some changes the test environment will reload

snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        test: '/',
        dist: '/dist',
    },
    plugins: ['@snowpack/plugin-typescript'],
    install: [
        /* ... */
    ],
    installOptions: {
        installTypes: true,
    },
};

Here the mount parameter is the most important.

test: '/', means we will mount the test folder as the root of the web
dist: '/dist' means we will mount the dist folder to /dist. This means that we can then require scripts from dist for instance <script src="./dist/bundle.js"></script>

💻 Exposing our Code

And now let's finish off with taking a look at the code and how we can expose our constants, functions, class.

To make code accessible through our library we simply have to use the export method. For instance:

/**
 * Say hello world in the console
 */
export const PixiumHello = () => {
    console.log(`hello world`)
}

We can then call this in the following way:

<script>
pixiumPackage.PixiumHello()
</script>

You can also easily interact with the DOM through classic functions:

// Set the inner text
document.getElementById("pixiumBanner").innerText = "Pixium Digital Pte Ltd";

🏁 Conclusion

We now have a very simple typescript bundling in place with a HMR system in place for easy testing.

There are a few command shortcuts implemented to easily push patches, minors, majors to npm.

All this coupled with a CDN and you get an awesome blazing fast library for your frontend.

Full repo bellow

pixiumdigital / typescript-package-boilerplate

webpack package with typescript support

Typescript Webpackage Boilerplate

In this boilerplate we have a simple look at a very basic typescript package exported for the web.

We leverage the use of webpack to expose our package to the browser.

Installation

install the dev packages with yarn:

yarn

Developement

yarn start

This will start webpack to compile the library on changes. This will also start snowpack which will update the index.html in test once the library from webpack has been compiled

Build

yarn build

Publish Package

First login to the npm cli if not already done

npm login

You will need to remove the following line in your package.json

private: true,

To publish a patch

yarn patch

To publish a minor

yarn minor

To publish a major

yarn major

View on GitHub

Pixium Digital - Shaping your project with technology and innovation
https://pixiumdigital.com
https://github.com/pixiumdigital

Black Friday 🔥 Namecheap Deals

Médéric Burlet — Wed, 25 Nov 2020 10:53:18 +0000

Hey fellow developers!

Introduction

With black friday around the corner, Namecheap is now having some amazing black friday deals.

Personally I have been using Namecheap for quite a while. After using service like godaddy, vodien and more and having encountered many issues, Namecheap is the domain provider that has been the most flexible and reliable.

Deals

To view all deals you can go here:

https://www.namecheap.com/domain-web-hosting-ssl-deals/black-friday

Domains

.net
54% off ($5.98/yr)

.com
44% off ($4.98/yr)

.io
21% off ($25.98/yr)

.dev
27% off ($10.98/yr)

.link
89% off ($0.98/yr)

.online
97% off ($0.98/yr)

.me - my favorite https://mederic.me
90% off ($1.98/yr)

Private Email

Starter - 1 mail box + 5GB of Email + 2GB of File Space
70% off ($3.56/yr)

SSL Certificates

PositiveSSL
51% off ($2.88/yr)

PositiveSSL Wildcard
71% off ($20.88/yr)

EssentialSSL
47% off ($6.88/yr)

Conclusion

I hope that sharing this can help some developer launch their own products and projects. Do keep in mind by law some domain names require a ssl certificate to work (.dev, .io).

Vestigo v0.5.0 - Tales of Port Scans

Médéric Burlet — Tue, 03 Nov 2020 17:19:18 +0000

Introduction

After other side projects and less free time I had to leave Vestigo for a while

Discovering vulnerable endpoints on API / Websites

Médéric Burlet ・ Mar 9 ・ 2 min read

#security #api #devops #testing

With Hacktoberfest I decided to revisit this project and start to make it into something useful. When doing simple API tests I find myself often repeating the sames tasks.

NMAP on the target
Rust Scan
DirBuster
And more

The idea of Vestigo is to have a one tool that does all this with ease.

v0.5.0

Scan

Since the last update on Vestigo on dev.to there have been a few updates to the Scan command. It will now save reports in HTML and MD.

Those reports will be saved on the user profile ~/.vestigo

The scan comes with a whois module

Ports

v0.5.0 introduces the ports command which lets you portscan a target that is either an ip or a domain.

As of now only TCP scan has been integrated. But I plan to add UDP + reporting for this module.

I also want to add the possibility to try to curl the ports that possibly have a webserver. And in the future be able to detect the stack (wordpress, react, etc.)

Example command:

vestigo ports --target="127.0.0.1"

Going forward

The project is open source and on github so anyone wanting to participate in the development of this tool don't hesitate to open an issue based on the TO-DO list in the README.md with what you would like to tackle.

I hope this project can help many and that it can find some support and love.

crimson-med / vestigo

A tool for exploring and investigating APIs and websites.

Vestigo

A tool for exploring and investigating APIs and websites.

IMPORTANT

ocliff with npm and vestigo is broken to use the tool clone the repo

Installation

You can install it globally with:

yarn global add vestigo

npm i -g vestigo

Then run the tool

vestigo

Running

Scan Example:

vestigo scan --target="https://127.0.0.1/" --method="GET" --no-shortlist
  --report="HTML"

Port Example:

vestigo ports --target="127.0.0.1" --protocol="TCP" --report="HTML"

As of now reports will be saved at:

~/.vestigo/<domain>/<ts>-vestigo.<extension&gt

<domain> = hostname of the target or the ip
<ts> = timestamp of the scan finished
<extension> = extension chosen for report (md, html)

Functionalities

Report

Vestigo will by default generate a mardown report. You can use parameters to set the report format to HTML.

Dev Run

To run the tool in dev mode use:

…

View on GitHub

Burlet Mederic
https://medericburlet.com
https://mederic.me
https://twitter.com/crimson_med

React, Prisma, GraphQL Boilerplate

Médéric Burlet — Sun, 11 Oct 2020 09:37:19 +0000

Introduction

I find myself often recreating simple landing pages, login, logout, signup flows and I got really tired of it. Especially when its for small projects.

I decided to make a nice easy to use boilerplate accessible for all.

crimson-med / react-prisma2-graphql-boilerplate

Simple React, Prisma2, GraphQL, Boilerplate

This project is open to Hacktoberfest contributions as long as the CONTRIBUTING.md is respected.

Quick Start

First:

git clone https://github.com/crimson-med/react-prisma2-graphql-boilerplate.git

Then follow the following instructions.

Open two terminals and follow the following commands:

Terminal 1	Terminal 2
cd backend	cd frontend
yarn install	yarn install
yarn dev	yarn start

That's it you are up and running!

Frontend

In this frontend we leverage React for all the rendering. We also user OvermindJS for state management and ApolloClient for GraphQL interactions.

Backend

An implementation of a GraphQL server with an email-password-based authentication workflow and authentication rules, based on Prisma, graphql-yoga, graphql-shield & Nexus Schema. It is based on a SQLite database.

Since we are using prisma the database can easily be switched to anything (postgre, mysql, etc.)

Screenshots:

Homepage:

Signup:

Dashboard:

Burlet Mederic
https://medericburlet.com
https://mederic.me
https://twitter.com/crimson_med

How Array.fill can break arrays!

Médéric Burlet — Wed, 07 Oct 2020 04:17:31 +0000

Introduction

When working with arrays one should always be very careful in the difference between Array.from and Array.fill.

Array.fill

It is very tempting to you Array.fill as it has a much simpler syntax. However it is a nasty little beast when it comes to multi-dimensional array

Array.fill actually references the same object in memory.

What does this mean?

lets create a 5*5 multi dimensional array. This could be used for generating video games based on a cell system.

let test = new Array(5).fill(new Array(5).fill("1"))
console.log(test)

This gives us the following output:

[
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

Everything seems pretty ok until the moment we try to modify just one cell:

test[0][1] = "5"
console.log(test)

This gives us the following output:

[
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ]
]

WAIT WHAT???

Well by referencing the same object in memory that means all the cells in one column will change when changing one!

Array.from to the rescue

Array.from has a more iterative approach and does not reference same objects this means we will be able to modify anything.

let fixed = Array.from({length: 5}, () => (
    Array.from({length: 5}, () => ("1"))
))
console.log(fixed)

This gives us the following output:

[
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

For now it looks the same but if we try to modify a cell:

fixed[0][1] = "5"
console.log(fixed)

We get the following output:

[
  [ '1', '5', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

WOHOOO

Now we can create real multi-dimensional arrays

Burlet Mederic
https://medericburlet.com
https://mederic.me
https://twitter.com/crimson_med

DEV Community: Médéric Burlet

Typescript - T3 / Chakra UI Boilerplate

crimson-med / t3-chakra-template

T3 template incorporating Chakra UI

Create T3 App

Installation

Boilerplate Examples

Menu

Signin & Signup

Create Random team names for projects

Introduction

Basics

Formats

Usage

Link

pixiumdigital / random-namer

Simple random name generator for various utilities

Random Namer

Installation

Usage

How we handled 350+ online connections on a video game

Choosing the stack

Session Context

Introduction

Handling Disconnections

Conclusion

Deploying React with Express with route integrity

Background

Issue

Solving the Issue

No need to open 4 tabs in your terminal for your projects!

Installation

Run

Configuration

Conclusion

About Us

You do not need NPM to work with NodeJS

Introduction

Article No Longer Available

Definitions

JavaScript

Node.JS

NPM

Corrected Assumptions

Node.JS Does not need NPM to function

nodejs / node

Node.js JavaScript runtime ✨🐢🚀✨

Table of contents

Support

Release types

NPM needs Node.JS to funtion

npm / cli

the package manager for JavaScript

npm - a JavaScript package manager

Requirements

Installation

Direct Download

Node Version Managers

Usage

Links & Resources

Lock files and NPM

Conclusions

Protect your PRIVACY from the next Cambridge Analytica 🔒🕵

People Data Labs

Protecting your privacy

About Us

🔨 Build a web package with typescript! 🔥

👋🏻 Introduction

🔧 Tools Used

🗄️ Managing Structure

🕸 Webpack

❄️️ Snowpack

💻 Exposing our Code

🏁 Conclusion

pixiumdigital / typescript-package-boilerplate

webpack package with typescript support

Typescript Webpackage Boilerplate

Installation

Developement

Build