Forem: Orhun Özer

kill any port from terminal 🥷

Orhun Özer — Wed, 17 May 2023 16:25:12 +0000

killport() {
    if [[ $# -eq 0 ]]; then
        echo "Usage: killport <port>"
        return 1
    fi

    local port=$1
    local pid=$(lsof -n -i4TCP:"$port" | awk 'NR>1 {print $2}')

    if [[ -n $pid ]]; then
        kill -9 "$pid"
        echo "Process with PID $pid killed."
    else
        echo "No process found running on port $port."
    fi
}

Add this to .zshrc

Call killport 8080 from terminal.

Configuring Git SSH Keys for Multiple Accounts and Workspaces

Orhun Özer — Thu, 30 Mar 2023 09:54:04 +0000

You can have different keys based on different domains. The following code is an example of how you can configure your SSH keys for different accounts on GitHub and Bitbucket.

code ~/.ssh/config

# Personal account
Host github.com
   HostName github.com
   User git
   UseKeychain yes 
   AddKeysToAgent yes
   IdentityFile ~/.ssh/id_ed25519

# Work account-1
Host bitbucket.org    
   HostName bitbucket.org
   User git
   UseKeychain yes
   AddKeysToAgent yes
   IdentityFile ~/.ssh/id_rsa

Multiple git configs

If you want to have multiple git configs one of the easiest ways to achieve this is having a separate workspaces and gitconfigs respectively.

In the context git, a workspace refers to a directory or folder on your computer where you store your work-related projects and files.

By using the includeIf directive in your .gitconfig file, you can tell Git to use a specific configuration file depending on which workspace you're currently in.

In case you don't have a gitconfig;

touch .gitconfig 
code .gitconfig

Inside of .gitconfig separate config files based on path

[includeIf "gitdir:/Users/your_username/workspace-company/"]
path = ~/.gitconfig-company
[includeIf "gitdir:/Users/your_username/workspace-personal/"]
path = ~/.gitconfig-personal

then in each config you’ll have different setup.

.gitconfig-company

[user]
 name = Orhun Ozer
 email = orhun.ozer@company.com

.gitconfig-personal

[user]
 name = HelluvaDevelopa
 email = helluva@developa.com

Resources freecodecamp

Three.js text scenes on Google Maps are so-good-it-hurts 🏙🔠😎

Orhun Özer — Thu, 17 Nov 2022 22:16:47 +0000

I genuinely love 3D text tracking titles in movies like the example below. We are going to put the name of the city near a historic location in a similar way for this example. Only on a map.

Let me show you how I did something similar on google maps. Source code at the end 👇

First you need to install dependencies

yarn add @googlemaps/js-api-loader @googlemaps/three three

Import the libraries

import { ThreeJSOverlayView, latLngToVector3 } from '@googlemaps/three';

import { Loader } from '@googlemaps/js-api-loader';

Before loading data make sure you have vector maps enabled from google console.


export const LOADER_OPTIONS = {
  apiKey: 'YOUR_API_KEY_HERE',
  version: 'beta', // to use beta features 
  libraries: [],
};

const mapOptions = {
  // location of Galata Tower at Istanbul
  center: {
    lat: 41.025615,
    lng: 28.974133,
  },
  zoom: 17,
  heading: 60,
  tilt: 50,
  mapId: 'OPTIONALLY_MAP_ID_HERE',
};

new Loader(LOADER_OPTIONS).load().then(() => {

... threejs stuff goes here 

})

A three.js scene inside google maps is not much different than you would see in an ordinary Three.js scene. Therefor you have light and objects.

  // installing map here
  const map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // creating new scene
  const scene = new THREE.Scene();

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);

  // default light comes from above
  directionalLight.position.set(0,1,0)
  directionalLight.intensity = 1
  scene.add(directionalLight);
  scene.add(directionalLightHelper);

To render fonts within Three we will use FontLoader. I am using Helvetiker Regular font for this example. You can find it in the source code as well.

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';

  const fontLoader = new FontLoader();

  fontLoader.load('./font.json', function (font) {

   ... font stuff here

  }

We are going add Geometry and Material combined as a Mesh. You can't use pixel coordinates because you are rendering on a map. latLngToVector3 is going to do the transformation for us.

    const title = 'ISTANBUL';

    const titleGeom = new TextGeometry(title, {
      font: font,
      size: 80,
      ...
    });

    const textMaterial = new THREE.MeshPhongMaterial({
      color: 0xff2d00,
      specular: 0xffffff,
    });

    const titleMesh = new THREE.Mesh(titleGeom, textMaterial);
    // set position behind the tower
    titleMesh.position.copy(
      latLngToVector3({
        lat: 41.024615,
        lng: 28.974533,
      })
    );

    ...

    scene.add(titleMesh);

Then we are going add the scene to the map. Here we are also enriching the experience with nice camera movement to get closer to the scene.

 // instantiate the ThreeJS Overlay with the scene and map
  const overlay = new ThreeJSOverlayView({
    scene,
    map,
    THREE,
  });

Animation using requestAnimationFrame

const animate = () => {

    ...

    if (mapOptions.tilt < 67.5) {
      mapOptions.tilt += 0.5;
      mapOptions.heading += 1;
      mapOptions.zoom += 0.005;
    } else if (mapOptions.heading <= 210) {
      mapOptions.heading += 0.4;
      mapOptions.zoom += 0.007;
    } else {
      // exit animation loop
      return;
    }

    const { tilt, heading, zoom } = mapOptions;
    map.moveCamera({ tilt, heading, zoom });

    requestAnimationFrame(animate);
  };

  requestAnimationFrame(animate);

Source code -> https://github.com/orabazu/threejs-text-googlemaps

Visualizing a mountain using Three.js, Landsat and SRTM

Orhun Özer — Tue, 15 Nov 2022 19:41:10 +0000

Originally posted on Medium on Mar 11, 2019
https://zubazor.medium.com/visualizing-a-mountain-using-three-js-landsat-and-srtm-26275c920e34

TL;DR

Using freely available satellite data and Javascript you can visualize a topography on earth. Link to source code and demo. If you think it’s going to be fun let’s continue.

Mount What?

A few weeks back, I decided to spend some time with Three.js in my leisure. I decided to visualize the 3D model of Turkey’s highest mountain: Mount Ağrı, only using freely available satellite data and Javascript. Like 15th century romantic William Blake once said; “Great things are done when men and mountains meet”. So, Willy, it is gonna be hilarious baby.

Bootstrapping with ES6 and Webpack

There are plenty of good examples in Github but I’ll go forward with the https://github.com/jackdbd/threejs-es6-webpack-starter because it has all of the features I need and more and also easy to understand.

DATA

Mount Ağrı

The data I am going to use is freely available and provided by the USGS. Using earth explorer I downloaded DEM(Digital Elevation Model) and satellite image of Ağrı Mountain which is a passive volcano and also the highest mountain in Turkey.

I downloaded a few images using USGS application then tried to find an image with cloud coverage of less than 10%

Downloading image from https://earthexplorer.usgs.gov/

The Good, The Bad and The Landsat 🛰️

If you are not familiar with remote sensing and image processing you might not hear about the Landsat but, is a continuous satellite mission controlled by USGS and provides scientific satellite imagery for researchers with approx. 30m2 resolution for many years. One pixel of the image covers an area of 30m2 where the satellite’s camera is perpendicular to the earth. Nowadays some satellites have a resolution less than a meter but generally, they are not freely available. So, Landsat is not so good or bad, but it is enough for us, we are going to use this old loyal fella for our textures.

https://earthexplorer.usgs.gov/ is the source for downloading free satellite imagery. The images should have a cloud coverage of less than 10% and it should be added to the criteria. It was hard to find a good one since the mountain is so high that it is cloudy every time. After finding a suitable image I realized that Landsat covers a huge area and I needed to crop my area of interest. After cropping this is going to be the texture of the model. But more importantly, I need an elevation model to visualize the mountain.

SRTM — I don’t give a DEM 🗻

Yeah, actually it gives a DEM. DEM stands for Digital Elevation Model and it is raster based elevation data. SRTM which stands for “Shuttle Radar Topography Mission” is operated by NASA. (https://www2.jpl.nasa.gov/srtm/) The SRTM offers a DEM with 30m resolution. Let’s recall; it means one pixel covers the approximately 30m area and the average elevation of that area as the pixel value. This data is extremely valuable for generating our mountain model in three.js

Pre Processing

I used QGIS one of my favorite products for GIS. I cut and mask the DEM and related satellite image using QGIS raster tools and copy them to the working directory.

Clipping image and DEM in QGISLooks kind of scary, digital elevation model over satellite image.

Looks like the Mouth Doom but this is how the elevation model looks like in QGIS with default color palette. I clipped two different sizes concerning performance, you can find both at the repo. I use the small one in the demo to see results fast.

Three.js

Three.js is an excellent library for using WebGL easily. It might seem complicated at first glance, we will slice it into pieces to understand better.

Lights, Camera, Action

In order to start three.js in beginner level this tutorial is very helpful. https://aerotwist.com/tutorials/getting-started-with-three-js/

In Three.js world we need some basic setup. 4 basic components

A scene
A renderer
A camera
An object or two (with materials)

A note about materials

I don’t care about materials in this example because the satellite image is already enlightened by the sun itself when the image is acquired. Therefore we have natural cloud shadows according to sun angle. So, I don’t mind which angle the light is coming from also. If you wonder you can dig the metadata file of Landsat image to find out in which sun angle it has when the image is acquired. Then you can simulate the same light with shaders etc. If you want real reflections you can consider using some of the shapes above.

Materials and reflections

Let’s start

We’ll start with adding a scene, then we’ll set renderer, camera, controls, and light. Adding light is crucial otherwise you cannot see anything on the scene.

Shaping The Mountain

The geometry of our object is not modeled in Blender, Maya, or something similar. These kinds of models can be imported to three.js easily. But I am going to use DEM file to generate a model directly in js with the help of “geotiff” library.

Reading Image

Inside setupTerrainModel after adding clipped images to the project we use geotiff library to read DEM file and add a new PlaneGeometry object passing size of the image. Ok let’s generate the big boy.

Then read pixel values that each pixel corresponding to an elevation value. I just heuristically divide it to “20” to make it look nice and multiplied it with -1 otherwise model will be upside down because of the z-coordinate direction of three.js, I’ll explain it later. Using console.time let us see the performance.

From now on our model is ready to pop up in the browser but without a satellite image, it is only a 3D model and going to looks like the one above.

3D mesh of Mount Ağrı in three.js

Texture Fitting

After generating the model, we are going to use an RGB satellite image which is also clipped with QGIS earlier.

We are loading the satellite image and keep in a variable called “material” to use with Three.MESH just after. And don’t forget to rotate the object because three.js has start with the right-hand coordinate system which means, by default Z-axis is not towards upwards but you. For a detailed explanation: https://tweedegolf.nl/blog/5/threejs-rotations

You can either rotate the x-axis or rotate the camera at the beginning by camera.up.set(0,0,1) Rotating x-axis and putting out mountain just above and moving down a little bit in y-axis let’s run and swish. It is ready.

Demo & Source Code

There are two versions of DEM model (one is very large) you can test it in your local environment. I’ve used the small version for the demo. https://zhunor.github.io/threejs-dem-visualizer/ https://github.com/zhunor/threejs-dem-visualizer

Credits & Gains

Well, it is hard to find a nice cloudless image first of all. Secondly generating a 3D model with all detail is extremely costly. Maybe the DEM should be downscaled to a reasonable resolution if someone really willing to do it in client-side.

Tutorials of https://github.com/jonathanlurie/ThreejsDEM and http://blog.mastermaps.com/2013/10/terrain-building-with-threejs.html was extremely helpful. Thank you guys.

How to bundle a tree-shakable typescript library with tsup and publish with npm

Orhun Özer — Wed, 02 Nov 2022 13:15:41 +0000

Header image is generated by Night Cafe's AI btw.

Thinking of the vast frontend ecosystem, for the most part, I don’t need to implement stuff on my own. The majority of the time, I google a particular problem and most of the time I find a library or stack-overflow answer, Bingo. But there are times when I find myself lacking something unique, whether it is a company task or a hackathon project, a holistic approach, a whole new sexy vibe is needed indeed.

Recently I was trying to get my head around sports analytics and realized that like the majority of the data science ecosystem, all tools are written in python. While I was re-studying to sharpen my rusted python skills (no pun intended 🦀), I also tried to do some stuff with JS for fun as well, which turned into to a separate library based on D3. In this blog post, I won’t explain the library itself because that's another story (P.S watch this space). But this time I'll share a very basic setup to enable you to come up with your own with a minimum of fuss. Github link at the end 👇

For a JS/TS library you would need a transpiler/bundler, a module strategy, a published version of your lib, and optionally a demonstration app.

Bundler (esbuild & tsup)

esbuild claimed to be the fastest in the town when it comes to bundlers, and it seems so according to benchmarks as well. Similar to Parcel, tsup is a zero-config library(in case you don't want it) based on esbuild. Parcel is based on Rust based swc compiler meanwhile esbuild is based on Go. Tsup is tailored to work seamlessly with TS. Even though it is zero config you can change the configs if need be, so we do. Here is the config I used for this article.

tsup.config.ts

import type { Options } from 'tsup';

const env = process.env.NODE_ENV;

export const tsup: Options = {
  splitting: true,
  clean: true, // clean up the dist folder
  dts: true, // generate dts files
  format: ['cjs', 'esm'], // generate cjs and esm files
  minify: env === 'production',
  bundle: env === 'production',
  skipNodeModulesBundle: true,
  entryPoints: ['src/index.ts'],
  watch: env === 'development',
  target: 'es2020',
  outDir: env === 'production' ? 'dist' : 'lib',
  entry: ['src/**/*.ts'], //include all files under src
};

Here we are transpiling all our TS files into JS with the help of tsup's config. Afterwards we will publish it with npm in JS format with type declarations so that both JS and TS apps can use it.

I need to clarify a few things though.

`splitting`

This is flagged an experimental feature that only works for esm right now. You need to specify outDir as well. With this feature, we are enabling tree-shaking so that users don't have to download shared bits of code again and again when they switch between different pages for example. Look here for further info.

`skipNodeModulesBundle`

Skips building dependencies for node modules, and use them as they are imported. As a library builder, you can even bundle and serve your dependencies but this is way beyond the scope of this article.

`dts`

Generates typescript declaration files (e.g. index.d.ts), useful when you consume libraries with typescript.

`entry`

See how we enable all files to be parsed by tsup using a simple regex pattern ['src/**/*.ts']

Rest of the options pretty much does the stuff, as the names imply

Module Strategy

Handling modules has been a pain in the neck for JS community for a long while. Therefore, there are some different strategies when you want to distribute your JS bundles. 4 major modules around are:

CommonJS
AMD: Async Module Definition
UMD: Universal Module Definition
ES modules

I won't get into the details of AMD and UMD in this post. But I'd like to talk about CJS and ESM which are the most common ones. There is a distinct difference between CommonJS and ES modules which is Tree shaking. CommonJS modules are the original way to package JavaScript code for Node.js. Up-to-date versions of node.js support both. The major difference here is in a CommonJS module all of your pretty js files are bundled into a single file. You'll remember the syntax if you've worked on both ends.

ESM (ES modules)

import {john} from "doe";

export jane;

CJS (CommonJS)

const john = require("doe")

module.exports = jane;

Tree-shaking

Tree-shaking is eliminating dead code and unused exports from your bundle. With CJS even if you only going to use a simple Card component let's say, if it is not tree-shakable library, you need to download the whole library and add it to your vendor chunk eventually. For example one of the most used utility libraries around is lodash and there has been a lot of problem because of its huge bundle size in the past If you use es modules import/exports which are tree-shakable by its nature, bundlers can detect unused exports. Dead codes are eliminated that way.

You can output different module formats with tsup but cjs file won't be tree-shakable. Don't forget you are just making the library tree-shakable. It is the app that uses the library actually shakes and eliminates the dead code. But in this article, I want to output two different formats for two different platforms (web & node) the former one would be tree-shakeable. The main motivation behind it was creating a UI library for me but you never know which platform your library is going to end with if it is not a UI library particularly. So why not provide it in both formats just for sake of doing it 🃏 Below line will handle that for us.

format: ['cjs', 'esm']

We will also change the package.json a bit.

  "main": "lib/index.cjs",
  "module": "lib/index.js",
  "types": "lib/index.d.ts",

The module field is used to determine the ES version of the package. Also, we want to mark our library as an es module. To do so, we'll add the below line to package.json.

"type": "module",

which affects tsup compilation as well in terms of file extensions.

├── index.js          # esm
└── index.cjs         # cjs

index.js is an es module now. The reason behind all this is for a UI library we want its components/classes to be importable separately so that the user can import a Component like the one below in an async manner.

script type="module" lets the browser treat this piece of import as a module

Output Directories

If you ever investigated libraries like Ant Design you'll recognize that there will be a separate lib folder inside of the package, from which you can import particular components from. We would have both lib and dist libraries. dist would stand for bundle version of your files and possibly could be used when you want to distribute your library over a CDN for example.

Used and Unused Exports 🤔

Now try to look at this implementation the other way around.

Let's assume an app has our library as a dependency and this app use webpack or a similar bundler that is ready to tree-shake our library. It can detect unused exported modules thanks to a feature called usedExports

But if you bundle all your js into a single whole bundle will be imported anyway. There is another concept called sideEffect pops out at this stage. According to webpack

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.

Webpack can identify if it should run this optimization by checking a custom field called sideEffects inside package.json. Preserving module structure and serving library with tiny modules enable bundlers to eliminate the dead code.
If you have a particular module that you want to be bundled whether it is used or not, you should add it to the sideEffect list. This includes scss or other files as well. A possible sideEffects configuration that you can add to your package.json is

  "sideEffects": [
    "dist/*",
    "lib/**/style/*",
    "*.scss"
  ],

In the above example, you're telling webpack not to clean modules considered to be dead code and this makes sense because under a dist folder possibly you have a single minified bundle including all needed utility functions, etc. It can be even a CJS module in which tree-shaking is not possible. The same is true for your style files, you possibly need all of them, it might be misleading to tell webpack to skip the whole module/subtree of scss.

How to test if `sideEffects`actually works

Basically looking at the bundle. Let's assume a very basic library

index.ts

import { sum } from './Sum';

const sampleJson = [
  {
    id: 'f5e7457f-467d-4e37-9652-f2fb1b51c712',
    first_name: 'John',
    last_name: 'Doe',
  },
];

export { sampleJson, sum };

and inside Sum we are just exporting a basic sum method
Sum/index.ts

const sum = (a: number, b: number) => a + b;

export { sum };

After we transpile with tsup all the files will be added to the bundle. Note that we are preserving folder structure under lib.

Let's jump into to the app and locally link the library for testing. I'll use this webpack starter https://github.com/wbkd/webpack-starter

Testing with npm link

The easiest way to test your library is to register it locally with npm link or yarn link.

yarn link v1.22.19
success Registered "tsup-library-template".
info You can now run `npm link "tsup-library-template"` in the projects where you want to use this package and it will be used instead.

Then go to the app you want to use the library then yarn link <your-library>

yarn link v1.22.19
success Using linked package for "tsup-library-template".
✨  Done in 0.02s.

This is the quickest way to set you up. If you want to manage your lib and examples in the same monorepo have a look at the yarn workspaces

Let's use the library

Inside the app we will use library like this

someApp.js

import {sum} from 'tsup-library-template';

console.log(sum);

even though library has two expected members we only used one method which is sum and that reflects on webpack bundler.

someAppsBundle.js

 !function(){"use strict";console.log(((o,c)=>o+c))}();
//# sourceMappingURL=app.5712c325.js.map

Now import the sampleJson and use it as well

import {sum, sampleJson} from 'tsup-library-template';

console.log(sum, sampleJson);

Look at the bundle generated by the webpack
it is larger because it know includes two imported members sum and sampleJson.

!function(){"use strict";console.log(((e,f)=>e+f),[{id:"f5e7457f-467d-4e37-9652-f2fb1b51c712",first_name:"John",last_name:"Doe"}])}();
//# sourceMappingURL=app.b0051b82.js.map

We can even solely import a module inside using the below syntax

import {sum} from 'tsup-library-template/lib/Sum';

console.log(sum);

output will be same with the first example.

!function(){"use strict";console.log(((o,c)=>o+c))}();
//# sourceMappingURL=app.5712c325.js.map

Some of you might think at this stage "isn't it just regular module import/export". Yes, you are absolutely right, the only difference here is we let the bundler to do that inside of an npm package. We're done with the building, time to send it to the npm 🚀

Versioning and Releasing

npm version major  // increase major version

npm version minor  // increase minor version

npm version patch // increase patch version

All of the above comments set the new version, updates the package json and commits to git

npm login

to login your npm account, then run

npm publish

on terminal. Check you npm account to see package is ready with the version you specify inpackage.json

Summary

tsup is a bundler based on arguably the fastest bundler: esbuild. You don't have to modify configs, but you can compose the way you want for different outputs. ESM is the preferred module strategy for web and UI libraries. The main difference between a CJS and ES module is that the latter is tree-shakable makes it more efficient and requires less time to download, parse and execute for browsers. We provide the library with type declarations in JS format. Add sideEffects:false to your package.json for further optimization when other bundlers use the library. Quickly test with npm link

Github Link

In case you want to use this approach as a template
👉 https://github.com/orabazu/tsup-library-template

Webpack Error

If you see this error when you use the library

ModuleNotFoundError: Module not found: Error: Can't resolve './Sum' in '/Users/hunor/workspace-zhunor/js/tsup-template.js/lib'
Did you mean 'index.js'?
BREAKING CHANGE: The request './Sum' failed to resolve only because it was resolved as fully specified

By default webpack expects you to provide the file extension when importing a module in .mjs files or any other .js files when their nearest parent package.json file contains a "type" field with a value of "module", otherwise webpack would fail the compiling with a Module not found error.

In order to skip this you might need to set fullySpecified: false in webpack configuration similar to below.

{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false
  }
}