Forem: Adrian | Creator of BigDevSoon

10 CSS Features That Replace JavaScript

Adrian | Creator of BigDevSoon — Tue, 03 Mar 2026 16:00:00 +0000

CSS can now do things that used to need JavaScript libraries, build tools, or hundreds of lines of manual DOM code. Most of these features have shipped in the last 2-3 years — but a lot of developers haven't caught up yet.

I built 10 interactive demos to show what's possible. Every demo runs in a live code editor — edit the code and see results instantly. No signup, no install.

1. Scroll Progress Bar — No JavaScript

A reading progress bar that tracks scroll position using animation-timeline: scroll(). No event listeners, no requestAnimationFrame.

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #9F7AEA, #ED8936);
  transform-origin: left;
  animation: grow-bar linear;
  animation-timeline: scroll();
}

@keyframes grow-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

What it replaces: scroll event listener + requestAnimationFrame + manual percentage math.

Browser support: Chrome 115+ (Jul 2023), Edge 115+, Safari 18+ (Sep 2024). Firefox: behind flag.

Try it live

2. Scroll Reveal Animations — No JavaScript

Cards fade in and slide up as they enter the viewport using animation-timeline: view().

.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

What it replaces: AOS.js (14KB), GSAP ScrollTrigger, or a custom IntersectionObserver.

Browser support: Chrome 115+ (Jul 2023), Edge 115+, Safari 18+ (Sep 2024). Firefox: behind flag.

Try it live

3. Anchor-Positioned Popovers — No JavaScript

Position popovers relative to any trigger element using CSS anchor-name and anchor() functions.

.trigger { anchor-name: --btn; }

[popover] {
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 8px;
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
    transform: translateY(-8px);
  }
}

What it replaces: Popper.js (8KB), Floating UI, or manual getBoundingClientRect() — 200+ lines of JS.

Browser support: Chrome 125+ (May 2024), Edge 125+, Safari 18+ (Sep 2024). Firefox: behind flag.

Try it live

4. Form Validation Styles with :has()

The form border, button state, and labels react to input validity in real time — zero JavaScript.

/* Green border when all inputs valid */
.form:has(input:valid:not(:placeholder-shown)):not(:has(input:invalid:not(:placeholder-shown))) {
  border-color: #22c55e;
}

/* Dim submit when invalid */
.form:has(input:invalid:not(:placeholder-shown)) .submit {
  opacity: 0.5;
  pointer-events: none;
}

What it replaces: input event listeners on every field + classList toggling + validity checking.

Browser support: Chrome 105+ (Aug 2022), Safari 15.4+ (Mar 2022), Firefox 121+ (Dec 2023). Fully cross-browser.

Try it live

5. Container Queries — Component-Level Responsive

The same card switches layout based on its container width — not the viewport.

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 420px) {
  .card {
    grid-template-columns: 180px 1fr;
    grid-template-rows: none;
  }
}

What it replaces: ResizeObserver for component-level responsiveness. Media queries only check viewport width.

Browser support: Chrome 105+ (Aug 2022), Safari 16+ (Sep 2022), Firefox 110+ (Feb 2023). Fully cross-browser.

Try it live

6. Animated Accordion — No JavaScript

Smooth open/close on native <details> elements. The browser animates between height: 0 and height: auto.

body {
  interpolate-size: allow-keywords;
}

.content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
}

details[open] .content {
  height: auto;
  opacity: 1;
}

What it replaces: Measuring scrollHeight + requestAnimationFrame. Or Headless UI, Radix Accordion, React Collapse.

Browser support: Chrome 129+ (Sep 2024), Edge 129+. Safari and Firefox: not yet supported. Progressive enhancement — accordion still works, just without animation.

Try it live

7. Native CSS Nesting — Drop Your Preprocessor

The & selector works like Sass — child rules, pseudo-classes, modifiers, all nested in one block.

