Grounded Development: Why the “Magic” Needs to Stop If you’re new to modern JavaScript, running npx create-react-app or npx create-vite feels like pure magic. In seconds, you have a working app!
But what actually converts your cool ES6 consts and your funky JSX into browser-friendly code?
We’re going to strip away the abstractions and build a clean, predictable development environment using just npm, webpack (the Bundler), and Babel (the Transpiler). We will build the pipeline in three phases, adding a new capability in each step.
Our first goal is simple: Get a modern JS file to run in the browser.
Every modern project starts here.
# Create the folder and start npm
mkdir grounded-app
cd grounded-app
npm init -y
# Create the source and output directories
mkdir src dist
We need a bundler to combine files and a transpiler to convert modern JS.
# Install bundler/server tools and Babel core
npm install --save-dev \
webpack webpack-cli webpack-dev-server \
@babel/core babel-loader @babel/preset-env
Let’s use an arrow function that older browsers might not understand.
src/index.js
const greet = (name) => {
console.log(`Hello, ${name}! This is modern JS.`);
};
document.addEventListener('DOMContentLoaded', () => {
greet('Grounded Developer');
});
.babelrc (In the project root)
{
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults"
}
]
]
}
webpack.config.js (Minimal Setup)
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
// THE BABEL RULE: Apply babel-loader to all .js files outside node_modules
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' },
},
],
},
mode: 'development'
};
What happens: webpack bundles the file, and the babel-loader ensures the arrow function is converted to a browser-safe function() {} along the way.
A frontend app isn’t just JavaScript. Now we teach webpack to handle other file types using Loaders and Plugins.
We need loaders for CSS and a plugin to manage our HTML file.
# Install asset loaders and the HTML plugin
npm install --save-dev style-loader css-loader html-webpack-plugin
A. HTML Plugin: We use html-webpack-plugin to generate the output HTML and inject the script tag automatically. index.html (Update the entry point to be served as the template)
...
<body>
<div id="app"></div>
</body>
...
B. webpack.config.js (Adding the asset rules)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... (entry, output, devServer, mode remain the same)
module: {
rules: [
// ... (Babel rule remains)
// NEW CSS RULE
{
test: /\.css$/,
// Loaders run R-L: css-loader resolves imports, style-loader injects into DOM
use: ['style-loader', 'css-loader'],
},
// NEW IMAGE/ASSET RULE (using webpack 5's built-in Asset Module)
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource', // Copies the file to 'dist' and provides the URL
},
],
},
// NEW PLUGIN SECTION
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.html'),
filename: 'index.html',
}),
],
// ... (devServer remains the same)
};
We create our convenient scripts to start the server and run the final production build.
package.json (Scripts section)
"scripts": {
"build": "webpack --mode production",
"start": "webpack serve --open --mode development"
},
Finally, we introduce React and its primary feature, JSX.
We need the actual React libraries and the special Babel preset to handle JSX.
# Install React core libraries
npm install react react-dom
# Install the Babel preset for JSX
npm install --save-dev @babel/preset-react
We update the configs to recognize JSX files and syntax.
.babelrc (Add the React preset)
{
"presets": [
"@babel/preset-react", // <-- Now handles JSX syntax!
["@babel/preset-env", { "targets": "defaults" }]
]
}
webpack.config.js (Update to include the .jsx extension)
// ...
module: {
rules: [
// Updated test regex to include .jsx files
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' },
},
// ... (asset rules remain)
],
},
resolve: {
// Allows importing files with .js or .jsx extensions without specifying them
extensions: ['.js', '.jsx'],
},
// ...
Our code is now built on the new standard.
src/App.js
import React from 'react';
const App = ({ title }) => {
// JSX in action!
return <h1>{title}</h1>;
};
export default App;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(
<App title="Final Grounded Setup Complete!" />
);
});
Final Thoughts: The End of the Magic What you have now is the entire build pipeline for a modern single-page application.
The “magic” of frameworks like Vite and Next.js is simply that they pre-configure these 10 steps for you in a highly optimized way. By building it yourself, you now understand exactly what is happening under the hood. It’s good to have a predictable development environment.
]]>So here is the dump from my browser bookmarks in some order and some brief notes
Latency in Asynchronous Python - Async is still single threaded and can block for long time
Slide 1 - dean-keynote-ladis2009.pdf - Designs, Lessons and Advice from Building Large Distributed Systems by Jeff Dean, Google Fellow
Notes on Distributed Systems for Young Bloods – Something Similar
Beware of OpenMP’s thread pool | Nan Xiao’s Blog - Issues with onnxruntime. lots of headaches
Python Microservices With gRPC – Real Python - Real Python tutorial are comprehensive compare to other tutorial on web
Open Source Mobile Communications
Instrumenting CPython with DTrace and SystemTap — Python 3.9.5 documentation
AHIMA Home - The American Health Information Management Association
The Shape of Code » Network protocols also evolve into a tangle of dependencies - Create lots of complicate protocol to create a moat. The MS way
Async IO in Python: A Complete Walkthrough – Real Python
How the heck does async/await work in Python 3.5?
43 Folders Series: Inbox Zero | 43 Folders - How to keep inbox clean
Main Page - Competitive Programming Algorithms
Litestream - Streaming SQLite Replication - from fly.io
mjg59 | Producing a trustworthy x86-based Linux appliance
Yocto Project – It’s not an embedded Linux distribution – it creates a custom one for you
Snyk | Developer security | Develop fast. Stay secure.
PEP 621 – Storing project metadata in pyproject.toml | Python.org
Always be quitting - jmmv.dev - How to not stuck in your job. learn to delegate
Best VPN Service for Secure Networks - Tailscale - One of best company with wireguard networkign
compare - Gluu vs keycloack vs wso2 identity management - Stack Overflow
Build your digital presence with Paper.li - Paper.li is your personal marketing assistant
Multi-Region Kubernetes - EKS and Terraform 0.12 | cloudlad.io
Kubernetes - Gluu Server 4.2 Docs
Pluralith - Proper Terraform State Visualization
Ory - Open Source Identity Solutions For Everyone - ory.sh
A comprehensive guide to managing secrets in your Terraform code | by Yevgeniy Brikman | Gruntwork
Terragrunt articles are comprehensive How to deploy a production-grade Kubernetes cluster on AWS
How to deploy a production-grade Kubernetes cluster on AWS
How to deploy a production-grade VPC on AWS
How to configure a production-grade CI-CD workflow for infrastructure code
Terraform Pull Request Automation | Atlantis
Operating Systems: Three Easy Pieces - Duplicate?
Production Readiness Checklist
Load testing for engineering teams | k6
Terragrunt: how to keep your Terraform code DRY and maintainable | by Yevgeniy Brikman | Gruntwork
The Toxoplasma Of Rage | Slate Star Codex
Building a Second Brain: An Overview - Forte Labs
Personal Leverage: How to Truly 10x Your Productivity - Almanack - Every
How NAT traversal works · Tailscale
Hashnode: Everything you need to start blogging as a developer! - Will check this out
Implementing Stripe-like Idempotency Keys in Postgres — brandur.org
SideQuest - Short Term Tech Jobs
Building a data team at a mid-stage startup: a short story · Erik Bernhardsson
Goomics - Comics about life at Google
Aether - Peer-to-peer ephemeral public communities
[[index]] - This Agora is a wiki like experimental social network and distributed knowledge graph
Knowledge Futures Group - Knowledge Futures Group is a 501c3 nonprofit building open source technology and collaborating with communities of practice to design and build the public digital infrastructure needed for effective, equitable, and sustainable knowledge futures.
The unreasonable effectiveness of just showing up everyday | Typesense - Showing up is half of the work
The VPN IPv6 IoT Router Box (VIIRB) - ungleich.ch
Home | Johnny•Decimal - Digital organisation
Taking a Stand in the War on General-Purpose Computing - “We must control the client”
Michael Feathers - 10 Papers Every Developer Should Read
How Bell’s Theorem Proved ‘Spooky Action at a Distance’ Is Real | Quanta Magazine
Hobson’s Browser - Infrequently Noted - In apps browser bad
yartikhiy - IPv6 for IPv4 Experts (draft)
Equanimity - Wikipedia - Equanimity (Latin: æquanimitas, having an even mind; aequus even; animus mind/soul) is a state of psychological stability and composure which is undisturbed by experience of or exposure to emotions, pain, or other phenomena that may cause others to lose the balance of their mind. The virtue and value of equanimity is extolled and advocated by a number of major religions and ancient philosophies.
Hundreds of Ways to Get S#!+ Done—and We Still Don’t | WIRED - stop reading productivity how-do. pick a system and stick with it
]]>So here is the dump from my browser bookmarks in some order and some brief notes
Bewear! Python Typosquatting Is About More Than Typos – In-Q-Tel - supply chain attacks
Fibers, Oh My! - python, fiber and green threads etc
This page is a truly naked, brutalist html quine. - HTML quine
Cloud design patterns - Azure Architecture Center | Microsoft Docs
Why Deep Learning Works Even Though It Shouldn’t – Ryan Moulton’s Articles - Don’t understand Second Descent Regime
Remove Personal Info from Google - DeleteMe
Startup Financial Modeling, Part 1: What is a Financial Model? — MATH Venture Partners
Writing Maketh a Man - Sasank’s Blog - Start writing regularly
Introduction to Control Groups · Linux Inside
Grommet - PWA and native app desiner
Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs - I like it
Dendron - Dendron - Like obsidian/roam research
The PARA Method: A Universal System for Organizing Digital Information - Forte Labs
Designing an Authentication System: a Dialogue in Four Scenes - Kerberos design
What Color is Your Function? – journal.stuffwithstuff.com - Problem when stacking async functionality is tagged on top of a mature language. I feel JS got lucky in this regard as there was no io as such and no OS access earlier and event base system was perfect for UI apps
Beating the Averages - Learn lisp to expand your mind
RePEc: Research Papers in Economics - Economics is social science
Home - INSPIRE - Discover High-Energy Physics Content
personal-server/README.md at master · erebe/personal-server · GitHub - - personal server with DNS and email management
The Difficulties of Tracking Running Processes on Linux :: Tech Notes by Natan Yellin - PID gets recycled
A Linux sysadmin’s introduction to cgroups | Enable Sysadmin
MicroConf - The Most Trusted Community for Non-Venture Track SaaS Founders
OSv - the operating system designed for the cloud
Administrator Portals | Microsoft Portals - list of MS portals
High performance individuals and teams | Pablasso - avoid bad engineer
Turning the database inside-out with Apache Samza - Confluent - Also check out dbt
Valuation Online Class - Aswath Damodaran class
Jonathan Bergknoff: Terraform Pain Points
Can Vertical Farming Disrupt the Agriculture Industry? - Eater - Probably no
What’s the Best Way to Learn Piano in 2021? (In-Depth Guide)
Glamorous Toolkit - Pitch: The Moldable Development Environment. Glamorous Toolkit is a multi-language notebook. A fancy code editor. A software analysis platform. A visualization engine. A knowledge management system. All programmable. Free and open-source.
Making Sense of The Audio Stack On Unix
Common Nginx misconfigurations that leave your web server open to attack | Detectify Blog
Modern Microprocessors - A 90-Minute Guide!
Products - Shibboleth Consortium
Focalboard: Open source alternative to Trello, Asana, and Notion
Block BSNL ADs using IPSec - Davidsekar.com
Arms Control Wonk – an arms control blog network
Category Theory Illustrated - Orders
Predictive Coding has been Unified with Backpropagation - LessWrong - artificial intelligence and neuroscience
Monica: Open-source personal CRM | Hacker News - personal CRM, didn’t work out
EteSync - Secure Data Sync - Secure, end-to-end encrypted, and privacy respecting sync for your contacts, calendars, tasks and notes.
The Ponzi Career - The Ponzi Career. The future of work is a pyramid scheme, where every person sells his favorite person to the next person.
Welcome to BitClout - It just keep giving
Darknet Diaries – True stories from the dark side of the Internet. - a podcast
The sad state of personal data and infrastructure | beepb00p - This is a sad state of tech
18.S191 Introduction to Computational Thinking
Rattleback - Wikipedia - rotate on its axis in a preferred direction. If spun in the opposite direction, it becomes unstable, “rattles” to a stop and reverses its spin to the preferred direction.
Additional field while serializing django rest framework - Stack Overflow
CalyxOS - privacy oriented android fork
Starting a new digital identity — k3tan - Read like a movie script
Request for comments regarding topics to be discussed at Dark Patterns workshop | Hacker News
Simon Willison: TIL - short writings I can replicate
I like Unicorn because it’s Unix - best unicorn internal tutorial
HIPAA-Protected Malware? Exploiting DICOM Flaw to Embed Malware in CT/MRI Imagery – Cylera Labs
DVTk · DVTk, a must have for anybody working with DICOM!
Learn Anything - High promising, not good execution
Stratechery by Ben Thompson – On the business, strategy, and impact of technology.
Guide to Concurrency in Python with Asyncio ⋆ Mark McDonnell
To be continued…
]]>So here is the dump from my browser bookmarks in some order and some brief notes
True Colour (16 million colours) support in various terminal applications and terminals
alexmojaki/snoop: A powerful set of Python debugging tools, based on PySnooper - promising stuff, never tried it
python - How to construct a timedelta object from a simple string - Stack Overflow
Use Tox With Anaconda - deparkes - Good tool for library devs, for application Bazel would be fine
Continuous deployment of a Sphinx website using Jenkins and Docker | Jared Dillard
Documenting Your Project Using Sphinx — an_example_pypi_project v0.0.5 documentation
DICOM NetworkingIntroduction - DCMTK - OFFIS DCMTK and DICOM Projects
Top 3 Tools For Boosting Your Productivity - DEV Community 👩💻👨💻 Notion, spark mail and Fantastical 2 calandar app
What Are The Highest Paying Software Developer Jobs & How Can I Land One? - DEV Community 👩💻👨💻 - Become remarkable in your area
Introducing the Rust crash course - Doesn’t seem active anymore
Blocking Signals (The GNU C Library) - I get to know it while making a fork server like unicorn
Exercism - Did some rust track. Should restart this
kubectl for Docker Users - Kubernetes
ahmetb/kubectx: Switch faster between clusters and namespaces in kubectl - Never tried it
Argo: Workflow Engine for Kubernetes - ITNEXT - CRDs was all the hype then. Everyone got CRDs
Docker for Mac with Kubernetes — Enable K8S Dashboard
Docker for Mac with Kubernetes — Ingress Controller with Traefik
Kubernetes Ingress 101: NodePort, Load Balancers, and Ingress Controllers
VIM Adventures - gamified vim learning
BrettTerpstra.com - Not sure why I bookmarked it
List of eponymous laws - Wikipedia - Learn word ‘eponymous’
Control CPU Management Policies on the Node - Kubernetes - to move from docker-compose to k8s
Compiler Explorer - internet is beautiful
The Missing Introduction To Containerization - Faun - Medium - container history
showoff - interacive ppts
Operating Systems: Three Easy Pieces - book on OS. virtualization, concurrency, and persistence
mtime comparison considered harmful - apenwarr - mtime nuances
Rete.js - visual programming (maybe like sketch, haven’t tried)
(11) The more general uncertainty principle, beyond quantum - YouTube - Duality of partical and waves is more general then just physics
Server-Side Rendering is a Thiel Truth
Analyzing The Simplest C++ Program · Ray - ELF stuff
Tom’s Data Onion - A Programming Puzzle In A Text File
OpenSource Single Sign-On(SSO) - FAUN - Medium - Keycloak stuff
Setting up OpenLDAP server with OpenSSH-LPK on Ubuntu 14.04 — Shichao’s Blog
Building Subversion - CoRecursive Podcast - some interview, not going to read
Ansible 101 by Jeff Geerling - YouTube streaming series | Jeff Geerling - Ansible stuff. Official docs are better
Cooperpress: Email Newsletters for Developers - all weakly newsletters
Latacora - The PGP Problem - PGP UX sucks
Trying to get a freeipa CSR signed by LetsEncrypt - Help - Let’s Encrypt Community Support
How to delegate a sub-domain to other DNS servers - Simple DNS Plus
How To Set Up Centralized Linux Authentication with FreeIPA on CentOS 7 | DigitalOcean
Well, well, RHEL - A look at the RHEL 8 Beta - Fierce Software
Issue #2648: ipa will not install on amazon ec2 - freeipa - Pagure.io
Setting up RHEL IdM with integrated DNS on AWS – Chamath’s Blog
Why you should always scan UDP ports (part 2/2) | by Security Shenanigans | Aug, 2020 | Medium
United States v. Paramount Pictures, Inc. - Wikipedia - Hollywood antitrust case
tilde.town - shared linux computer
Books for Quants. Book list for mathematical finance… | by Luke Posey | Towards Data Science
Nate the Snake - long story, decent return
Slurm Workload Manager - Overview - cluster management and job scheduling system
The Bastard Operator From Hell Complete - Stories and Rants
🚨🚨 That’s a lot of YAML 🚨🚨 - Satire like mocking of yaml
Lisa-Goldberg-reviews-The-Book-of-Why.pdf - Dead link
Multicloud Networking - An Overview - YouTube -
XenServer/VirtualBox - OpenStack
So you want to live-reload Rust - fasterthanli.me
I don’t want solution. I want to be mad
To be continued…
]]>So here is the dump from my browser bookmarks in some order and some brief notes
C++ Native Addon independent of Node.js version using Napi/node-addon-api and Cmake | by Atiq Gauri | Medium - Some tutorials
Electron App with C++ backend as Native Addon (Napi) | by Atiq Gauri | Medium - More tutorials
How does local Kubernetes development work? | Unikube Blog | UNIKUBE - tried k3d but k3s is better
nodejs-guidelines/windows-environment.md at master · microsoft/nodejs-guidelines - node.js resources
Too Much Code for Bazel Monorepo? Try Going Virtual - bazel resources
Build Systems à la Carte - build-systems.pdf - classifications of build systems
JavaScript Omni-Packages. How to package JavaScript libraries for… | by Joe Honton | Better Programming - JS resource
ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog - Best explaination of how JS modules works so far. It show how much thought goes into evolving a language and also keep existing codebase maintained
Modules in JavaScript – CommonJS and ESmodules Explained
SRE principles and flashcards to design NALSD | Google Cloud Blog - Flashcards for SRE stuff
Practical Bazel: Depending on a System-Provided C/C++ Library | Steven Engelhardt -
What is the right way to refer bazel data files in python? - Stack Overflow - Runfiles and stuff
Handbook | GitLab - Every company should have handbook like that
What Should You Do with Your Life? Directions and Advice - Alexey Guzey
Bazel build system: Frontend Styling – The Publishing Project
Persistent Layout Patterns in Next.js – Adam Wathan
Choose the Right Python Concurrency API
Little Ways The World Works · Collaborative Fund
Kubernetes - I enjoy gifs
HOME | Fee-Only India - Claim to be most ethical
Hacking Lifecycle Emails for Software Companies
Salary Negotiation: Make More Money, Be More Valued | Kalzumeus Software - Best guide on salary negotiation so far
Don’t scar on the first cut - Signal vs. Noise (by 37signals) - Policies are codified overreactions to unlikely-to-happen-again situations. A collective punishment for the wrong-doings of a one-off. And unless you want to treat the people in your environment as five year-olds, “Because The Policy Said So” is not a valid answer.
Mycelial - The Best Platform for Synchronized Apps | Mycelial - sync sqlite peer-to-peer
Slofile - Public Slack groups to join - list of public slack channel to join
To be continued…
]]>So here is the dump from my browser bookmarks in some order and some brief notes
How programs get run [LWN.net] - Explain how exec works in linux. Detailed explaination in book The Linux Programming Interface
Absolute scale corrupts absolutely · Tailscale - Large scale invites bigger currptions :shrugs:
When AWS, Azure, or GCP Becomes the Competition | Greg Kogan - Everyone startup should fear “trillion pound” gorillas and prepare accordingly
Goldman asks: ‘Is curing patients a sustainable business model?’ - The potential to deliver ‘one shot cures’ is one of the most attractive aspects of gene therapy but it could represent a challenge for genome medicine developers looking for sustained cash flow.
Transport noise linked to increased risk of dementia, study finds | Dementia | The Guardian - I wanted to follow up on this study but I haven’t found anything after this
What Every Programmer Needs To Know About Game Networking | Gaffer On Games - Some history and brief on multiplayer game networking
No, We Won’t Have a Video Call for That! - xahteiwi.eu - Async communication, “ChatOps”, avoid/less (sync) meetings, write. things. down
Facebook is Other People - by Kevin Munger - Never Met a Science
How Google destroyed our startup by terminating our Google Play Developer Account | by 6Ace Games | Oct, 2021 | Medium - Big Tech horrer story
FQXi Community - Counterfactual quantum computation is a method of inferring the result of a computation without actually running a quantum computer otherwise capable of actively performing that computation. I-know-some-of-these-words.gif
Mathematics and Computation | Seemingly impossible functional programs - some functional programming wizardry
Analysis: Playing, Fast and Slow - YouTube flow, thinking fast and slow
Writing is Networking for Introverts | by Byrne Hobart | Medium - Introduced new concept: “microfamous”
soft question - Examples of great mathematical writing - MathOverflow - Praise for John Milnor
How to run a small social network site for your friends - One of my bucket list. Connect with me if you want to help
Your attention didn’t collapse. It was stolen | Psychology | The Guardian - “Attention economy”, “Eyeballs” whatever. In the age of meterial abundance and robotic revolution, only human attention will be scarce. Social media and many other facets of modern life are destroying our ability to concentrate. We need to reclaim our minds while we still can
The Thinner Book: Atomic Habits by James Clear - Self help book on how to build good habits
Home | ABHA - Digital identification for health data in India
Open-source Radiology software: DICOM & PACS
ServaRICA – Customizable Infrastructure provider - Some cheap compute and storage
Michael Freeden - Wikipedia - I forgot why I bookmarked him
explain.dalibo.com - Visualizing and understanding PostgreSQL EXPLAIN plans made easy
Hoppy - I love these wiregaurd networks, I’ll buy some when I build homelab I guess, hit me up if you are interested
Ishikawa Diagram | Untools - Problem solving using diagrams
Tools for better thinking | Untools - See above
The Best Side Projects Apps and Products of 2022 | Product Hunt - Inspirations for side projects
Nx: Smart, Fast and Extensible Build System - seemed restricted to javascript. I chose bazel.build over this and happy so far
Professional Development is a Choice | by Alex Chesser | Medium - Professional development must be deliberate and it must be what YOU want for YOUR career
A better Kubernetes, from the ground up · blog.dave.tf - Some idea to improve k8s
Why and how I got my own ASN! - I want to get my own ASN sometime and run it, BGP and all that. Don’t want to spend too much though
Do Things, Tell People. - Best advice so far
Testing Distributed Systems | Curated list of resources on testing distributed systems Big list of links on distributed systems
nato internet service - Got to know this from chown.me
The simple system I’m using to stay in touch with hundreds of people – Jakob Greenfeld – Experiments in Entrepreneurship and Learning - Airtable System to stay in touch with hundreds of people
Storyset | Customize, animate and download illustration for free - Free illustrations for your side projects
Illustrations | unDraw - Free illustrations for your side projects
Notes apps are where ideas go to die. And that’s good. · reproof - And bookmark bar is where TO-READ goes to die
The Death of Process. To write great policies, arm those in… | by Marianne Bellotti | Feb, 2022 | Medium - Every policy or process doc I write now has a section called “Reasons to Revisit.” It is essentially a reverse success criteria. Rather than a short list of things I would expect to see if the policy was successful — which I do but in a different section — I write about things I would expect to see if the policy needed substantial revisions or to just be killed off altogether. I think laws should have this too
The Painfully Shy Developer’s Guide to Networking for a Better Job (Without Being Creepy) - Networking is painful, can introverts get a pronoun for this?
Elestio: Fully Managed Open source - Open source software packaged and ready to be deployed. Hope they are successful
Ask HN: Books you should read when you transform from SWE into SWE-Management | Hacker News
There’s a Hole In the Bucket: Traditional Children’s Song Lyrics and Sound Clip - Not sure why I bookmarked it :shrug: (I remember now, it references yak shaving)
yak shaving : Java Glossary - Something seemingly simple grows without bounds
How can we know if paid search advertising works?
40+ of the best open-source tools to build your startup, from project management to infrastructure - Another list of hyperlinks
Adoptoposs · Keep open source software maintained Looked many time there but didn’t found anything intersting
inner monologue (AI) Directory Listing · Gwern.net List of links on one-shot, few-shot learning
Identity Theft, Credit Reports, and You | Kalzumeus Software - How to fix identity theft and credit reports. US specific but general learning are good. Hope I don’t have to use this in my lifetime though
Quines (self-replicating programs) Quines what and how tutorial
signed char lotte | Something Something Programming - Art x Programming
How to Freaking Find Great Developers By Having Them Read Code | Freaking Rectangle - New way to hire people. Let me know if it worked for you
Richard Stallman Speaks on the State of Free Software, and Answers Questions - Slashdot RMS interview
We Tried Baseball and It Didn’t Work - Why agile doesn’t work, humorus
To be continued…
]]>Node JS started and used CommonJS (previously called ServerJS) module system. It loads modules sync. It was fine when reading from file is predictable and long running process on server. Browser cannot load modules and dependencies sync as it would block the UI. So ES Modules were born. they work with both Node (v13.2.0) and browser (script type=”module” attribute)
Let’s create a CommonJS module for calculating fibonanchi (why not?) and use it in an application.
// fib.js
function fib(n) {
if (n == 0 || n == 1) return n;
return fib(n - 1) + fib(n - 2);
}
module.exports = { fib }
// Using Shorthand property names
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
And let’s use it our app
// app.js
const { fib } = require('./fib.js');
// ".js" is unnecessory using destructuring assignment
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
console.log(fib(10));
$ node app.js
55
Here we notice use of module.exports Indicating CommmonJS module
let’s write same with ES modules, we only need to change modules.export to expoert ... and require to import statements.
// fib.mjs
function fib(n) {
if (n == 0 || n == 1) return n;
return fib(n - 1) + fib(n - 2);
}
export { fib }
// Shorthand property names
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
And let’s use it in our app
// app.mjs
import { fib } from './fib.mjs';
console.log(fib(10));
$ node app.mjs
55
See how we are using extension .mjs. Node give SyntaxError if we try to use ES Modules marking them as such.
(node:26455) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
...
SyntaxError: Cannot use import statement outside a module
So we can either use .mjs extension or we can set type as module in package.json file.
There we have it. CommonJS and ES modules. ES Modules are future but there is lots of existing code written and CommonJS will be here for long time.
]]>[Intro]
Is this the feature live? Is this just test-ci?
Conflict in a git merge, no reviews or code quality
Copy your keys, ssh to the cloud and see
I’m just a junior dev, I need no stablity
Because I version bump, tag repo, google Stack, Over-flow
Any way the build goes doesn’t really matter to me, to me
[Verse 1]
Mama, just lost a branch
Did rebase against its HEAD, pressed the enter, now it’s dead
Mama, work had just begun
But now I’ve gone and thrown it all away
Mama, ooh, didn’t mean to break on Fri
If the patch not back again this time tomorrow
Carry on, carry on as if nothing really matters
[Verse 2]
Too late, release time has come
Sends changes down pipeline, asserts failing arbit time
Git push, everybody, we’ve got to go
Gotta deploy it all to prod and fix post hoc
Mama, ooh, (Any way the build goes)
I messed up API
I sometimes wish I’d written any tests at all
[Verse 3]
I see a client mail shit hit the fan
Hotfix, hotfix, will you rollback django?
Deployment and live-env, very, very fright’ning me
(Galileo) Galileo, (Galileo) Galileo, Galileo Figaro magnifico
But I’m just a junior dev, quality assurance bugs me
He’s just a junior dev from the js family
Save his deadline mark legacy-compatibility
Version bump, tag repo, will you let it go?
Bismillah! No, we will not let it go
(Let it go!) Bismillah! We will not let it go
(Let it go!) Bismillah! We will not let it go
(Let it go) Will not let it go
(Let it go) Will not let it go
(Let it go) Ah
No, no, no, no, no, no, no
(Oh c’mon qa, c’mon qa) c’mon qa, let it go
Github has a polyfill, ray of light for me, for me, for me!
[Verse 4]
So you think you can reverse proxy and rewrite URIs?
So you think you can copy-paste and leave me to DRY?
Oh, baby, can’t do this to me, baby!
Just gotta pep8, just gotta pep-right-8 of the PR
[Outro]
Logging rarely matters, println and see
Logging rarely matters
Logging rarely matters to me
Any way the build goes
Official Documentation is good place to start. This blog is mostly note for my future self.
Note that making copies of theme files will prevent you from receiving any theme updates.
First let’s find out what theme we are using. By default Jekyll uses minima theme. This information is in _config.yml file.
Now open the directory where the gem is
$ open $(bundle info --path minima)
Copy below folders to root of the your blog’s repository
_inclues
_layouts
_sass
assets
We are going to remove the theme’s gem as dependency. But before that put dependency of the theme in Gemfile or our theme will be broken. (these can be found in .gemspec file of the theme)
# file: Gemfile
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
gem "jekyll-seo-tag", "~> 2.7"
end
Also we need to do add them in _config.yml too
# file: _config.yml
plugins:
- jekyll-feed
- jekyll-seo-tag
Don’t forget to run bundle update.
Finally remove reference to theme gem
Gemfile and remove gem "minima", "~> 2.5"._config.yml and remove theme: minima.And we are done.
]]>Jekyll is a static site generator. It takes the content written in markdown format with some templates and outputs a fully static rendered site.
The static site can be hosted with any web host but we are going to use service Github Pages. Apart from hosting the static site, it also provides many goodies like
So let’s get started
First we need to setup our development enviornment. Jekyll is written in Ruby. Let’s go ahead and install ruby with rbenv. I have written instruction for macOS but these can be adopted for Linux as well. (I’ll probably update this post with linux instructions some time later but don’t hold your breath)
$ brew update
$ brew install rbenv rbenv-build
Follow the instructions to install rbenv in your ~/.bash_profile. Open a new terminal window for changes to take effect.
# list latest stable ruby versions
$ rbenv install -l
2.5.8
2.6.6
2.7.2
jruby-9.2.13.0
maglev-1.0.0
mruby-2.1.2
rbx-5.0
truffleruby-20.2.0
truffleruby+graalvm-20.2.0
Only latest stable releases for each Ruby implementation are shown.
Use 'rbenv install --list-all' to show all local versions.
We are going to use version 2.7.2.
You may face openssl issue while installing or using ruby. Add
export RUBY_CONFIGURE_OPTS="--with-openssl-dir=$(brew --prefix openssl@1.1)
in your ~/.bash_profile so ruby is compiled with correct openssl version at install time. After that you can install Ruby with rbenv
# It will take some time to download and compile
$ rbenv install 2.7.2
$ rbenv global 2.7.2 # select 2.7.2
$ gem install jekyll
$ jekyll new arunkant.github.io
$ cd arunkant.github.io
Here arunkant is my Github username.
$ bundle exec jekyll serve --livereload
Configuration file: /Users/arunkant/code/arunkant.github.io/_config.yml
Source: /Users/arunkant/code/arunkant.github.io
Destination: /Users/arunkant/code/arunkant.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Jekyll Feed: Generating feed for posts
done in 0.396 seconds.
Auto-regeneration: enabled for '/Users/arunkant/code/arunkant.github.io'
LiveReload address: http://127.0.0.1:35729
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Open http://127.0.0.1:4000/ in the browser and you can see a newly created site.
$ git init
$ git add .
$ git commit -m 'Initial commit'
Create a Github account. It is free.
Create a repository in Github with same name (arunkant.github.io)
$ git remote add origin git@github.com:arunkant/arunkant.github.io.git
$ git push origin master
After some time you should be able to see it live at http://username.github.io
Open _config.yml in the root of the project and edit as needed. Commit and push again and after some time it will be live.
Create a post in _posts directory (see existing files for help) and push to Github. It will build it and deploy it. I already had some very old posts which I just copied from old repository.
There are a few things you can try
I’ll probably write a follow up when I customize the default theme.
]]>