I built a static site generator...that corrupts your content.** Introducing **The Void SSG** — a full-stack blog engine with a Lovecraftian twist. You create sites, write markdown entries, and publish them. But here's the catch: your content gradually degrades with eldritch symbols the more you use it. Mention Cthulhu in a blog post? The system detects it and applies themed corruption. Different readers see different content based on their "sanity threshold." Navigation links get obfuscated or vanish entirely. The build process outputs ANSI-formatted narratives describing what happened to your content — like terminal horror fiction. It's a CMS where the content fights back. A cursed journal that rewrites itself. **The tech stack:** 🔹 Java 21 + Spring Boot 3.2 backend with virtual threads for async builds 🔹 React 19 + TypeScript + Vite frontend 🔹 Three.js WebGL fluid simulation for the UI background 🔹 Spring Shell CLI for terminal-based "rituals" 🔹 MySQL 8 + Flyway for persistence 🔹 Configurable entropy modes: Daily, User-Based, Cryptographic **Key features:** → Regex-based detection for 7 Lovecraftian entities with unique side effects → Viewer-aware navigation that deterministically hides or renames links per visitor → Narrative build logs styled as terminal stories → Full REST API + interactive CLI + React UI This was a fun exercise in combining software engineering with creative writing and worldbuilding. Sometimes the best way to learn a stack is to build something weird with it. Check it out on GitHub 👇 https://lnkd.in/gn-nG5rC #Java #SpringBoot #React #TypeScript #WebDev #SideProject #CreativeCoding #Lovecraft #OpenSource
Java SSG with Lovecraftian Twist Corrupts Content
More Relevant Posts
-
𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗖𝗼𝗽𝘆 𝘃𝘀 𝗗𝗲𝗲𝗽 𝗖𝗼𝗽𝘆 📦 If you’ve ever updated state and something weird happened… this might be why 👇 🔹 Shallow Copy → copies only the first level 🔹 Nested objects are still referenced (same memory) Example: ➡️ Using { ...obj } or Object.assign() 💡 Problem: Change a nested value… and you might accidentally mutate the original object 😬 🔹 Deep Copy → copies everything (all levels) 🔹 No shared references 🔹 Safe to modify without side effects Example: ➡️ structuredClone(obj) ➡️ or libraries like lodash ⚠️ The common pitfall: You think you made a copy: ➡️ { ...user } But inside: ➡️ user.address.city is STILL linked So when you update it: ❌ You mutate the original state ❌ React may not re-render correctly ❌ Bugs appear out of nowhere 🚀 Why this matters (especially in React): State should be immutable ➡️ Always create safe copies ➡️ Avoid hidden mutations ➡️ Keep updates predictable 💡 Rule of thumb: 🔹 Flat objects? → shallow copy is fine 🔹 Nested data? → consider deep copy Understanding this difference = fewer bugs + cleaner state management And yes… almost every developer gets burned by this at least once 😄 Sources: - JavaScript Mastery - w3schools.com Follow 👨💻 Enea Zani for more #javascript #reactjs #webdevelopment #frontend #programming #coding #developers #learnjavascript #softwareengineering #100DaysOfCode
To view or add a comment, sign in
-
-
Most JavaScript developers know V8 compiles their code. Far fewer know that when their code calls Math.random(), V8 doesn't generate the number in its main interpreter. 🤔 It hands the work to a dedicated module with its own state, its own algorithm, and a buffer of 64 pre-computed values invisible to JavaScript code. The same architectural pattern V8 uses for regular expressions, where Irregexp takes over the moment the runtime sees a /pattern/. The algorithm is xorshift128+, designed by Sebastiano Vigna in 2014. Three shifts, three XORs, one addition, on a 128-bit state. Fast enough to run at ~90 nanoseconds per call. Statistically excellent: passes BigCrush, the gold-standard test suite. And cryptographically broken by design: an attacker who observes three Math.random() outputs can recover the full internal state with a Z3 solver in under a second, then predict every future output. This is not a theoretical concern. CVE-2025-7783 (CVSS 9.4 critical, July 2025) hit form-data, a transitive dependency in millions of weekly npm downloads, because it generated multipart boundaries with Math.random(). Three observations, one Z3 query, one HTTP Parameter Pollution attack. The bug had been there for years. The deeper insight: Math.random() is not a random number generator. It is a deterministic state machine that produces the illusion of randomness. Every major engine (V8, JavaScriptCore, SpiderMonkey) converged on the same algorithm in 2015-2016. Knowing what's behind the function is the difference between code that happens to work and code we understand. The full deep dive, with Z3 code, hex traces, IEEE 754 bit-layout, tinybench numbers, and the TC39 proposals on the way: 👉 https://lnkd.in/eFYXuswp Four links worth reading alongside it: → V8's own write-up on the xorshift128+ migration: https://lnkd.in/eD4uDQJ4 → Vigna's xorshift+ paper (the algorithm itself): https://lnkd.in/eSBFszd6 → The CVE-2025-7783 advisory: https://lnkd.in/eGF5wBUW → The state-recovery PoC by PwnFunction: https://lnkd.in/eEAr3CFX https://lnkd.in/eFYXuswp Happy reading and discovering! 😊🚀📚 #javascript #nodejs #typescript #webdev #softwareengineering #security
To view or add a comment, sign in
-
𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗖𝗼𝗱𝗲: 𝗛𝗼𝘄 𝗩𝟴 𝗖𝗼𝗺𝗽𝗶𝗹𝗲𝘀 𝗬𝗼𝘂𝗿 𝗖𝗼𝗱𝗲 You spend your days working with JavaScript. But have you ever wondered what happens behind the scenes? When you run your code, V8 - the JavaScript engine - takes over. It's not just a compiler, it's a performance expert. Here's how it works: - V8 reads your code as a stream of characters - It builds a blueprint, called the Abstract Syntax Tree (AST) - V8 is lazy, so it only builds the full AST when needed - It uses an interpreter, called Ignition, to turn the AST into bytecode - Bytecode is like stage directions for your code When your code runs, V8 watches and takes notes. It looks for hot paths - loops that run many times. When it finds them, it uses Sparkplug to compile the bytecode to machine code. If a function is super hot, V8 uses Maglev to create a baseline optimized version. For critical code, V8 uses TurboFan, an optimizing compiler. TurboFan makes a bet: it assumes your code will keep doing what it's doing. If you keep passing it the same types, your code runs fast. But if you change the type, V8 falls back to the slower bytecode. To keep V8 happy, write consistent code. Use consistent types, small functions, and avoid deleting properties. JavaScript is not slow - your misuse of it is. V8 is a masterpiece of engineering. It's a Just-In-Time compiler that does adaptive optimization. When you write code, you're feeding an algorithm. Understand how it thinks, and you'll stop fighting the machine. Source: https://lnkd.in/g4Fkem6a
To view or add a comment, sign in
-
How JavaScript Memory Model Works: Stack vs Heap Allocation ? (1) Stack stores primitives and references – Fast, LIFO-structured memory for execution contexts, local variables, and primitive values, but limited in size. (2) Heap stores complex data – Larger, slower, unordered memory for objects, arrays, functions, and closures. (3) References connect stack to heap – Variables on the stack hold memory addresses (pointers) that reference data stored in the heap. (4) Primitives live directly on the stack – Values like numbers and strings (when small) are stored inline, while strings and complex types use heap references. (5) Functions are heap-stored with scope – Function bodies reside in the heap, while references and scope chains remain on the stack during execution. Test your JavaScript fundamentals with focused on scope, hoisting, closures, and asynchronous behavior. 💬 Share your answer or reasoning in the comments. #JavaScript #InterviewPreparation #SoftwareEngineering #WebDevelopment #DevelopersOfLinkedIn #frontend #backend #coding #learning
To view or add a comment, sign in
-
-
"We did a deep dive into TypeScript advanced generics in 30 different projects. The results? A 40% reduction in runtime errors." Diving headfirst into a complex codebase, I found myself puzzled over a brittle system that suffered from frequent failures and cumbersome maintenance. The culprit was a lack of strong type constraints, hidden inside layers of JavaScript code that attempted to mimic what TypeScript offers natively. The challenge was clear: harness the power of TypeScript's advanced generics and inference to refactor this tangled web. My first task was to unravel a central piece of the system dealing with API data structures. This involved migrating from basic `any` types to a more robust setup using TypeScript's incredible type-level programming capabilities. ```typescript type ApiResponse<T> = { data: T; error?: string; }; type User = { name: string; age: number }; function fetchUser(id: string): ApiResponse<User> { // Implementation } // Correct usage leads to compile-time type checks instead of runtime surprises const userResponse = fetchUser("123"); ``` The initial refactor was daunting, but as I delved deeper, vibe coding with TypeScript became intuitive. The compiler caught more potential issues at design time, not just in this module but throughout the entire application as types propagated. The lesson? Properly leveraging TypeScript's type-level programming can transform your maintenance nightmare into a well-oiled machine. It requires an upfront investment in learning and applying generics, but the returns in stability and developer confidence are unmatched. How have advanced generics and inference changed your approach to TypeScript projects? #WebDevelopment #TypeScript #Frontend #JavaScript
To view or add a comment, sign in
-
🚀 map() vs. forEach(): Do you know the difference? The Hook: One of the first things we learn in JavaScript is how to loop through arrays. But using the wrong method can lead to "hidden" bugs that are a nightmare to fix. 🛑 🔍 The Simple Difference: ✅ .map() is for Creating. Use it when you want to take an array and turn it into a new one (like doubling prices or changing names). It doesn't touch the original data. ✅ .forEach() is for Doing. Use it when you want to "do something" for each item, like printing a message in the console or saving data to a database. It doesn't give you anything back. 💡 Why should you care? 1. Clean Code: .map() is shorter and easier to read. 2. React Friendly: Modern frameworks love .map() because it creates new data instead of changing the old data (this is called Immutability). 3. Avoid Bugs: When you use .forEach() to build a new list, you have to create an empty array first and "push" items into it. It’s extra work and easy to mess up! ⚡ THE CHALLENGE (Test your knowledge! 🧠) Look at the image below. Most developers get this wrong because they forget how JavaScript handles "missing" returns. What do you think is the output? A) [4, 6] B) [undefined, 4, 6] C) [1, 4, 6] D) Error Write your answer in the comments! I’ll be replying to see who got it right. 👇 #JavaScript #JS #softwareEngineer #CodingTips #LearnToCode #Javascriptcommunity #Programming #CleanCode #CodingTips
To view or add a comment, sign in
-
-
🔍 Understanding JSON.parse() — What Works & What Breaks Instantly One of the most common pitfalls in JavaScript is assuming that anything looks like JSON can be parsed. But JSON.parse() is strict — and that’s where many bugs begin. ✅ Valid JSON (Parses Successfully): Objects: {"a":1} Arrays: [1,2,3] Strings: "hello" (must be in double quotes!) Numbers, booleans, and null ❌ Invalid JSON (Fails Immediately): Unquoted strings → hello Unquoted keys → {a:1} Single quotes → {'a':1} Empty string → "" Random text → INVALID 💡 Key Insight: JSON is not JavaScript. It’s a strict data format with clear rules: Keys must be in double quotes Strings must be in double quotes No trailing commas, no shortcuts 🚨 Why this matters: When working with APIs, local storage, or backend data, a small formatting mistake can break your entire app. 👉 Think of JSON.parse() as a strict gatekeeper — if your data doesn’t follow the exact rules, it won’t even let you in. #JavaScript #WebDevelopment #Frontend #Programming #CodingTips #JSON #Developers #reactjs #nodejs
To view or add a comment, sign in
-
-
Catching bugs at 2:00 PM but they don’t wake me up at 2:00 AM. 🛠️ Moving from #JavaScript to #TypeScript wasn’t just a syntax change; it was a shift in confidence. By defining our data structures upfront, we’ve effectively eliminated the "undefined is not a function" errors that used to haunt our production logs. The Difference: In JS, you pass an object and hope the property exists. In TS, the editor won't even let you save the file until you've handled the possibility of it being missing. Example: // JavaScript: The "Finger-Crossing" Method function getUsername(user) { return user.profile.name; // Runtime Error if profile is missing! } // TypeScript: The "Contract" Method interface User { profile?: { name: string }; } function getUsername(user: User) { return user.profile?.name ?? "Guest"; // Type-safe and explicit } The initial setup takes a few extra minutes, but the hours saved in debugging are immeasurable. Have you made the switch yet? Or are you still team Vanilla? 👇 #WebDevelopment #TypeScript #SoftwareEngineering #Coding
To view or add a comment, sign in
-
-
Most JavaScript loops look the same… until you use them with async. At the start, forEach and map felt almost identical (both iterate, just different intent side effects vs transformation). The real difference shows up when things break in production. forEach → fires async calls and forgets them map → returns promises you can actually control That small difference decides whether: - your DB queries finish properly - your errors are handled - your code silently fails The real lesson wasn’t about loops. It was about control over async execution. Here’s the mental model that finally clicked for me: - Need control & order → for...of, for, while - Need speed (parallel) → Promise.all with map - Large datasets / DB → batch operations (don’t overload your system) - Never use forEach with async ❌ Bonus: not all loop methods support early exit, worth exploring if you haven’t yet. Still learning to think less in terms of syntax… and more in terms of how execution actually flows. Curious: what’s a JS concept that surprised you later? Let’s share and go deeper. #javascript #nodejs #webdevelopment #backend #learning #chaicode Hitesh Choudhary
To view or add a comment, sign in
-
🚀 Mastering Performance: React Memoization & Modern Tooling I've been diving deep into web performance optimization, specifically focusing on how React handles re-renders and the impact of modern build tools like Vite. Here is a breakdown of my recent learnings: * Vite & the Move to OXC While older versions of Vite relied on Rollup for bundling, Vite @latest leverages the OXC compiler. Rollup: Excellent for combining multiple files into a single bundle. OXC: A high-performance compiler toolset that processes individual pieces of code much faster than traditional tools like Babel. * Memoization: Why It Matters Memoization is all about efficiency—remembering work already done so it doesn't have to be repeated. In React, this is crucial for preventing "falty reconciliation" (unnecessary re-renders). The Problem: Since functions are reference data types, their memory address changes on every render of a parent component. This causes child components (like an <About /> component) to re-render even if their data hasn't changed. The Solution: Using React.memo to cache the component. This saves RAM and processing power by ensuring a re-render only happens if the props actually change. - Key Techniques Learned: Component Memoization: Using React.memo() (via Higher Order Component or direct definition) to prevent unnecessary child updates. Function & Value Memoization: Utilizing the useCallback and useMemo hooks for granular control over memory and reference stability. Logic Check: React.memo performs a shallow comparison: $PrevProp === NewProp$ ? No Re-render : Re-render. Staying updated with these optimizations is key to building fast, scalable, and user-friendly applications! #ReactJS #WebDevelopment #FrontendEngineering #Vite #PerformanceOptimization #CodingTips #JavaScript #Memoization
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development