.card {
  background: #1e1b2e;
  padding: 24px;
  border-radius: 12px;

  & h3 { color: #c4b5fd; }
  & p { color: #94a3b8; }

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  &.featured {
    border-left: 3px solid #7c3aed;
  }
}

What it replaces: Sass/SCSS preprocessor + node-sass/dart-sass dependency + build step. If you only used Sass for nesting, delete the dependency.

Browser support: Chrome 112+ (Apr 2023), Safari 16.5+ (May 2023), Firefox 117+ (Aug 2023). Fully cross-browser.

Try it live

8. Dynamic Color Palette with color-mix()

Derive an entire color system from one base color. color-mix() in OKLCH space — lighter, darker, and transparent variants from one variable.

:root {
  --brand: oklch(0.65 0.25 275);
  --brand-light: color-mix(in oklch, var(--brand), white 30%);
  --brand-dark: color-mix(in oklch, var(--brand), black 25%);
  --brand-subtle: color-mix(in oklch, var(--brand), transparent 85%);
}

.btn { background: var(--brand); }
.btn:hover { background: var(--brand-light); }

What it replaces: Sass lighten()/darken()/mix(), JS color libraries, or manually hardcoded shades.

Browser support: Chrome 111+ (Mar 2023), Safari 16.2+ (Dec 2022), Firefox 113+ (May 2023). Fully cross-browser.

Try it live

9. View Transitions — State Morphing

Toggle between grid and list layout with a smooth morph. JS only toggles a class — the animation is pure CSS.

toggle.addEventListener('click', () => {
  document.startViewTransition(() => {
    container.classList.toggle('grid-view');
    container.classList.toggle('list-view');
  });
});

.item-1 { view-transition-name: item-1; }
.item-2 { view-transition-name: item-2; }
::view-transition-group(*) { animation-duration: 0.35s; }

What it replaces: FLIP animations, React Transition Group, Framer Motion, or manual position calculations.

Browser support: Chrome 111+ (Mar 2023), Safari 18+ (Sep 2024), Firefox 144+ (Oct 2025). Cross-browser since late 2025.

Try it live

10. Entry Animations from display: none

Animate elements from display: none using @starting-style. Dialogs fade in, cards slide up — no JS timing hacks.

.dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease,
    display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

.dialog:not([open]) {
  opacity: 0;
  transform: scale(0.9) translateY(10px);
}

@starting-style {
  .dialog[open] {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
}

What it replaces: The setTimeout(0) or double requestAnimationFrame hack — set display, wait a frame, add the animation class.

Browser support: Chrome 117+ (Sep 2023), Safari 17.5+ (May 2024), Firefox 129+ (Aug 2024). Fully cross-browser.

Try it live

Browser Support Cheat Sheet

Feature	Chrome	Safari	Firefox	Cross-browser?
Scroll-driven animations	115+ (2023)	18+ (2024)	Behind flag	Partial
Anchor positioning	125+ (2024)	18+ (2024)	Behind flag	Partial
`:has()`	105+ (2022)	15.4+ (2022)	121+ (2023)	Yes
Container queries	105+ (2022)	16+ (2022)	110+ (2023)	Yes
`interpolate-size`	129+ (2024)	Not yet	Not yet	Chromium only
CSS nesting	112+ (2023)	16.5+ (2023)	117+ (2023)	Yes
`color-mix()`	111+ (2023)	16.2+ (2022)	113+ (2023)	Yes
View Transitions	111+ (2023)	18+ (2024)	144+ (2025)	Yes
`@starting-style`	117+ (2023)	17.5+ (2024)	129+ (2024)	Yes

Try the Editor

Every demo runs in BigDevSoon's free code editor. HTML, CSS, JavaScript, React, Vue, TypeScript, SCSS, npm packages — all in the browser. No signup required.

Which demo surprised you the most? Drop it in the comments.

I Land $10K/Month+ Contracts — Here's the CV Strategy I Use

Adrian | Creator of BigDevSoon — Thu, 19 Feb 2026 14:00:00 +0000

I update my CV every single quarter. Not because I'm always job hunting — because I'm always landing contracts.

Over the past few years, I've consistently signed $10K/month+ contracts as a developer, see my LinkedIn. People ask me what my secret is. There's no secret. I just never let my CV go stale. Every new project, every new skill, every measurable outcome — it goes on the CV immediately. When an opportunity shows up, I'm ready in minutes, not days. I work fully remotely, always.

Most developers do the opposite. They ignore their CV for a year, then panic-edit it the night before a deadline. They send a version they're not proud of and wonder why they never hear back.

I decided to pack everything I've learned about developer CVs into a tool so you don't have to figure it out the hard way.

The Problem

Developer CVs go stale faster than any other profession's. You learn a new framework, ship a project, switch teams — and none of it makes it to your resume until you're suddenly job hunting again.

On top of that, ATS (Applicant Tracking Systems) reject an estimated 75% of resumes before a human ever sees them. Your two-column creative design might look great as a PDF, but if the ATS can't parse it, it's as if you never applied.

What I Built

BigDevSoon now has a CV Builder designed specifically for developers.

Here's how it works:

1. AI Generation from a Role Prompt

Pick your target role — Frontend Developer, Full-Stack Developer, DevOps Engineer, or 5 other options. The AI generates an ATS-optimized CV in about 30 seconds: structure, keywords, section content, and professional formatting.

I created 3 templates based on what actually works:

Classic — single-column, maximum ATS compatibility. This is what I use for corporate contracts.
Modern — two-column with sidebar. Great for showcasing a broad skill set visually.
Creative — accent blocks and visual flair. Stands out at startups and agencies.

Click any of those to see a live example — no signup needed.

Features available with a free 7-day trial: Customize fonts (5 families), accent colors (8 options), and font sizes. Add your photo or keep it text-only. Download as PDF, share public link if needed.

2. PDF Upload

Already have a CV? Upload the PDF. The AI extracts your work experience, education, skills, and everything else, then restructures it into a clean, editable template. We extract as much data as possible; some sections still need manual editing.

3. AI Report

AI Slop? Maybe, but I find it useful for adding relevant keywords, and just following its recommendations with common sense. One click gives you:

ATS compatibility score (0-100)
Section-by-section ratings (strong/moderate/needs work)
Missing keywords for your target role
Concrete suggestions for improvement

You stop guessing whether your CV will make it past the filters. You know.

Why I Built It

Full transparency — BigDevSoon is a paid coding platform I run, and the CV Builder is part of it. I'm biased.

But I built this because I wanted to update my own CV without a hassle. I wouldn't ship it if I hadn't tested it as a solution to my own bottleneck.

I wanted something that understood developer roles specifically — the difference between "React" and "React Native" in a skills section, the importance of listing specific project outcomes, and the right keywords for a Full-Stack Developer vs. a DevOps Engineer.

So I packed everything I know into this tool. The templates, the keyword strategies, the ATS optimization — it's all in there.

Try It

The CV Builder is live at app.bigdevsoon.me/cv-builder.

There's a free 7-day trial — you can generate your first CV, run the AI report, and export the PDF before you pay anything. If you're actively job hunting or freelancing, it's worth the 30 seconds to see what comes out.

What role would you generate first? I'm curious — drop it in the comments.

If you have feedback or feature requests for the CV Builder, I'd love to hear them. I'm actively iterating on it.

I Built 16 Free Developer Tools (No Signup, No BS)

Adrian | Creator of BigDevSoon — Tue, 17 Feb 2026 19:50:49 +0000

While building BigDevSoon — a vibe coding platform with an AI Assistant for developers — I kept making small browser-based utilities for my own workflow. Extract audio from a screen recording. Generate a QR code for a project link. Convert an image to WebP before uploading.

They piled up. 16 tools, all free, all browser-based, all client-side (your data never touches a server). Here they are.

Full transparency: These tools are part of BigDevSoon, a paid coding platform I run. The tools are completely free and always will be. Use them without ever touching the paid side. I'm listing them because I built them, I use them daily, and I think they're genuinely useful.

CSS Tools

Tool	What it does	Link
CSS Gradient Generator	Linear, radial, conic gradients with preset gallery	Try it
Color Converter	HEX, RGB, HSL conversion with live preview	Try it
CSS Unit Converter	px, rem, em, %, vw, vh — change one, all update	Try it
Box Shadow Generator	Visual shadow editor, up to 5 layered shadows	Try it

The px-to-rem conversion alone makes the CSS Unit Converter worth bookmarking. With a 16px root, 14px = 0.875rem, 18px = 1.125rem, 24px = 1.5rem. Change one value, all others update instantly.

Image Tools

Tool	What it does	Link
Image Showcase	Gradient backgrounds + device frames for screenshots ("mini" version of shots.so but free)	Try it
Background Remover	Color-based background removal, auto-detect or color-pick	Try it
Image Converter	PNG, JPEG, WebP conversion with resize	Try it
Image Crop	Freeform + social media presets (Instagram, YouTube, OG)	Try it
Image Filters	16 filter presets + fine-tune sliders	Try it
QR Code Generator	Custom colors, error correction, PNG/SVG export	Try it

Image Showcase has the most immediate "aha" moment. Upload a screenshot, pick a gradient background, wrap it in a browser or phone frame, download at 2x resolution. No watermark.

SEO Tools

Tool	What it does	Link
Meta Tag Generator	Generate title, OG, Twitter Card, robots meta tags	Try it
OG / Social Preview	Preview how your page looks on Twitter, Facebook, Google	Try it

These two work well together. Generate your meta tags, then paste the <head> into the Social Preview to verify everything renders correctly before deploying.

Data, Encoding, HTML & Media

Tool	What it does	Link
JSON Formatter	Format, validate, minify JSON	Try it
Base64 Encoder/Decoder	Encode/decode Base64 (great for JWT inspection)	Try it
Email HTML Preview	Preview emails in simulated Gmail, Outlook, Apple Mail	Try it
Audio Extractor	Extract audio from video files (MP4, WebM, MOV)	Try it

The Audio Extractor is the unexpected one. Upload a video, extract the audio as WAV/M4A/WebM/OGG. Everything happens in your browser — the video never leaves your device.

External Tools I Also Use

Not everything I use daily is something I built:

Can I Use — Browser compatibility tables
Excalidraw — Sketch-style diagramming
Regex101 — Regex testing with explanations
Bundlephobia — npm package size checker

One More Thing

If you liked these individual tools, BigDevSoon also has a free browser-based code editor — no signup required. It supports React, Vue, TypeScript, Angular, Svelte, and Vanilla JS with npm packages via CDN. Open it, write code, see the preview, close the tab.

All 16 tools: bigdevsoon.me/tools

What free developer tool do you use daily that most people don't know about?

I'm genuinely asking — I might build it next. Drop a comment with the tool name and what it does.

How I Vibe Coded My Vibe Coding Platform

Adrian | Creator of BigDevSoon — Sat, 14 Feb 2026 15:29:45 +0000

Introduction

I used AI to build the platform where people use AI to build things.

In February 2026, I shipped 40+ commits to BigDevSoon. On the landing page side — a complete rewrite from Gatsby to Astro 5, a blog and knowledge pills content system, new pricing pages. On the app side — an AI assistant called Merlin with streaming code generation, seven framework modes in the browser editor, file uploads, email provider migration, and a full onboarding redesign. One developer.

This post isn't really about BigDevSoon. It's about the workflow, tools, and mindset that made all of it possible — and how you can apply the same approach to whatever you're building. Want to see the result? Try the demo — no signup needed.

None of this was magic. It was a specific process, repeated over and over. Here's everything.

The One-Shot Mindset

Every feature should be one-shottable. If you can't one-shot it, you haven't broken it down enough.

This is the single most important thing I learned. When I say "one-shot," I mean: you write a prompt, Claude Code executes it, and the result is correct on the first try. No back-and-forth. No "actually, I meant this other thing." No three rounds of corrections.

The anti-pattern is easy to spot. If the model responds with "You're absolutely right, I apologize for the confusion" — that's not the model's fault. You gave a bad prompt. Your scope was unclear, your constraints were missing, or you didn't define what "done" looks like. That's on you.

Watch for two specific failure modes. Hallucination — the model invents APIs that don't exist, references files that aren't there, or generates plausible-looking code that does the wrong thing. Laziness — the model writes // TODO: implement this later comments instead of actual code, or skips edge cases, or gives you 80% of the solution and hopes you'll fill in the rest.

Both are symptoms of the same problem: insufficient context.

This connects directly to traditional engineering. A well-scoped Jira ticket with clear acceptance criteria is easy to implement. A vague "make it better" ticket is a disaster. Same principle, different medium. The ticket is your prompt. The acceptance criteria are your constraints.

For BDS 2.0, instead of prompting "build me an AI assistant," I had separate scoped documents. PRD-01 covered editor stability. PRD-03 handled the assets drawer. PRD-04 was Merlin AI itself. Each one was focused enough to one-shot with proper context.

The Deadly Trio — Gemini PRD, Plan Mode, Then Code

The workflow that consistently produces the best results has three steps. Not two. Not one. Three.

Step 1: Gemini drafts the PRD. Gemini has a massive context window, it's excellent at structured document generation, and it's free. You feed it your idea, your constraints, your existing architecture, and it produces a detailed product requirements document. Use each model for what it does best.

Step 2: Feed the PRD to Claude Code in Plan mode. Plan mode is critical. It blocks all write tools — the model literally cannot modify files. This forces it to think through the implementation before touching code. It's like forcing yourself to write pseudo-code before coding. You go back and forth. You challenge the plan. You ask "what about this edge case?" You refine until the plan is solid.

Step 3: Switch to "Edit automatically" and let it execute. Once the plan is good, you flip the switch. Claude Code follows the plan it just agreed to, and because the plan was thorough, the execution is usually clean.

Boris Cherny, who built Claude Code, describes a similar approach — most sessions start in Plan mode. When the goal is a PR, he goes back and forth until the plan is right, then switches to auto-accept and Claude usually one-shots the execution.

The Gemini + Claude combo isn't about loyalty to one model. It's about using each tool where it's strongest. Gemini plans. Claude builds.

Your AI's Memory — CLAUDE.md, AGENTS.md, and MEMORY.md

These three files are the difference between an AI that knows your project and an AI that hallucinates about it.

CLAUDE.md lives at the root of your project. Think of it as your project's constitution. Tech stack, naming conventions, commands to run (and commands to never run), environment variables, gotchas. Every new Claude Code session reads it first. My CLAUDE.md specifies things like "NEVER run build or lint commands — they're slow and block iteration," "use yarn not npm," and lists every critical architectural decision. The model doesn't have to rediscover your project structure every session.

AGENTS.md contains specialized instructions for subagents. When you spawn a subagent (more on this below), it inherits its own agent configuration. BigDevSoon has an SEO specialist agent with instructions covering keyword research methodology, technical audit procedures, and structured data implementation. The subagent operates within its specialty without polluting the main context.

MEMORY.md is the persistent, evolving knowledge base. This is where architecture decisions, completed PRDs, security audit findings, and hard-won gotchas accumulate over time. My MEMORY.md tracks everything from the DevSandbox iframe architecture to the exact Supabase project IDs for each environment. It's what makes session 100 as informed as session 1.

You're reading a post written by a human who maintains a MEMORY.md that tells an AI how to write code for a platform that teaches humans to write code with AI. We're through the looking glass.

Skills, MCPs, Agents, and Subagents

The Claude Code ecosystem has grown fast. Knowing what's available saves you from reinventing things that already exist.

Skills

Skills are reusable instruction sets — role-specific playbooks you can install and invoke. BigDevSoon's landing page uses a frontend-design skill that forces Claude to commit to a bold aesthetic direction before writing any code — it picks a tone (brutalist, editorial, minimalist), chooses distinctive typography instead of defaulting to Inter or Roboto, and adds real motion and spatial composition. Without it, every AI-generated UI looks the same. With it, the output has an actual point of view.

Where to find them:

SkillsMP — a marketplace with 87,000+ community-built skills
awesome-claude-skills — curated GitHub list
Official Anthropic skills — the official repo

MCPs (Model Context Protocol)

MCPs let Claude Code talk to external services directly from your terminal. These are the ones I actually use.

Supabase MCP — manage your database, run migrations, query data without leaving the terminal. I used this constantly during BDS 2.0 for checking table schemas and running RPCs.
Playwright MCP — Claude can literally open your app in a browser, click buttons, fill forms, and verify UI behavior. Useful for testing flows you'd otherwise check manually.
Remotion MCP — generate videos programmatically. Niche but powerful if you're doing content creation.
Vercel MCP — manage deployments, check build logs, access project metadata.

Agents and Subagents

Claude Code can spawn specialized subagents that run in parallel with the main session. Each subagent gets its own context and instructions. The SEO specialist agents and subagents in BigDevSoon's .claude/agents/ and .claude/subagents/ directories are a real example — they run keyword analysis and technical audits independently.

Community repos with pre-built agent configurations:

awesome-claude-code-subagents — 100+ specialized subagent configs
everything-claude-code — complete configuration collection from an Anthropic hackathon winner
awesome-claude-agents — community-curated collection

Don't build everything from scratch. Someone has probably already made an agent for your use case.

The Extension and the Terminal

Boris Cherny, who built Claude Code, uses a "surprisingly vanilla" setup — just Claude Code in raw terminal tabs. No IDE wrappers. And that approach absolutely works.

I went a different route. I use the Claude Code extension inside Cursor, and I love it.

The extension lets you visualize what Claude is doing in real time — file diffs, terminal commands, the whole flow. You can drag files and images directly into the chat. You can follow along as it edits your code, jump to changed files instantly, and run UI commands without switching windows. It's genuinely fun to watch it work. Multiple tabs of Claude Code running side by side in your editor, each one tackling a different part of the codebase — that's my daily setup.

Both approaches are valid. Boris proves the raw terminal works. I'm proof the extension works. Pick whichever matches how your brain operates. The important thing isn't where Claude Code runs — it's how you use it.

The philosophy is the same either way: let Claude Code cook. Give it a clear plan (see the Deadly Trio above), switch to auto-accept, and let it work. Intervene when it goes off track, not preemptively. Trust the plan. If the plan was good, the execution will be good. If the execution goes sideways, the problem was the plan, not the model.

Multiple Tabs, Maximum Velocity

Running 3-5 Claude Code instances simultaneously is how you get real throughput. Not from a single session doing more — from parallelization.

During BDS 2.0, a typical afternoon looked like this: Tab 1 is implementing the Merlin AI streaming backend. Tab 2 is writing tests for the file upload system. Tab 3 is refactoring the DevSandbox iframe preview. Tab 4 is updating landing page content. Four independent workstreams, all progressing at the same time.

The key rule: each tab must work on an independent piece. If Tab 1's work depends on Tab 2's output, don't parallelize them. This is just concurrent programming principles applied to AI workflows. No shared state. No race conditions. Independent tasks.

System notifications alert you when any tab needs input, so you context-switch efficiently instead of polling all tabs constantly. You're not babysitting four sessions — you're managing four autonomous workers and stepping in only when they raise a hand.

The insight is counterintuitive: Claude Code's power comes from parallelization, not complexity. Multiple simple sessions beat one overloaded session every time.

The Iterative Agent Loop

There's a pattern that's been circulating in the AI dev community, and it's popular because it works. The loop looks like this:

Review the plan — make sure the scope is clear
Ask clarifying questions — before writing a single line
Implement — let the model execute
Review with agents — run specialized review agents against the output
Write tests — the model writes tests for what it just built
Iterate — if tests fail or review catches issues, go back to step 3

The loop has a natural termination condition. When the tests pass, the linter is clean, and the review agent signs off — you're done. No ambiguity about when to stop.

This is not "vibe coding" in the derogatory sense — the one where you type "make app" and pray. This is structured iteration with clear exit criteria. The AI does the heavy lifting, but the process has guardrails.

For BDS, the testing setup reinforced this. A Husky pre-push hook runs both frontend tests (Jest + RTL) and backend tests (Deno) on every push. The AI writes tests, runs them, fixes failures, and iterates until everything is green. The human reviews the final diff.

Tools that formalize this pattern:

agentic-loop — a framework for structured agent iteration
Ralph — spec-driven development with autonomous iteration until all PRD items are complete (GitHub)

Prompt Chunks That Actually Work

You don't need elaborate multi-paragraph prompts for every interaction. Short, punchy phrases steer the model's behavior more effectively than walls of text. I call them "chunks."

Chunk	What it does
"Ultra think"	Forces deeper reasoning before the model starts writing
"Lazor focus"	Narrows scope to the exact problem, prevents tangents
"Lock in"	Signals high importance — the model brings more effort
"Use all your knowledge"	Prevents safe generic answers, pushes for depth
"No glazing, brutally honest"	Kills AI sycophancy — stops the model from agreeing with everything
"Read before writing"	Forces exploring existing code before modifying anything
"Leave code better than you found it"	Sets a quality bar for every single change
"Psychopath next door rule"	Shorthand for the quote below

That last one references a famous line:

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." — John F. Woods

In 2026, that psychopath is an AI model with perfect recall and zero tolerance for your // TODO: fix this later comments. It reads your entire codebase in 3 seconds. It finds every nested ternary, every magic number, every function named handleStuff. And it refactors them — silently, without asking, in a commit titled "clean up technical debt."

Code clean. The AI is always watching.

These chunks work because they're specific behavioral instructions, not vague encouragement. "Ultra think" is more useful than "please be careful." "No glazing" is more useful than "give me honest feedback." Precision beats verbosity.

Files, Screenshots, and Drag-and-Drop

Claude Code is multimodal, and this is underutilized by most developers.

If you're trying to explain a UI bug, don't describe it in text. Drag a screenshot into the prompt. If you have a Figma design and want matching code, screenshot the component and drop it in. The model generates code from visual references surprisingly well.

This is where the extension really shines. In VS Code or Cursor, you can Shift+drag files and directories straight from the sidebar into your Claude Code chat. It inserts the file path and Claude reads the contents immediately. No typing paths manually. No copy-pasting. You see a component that needs work, Shift+drag it in, describe what you want, done.

Be specific in general. Don't say "update the component." Say "update /src/components/DevSandbox/Preview.tsx lines 45-80." The more precise your reference, the less room for hallucination.

When building the BigDevSoon landing page, I dragged Figma screenshots directly into Claude Code. The model saw the design and generated matching Tailwind CSS 4 classes from the visual reference. Faster than describing the layout in words, and more accurate.

Images, file paths, directory structures — use everything the model can see. The best prompt is one where the model has to guess nothing.

What I Actually Built

Everything below was built in February 2026 using the workflow described above. Forty-plus commits. One developer with AI tools.

Landing page:

Complete rewrite — Gatsby to Astro 5 with Tailwind CSS 4
Blog and Knowledge Pills — the content system you're reading right now
New pricing and comparison pages — with structured data and SEO optimization
10 free developer tools — JSON formatter, Base64 encoder, color converter, CSS gradient generator, meta tag generator, and more — all running client-side, no signup

App:

Merlin AI — unified AI assistant with 5 commands (vibe code, review, feedback, explain, roast), SSE streaming, and a two-pool token system with atomic deduction
7 framework modes — React, Vue, TypeScript, Angular, Svelte, ES Modules, and Vanilla JS, all running in a browser-based editor
4 CSS modes — CSS, SCSS, PostCSS, CSS Modules
npm packages via CDN + importmap — install packages in the browser without a local build step
File uploads — user asset storage with per-plan quotas
Email provider migration — Brevo to Resend with templated emails
Onboarding redesign — interactive missions, first-time tour, plan upsells

This is not a flex. This is what's possible when you combine a clear plan with the right tools. Two years ago, this would have been a three-month roadmap for a small team.

Closing Notes

The workflow comes down to eight principles:

One-shot everything — if you can't one-shot it, break it down further
Plan before you code — Gemini for PRDs, Claude Code Plan mode for implementation plans
Give your AI memory — CLAUDE.md, AGENTS.md, and MEMORY.md are not optional
Use the ecosystem — MCPs, skills, agents, subagents. Don't reinvent what already exists.
Keep it raw — the vanilla terminal approach works. Don't over-engineer your AI setup.
Parallelize — multiple tabs, independent tasks, system notifications
Iterate with discipline — the agent loop has a natural exit condition. Tests pass, review clean, ship it.
Communicate clearly — prompt chunks, file references, screenshots. Precision beats verbosity.

The best time to learn this workflow was six months ago. The second best time is right now. Pick one project, write one PRD, open Claude Code in plan mode, and ship it.

If you want a playground to practice vibe coding with all of this — 7 frameworks, AI assistant, npm packages, the whole stack — try the BigDevSoon demo.

7 Best Websites to Discover AI Tools and Boost Your Workflow in 2024

Adrian | Creator of BigDevSoon — Tue, 03 Sep 2024 13:00:00 +0000

Introduction

Finding the right AI tool can be overwhelming with so many options. Sure, you could Google "best AI tools," but who has time to sift through pages of search results?

I've rounded up the best websites to discover AI tools. Whether you're a developer, marketer, or just someone interested in the latest tech, these sites have got you covered. And if you’ve built your own AI tool, many of these platforms let you submit your creation for the world to see!

Let’s dive into these top-notch directories that will help you find the perfect AI solution for your needs.

1. SoftGist

Pricing to Submit: Free.

Why?: SoftGist offers a clean, user-friendly interface with filters to find exactly what you're looking for. They not only list AI tools but also write detailed reviews, giving you an in-depth look at each option. If you're a tool creator, you can submit your AI tool for free and explore paid options for better visibility.

2. There's An AI For That

Pricing to Submit: Free.

Why?: This is one of the biggest AI tool aggregators out there. With a sleek UX/UI, a handy sidebar for navigation, and the ability to launch and feature tools, it’s a breeze to use. Plus, it's free, making it accessible for everyone from beginners to seasoned AI enthusiasts.

3. FindMyAITool

Pricing to Submit: Starts from $79.99.

Why?: FindMyAITool stands out with its unique UX/UI design, complete with engaging animations that make browsing a joy. While it’s not free to submit your tool, the investment can be worth it if you're looking for a premium listing experience that catches the eye.

4. 700.tools

Pricing to Submit: $1 for the first month, then $4.99 monthly, $34.99 yearly, or $39.99 one-time.

Why?: 700.tools isn’t just about AI tools—it covers a wide range of software solutions. They do include AI tools, though, and with limited spots available, it creates a sense of exclusivity. Their flexible pricing plans make it accessible, whether you’re looking to dip your toes in or commit long-term.

5. DevHunt

Pricing to Submit: Free with long wait time (~6 months), $297 to skip the queue.

Why?: DevHunt is a treasure trove for developers, and it also caters to the AI community with dedicated AI tool filters. Submissions are free, but be prepared to wait unless you're willing to pay to fast-track your listing. It’s a go-to for quality dev tools and serious exposure if you choose to invest.

6. Future Tools

Pricing to Submit: Free.

Why?: With Future Tools, you get a straightforward search and filtering experience. They let you add a tool without even needing to sign in, making it super quick to get started. This site is all about ease of use, both for discovering new tools and for getting your own tool listed.

7. Futurepedia

Pricing to Submit: Free.

Why?: Futurepedia is like a playground for anyone interested in AI. Sign up for free and start exploring their fun and diverse collection of AI tools. The site’s vibrant categories and search options make it a joy to navigate, perfect for both tool discovery and for getting inspired by what’s out there.

Summary

Thanks for exploring these AI tool directories with me! Whether you're here to find your next favorite AI tool or to showcase the one you’ve built, these sites offer something for everyone.

And hey, if you want to keep your coding skills sharp while having fun, check out our newest SaaS BigDevSoon. It’s a gamified platform where you can tackle real-world projects, daily challenges, and practice problems from Day 1.

Stay curious, and go BIG! 🚀

7 Best Remote Job Boards to Land Your Next Dev Work in 2024

Adrian | Creator of BigDevSoon — Wed, 21 Aug 2024 13:00:00 +0000

Introduction

When sending out your resume during job hunting, you can waste a lot of time if you use the wrong job boards. It feels great to send them on Indeed, Glassdoor, SimplyHired, and LinkedIn Jobs but is it?

These are just a few of the giant job aggregators that might lose quality over quantity while recruiters from all around the world add their job offers there are tons of candidates so the moment you apply, you can already be too late.

Let's present a few interesting niche job boards you can use to get your next interview with cool companies.

1. Otta

Pricing: FREE
Why?: Highly curated jobs, great onboarding process, built-in inbox with chat, fast-tracking of interview stages, stunning UX&UI.

I got my last job through it and can recommend it 100%!

2. Cord

Pricing: FREE
Why?: Highly curated jobs, great onboarding process, built-in inbox with chat, can filter through direct, external and agency. Also, a nice Profile Insights analytics so you can polish up your profile until it's perfect for employers.

3. Wellfound

Pricing: FREE
Why?: Hidden gem startups especially from the US, if you land a job there it'll be the best job you ever had (probably). Robust app with profiles, applied jobs tracking, messages, profiles, and tons of remote opportunities.

4. Remote OK

Pricing: FREE
Why?: Simple UX&UI, can quickly search and filter through, includes location & salary filters which is great to drill down the results, and comes with a good profile setup where you can provide all the details.

5. We Work Remotely

Pricing: FREE
Why?: Quite similar to the Remote OK, but has useful links such us Top 100 Remote Companies Hiring or Advanced Job Search.

6. JS Remotely

Pricing: FREE
Why?: Straightforward with quick filters to search through and navigate to a desired company that posted a job, also they have a "Go Remotely Group" for different areas/programming languages e.g. Python Remotely so you can search through their different websites.

7. 4 Day Week

Pricing: FREE
Why?: I discovered it recently, but the cool thing is a 4-Day Week Job for a better work-life balance, they also have a nice newsletter so you can get weekly alerts about new job opportunities.

Summary

Thanks for reading through!

If you want to practice some more coding skills by building real-world projects, daily challenges, or solving practice problems before your next interview, check out our newest SaaS BigDevSoon - where you build cool stuff in a gamified environment from Day 1.

Go BIG! 🚀

Level Up Your Interview Game with Practice Problems

Adrian | Creator of BigDevSoon — Tue, 20 Aug 2024 15:00:00 +0000

Introduction

To those who don't know me, I'm a Frontend Engineer with 10+ YOE who also created BigDevSoon - SaaS (next-gen code learning platform where you learn by building stuff from Day 1.) 10k+ users soon/$1k MRR this month.

Even tho I'm enjoying building modern UIs in React, the transformation of the "Frontend" role over the years forced me many times to be a Full-Stack dev, create BFFs (Backend for Frontend), analyze and think through tons of data structures and work with databases. In other ways, we're no longer "Website" Developers and to keep up the pace, we need to learn and adapt all the time.

In today's tough market times, it took me more than one month to land my latest job, you can read about this journey here. By grinding marathon-like interviews with often 10+ stages I understood the new patterns and how we need to adapt to land jobs easier.

One of the patterns I noticed is communication and soft skills, e.g. "Record your welcome video and tell us something about yourself." or 3x+ behavioral/cultural interviews "What would you do in x situation and why, explain." but it's a topic for a different day which I won't be covering in this post.

Only one thing I'll mention for the above and it's worth doing if you're not an "influencer" yet, is trying to record yourself and even attempting to do a demo feature you created, a side project, or introducing yourself and your career (e.g. summarize your resume, experience, past projects in max. 3-5 minutes). You'll listen to this and maybe figure out that your voice is too quiet or you're stressing too much in front of the camera. It's a good exercise to overcome that fear and imagine striking through 9/10 stages and failing to talk with a CEO/TL/Manager just because you didn't practice that. It would be a pity.

Another topic is well-known practice problems but trust me, you don't need to master the whole DSA including things like Dijkstra's algorithm or Red-black trees (even tho it'll be helpful to ace your next interviews).

All it takes is a little bit of grind and preparation so you won't get caught off-guard and can solve these "little problems" that many companies use these days to filter out the candidates and not waste time on long interviews by investing their resources (e.g. people who need to interview and so on)

What many "Waterfall" Devs after boot camps/courses lack is problem-solving skills, these programs often take you by the hand and don't allow thinking on your own that much - not saying it's wrong but to become better many different techniques are needed and for acing interviews under pressure, it's a huge difference maker to be able to quickly come up with solutions to problems you acknowledged 10 minutes ago and interviewers expect it to solve in less than one hour.

Let's learn more about this from one of the examples I experienced, and then I'll share a daily habit that helped me in my interviews and present some worthy problem-solving practice problems.

The Palindrome Problem

So a palindrome is a value that reads the same from backward or forward. E.g. racecar is a palindrome but hello is not a palindrome as when you reverse that value it'd be olleh instead.

I'm on a call with a recruiter from one of the companies I was applying for and we have that chill small talk as it was one of the first stages in that company. And now BOOM, last 10 minutes of the interview "Hey, one last question, could you write a code solution for the palindrome problem?" ... and I was caught off-guard a little bit.

But we got this, jumping into https://jsfiddle.net/ instantly and writing:

function isPalindrome(string) {
  return string.split('').reverse().join('') === string;
}

Proud of myself, but the recruiter says "Please don't use built-in methods.".

Ok, no problem at all, we're running out of time soon but I got this.

Spend some time to come up with a silly solution, something like this:

function isPalindrome(string) {

  let isValid = true;

  for (let i = 0; i < string.length / 2; i++) {
    if (string[i] !== string[string.length - i - 1]) {
      isValid = false;
    }
  }

  return isValid;
}

and of course, the recruiter started talking about Big O notation. We talked some more and I was busted, caught off-guard again.

Let's say an acceptable solution would be something like this:

function isPalindrome(string) {
    const normalizedString = string
    .toLowerCase()                    // Convert to lowercase
    .replace(/[^a-z0-9]/g, '');       // Remove non-alphanumeric characters

  for (let i = 0; i < normalizedString.length / 2; i++) {
    if (normalizedString[i] !== normalizedString[normalizedString.length - i - 1]) {
      return false;
    }
  }

  return true;
}

We do 2 things here, first, we normalized a string so for A man, a plan, a canal: Panama we get amanaplanacanalpanama and we quit the loop early rather than always iterating through "half through string value".

It's just an example but let's learn what happened wrong.

Lack of communication, I didn't even ask if the recruiter meant pseudo-code, wanted to make strict types like TypeScript, or if fiddle was the proper choice.
I didn't validate if could use Google/ChatGPT (well it was a super easy thing to solve but I had close to no time and after writing a one-liner I was distracted even more).
I mentioned that my last solution could be improved but we didn't have time to write it down. Maybe it was a weird interview question to catch me in the end but by asking proper questions like "Can I use built-in methods, should I use a loop for it, should I write pseudo-code or a working solution, can I google/ChatGPT?" Would save me a lot of time for sure.

Lessons learned, I started my grind on leetcode. Always 1+ problem daily but mostly choosing from Easy/Medium difficulty and trying to focus on problems that "are a human nature" as recruiters usually use these, e.g. Best Time to Buy and Sell Stock I was given as a task in one of the next companies I was applying for and solved it. I like to ask ChatGPT about the company I'm applying for and to recommend practice problems that could be relevant, even adding some message from the recruiter as an additional context. (Yes, you could ask them through an email what to expect during the interview if they don't explain it too well).

After some time you'll start seeing patterns, Array problems, String problems, connecting pieces, and getting better at it as the methods you use for solving these problems can be shared even if the test cases differ or the problem nature is completely different.

Problems worth checking out

As we're adding more and more features to our platform, I'll do a shameless plug ahead with Practice Problems on BigDevSoon, 41 of them right now, trying to keep things simple (KISS) and curate the most relevant problems + a few more for warming up (Easy level).

I'm listing 10 of them below that I find worth solving.

1. Palindrome

2. Find Max

3. Best Time to Buy and Sell Stock

4. Container With Most Water

5. Count Vovels

6. Group Anagrams

7. String Compression

8. Subsets

9. Top N Frequent Words

10. Find All Duplicates in an Array

Summary

And that's it! There's a ton to learn from these practice problems each being a fun way to activate your brain.

It's been my goal for a long time to spread a project-based learning approach through the community and have BigDevSoon up and running, an app we've been working on for the last 3 years. It's a great achievement for us.

Keep codin' BIG! 🙇‍♂️

10 Projects to master Frontend & Web Development

Adrian | Creator of BigDevSoon — Sat, 27 Jul 2024 12:11:00 +0000

Introduction

Learning by hands-on code from day 1 is one of the coolest methods of getting into coding, each time you move a small step, let be fixing a bug or adding a new feature, you can feel that dopamine boost!

You might get stuck quickly by not knowing how to build something or move forward but that is the whole point of coding, when you're blocked, you need to find a way to implement and deliver features, read documentation, learn how to learn and how to google things, but each time you'll be a little better...

...and the moment you complete a whole project is AMAZING! +1 to your portfolio, learning new skills and a feeling of accomplishment are unique.

Let me present 10 more projects you can build to improve your coding skills x10!

Shameless plug ahead but you can get a subscription with the USERS8000 -80% promo code and unleash your coding powers, jump on that code learning train and apply for jobs in 2-3 months if you take the learning seriously.

Let's dive into the projects! 🤿

1. Pokedex

Catch them all! Ah, this one is bringing back a lot of memories, let's create your own Pokémon dictionary with all the species!

You will learn more about Pokémons, obviously... and more about API integration with infinite loading, dynamic rendering and RWD, interactive search panel, sorting, filtering and a detailed view with data handling!

Cards

API Configuration
UI Rendering
Search Panel
Sorting Functionality
Filters
Pokémons Details

How to create tutorials

Additional resources

2. Music Player

An awesome way to recreate your favorite music player and learn about audio controls in HTML (and CSS for styling).

You will learn more about UI controls, data handling, event handling, audio playback, and a cool UX/UI Design.

Cards

UI Logic
Play Button
Pause Button
Replay Button
Loop Button
Time Slider
Next Button
Previous Button
Mute Button
Unmute Button
Sound Level Slider

How to create tutorials

Additional resources

3. Code Editor

Recreate the main functionality of websites like JSFiddle or CodePen. 🤩

You will learn about JavaScript interactivity, CSS Flexibility (flexbox/grid layout), 3rd party library integration, e.g. CodeMirror, and some local storage to persist the code between user sessions.

Cards

Navigation Bar
Code Area
Preview of Code
Resizing Vertical Bar
Change View Button
Code Editor Library
Responsive Web Design
Additional Cases

How to create tutorials

Additional resources

4. Quiz App

Create a fun quiz app with 10 randomly generated questions from different categories to easily play and test your knowledge.

You will learn about API Integration (Open Trivia DB API), interactive UI Development, state management to transition between questions and results page, as well as Responsive Design (RWD).

Cards

API Configuration
Home Page
Quiz Generation
Questions Logic
Last Question
Results Bar
Results Answers
Sticky Navigation
Tablet Design
Mobile Design

How to create tutorials

Additional resources

5. Find Movies

Create your app for quickly previewing featured Movies and TV Series, search your favorite movies, and see the details page of it!

You will learn to fetch data from external APIs, dynamic search techniques with debouncing, modern UX/UI design, and infinite scrolling with data pagination.

Cards

API Configuration
Search Bar
Featured Today Section
Premieres and Announcements Section
Details Page
Skeleton Animation
Error Handling
Recent Searches
Skeleton Animation
Error Handling

How to create tutorials

Additional resources

6. Tic Tac Toe

One of the most classic games ever, always fun to work a little bit with game logic.

You will learn a bit more about interactive, modern Frontend development, game logic implementation, RWD, modals, event handling with state management, and basic routing.

Cards

Home Page
Pick Player
Game Board
Gameplay
Game End
Modals
Tablet Design
Mobile Design

How to create tutorials

Additional resources

7. Todo App

Another classic, todo app style, if you haven't created one yet, it might be a good time now!

You will learn interactive UI Design with dynamic JavaScript content management, CSS and theming, and event handling with state management for operations like creating a todo, marking it as completed, or deleting it.

Cards

UI Container
Add Todo
Delete Todo
Mark as Completed
Light Mode Toggle

How to create tutorials

Additional resources

8. Blog

One of the best projects to build as it's a dynamic content that often requires a CMS which is one of the common requests from your future clients to build! (e.g. dynamic content web store website, etc.)

You will learn a lot about page navigation with different routers, SEO optimisation if built e.g. in NextJS as well as dive into various CMS and how to connect it all between Frontend and API. Also RWD is included in this one.

Cards

Content Strategy
Basic Navigation
Hero Section
Blog Posts Section
About Section
Global Footer
Posts Page
Dynamic Search
Blog Post Page
Mobile Design

How to create tutorials

Additional resources

9. Dashboard

Visualisation of different data in charts, tables is a crucial skill that Developers should have these days and especially working with different component & charts libraries.

You will learn how to build a sidebar with menu items as well as the whole navigation layout starting from top nav and content with grid system. On top of that, you could connect a mock API data to incorporate loading and error states handling.

Cards

Data Management
Sidebar
Top Navigation
Numbers Cards
Sales Overview Chart
Sales Region Chart
Registered Users Chart
Integration List
Light Dark Mode

How to create tutorials

Additional resources

10. Character Generator

Avatar creator with state management is a very common problem, data structure, loading from local storage, changing it in real-time. It's a junior level project but still will be a fun one to complete!

Learn how to manage state, optimise images/work with SVG's and implement features like random character creation and downloading an image from the canvas.

Cards

UI Container
Character Customisation
Random Selection
Save Character
Persist Character

How to create tutorials

Additional resources

Summary

And that's it! There's a ton to learn from these projects each of them being unique and a nice addition to your portfolio.

It's been my goal for a long time to spread a project-based learning approach through the community and have BigDevSoon up and running, an app we've been working on for the last 2 years. It's a great achievement for us.

Keep codin' BIG! 🙇‍♂️

100 FREE Frontend Challenges

Adrian | Creator of BigDevSoon — Thu, 27 Jun 2024 13:00:00 +0000

Introduction

In the spirit of building strong habits and the #100DaysOfCode idea, we decided to make our list of beautifully crafted "Design To Code" challenges publicly available, where each day you work on recreating (with your variation of course!) the original design screenshot to make it a working website/web app.

The goal is to reflect the provided design with HTML & CSS. If you want to dive deeper, adding interactivity via JS or any frameworks, libraries, or tools is more than encouraged. Maybe you can even create your next micro-SaaS out of it, who knows?

I hope you'll complete all 100 of them and land your dream job as a Web Dev! 🫡

1. Profile Card

It is a perfect challenge for practicing Flexbox and improving your CSS skills.

2. Add to Bag

Enhance your interactive design skills by creating a dynamic shopping cart experience.

3. Mobile Navigation

Focus on responsive design and user-friendly mobile navigation solutions.

4. Contact Us

Learn to design an accessible and user-centric contact form for better customer interaction.

5. Recipe

Craft a delightful recipe display to enhance readability and user engagement.

6. Image Carousel

Develop an image carousel to understand handling user interactions and transitions.

7. Create Account

Build a user-friendly account creation interface with validations to improve form handling.

8. Music Events

Create a vibrant interface for displaying music events that captivate and inform.

9. Password Generator

Implement a password generator to practice generating and handling secure user data.

10. Sign-up Page

Develop a sign-up page to refine form layout and design, focusing on user experience.

11. Hotel Booking

Design a streamlined hotel booking interface that offers a seamless booking experience.

12. Restaurant Reservation

Create a restaurant card with an image, description, reviews, and a clear call-to-action button.

13. Task Board

Build a task management board that helps users organize projects and daily activities.

14. Shopping List

Create an interactive shopping list with order summary, and promo code sections.

15. Notifications

Implement a notification system with different types of notifications and an empty state without any of them.

16. Fur Friends

Craft an engaging list for pet lovers to explore pets with a pet details card.

17. Article Slider

Implement an article slider that highlights featured stories with smooth navigation.

18. Images Preview

Craft a gallery app that allows users to preview images in different layouts.

19. Upload Images

Create an image upload interface that supports drag-and-drop functionality and previews.

20. Card Wallet

Develop a digital wallet interface that displays user cards, and card transactions and allows adding a new card.

21. Pricing Plans

Design a clear and concise pricing plan interface that helps users choose the right option.

22. Messages

Build a messaging app interface that supports a conversations list and individual 1-1 message view.

23. Home Page

Create a captivating homepage that draws visitors in and guides them through beautiful plants.

24. Movie Ticket

Develop a movie ticket interface that allows users to buy tickets and choose seats.

25. Meeting Schedule

Create a scheduling app that helps users plan and coordinate meetings effectively.

26. Job Board

Create a job board that is intuitive for users looking for career opportunities.

27. Leaderboards

Build a leaderboard interface that dynamically displays user rankings and scores from today to year categories.

28. Playlist

Implement a music playlist interface that allows opening a pop-up with the current song.

29. Video Player

Create a custom video player that supports various media formats and user interactions.

30. Invoices

Implement an invoice interface that helps users manage billing and track payments efficiently.

31. Dashboard

Build a comprehensive dashboard that provides users with insights and data visualizations.

32. Newsletter

Create a newsletter sign-up page that captures user interest with an attractive design.

33. Brand Visualizer

Develop a tool to create and preview brand elements like color schemes.

34. User Profile

Design a user profile dropdown menu with various menu items.

35. Rate Us

Create a feedback form to rate users' experiences and provide valuable insights via emojis.

36. Sleep App

Design a sleep-tracking app that offers insights into sleep patterns and tips for improvement.

37. Explore Flights

Create a complex flight search filter bar.

38. Music Festival

Build a festival home page with navigation and an engaging hero section.

39. QR Code Scanner

Implement a QR code scanner that enhances user interaction with quick scanning features.

40. FAQ

Create a FAQ section that provides clear and helpful answers to common customer questions via the accordion component.

41. Create Workspace

Design a virtual workspace creator that allows users to customize their digital work environment.

42. Settings Appearance

Build a settings page that lets users customize the appearance of their application interface.

43. Player Profile

Design a player profile for sports apps that showcases player stats, career highlights, and more.

44. Website Launch

Create a launch page with a countdown timer.

45. Hosting Features

Build a hosting service feature page that explains the benefits and packages available.

46. Customer List

Develop a customer management table that helps to organize users and contains relevant actions.

47. Export File

Design a file export interface that supports multiple formats and includes customizable settings.

48. Markdown Post

Create a markdown-based component that supports bold, italic, and underlined text and has a mention user feature.

49. App Navigation

Build an app navigation menu for desktop and mobile devices.

50. Friend Request

Design a social network feature that manages friend requests and user interactions.

51. Download App

Create a download page for apps that includes clear installation instructions.

52. Language App

Develop a language learning app that includes lessons, leaderboards, and interactive content.

53. Billing Page

Design a billing page that is user-friendly and makes it easy to view subscriptions, payment methods, and billing history.

54. Article Summary

Create a summary card of the article with images, user info, and relevant stats.

55. Progress Bars

Design engaging and informative progress bars for applications that track user progress.

56. Project Roadmap

Build a project management tool that visualizes roadmaps and tracks milestones.

57. Game Profile

Design a game profile interface that displays player achievements, game stats, and badges.

58. Create Task

Develop a task creation form that simplifies project management and collaboration.

59. Calculate Tip

Create a tip calculator app that helps users quickly figure out the appropriate tip amount.

60. Code Verification

Design a code verification component.

61. Flight Ticket

Build a flight ticket card preview that includes information and a QR code.

62. Testimonials

Design a testimonials section that showcases user feedback and builds trust with potential clients.

63. Weather App

Develop a weather app that provides accurate forecasts, and weather-related news.

64. Document Manager

Create a blog-like tool where users can add new documents, and chapters, delete, and preview them.

65. Interests

Design a user interest card that allows users to select their interests.

66. Navigation UI

Build a dynamic navigation UI that adjusts to user preferences and highlights key areas.

67. Select Account

Create an account selection page of who's watching.

68. User Satisfaction

Develop a user satisfaction survey that collects meaningful feedback on user experience.

69. Profile Settings

Design a comprehensive profile settings page that allows users to manage their personal information.

70. Cookies Banner

Create a cookies consent banner that is compliant with data protection regulations and user-friendly.

71. Email Client

Build an email client interface that supports organizing, reading, and composing emails efficiently.

72. Image Collections

Develop an application that organizes images into collections and offers tagging features.

73. Push Notification

Design a push notification component.

74. Manage Accounts

Create an account management page that provides a clear overview of user accounts.

75. Add Shot

Develop a modal that allows to add a shot to a collection.

76. E-book Store

Design an e-book store website that offers seamless browsing for users.

77. App Integrations

Create an interface that facilitates easy integration of various apps and services.

78. Audio Player

Develop a simple audio player.

79. Payment Plan

Design a payment plan interface that provides users with flexible payment options and clear information.

80. Articles Grid

Build a grid layout for articles that enhances readability and user engagement.

81. Delivery Details

Create a delivery details card that ensures information accuracy and enhances user trust.

82. Color Palette

Develop a tool for designers to create and save custom color palettes.

83. Socials Share

Design a social media sharing component.

84. Buy a Coffee

Create a donation page that encourages users to support content creators through small contributions.

85. Customer Reviews

Develop a customer review card that fosters transparency and helps other users make informed decisions.

86. Chatbot

Build a chatbot that can guide users through your website and answer frequently asked questions.

87. Charts

Design a series of interactive charts that display data in a clear and engaging manner.

88. Fingerprint

Create a feature that utilizes fingerprint scanning or log-in via PIN.

89. Voice Call

Develop a voice call card that ensures clarity and reliability during calls.

90. My Devices

Design a card that allows users to manage and monitor all their connected devices.

91. Quiz App

Build a quiz app that offers a variety of questions and tracks user progress.

92. Search Filters

Develop search filters that help users find exactly what they're looking for with ease.

93. Task Manager

Create a task manager that helps users organize their daily tasks and deadlines.

94. Time Widget

Design a time widget that offers various clock functionalities and customization options.

95. 404

Develop a 404 error page that helps lost users find their way back or to useful resources.

96. Subscribe Card

Create a subscription card feature that captures user interest and increases sign-ups.

97. Design Assets

Build a design assets home page where users can access different design files.

98. Voice Recording

Develop a voice recording app that captures clear audio and offers share, and delete features.

99. Columns Card

Create a card layout that displays information in columns for better data presentation.

100. Footer

Design a website footer that includes all necessary links and information in a clean layout.

Summary

That's a lot of challenges but if you complete all of them, I'm pretty sure you'll get new, awesome dev skills that will 10x speed up your dream job-finding process.

It's been my goal for a long time to spread a project-based learning approach through the community and having BigDevSoon up and running, an app we've been working on for the last 3 years is a great achievement to us.

We have a SUMMER20 code up and running until September 21, 2024.

Support us if you enjoy the content! ❤️

💼 50 Tips to Land a Remote Tech Job Based on My 45-Day Journey to 2 Offers

Adrian | Creator of BigDevSoon — Mon, 04 Mar 2024 14:00:00 +0000

Introduction

In the whirlwind that was my job hunt at the end of 2023/early 2024, I discovered that sending out hundreds of CVs doesn't guarantee a single callback — a stark contrast to my experiences just a year before. With my 8+ years of experience in the IT industry (Li Profile), back again to share a saga not just of trials but of triumph. Despite the non-FAANG odyssey with up to 10 interview stages (yeah, you read that right! 🤯), my perseverance led me to 7 different companies' interview processes and finally, 2 job offers. Let’s dive into the 50 nuggets of wisdom that illuminated my path.

Jokes aside, nothing will stop you now! 🔥

Pre-Interview Preparation

Not all of the below bullet points need to be applied, it's the sad truth that preparing for a job is your full-time job now, however, you can pick a few points that will be the best for you. I'd highly recommend grinding LeetCode for some time until you get comfortable with solving smaller problems on your own and building a few real-world coding projects that will improve your technology stack, and confidence, as well as generate that initial portfolio.

Don't forget to polish up your CV, build some exposure in social media, do networking, and tidy up your Li Profile, keeping it all up-to-date and avoiding silly typos.

1. LeetCode Grinding

Start with easy-medium problems to dust off your logic skills. It’s your secret weapon against the initial screening rounds.

It took me 1-2 weeks to see repeating patterns that are around string manipulation, arrays, objects, transformations, and sorting algorithms and it helped a lot to go through HackerRank/quick live coding algorithms to solve during interviews.

2. Build portfolio-worthy projects

Shameless self-plug? 🙈 But... Building portfolio-worthy projects (we have 20+ with Figma designs) is a great idea!

It's a testament to the power of showcasing around 3+ real-world projects on your GitHub.

Bonus: We got you covered with daily challenges to keep your skills sharp.

And you can message me for promo codes, collaboration, affiliate, sponsorship, or any other related topic!

3. Open Source Contribution

A stepping stone for gaining invaluable experience and making your resume stand out.

4. Catchafire

Dive into volunteering to get real-world experience. It’s unpaid but undeniably rewarding.

5. Portfolio Website

A personal website, can significantly drive traffic and interest your way. A bit older website that I created but still works I guess. It won't hurt to have one!

6. Your GitHub Main Page

A well-curated GitHub page speaks volumes. Start with a repository named after your account and build from there. There are many templates for README.md to choose from.

7. Writing Tech Articles

Establish your thought leadership and expertise by sharing knowledge.

8. LinkedIn Profile

Optimize your profile with detailed yet concise information. It's important to merge the job timeline to a compact format and make sure people can read it quickly, certificates, and asking peers for testimonials can be invaluable for recruiters.

Also, you can easily set "open to work" status with an appropriate avatar badge and even post on Li to your network if you're searching for a new gig!

9. CV Improvements

Streamline your CV to a simple, ATS-friendly format. Keep it to 1-2 pages, focusing on clarity and relevance to pass through initial screenings effortlessly.

Note: I'll be happy to provide you with the CV that I used for applying for jobs in 2024, as well as recommend a few tips around it, feel free to add and DM me on Li.

10. Mock Interviews

Utilize mock interview services to familiarize yourself with the interview process, reduce anxiety, and improve your performance under pressure.

The Hunt - Securing the Interview

It might be a great idea to have a separate email for searching for a job or just some clever filters as you'll be probably sending a lot of CVs and getting a lot of spam emails from different platforms if you create an account there. It's good to have notifications set up as well about new job openings so you can be one of the first candidates however it can stack quickly and spam your mailbox.

For me, Otta was a huge goldmine as I was able to land most of the interviews there.

There are some ways to automate CV sending as well and job aggregators could be a waste of time but worth utilizing a few of the below platforms for additional chances of landing that interview.

Also, it'd make sense to prepare a reusable template with smaller chunks like skills, and experience so you can easily reuse it between different platforms rather than creating each time manually.

1. LinkedIn

Utilize LinkedIn's features, such as "open to work" and job filters for remote positions, to maximize your job visibility. Engage your network by announcing your job search to leverage personal connections and referrals.

2. Indeed | Dice | Glassdoor

Job aggregator platforms can be valuable resources if used efficiently. While they may require sifting through numerous listings, they offer a broad view of the available opportunities but I don't recommend spending too much time on them unless you automate it.

3. Hacker News "Who is Hiring"

Monthly threads like this one above are a goldmine for tech positions, offering direct access to companies and their open roles. You could search for similar threads on other platforms, e.g. Reddit.

4. X

Use targeted keywords and hashtags to uncover job opportunities shared on X, tapping into the tech community and direct company postings. E.g. [tech] hiring.

5. Direct Applications

Explore companies' career pages to apply directly, ensuring you're getting the most accurate view of the role and its requirements.

The above link is a great GH repository with remote companies that are hiring globally.

6. Otta

My personal favorite, Otta stands out for its developer-friendly approach, matching you with companies based on your skills and preferences, and facilitating smooth communication with potential employers.

7. Cord

A responsive app that connects job seekers with exciting opportunities, emphasizing direct communication with hiring teams. They have various useful filters like compensation and I had a nice experience using this app.

8. Wellfound

Specializes in startup jobs, offering access to high-growth potential roles and competitive compensation packages.

9. WeWorkRemotely

Ideal for finding remote work, this platform caters to those looking to work from anywhere.

10. EchoJobs

Although relatively new, it offers a curated list of tech jobs, making it easier to find relevant positions.

Interview Preparation - Setting the Stage for Success

Let me remind you this one more time: Your full-time job is searching for jobs right now including preparing yourself for the interview, it might seem like overkill but it can save a lot of time in the long run to implement the below steps into your interviewing routine.

I think being stressed initially is the most difficult part as you have to go out of your comfort zone through a bunch of interview stages where you were happily coding for x years/month in the previous company without a need to do so.

But it's okay, take your time, learn from your mistakes, rest, exercise, hydrate, regenerate, and keep adapting until you nail it.

Ah, and take this GitHub Repository link for an awesome list of interview questions!

1. Perfecting Your Tech Setup

An often overlooked aspect of remote interviews is the quality of your video and audio setup. I learned the hard way that relying on a laptop's built-in microphone can lead to poor audio quality, echoing, or even being too faint if the laptop is too far away. Test and record yourself to ensure your video and audio are crystal clear, minimizing any chance of distractions or miscommunication.

2. Screen Sharing Mastery

As developers, screen sharing is part of our interview routine. Before your interview, clarify which tools and environments are permitted. For coding challenges, platforms like JSFiddle can be invaluable for quickly demonstrating your code and logic. If there's any uncertainty, don't hesitate to ask beforehand about the tools you're allowed to use, including specifics like JavaScript versus TypeScript.

3. Live Coding Strategy

Live coding tests are a high-pressure part of the interview process. It's essential to know upfront what resources you can access during this phase. Can you Google? Is ChatGPT on the table? Clarify these details before the interview to avoid any awkward moments and to prepare yourself adequately for the challenge ahead.

4. Research and Reconnaissance

Understanding the company's culture, values, and goals can significantly impact your interview performance, especially during behavioral segments. Take the time to research the company and, if possible, the interviewers themselves. This insight can give you an edge in aligning your responses with what the company values.

5. Embracing Failure as a Step to Success

Not every interview will lead to an offer, and that's okay. The key is to learn from each experience. Reflect on the questions asked, the problems solved, and any feedback received. Use this information to prepare for future opportunities, improving your approach each time.

6. Taking Your Time

If you're in a position to do so, don't rush into accepting the first offer if it doesn't feel right. Assess each opportunity to ensure it aligns with your values and career goals. Sometimes, waiting for the right fit is better than jumping into a situation that may lead to burnout or dissatisfaction.

7. Prioritize Your Well-being

Job hunting is mentally and physically demanding. Ensure you're taking care of yourself by staying active, hydrating, getting enough sleep, and engaging in activities that reduce stress. Your health and well-being are crucial for maintaining the stamina needed for a successful job search.

8. Leverage ChatGPT for Pre-Interview Research

Use tools like ChatGPT to gather information about the company and the specific role you're interviewing for. This AI can help you understand what skills and knowledge areas to focus on, providing you with relevant practice problems or topics to study.

In my case, I liked the idea of sharing the company's website URL to ChatGPT so it could generate questions like LeetCode challenges or high-level questions depending on the interview type. You could even give additional context depending on how much information you received for a particular interview stage to prepare upfront.

9. Prepare for High-Level Discussions

For interviews that delve into architecture or complex problem-solving, let ChatGPT assist in identifying key topics to review. Understanding the broader technological landscape can help you articulate how you approach problems and design solutions.

10. Organize Your Job Search

Keep track of your applications, interviews, and follow-up actions with tools like Otta or the Huntr Job Search Tracker Chrome extension. An organized approach will help you manage the process more effectively, ensuring you're always prepared for the next step.

Navigating Job Platforms - Let Them Find You a Job

To be honest, it's another rabbit hole. In my whole experience history with these job platforms, I can 100% backup G2i as I got a dream job there and Toptal, Lemon.io, Turing, and Arc.dev are fine but people have different opinions about them, sometimes they want to charge you a lot, sometimes there is a lack of jobs, etc. It's a thing to consider, but hear this out.

Most of these platforms will test you in some way and this is already a great experience to get to practice for your interviews, solve a few tasks and see where you are with your current skills, what you lack and need to learn, when you're lucky enough you might end up scoring a job there so it's a win-win then, right?

1. Toptal

Toptal prides itself on connecting the top 3% of freelance talent with innovative companies. Specializing in software developers, designers, finance experts, and project managers, Toptal conducts a rigorous screening process to ensure only the best are matched with freelance opportunities that suit their expertise.

2. G2i

G2i is a hiring platform for engineers by engineers. Focused on web development and primarily React and Node.js positions, G2i offers a vetting process that emphasizes not just technical skills but also remote working capabilities, ensuring a good fit for both parties.

3. Lemon.io

Lemon.io is a freelance marketplace that matches startups with vetted software developers quickly and efficiently. Known for their speed in finding a match, they cater to startups looking for developers proficient in a wide range of technologies.

4. Turing

Turing offers a platform that uses AI to source, vet, match, and manage remote software developers from all over the world. With a focus on matching based on technical skills, projects, and time zone preferences, Turing aims to make the process of finding remote work seamless.

5. Arc.dev

Arc.dev provides a straightforward way for developers to find remote jobs with vetted companies. By emphasizing long-term positions, Arc ensures that both companies and developers can find a match that is conducive to growth and development.

6. Gun.io

Gun.io specializes in connecting freelance software developers with flexible, remote work. They pride themselves on their community of professionals who are not only proficient in their technical skills but also in their communication and project management capabilities.

7. X-Team

X-Team is designed for developers who value continuous growth and exploration. Offering remote positions with some of the world's leading brands, X-Team supports its developers with funding for education, fitness, and even exploration.

8. Scalable Path

Scalable Path matches companies with a curated network of freelance developers and designers. They focus on understanding the specific needs of a project to ensure a perfect fit between the freelancer's skills and the project requirements.

9. A.Team

A.Team builds flexible, on-demand teams of senior engineers for companies tackling ambitious projects. They emphasize the synergy between team members and projects, ensuring that each team is tailor-made for the challenge at hand.

10. Remotebase

Remotebase offers an innovative approach by rapidly connecting talented developers from emerging markets with tech companies worldwide. Specializing in building remote engineering teams, they provide a unique opportunity for companies to access untapped talent pools.

Bonus Tips: Elevating Your Job Hunt Strategy

After navigating the extensive process of preparing, applying, and interviewing for tech jobs, there are always additional strategies to enhance your approach. These bonus tips aim to further refine your job search, offering innovative ways to stand out, streamline your efforts, and ensure you're maximizing every opportunity.

1. LazyApply

Leverage automation tools like LazyApply to send out your CV en masse, saving countless hours. While personalization is key for top-choice roles, LazyApply can increase your volume for a broader reach, ensuring you don't miss out on potential opportunities.

I've used it and saved some time, however, it's quite expensive for what it does but always nice to automate things if you have that opportunity! Was fun to see automated CV sending on the other screen while I was working on other stuff.

Maybe even create your next-gen-bot-scrapper-ai-automatic-cv-uploader and make money out of it? 👀

2. Create a Personal Brand

Develop a personal brand that highlights your unique skills, experiences, and interests in technology. This could involve a combination of blogging, vlogging, or podcasting about topics you're passionate about, which can attract attention from recruiters and hiring managers.

3. Networking Through Tech Meetups and Conferences

Engage in community events, both virtual and in-person. Platforms like Meetup are great for finding tech gatherings where you can connect with like-minded professionals and potential employers.

4. Enhance Your Skills with Online Courses

Continuously update your skill set with courses from platforms like FrontendMasters or egghead.io. This not only makes you more attractive to employers but also keeps you competitive in the fast-paced tech industry.

5. Utilize LinkedIn Features to the Fullest

Beyond setting your profile to “Open to Work,” actively engage with content in your field, join industry groups, and contribute to discussions. This visibility can lead to direct messages from recruiters.

6. Feedback Loop from Interviews

After each interview, whether successful or not, seek feedback. This insight is invaluable for identifying areas of improvement and can significantly enhance your performance in future interviews.

Companies in 99% of scenarios will skip this step but it's always worth writing a follow-up email while being nice and polite with a "Why?" to at least understand what could have been improved.

7. Optimize Your Social Media Profiles

Ensure all your social media profiles are professional and reflect your career aspirations. Recruiters often review these profiles to get a sense of your personality and professionalism.

Update any relevant links, your current email, job experience, and skills to make it fresh and up-to-date on any socials you're actively on.

8. Follow Industry Leaders and Companies on Social Media

Stay informed about the latest trends and opportunities by following leaders and companies you admire on platforms like Twitter and LinkedIn. This can also lead to direct engagement opportunities.

Alternatively, deep dive into trending GH repositories which are open-source publicly available, see what people are building, browse the codebase, and learn a ton out of it!

9. Participate in Coding Challenges and Hackathons

Platforms like HackerRank and CodeSignal host challenges that not only hone your skills but also can put you on the radar of tech companies looking for talent.

10. Exclusive BIGDEVSOON50 Promo

As a thank you for reading, use the promo code BIGDEVSOON50 on BigDevSoon for a special discount.

Dive into real-world projects that can elevate your portfolio and make you stand out in your job search.

Summary

The journey from sending out hundreds of CVs to securing the right job offer is both challenging and rewarding. By following the comprehensive steps laid out in this article, from pre-interview preparation to leveraging job platforms and beyond, you're not just searching for a job; you're strategizing for success. The bonus tips provided offer additional avenues to enhance your visibility, streamline your application process, and continuously improve your skills.

It's always a pleasure to share my experiences with the community, and I'll be happy to answer any questions you might have, please spread the word around and go BIG!

I'm happy to collaborate on content promotion, as well as seek sponsorship for the BigDevSoon, always looking for new opportunities! Reach me out on Li if interested.

Happy coding! ❤️

#100DaysOfCode with Daily Web Frontend Challenges

Adrian | Creator of BigDevSoon — Mon, 12 Feb 2024 16:00:00 +0000

Introduction

Hey fellow developers! Adrian here from BigDevSoon, and I've got some thrilling news for those of you looking to sharpen your coding skills in a fun, engaging way. Starting today, we are launching Daily Challenges, a series designed to push your limits and expand your knowledge in Frontend and Web Development.

Daily Challenges

Why Daily Challenges? Each day, we're serving up a new challenge – from crafting sleek HTML/CSS designs to diving into the dynamic world of JavaScript with projects like Password Generators. It's a golden opportunity to learn by doing, and the best part? Today's challenge is always free to unlock, offering a fresh dose of inspiration and learning every single day.

But wait, there's more. Missed a challenge? No problem. Each past challenge can be unlocked for just 1 BigToken the following day. This structure encourages consistency and dedication, two pillars of becoming a proficient developer.

Your Coding Playgrounds

Code Editor: Our built-in Code Editor is perfect for beginners, with HTML, CSS, and JS tabs ready for your creativity. See your changes come to life instantly in the Preview pane – a satisfying way to track your progress.

Glitch: Prefer a more flexible setup? Remix our provided Glitch Template, and submit your remixed URL. It's a seamless way to develop and share your solutions.

GitHub: For those who love working with GitHub, simply create a repository (from our template or yours), and submit both the repository URL and the Live Preview URL of your deployed challenge.

Switching between these coding options is a breeze – just look for the toggle on the very left bottom of your screen.

Wrapping Up

I'm genuinely excited to see what amazing code you'll create and the innovative solutions you'll share. This is more than just a challenge; it's a community effort to grow together, one day at a time. Remember, sharing your journey and creations not only helps you reflect but also inspires others to leap.

Let's make learning an adventure. Grab your keyboard, and let's code our way to the top, one challenge at a time!

To celebrate the launch, we're offering a limited-time promo code: BIGDEVSOON50. This code gives you a whopping 50% off all our plans and token packages. It's our way of saying thanks and making sure everyone has the chance to join in the fun.

Happy coding,
Adrian

10 Programming Languages Worth Learning in 2024

Adrian | Creator of BigDevSoon — Wed, 10 Jan 2024 13:35:27 +0000

Introduction

2024 could be a big year in the tech world while all the AI, ML, Web3, and similar evolving faster than ever.

If you're getting into coding, one of the first choices will be to learn a future-proof programming language that can bring you income over the next years.

It's a tough choice hence with my 8+ years of experience as a Software Engineer I described a few programming languages that might be worth exploring as your primary ones while becoming a Software Developer.

According to a Splunk article, the IT jobs salaries trend has been growing in recent years and is expected to continue to grow.

The example below is IT Salaries by Role in North America.

It looks like the earnings are still on point and diving into a Software Engineer's career will be worth it for a few years while it makes sense to learn some AI/ML and Prompt Engineering in the upcoming months/years just to stay up to date with the latest IT trends.

1. esProc SPL

esProc SPL emerges as a groundbreaking programming language, specifically engineered for advanced data computing. This language stands out as a high-efficiency solution, adept at handling massive datasets, making it an invaluable tool in today’s data-driven world.

🚀 Groundbreaking Language for Data Computing: esProc SPL is tailored for advanced data computing, excelling in handling massive datasets efficiently.

💡 High-Efficiency Solution: Offering superior performance, esProc SPL is ideal for data-intensive tasks in today's data-driven environment.

🌐 Versatile Data Processing: Capable of functioning as a data warehouse and computing middleware, it's versatile for various data computing needs.

🔗 Grid-Style Coding and JVM-based: Unique grid-style coding for clarity and JVM-based for extensive functionality, setting it apart from other JVM languages like Kotlin and Scala.

🧩 SQL-Style Computations Without Databases: esProc SPL allows for SQL-style computations directly on data, offering flexibility and power in data manipulation.

2. JavaScript

Let's be honest, JavaScript is not going to disappear soon, it's a whole ecosystem with this language where you can learn to create Web Apps, PWA's, Mobile Apps, Desktop Apps, Server-side code with Node.js, and all static site generators, e.g. with Next.js (with a React being an addition to pure JavaScript). It's usually a trio of HTML, CSS, and JavaScript but it's worth learning in 2024 as you can easily apply it to multiple job openings and build a lot of cool tools for multiple platforms.

3. Python

While Python is one of the most fun and simple programming languages to learn for beginners, it's widely used in web development, data science, AI, and machine learning. Outstanding libraries like TensorFlow or PyTorch are advancements in AI and ML. It has also a Django web framework which might be great for diving into Indie Hacking/building your micro SaaS products.

4. Flutter (Dart)

It's been a while since Google created it but it's getting more and more traction everyday more than ever. Powered by Dart programming language, it's a perfect choice for building natively compiled applications for mobile, web, and desktop from a single codebase. 🤯

5. Go (Golang)

Another one was created by Google's employees: Robert Griesemer, Rob Pike, and Ken Thompson. It's known for efficiency and scalability, which makes it perfect for cloud-based applications. If you're aiming to learn more about Cloud Development and use it for cloud computing and microservices, this might be a great one to start with!

6. Rust

When I was searching for a new gig, a lot of companies were using Rust as their Backend language, the reason behind it might be that it's known for its performance, safety, the system-level programming. Its memory safety features without garbage collection are a major reason for its growing use in high-performance applications.

7. Kotlin

I heard about it a few years back already, however, it's still quite popular and it's fully interoperable with Java. It's increasingly being used for Android app development.

8. Swift

A little bit of an alternative to Android app development, as it's Apple's programming language for iOS, macOS, watchOS, and tvOS app development. If you're an iPhone fan and targeting Apple ecosystems as your future career path it might be great to learn this one for mobile development.

9. C Sharp

This one was developed by Microsoft, and with the .NET framework, stays on top of integral for Windows-based software development. It's often used for developing desktop applications but also popular in game development, e.g. for Unity game engine which is one of the most popular tools for creating especially indie games. Apart from it, ASP.NET can be used for web development and Xamarin for mobile apps, and even cloud-based services.

10. PHP

The most hated programming language? Maybe. However, the newest versions fixed a lot of problems and it seems to getting back traction, especially with frameworks like Laravel, it integrate well with web development and can be embedded into HTML.

Summary

As for me, I'm diving all in into the JavaScript ecosystem with TypeScript, Web3, and cloud development with e.g. Supabase but also thinking about AWS (Amplify, Lambda functions, and so on). For some nice SEO, I'll stick with Next.js SSR, on the Backend I'll go with Node.js (Express.js, some simple proxy/caching layers or microservices) while also utilizing PostgreSQL as a database and some NoSQL such as MongoDB. As my frontend framework, I'll stick to React for the time being so trying to be a Full-Stack Developer with a Cloud-based development focus.

Good luck with becoming a Software Engineer and finding your unique path to bring you both joy and 💰!

Happy to connect with fellow Developers on Li.

Keep coding BIG! 🚀