Posts

Showing posts with the label javascript

Three.js Quick Start - Run Spinning-Cube Example

Image
In this post, I am going to run the spinning-cube example for three.js. https://threejs.org/docs/#manual/en/introduction/Creating-a-scene What is three.js? three.js is a JavaScript library to render 3D graphics on a browser. Example % mkdir threejs && cd threejs % mkdir js % curl -o ./js/three.js https://threejs.org/build/three.js % tree . ├── index.html └── js     └── three.js % vim index.html % open index.html index.html (the code is from  example ) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="js/three.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, windo...
Post a Comment
Read more

TypeScript: Quick Start & Examples

This post describes how to start programming in TypeScript. what is TypeScript? TypeScript = JavaScript + static type definitions install You can install it using npm % node --version v15.14.0 % npm --version 7.7.6 % npm install -g typescript % tsc --version Version 4.2.4 hello world Create hello.ts as follows: console.log("Hello, world"); tsc compiles .ts into .js % tsc hello.ts % ls  hello.js hello.ts % cat hello.js  console.log("Hello, world"); Run .js with Node.Js: % node hello.js  Hello, world types The following code shows examples of the static type definitions. // boolean let flag : boolean = true; // number let n : number ; n = 1; // n = 'hello'; -> error TS2322: Type 'string' is not assignable to type 'number'. // string let str = 'hello'; // type is auto defined if omitted during init str = 'world'; // str = 2; -> error TS2322: Type 'number' is not assignable to type 'string'. // void f...
Post a Comment
Read more

Google Apps Script - Receive Web Request (doGet)

Image
 In this post, I am going to share how to receive a web request using Google Apps Script. What is Google Apps Script? Google Apps Script (GAS) is a script to automate Google App Suite like Google Sheets. It is basically the Google version of Excel VBA. Introduction On a Google Sheet, go to Tools > Script editor. You can add the following code to set "Hello" on A1. function myFunction() {   SpreadsheetApp.getActiveSheet().getRange('A1').setValue('Hello'); } Click Run . After a few seconds, you will see a notification to authorize the script on the first run. Once authorization is done, go back to the Google Sheet to see "Hello" has been added: doGet Next, replace the script with the following: function doGet(e) {   SpreadsheetApp.getActiveSheet().getRange('B1').setValue('World!');   return ContentService.createTextOutput("ok"); } This time, click on Deploy > "New development" "Select Type" > ...
Post a Comment
Read more

Puppeteer: Quick Start

Image
This post is a snippet of the official Puppeteer guide, plus my personal opinion. https://developers.google.com/web/tools/puppeteer/get-started What is Puppeteer? "Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium" ( https://developers.google.com/web/tools/puppeteer ). Selenium vs Puppeteer A friend of mine who runs a crowler-based service told me he usually uses Selenium in Java for production and Puppeteer for a small project with few people. You can also check Selenide if you want to compare the technologies: https://web-quickstart.blogspot.com/2021/03/selenide.html Install yarn (if not installed yet) You can also use npm instead. For me, yarn looks easier if you run it on Mac. % brew install yarn % yarn -v 1.22.10 Install Puppeteer % yarn add puppeteer % yarn add puppeteer-core Run Create example.js as: const puppeteer = requ...
Post a Comment
Read more