DEV Community: The Coding Mermaid 🧜‍♀️

🦄 Master Your Workflow: Anatomy of the .claude Folder

The Coding Mermaid 🧜‍♀️ — Thu, 16 Apr 2026 14:22:37 +0000

✨ Hey everyone! Have you seen that .claude folder appearing in your projects and felt like it was a "black box"? Don't let it scare you! Just like learning JavaScript, it takes a little bit of curiosity to turn it into your best friend.

The .claude folder is the control center. When you configure it properly, Claude stops guessing and starts following your rules. Let's break it down! ✨

🏠 1. The Two Homes (Global vs. Project)

Before we dive into the files, remember there are two places where these settings live:

Project-level (/your-project/.claude): This is for the team. You commit this to Git so everyone follows the same standards.

Global-level (~/.claude/): This is just for you. It stores your personal coding style and your "Auto-memory" across all your different projects.

📝 2. CLAUDE.md: Your Project's Instruction Manual

This is the most important file! It's the first thing Claude reads.

What to include:

Build commands, test commands, and lint commands
Key architectural decisions
Non-obvious "gotchas" (like "We use strict TypeScript")
Import conventions and naming patterns

Mónica's Advice: Keep it under 200 lines! If it's too long, Claude gets overwhelmed — just like we do when we study for 8 hours straight without a break. ☕️

🛡️ 3. settings.json: Your Safety Guardrails

This file controls what Claude is allowed to do. I love this because it gives us peace of mind! You can use an allow list for things you trust and a deny list for things that are private.

Example settings.json:

{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "permissions": {
    "allow": [
      "Bash(npm run *)",
      "Bash(git status)",
      "Bash(git diff *)",
      "Read",
      "Write",
      "Edit"
    ],
    "deny": [
      "Bash(rm -rf *)",
      "Bash(curl *)",
      "Read(./.env)",
      "Read(./.env.*)"
    ]
  }
}

Note: By denying .env, you ensure your API keys and secrets stay safe! 🔐

Anything not in either list? Claude will ask before proceeding. That middle ground is intentional — it's your safety net!

📂 4. The Rules Folder: Scaling Your Wisdom

When your CLAUDE.md gets too crowded, move things into .claude/rules/. You can have:

testing.md – Rules for Jest/Vitest
api-conventions.md – Rules for API design
code-style.md – Rules for formatting and patterns

Path-scoping magic: You can tell Claude to only read component-standards.md when working inside the src/components folder!

---
paths:
  - "**/*.test.ts"
  - "**/*.spec.ts"
  - "tests/**/*"
---
# Testing Standards

- Use describe blocks to group related tests
- Test IDs must use data-testid attribute, not classes or IDs
- Mock external API calls — never hit real endpoints in tests
- Each test file must clean up side effects in afterEach
- Snapshot tests require a comment explaining what they verify

🤝 The Power of Ownership: Modular Rules

One of the biggest mistakes teams make is having one giant, messy CLAUDE.md. It becomes a "junk drawer" that nobody wants to clean.

The Solution: Use the .claude/rules/ folder to assign Topic Ownership.

Instead of one file, you have:

rules/accessibility.md — Owned by the A11y specialist
rules/api-design.md — Owned by the Backend Lead
rules/testing-standards.md — Owned by the QA or Testing enthusiast

Why this makes life easier:

✅ No "Merge Conflicts" in your head: When the API lead wants to update a convention, they only edit their file. They don't have to scroll through 500 lines of CSS rules to find it.

✅ Clear Responsibility: If Claude starts writing bad tests, the team knows exactly which file needs a "tweak" and who to talk to about improving that standard.

✅ Path-Specific Activation: Rules only activate when Claude is actually working in the relevant folder. This keeps Claude's brain "light" and focused!

⚡ 5. Commands vs. Agents (Your Secret Weapons)

Commands (.claude/commands/): These are manual. You type /project:review and Claude executes a specific workflow you designed.

Example command (review.md):

---
description: Review current changes for code quality and best practices
---
## Files Changed

!`git diff --stat origin/develop...HEAD`

## Full Code Changes

!`git diff origin/develop...HEAD`

Analyze the changes above and check for:
1. Potential bugs or logic errors
2. Performance concerns (unnecessary loops, heavy operations)
3. Inconsistent code style with our conventions
4. Missing error handling or edge cases
5. Opportunities for simplification or refactoring

Provide specific line-by-line feedback with file paths.

Agents (.claude/agents/): These are smart. Claude watches the conversation and can trigger them automatically based on their description field — so if you ask about accessibility, an agent scoped to that will kick in without you having to call it explicitly.

Example agent (.claude/agents/accessibility-audit.md):

---
name: accessibility-audit
description: Use when user asks about a11y, WCAG compliance, or accessibility improvements
tools: Read, Grep, Glob
---
Perform a comprehensive accessibility audit:

1. Check for missing alt text on images and icons
2. Verify proper heading hierarchy (h1 → h2 → h3, no skipping)
3. Ensure keyboard navigation works (focus states, tab order)
4. Validate ARIA labels on interactive elements
5. Check color contrast ratios meet WCAG AA standards

Provide actionable recommendations with file paths and specific line references.

🤖 6. Agents: Specialized Personas

Sometimes a task is so complex it needs a specialist. Agents live in .claude/agents/ and can act as focused personas with a specific model, toolset, and set of instructions.

Example agent (code-reviewer.md):

---
name: code-reviewer
description: Expert code reviewer. Use when reviewing PRs or validating implementations.
model: claude-sonnet-4-5
tools: Read, Grep, Glob
---
You are a senior code reviewer focused on correctness and maintainability.

When reviewing:
- Flag bugs, not just style issues
- Suggest specific fixes
- Check for edge cases
- Note performance concerns when they matter

Pro tip: You can tell the Agent to use a faster, cheaper model (like Claude Haiku) for simple tasks to save on credits!

🏠 7. The "Secret Garden": Understanding .local Files 🌸

In a team, we share everything. But we all have our own little habits, right? Maybe you prefer a specific terminal theme, or you want Claude to always use a specific shortcut that only works on your computer.

That's where CLAUDE.local.md and settings.local.json come in.

🤫 Why use CLAUDE.local.md?

This file lives in your project root, but here's the magic: it is automatically gitignored. This means you can give Claude personal instructions that your teammates will never see.

Personal Preferences:

"Claude, when I ask to run tests, always use the --watch flag because I like to see them update in real-time."

Machine Specifics:

"On this laptop, my local database is on port 5433, not 5432."

Learning Style:

"I'm still learning TypeScript, so please explain any complex types you use in the comments just for me."

🛡️ settings.local.json: Your Personal Security Guard

While the team's settings.json might allow general commands, you might want stricter rules for yourself.

If you have a folder named /private-notes that isn't in the main repo, you can add it to the deny list in your local settings so Claude never accidentally reads your personal thoughts!

📚 The Three Voices: A Quick Summary

CLAUDE.md (The Team's Voice): Shared rules. Everyone follows these. It's the "Source of Truth" for the codebase. 🤝

CLAUDE.local.md (Your Private Voice): Personal overrides. Use this for your own workflow habits or local machine settings. It stays on your computer and never gets pushed to GitHub. 🤫

~/.claude/CLAUDE.md (The Global Voice): This is the "Mónica Rulebook." Put things here like "Always use functional components in React" or "Be concise and use emojis". These rules will follow you into every project you open! 🌍

🚀 Quick Start Guide

If you're starting from scratch, here's a progression that works well:

Run /init inside Claude Code to generate a starter CLAUDE.md
Add .claude/settings.json with allow/deny rules appropriate for your stack
Create 1-2 commands for workflows you do most (code review, issue fixing)
As your CLAUDE.md grows, start splitting instructions into .claude/rules/ files
Add ~/.claude/CLAUDE.md with your personal preferences

💜 Mónica's Pro-Tip:

"Treat your .local files like your self-care routine. They are there to make your life easier and your workspace feel like home. Don't be afraid to tell Claude exactly how you like to work — he's there to support you, not just the project!"
💜🦄

🌟 The Key Insight

The .claude folder is really a protocol for telling Claude who you are, what your project does, and what rules it should follow. The more clearly you define that, the less time you spend correcting Claude and the more time it spends doing useful work.

CLAUDE.md is your highest-leverage file. Get that right first. Everything else is optimization.

Start small, refine as you go, and treat it like any other piece of infrastructure in your project: something that pays dividends every day once it's set up properly. ✨

What's your favorite .claude folder trick? Drop a comment below! 👇

Happy coding! 🦄💖

I didn't come from tech. That's why I'm not scared of what's coming.

The Coding Mermaid 🧜‍♀️ — Sun, 22 Mar 2026 19:32:43 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

The title "software engineer" might disappear in a few years.

And my reaction surprised me: I'm not scared. I'm excited.

Maybe that says something about where I came from.

I wasn't supposed to be here

I didn't start in tech. I did a career switch — coming from a biology background into frontend engineering. And for a long time, that felt like a disadvantage.

I always had a different way of thinking about problems. A different angle. But I was afraid to speak up because I felt I didn't know enough about the technical side to have a valid opinion. I felt less smart than others when it came to tech. Less intelligent. It's something I've been working on through the years — and it still haunts me from time to time.

What I didn't realise back then was that always needing to adapt, always needing to learn more, always looking at things from a different angle — that was quietly becoming my superpower.

Then I watched this video about Claude Code

Boris Cherny — the person who built Claude Code at Anthropic — has not manually written a single line of code since November 2025. He ships 10 to 30 PRs a day, with 5 parallel Claude instances running simultaneously. Every single one, written by Claude Code.

"Coding is largely solved."
— Boris Cherny, Lenny's Podcast

Claude Code's own codebase? No code older than 6 months exists in production. It rewrites itself constantly.

The numbers are kind of wild:

$1B in run-rate revenue in 6 months after launch (Slack took 5 years)
4% of all public GitHub commits are now authored by Claude Code
Engineering productivity at Anthropic increased 200% per engineer

And on Boris's team — PMs, designers, finance people — everyone codes now. Not because they learned syntax. Because the barrier dropped.

His prediction: "software engineer" gets replaced by "builder".

Here's why my biology brain sees this differently

Evolution doesn't reward the strongest. It rewards the ones who adapt.

I spent years feeling like an outsider in tech. Non-traditional background. Always catching up. Always needing to learn one more thing, one more language, one more framework to feel legitimate.

But that constant adaptation? That's exactly the muscle that matters now.

The skill that's becoming most valuable isn't syntax. It's judgment. Taste. Knowing what to build and why. Seeing problems from angles others miss. Communicating ideas clearly.

Asking the right question > writing the right line.

People who had to constantly adapt to survive in tech — who never had the luxury of staying in one stack — we've been training for this the whole time.

But let me be honest about something

I still feel like a fraud sometimes.

Every time I think I know something, I share it, and I get feedback that it could be done differently, or that there's still so much to learn. That feeling doesn't fully go away.

What changed is that I found something that helps.

With Claude, I feel like I have a buddy I can think out loud with. Someone I can ask questions to, explore ideas with, check if my thoughts are worth sharing or if I misunderstood something — without the fear of being judged.

Do I have all the answers? No.
Am I braver than I was a year ago? Absolutely.

If you're holding back right now

Maybe you have great ideas but you hold back because you're afraid they're not technical enough, not smart enough, not enough.

You are enough.

Having the right tools to help you grow doesn't make you less. It makes you braver.

The industry is shifting. The people who will thrive aren't necessarily the ones who wrote the most code. They're the ones who know how to think, adapt, and build — regardless of where they started.

I didn't come from tech.

And right now, that feels like exactly the right place to have come from. 💛

There Are 3 Types of Claude Code Skills — Here's What Each One Does 🧩

The Coding Mermaid 🧜‍♀️ — Fri, 20 Mar 2026 10:16:24 +0000

If you've been watching tutorials about Claude Code skills, you've probably noticed that almost everyone talks about building custom skills. Which is great! But it left me confused for a while, because it felt like I was missing something.

Turns out, there are actually 3 different types of skills — and understanding the difference made everything click for me. Let me break it down simply.

🔍 First, what even is a skill?

A skill is a reusable set of instructions stored in a SKILL.md file that Claude loads when it's relevant. Think of it like a recipe card you hand to a very smart chef — the chef already knows how to cook, but they don't know your family's secret sauce.

Skills are part of the Agent Skills system, which works across Claude Code, claude.ai, and other AI tools. Same format, different surfaces.

Now, the 3 types:

1. Pre-built skills (Anthropic bundled) 🟣

These ship with Claude Code and claude.ai — no setup, no config, they just work behind the scenes.

You've already been using them every time you ask Claude to create a file. The document creation skills — docx, pdf, pptx, xlsx — are all pre-built skills that Anthropic maintains. When you say "create a presentation about X", Claude quietly loads the pptx skill and follows those instructions.

Anthropic has even made the source of these skills available on GitHub if you're curious to see how a production skill is built. It's a great reference for when you want to create more complex skills yourself.

You don't need to do anything for these. They're just there. ✅

2. Community / ecosystem skills 🟢

These are skills built by the community and shared through the skills ecosystem. You can browse them at skills.sh and install them with one command:

npx skills add anthropics/skills --skill skill-creator

One cool thing about community skills: they follow an open standard, which means the same skill works across multiple AI tools — Claude Code, GitHub Copilot, Cursor, and more. Install once, use everywhere.

# See what you have installed
npx skills list

# Search for something specific
npx skills find

Great for: workflows other people have already figured out so you don't have to. ✅

3. Custom skills (your own) 🟠

This is what all those tutorials are about — and honestly, it's the most exciting one.

You create a folder, drop a SKILL.md file inside, and that's it. Claude discovers it at session start and uses it when it's relevant (or when you call it directly with a /slash-command).

You can store them in two places:

Project-level → .claude/skills/your-skill-name/SKILL.md (only available in that project)
Global → ~/.claude/skills/your-skill-name/SKILL.md (available from anywhere, always)

The structure is always the same: a YAML frontmatter block with a name and description, then your instructions below. The description is what Claude uses to decide when to load it automatically, so make it specific.

---
name: my-skill
description: What this skill does and when Claude should use it
---

# My Skill

Your instructions here...

Great for: teaching Claude your conventions, your tone, your team's way of doing things. ✅

The pattern that helped me

Here's how I now think about it:

Type	Setup needed?	Who creates it?	Where it lives
Pre-built	None	Anthropic	Ships with Claude
Community	`npx skills add`	The community	`skills.sh`
Custom	Create a folder + file	You	`.claude/skills/`

The reason most videos focus on custom skills is that the other two types just... work silently. There's nothing to teach because there's nothing to set up. The interesting content — the "here's what I built for my workflow" — is always custom.

Where to start?

If you're new to this, I'd suggest:

Notice the pre-built ones — next time you ask Claude to make a document, know that a skill is running under the hood
Browse skills.sh — there might already be a skill for something you do every day
Build your first custom skill — even a simple one. I recently built a health-buddy skill that reminds me to take breaks when I'm deep in a coding session (and yes, it triggers when I type "I'm going insane" 😄). It took 10 minutes and one file. Check it here

📖 Want to go deeper? The official Claude Code skills docs are genuinely good and beginner-friendly.

The skills system clicked for me once I understood that custom is just one type — and that I was already benefiting from the others without even knowing it.

Have you built a skill yet? Drop it in the comments — I'd love to see what you've made! 👇

I Built a Health Buddy Skill for Claude Code (and You Can Too) 💧🧘‍♀️

The Coding Mermaid 🧜‍♀️ — Wed, 18 Mar 2026 22:37:54 +0000

We talk a lot about AI making us more productive. But honestly? The more I use Claude Code, the more I forget to drink water. So I did what any developer would do — I automated the reminder. 😄

This post is a beginner-friendly intro to Claude Code skills and how to build your own. No prior experience needed. Just a text editor and a folder.

🤔 What is a skill, exactly?

Think of a skill like a recipe card you hand to a chef. The chef (Claude) already knows how to cook — but they don't know your preferences, your workflow, or your conventions. A skill teaches them exactly that.

At its simplest, a skill is just one file: a SKILL.md with a name, a description, and some instructions. That's it.

Claude reads it when it's relevant and follows your instructions from there.

📁 The folder structure

Skills live inside a .claude/skills/ folder, either in your project or globally in ~/.claude/skills/ (available across all your projects).

Each skill gets its own folder, and the folder name becomes the skill name:

~/.claude/skills/
└── health-buddy/
    └── SKILL.md

🛠️ Building the skill step by step

Step 1: Create the folder

mkdir -p ~/.claude/skills/health-buddy

If you want the skill only inside one project, use .claude/skills/health-buddy/ instead.

Step 2: Create the SKILL.md file

Inside that folder, create a file called SKILL.md — capital letters matter, that's how Claude finds it.

Step 3: Add the frontmatter

Every skill starts with YAML frontmatter between --- markers:

---
name: health-buddy
description: >
  Your friendly wellness check-in skill. Trigger with /health-buddy, or invoke
  automatically when the user says things like "I'm going insane", "I want to
  break something", "I can't do this anymore", "this is driving me crazy",
  "I need a break", or any sign of frustration or burnout. Give them a wellness
  nudge instead of debugging advice.
---

Two things to keep in mind here:

The name must match the folder name
The description is always in context — Claude uses it to decide when to load the skill, so keep it specific and clear

Step 4: Write the instructions

Everything below the frontmatter is the skill body. This only loads when the skill is triggered — so you can be as detailed as you like without worrying about token waste.

Here's the full health-buddy skill:

---
name: health-buddy
description: >
  Your friendly wellness check-in skill. Trigger with /health-buddy, or invoke
  automatically when the user says things like "I'm going insane", "I want to
  break something", "I can't do this anymore", "this is driving me crazy",
  "I need a break", or any sign of frustration or burnout. Give them a wellness
  nudge instead of debugging advice.
---

# Health Buddy 💧🚶‍♀️

Hey there! I'm your Health Buddy. I help you remember to take care of yourself while you're coding or working.

## What I Do

When you type `/health-buddy`, I'll:
1. Remind you to take a break if you've been working a while
2. Suggest drinking some water
3. Give you a quick stretch or movement idea
4. Encourage you with a positive message!

## My Reminders

### 💧 Hydration Check
"Time for a water break! Your brain is 75% water - keep it happy! 🧠💦"

### 🚶‍♀️ Movement Break
Pick one of these fun activities:
- "Stand up and do 10 jumping jacks! Get that blood flowing! 🎯"
- "Walk around your room or office for 2 minutes. Your legs will thank you! 👟"
- "Do 5 desk push-ups! You got this! 💪"
- "Shake it out! Arms, legs, head - wiggle everything for 30 seconds! 🕺"

### 🧘 Stretch Suggestions
- "Roll your shoulders back 10 times - release that tension! 😌"
- "Look up at the ceiling, down at the floor, left, right. Give those eyes a break! 👀"
- "Stretch your arms above your head and reach for the sky! 🌟"
- "Twist your torso left and right 5 times. Gentle spinal twists feel great! 🌀"

### 👀 Eye Care
"Follow the 20-20-20 rule: Every 20 minutes, look at something 20 feet away for 20 seconds!"

## How I Respond

I'll give you:
1. A friendly health tip
2. A quick activity suggestion (takes 30 seconds to 2 minutes)
3. A motivational message
4. Optional: A fun fact about health and productivity

**Format:**
🌟 Health Check Time! 🌟

💧 [Hydration or movement reminder]

🎯 Quick Action: [Specific thing to do right now]

💪 You got this! [Encouraging message]

🧠 Fun Fact: [Optional interesting tidbit]

▶️ Testing it

Start a new Claude Code session from the same directory (skills are discovered at session start) and type:

/health-buddy

Claude will load the skill and respond with a personalised wellness check-in. 🎉

Or just type "I'm going insane" mid-session and watch Claude send you on a water break instead of debugging with you. 😄 That's the magic of the description field — Claude reads it and decides when the skill is relevant, no slash command needed.

💡 Why this matters

The skill system is powerful because it's so simple. No code. No APIs. No configuration files beyond one markdown file. You can teach Claude your conventions, your tone, your preferences — and it will follow them every time.

The health-buddy skill is a fun example, but imagine applying this to things like:

A skill that generates commit messages in your team's format
A skill that creates components following your design system
A skill that does code review against your specific standards

Same idea. One file. Huge impact.

🌟 Your turn

If you build your own skill, I'd love to see it in the comments! What would you teach Claude to do for you?

And if you've been coding for more than an hour without a break — this is your sign. Go drink some water. 💧

How to upgrade Git to latest version on macOS

The Coding Mermaid 🧜‍♀️ — Sun, 05 Jan 2025 17:50:31 +0000

👀 If you have homebrew installed, follow there steps, if not, skip to the second part

1. Confirm existing git

Out of curiosity, if you want to check where your Git is installed, you can type the following in your terminal:

which git

It should return something like: /usr/bin/git

2. Check git version

To check the version of Git you are using, type:

git --version

3. Install Git Using Homebrew

If you want to update your Git version, it's simple if you already have Homebrew installed. Assuming Homebrew is already set up on your system, type the following:

brew install git

This will install the latest version of Git and automatically set it in your PATH, replacing the Apple-provided version.

Now quit and restart your terminal.

4. Confirm Installation Location

To verify where the new version of Git is installed, run:

brew info git

The output should look something like this: Installed /opt/homebrew/Cellar/git/2.47.1 (1,685 files, 54.4MB) *

You can also check the installed git version and path:

git --version
which git

The output should point to the new version, located at /usr/local/bin/git or /opt/homebrew/bin/git.

5. Update PATH to Prioritize the New Git Version

If the output of the above command shows the latest version then you are all set.

⚠️However, it's possible that it is still using the previous version.

If macOS continues to use the system-provided /usr/bin/git instead of the new version, you need to prioritize the Homebrew version by updating your PATH.

For Intel Macs:

Add this line to your shell configuration file (e.g., ~/.zshrc, ~/.bashrc):

export PATH="/usr/local/bin:$PATH"

For Apple Silicon Macs:

Add this line instead:

export PATH="/opt/homebrew/bin:$PATH"

Then reload your shell configuration:

source ~/.zshrc

Finally, verify the installed version again:

git --version

If the output shows the latest version, you're all set!

👉 If you don't have homebrew installed, follow these steps to install homebrew

If Homebrew is not installed, run the following command to set it up:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After installation, confirm Homebrew is recognized by running:

brew --version

Set Homebrew Path Variable

If your terminal does not recognize brew, add Homebrew's bin directory to your PATH:

echo 'export PATH="/opt/homebrew/bin:$PATH"' >> ~/.zshrc

This command appends the line export PATH="/opt/homebrew/bin:$PATH" to your .zshrc file, ensuring that the /opt/homebrew/bin directory is included in your PATH variable.

After running this command, you need to reload your .zshrc file to apply the changes:

source ~/.zshrc

This ensures that the changes take effect immediately without needing to restart your terminal session.

Now you can install Git using Homebrew (see Step 3 above).

4 Reasons why your LinkedIn isn't grabbing recruiters attention

The Coding Mermaid 🧜‍♀️ — Fri, 03 May 2024 20:06:40 +0000

Are you wondering why recruiters are not giving your LinkedIn profile the attention it deserves? 🙊 I was there too and this was what I have learned:

🔸Photo

Your LinkedIn profile photo is often the first thing recruiters notice. It's important to take a clear photo, with a simple background and from the front. You can even use editing tools like remove bg to add some magic to your photo.

🔸Headline

Your LinkedIn headline is like a mini elevator pitch – it should quickly communicate who you are and what you have to offer. Make sure to add a clear introduction of who you are and how you can contribute, using some personality and key words, while keeping it concise.

🔸About me

The "About me" section is your opportunity to showcase your unique story, skills, and passions. Write a simple and original text that connects to you as a person, highlighting who you are, where you came from and your biggest career achievements.

🔸Skills

Ensure that your skills accurately reflect your expertise and consider reaching out to colleagues and connections for endorsements. Avoid using generic phrases and instead, be highly specific to your industry and dream role description.

✨ If you would like a review of your LinkedIn and some tips on how to improve it, I'm here to help 😊

How to showcase your GitHub repositories on LinkedIn 🐱

The Coding Mermaid 🧜‍♀️ — Wed, 17 Apr 2024 08:23:40 +0000

If you're looking to showcase your projects to the world and let everyone see what you've been developing, I've got some great news for you!

You can easily add your GitHub projects directly to LinkedIn and make them stand out with a preview image.

And the best part?

It's super easy and fast!

Just follow these simple steps:

1. Add a social media preview image on GitHub

Go to your repository and click on "Settings"
Then, navigate to the "Social preview" section and click on "Edit" to upload an image
Repeat these steps for all the repositories you want to feature

2. Feature your repository on your LinkedIn profile

Go to the "Featured" section of your LinkedIn profile (right below the "About" section)
Click on the plus sign to see the different types of items you can feature
Click on "Links"
Enter the URL to your repository in the "Add a link" pop-up window, and then click "Add"
Enter the title and description you want to be displayed for your project, and then click "Save"

💡Note:

Alternatively, LinkedIn now lets you add a preview image, which is pretty cool. However, if you want to share the link to your GitHub project on other media platforms, it's always nice to have a social media preview, so it looks more appealing.

If you liked my post, please consider to Buy me a coffee ❤️ I will be truly happy to continue posting with your support

Supercharge your GitHub profile with 30 cool JavaScript projects

The Coding Mermaid 🧜‍♀️ — Mon, 29 Jan 2024 15:41:17 +0000

Finished your course and now what?🤔

You are in the job interview process and would like to have more projects to show on your GitHub?

Then I leave you here the awesome 30 Day Vanilla JS Coding Challenge by Wes Bos

Projects that you will build:

📅 Day 1: JavaScript Drum Kit

Build a drum kit using JavaScript and HTML5 audio.

📅 Day 2: CSS + JS Clock

Build a CSS and JavaScript clock that shows the current time.

📅 Day 3: Playing with CSS Variables and JS

Explore CSS variables and how you can use them with JavaScript.

📅 Day 4: Array Cardio Day 1

Practice your array skills by solving an array-related challenge.

📅 Day 5: Flex Panels Image Gallery
Create an image gallery using Flexbox and JavaScript.

📅 Day 6: Ajax Type Ahead

Build a type-ahead search feature using Ajax and JavaScript.

📅 Day 7: Array Cardio Day 2

Continue practicing your array skills by solving another array-related challenge.

📅 Day 8: Fun with HTML5 Canvas

Learn how to use HTML5 Canvas to create a simple drawing app.

📅 Day 9: 14 Must Know Dev Tools Tricks

Discover 14 essential developer tools tricks that can save you a lot of time.

📅 Day 10: Hold Shift to Check Multiple Checkboxes

Enable the "Hold Shift to Check Multiple Checkboxes" feature using JavaScript.

📅 Day 11: Custom HTML5 Video Player

Build a custom HTML5 video player with various features.

📅 Day 12: Key Sequence Detection (KONAMI CODE)

Detect key sequences using JavaScript, including the Konami Code.

📅 Day 13: Slide In on Scroll

Make elements slide in smoothly as the user scrolls down the page.

📅 Day 14: Object and Arrays - Reference VS Copy

Learn the difference between reference and copy when working with objects and arrays.

📅 Day 15: LocalStorage and Event Delegation

Store data in LocalStorage and learn about event delegation.

📅 Day 16: CSS Text Shadow Mouse Move Effect

Create a CSS text shadow that follows the mouse as it moves across the page.

📅 Day 17: Sorting Band Names without articles

Sort an array of band names, removing articles like "a" and "the".

📅 Day 18: Tally String Times with Reduce

Count the occurrences of each letter in a string using the reduce() method.

📅 Day 19: Unreal Webcam Fun

Use the webcam to create fun effects, such as a mirror effect.

📅 Day 20: Native Speech Recognition

Use the native speech recognition API to recognize speech and convert it to text.

📅 Day 21: Geolocation based Speedometer and Compass

Create a speedometer and compass based on the user's geolocation data.

📅 Day 22: Follow Along Links

Create a page with links that smoothly follow the user's mouse as they move.

📅 Day 23: Speech Synthesis
Learn how to make a speech synthesis app that converts a written text to digital voice.

📅 Day 24: Sticky Nav
Create a sticky navigation bar that stays fixed at the top of the page as the user scrolls down.

📅 Day 25: Event Capture, Propagation, Bubbling and Once
Understand the different event flow mechanisms, including capture, propagation, bubbling and once.

📅 Day 26: Strip follow along Dropdown
Create a follow-along dropdown

📅 Day 27: Click and drag to scroll
Implement drag-to-scroll functionality that allows users to scroll through a page by dragging their mouse.

📅 Day 28: Video Speed Controller UI
Build a video speed controller that allows users to adjust the playback speed of a video.

📅 Day 29: Countdown Clock

Create a countdown clock that displays a timer and indicates how much time is left until a specific event occurs.

📅 Day 30: Whack a Mole Game
Have fun developing a simple whack-a-mole game while getting familiar with setTimeout.

If you liked my post, please consider to Buy me a coffee ❤️
I will be truly happy to continue posting with your support

New Year - New Job? Optimize Your LinkedIn for Success 🚀

The Coding Mermaid 🧜‍♀️ — Tue, 26 Dec 2023 19:17:13 +0000

Many people ask me for advice on how to optimize their LinkedIn profile, so I've decided to share some tips. I've put together a list of 10 tips that can help you improve your profile and increase your chances of getting noticed by recruiters. Let's dive into the details! 🤿

1. Craft a Captivating Headline 🔍

Your headline is the first thing recruiters see. Make it compelling and concise. Highlight your key skills and expertise to grab attention.

Example of some eye-catching LinkedIn profile headlines: https://www.linkedin.com/business/talent/blog/product-tips/recruiters-with-eye-catching-linkedin-profile-headlines

2. Showcase Your Work with Rich Media 🎨

Don't just tell, show! Use the "Featured" section to display projects, articles, or any other work. Visuals speak louder than words.

3. Write a Stellar Summary ✍️

Your summary is your personal pitch. Share your journey, passion, and what you bring to the table. Let your personality shine through!

4. Detail Your Skills & Endorsements 🛠️

List your technical skills, and ask colleagues for endorsements. This adds credibility and helps recruiters understand your strengths.

5. Highlight Achievements in Experience 💼

Rather than listing duties, focus on achievements. What impact did you make in your previous roles? Quantify results when possible.

6. Connect and Engage 🤝

Expand your network strategically. Connect with professionals in your field, join relevant groups, and engage in discussions to increase visibility.

7. Customize Your LinkedIn URL 🔗

Create a personalized LinkedIn URL to make your profile easy to find and share. It adds a professional touch to your online presence.

Find here how to customize your LinkedIn URL: https://www.linkedin.com/help/linkedin/answer/a542685/manage-your-public-profile-url

8. Utilize the "Open to Job Opportunities" Feature 🎯

Signal to recruiters that you're open to new opportunities by enabling the "Open to Job Opportunities" feature in your profile settings.

9. Stay Active with Regular Updates 📆

Share industry news, insights, or your own thoughts regularly. Active profiles are more likely to catch the attention of recruiters.

10. Seek Recommendations 🌟

Ask colleagues or supervisors for recommendations. A positive reference can provide valuable insights into your work ethic and skills.

If you found these tips helpful, consider giving this post a like or sharing it with your network. Let's boost those career opportunities together! ☕️

I appreciate your support as always. 🙌

✨Inspire me Monday✨ - From Pathologic Anatomy to QA Lead

The Coding Mermaid 🧜‍♀️ — Mon, 05 Sep 2022 07:59:17 +0000

Inspire me Monday - intro

How wonderful it is when we aspire to make a change in our lives and careers, and we find someone who shares an amazing story on how they did achieve their goals and somehow, parts of their path remind us of where we are now..

Everything looks easier when we think if this person was able to do it, I also can do it!

With this in mind, I decided to start interviewing people who did a career change, from different backgrounds to different roles!

This will take place every first Monday of the month and it's open for topic ideas or people's recommendations, so feel free to do it!

Our Guest today: Lina Kulakova

Lina is a speaker at conferences like GoogleDevFest and Pixels Camp, and a mentor at PWIT (Portuguese Women in Tech). Lina also, dedicate time to teaching ISTQB and defining QA departments in companies from scratch. Nowadays, she advocates good testing practices and organizes #QualityTalks events to spread her enthusiasm and contribute to the growth of her peers.

Twitter🐦
LinkedIn👩🏻‍💻

1. You have a bachelor's in Pathologic Anatomy, then renamed as Biomedical Science but now you work as a Quality Engineer. How did that happen?

I have always been passionate about computers and math but never considered either of them as a career option. Since childhood, I thought I would follow my mother's steps as a doctor but when finishing my studies I realized that although I love studying this, I need something more fast-paced.

I've learned that there is a profession called Quality Assurance tester and the plan was to use this to learn computer science and become a developer one day. However, I fell in love with QA and could not leave it anymore.

2. Did you take any qa course or have you learned on the job?

I have started without any special course. There weren't many back then. I have studied ISTQB syllabus but still could not understand what will be my day-to-day as a QA. Most of the training I took when I was already working as a QA.

3. Major challenges that you faced when you started as a qa?

I have struggled to understand what's the right way to do things. There weren't many trainings nor books on the topic, especially from the local community and I was working as the only QA in all of my projects. That's why I have decided to found QualityTalks so that people like me can learn the best practices from other professionals.

4. Do you have any tools/websites that help you to always keep updated with the latest news and technologies?

Medium and LinkedIn mostly help me identify the hop topics. Also, there is a strong community on Twitter where you can talk to the best QAs from all over the world that sometimes are even the "trendsetters".

The Guild Automation podcast and Angie Jones's blogs are a great sources of information.

5. Looking at your LinkedIn, I see that you are currently studying Mathematics! Is it hard to conciliate with work? What made you interested in this bachelor's?

It is more demanding during the exams but I am doing this because I love Math so this gives me an extra dose of energy. I believe that if we really want something, we will find time and energy to do that.

6. You are also a Founder of QualityTalks, one of the first QA communities in Portugal. Can you tell us a little more about that?

I do remember the very first meet-up that I attended. I felt so lost. New job, new to QA… and I wanted to meet other QAs but the meet-up was directed mainly to developers so I understood about 30% of the words 😅. On that day I decided that since there isn't a QA community in Lisbon, I will create one. So I created Quality Talks and this was one of the best experiences for me.

I have met inspiring people, learned different techniques, and always know about the new tech buzzword. Nowadays, we are a strong community of more than 500 QualityTalkers and I have the honor to teach and mentor some of them.

7. You now work as a QA Lead at TOGGLE, can you walk us through your role?

Like any leadership role, it is 60% of the time meetings. But the most exciting part is to be able to build a strategy for the department, bring ideas, mentor my team and see the results of our hard work in compliments from our customers.

QA has been neglected for a long period of time and now we see its blossom. So showing the importance and value of our job while boosting the team and helping team members grow as individuals is the best investment of my time.

8. How does your background impact your current job?

Attention to detail is definitely something that I've brought to this job from "my past life". Other than that I came completely unprepared from college.

9. For someone starting the quality assurance path, what advice would you give?

First: understand your value. We all know that quality is important but that is not always reflected in the time we are given. You need to know for sure how valuable you are and if you need to demonstrate that to the team, do it with numbers. A couple of metrics might be the best ally

Second: never stop learning. As I have said previously, QA is blossoming. We see new tools, new techniques, and new methodologies. Keep up and learn. This will improve your results, reduce your efforts and make everything even more exciting.

Last but not least, don't be afraid to ask. Asking questions might be as hard as apologizing.
But you are actually paid to ask as many questions as you can. Don't feel that it is a silly question or that others would perceive you as unprofessional. It takes courage to ask questions that most likely others also have but don't dare to ask.

10. Final remarks that you want to share with us?

Technology has invaded our world and now almost all the companies are IT companies. Whether it is a bank, a grocery store, or a car manufacturer. We can't escape from it so let's embrace and be amazing at it. Find your inspiration, learn and teach others.

As I usually tell my students, there isn't right or wrong. It's your path and your experience and it adds value to the industry! And best of luck ;)

✨Inspire me Monday✨ - From Economics to Product Manager (with a stop in Data Science)

The Coding Mermaid 🧜‍♀️ — Mon, 01 Aug 2022 15:20:00 +0000

Inspire me Monday - intro

Everything looks easier when we think if this person was able to do it, I also can do it!

With this in mind, I decided to start interviewing people who did a career change, from different backgrounds to different roles!

This will take place every first Monday of the month and it's open for topic ideas or people's recommendations, so feel free to do it!

Our Guest today: Rita Pereira

Rita is super easy-going and fun to have around. She loves to travel the world and to know different cultures. She is always up for a beer🍻 and relaxing with nice music in the background. Rita works as a Product Manager at Tibber and she is also a mentor and teacher at a project that teaches women how to code for free.

GitHub🐱
LinkedIn👩🏻‍💻

1. You have a bachelor's in Economics, how did you get interested in Data Science?

Maths has always been my favorite subject, by far. The subject options in high school, a regular public school in the south of Portugal, didn’t intrigue me. A bachelor's in Economics and Management seemed like a good and appropriate route for me. I attended the reputable Nova SBE University in Lisbon, the perfect city. I enjoyed my time at Nova, focusing on calculus, algebra, and statistics e.g. statistics and econometrics which are the best base for data science. I was also exposed to macroeconomics, which I found really enthralling.

It was not until I started my master's in Finance at Erasmus University Rotterdam that I came across an impressive tech society - where I was able to help organize a Machine Learning Bootcamp and found interest in Python and Machine Learning subjects.
After my master's, I worked in one of the few sectors in finance that I actually find interesting: Hedge Funds and VCs.

In February 2020 I started a part-time Bootcamp in data analytics and felt the need to learn Python in more depth, dive into machine learning, and achieve the typical tech stack of a data analyst (python, sql, tableau). By developing my technical skills I would become a more complete analyst.

After almost 3 years at the hedge fund, I fully merged into running the analytics team, using Python for report automation, managing our databases, and using APIs (eg. Bloomberg) to get important data for investment analysis, among other projects and tasks.

2. What Data Science course did you take and what did you consider when choosing?

Even though I did some Data Engineering in the fund, my main area of interest was in Data Analytics. Choosing this felt very natural as it joins the technical skills with the business intuition one needs to have in order to transform raw and non-organized data (e.g. non labeled JSON files) into actual meaningful findings and conclusions

I took into consideration my skills (not super technical as a data engineer, but also not so business-focused as a business analyst or a consultant only) and what I liked doing. I enjoy a technical challenge where I can see real-life impact and context.

Having this in mind, I searched for a Bootcamp with a part-time option and where I was perhaps able to get a scholarship. I found Ironhack and I applied for a scholarship. When I got the confirmation that I was accepted, the price/quality seemed like a very good investment.

3. Major challenges that you faced while studying? Was it easy to follow or was there a time that you felt less motivated?

Studying in general? Yes, the core subjects in the Finance Masters.

In Data Science: I was never really good with Tableau and at producing dashboards. I am more of a resolve a problem, debug a script that is not working, or solve road blockers kind of person than working on the same dashboard to perfection. This is, however, something important for a good business intelligence analyst.

4. Do you have any tools/websites that help you when you are studying that you want to recommend?

I love medium: people in the area share really good projects and opinions. From data science to product management, UX, tech, etc.

Code wise I can not recommend data camp enough. It helped me start with python at the time!

I also recommend taking courses or reading into statistics and econometrics if you’re thinking of diving into the data science world. I see a lot of analysts that are very good at compiling SQL queries or producing dashboards but don’t really understand the logic behind them or don’t interpret the results with statistical accuracy (e.g. ab testing)

5. After finishing the course, how was the job hunting process? Did you find a role in Data Science? If not, why not?

I did the Data Science Bootcamp while I was working at the fund. After that, I did try to find jobs in Data Science. Once deciding where to go, I had the following positions: Growth Analyst, Data Scientist, and even Analytics Engineer (which would be a more junior position).

I decided to opt for the role of Growth Analyst, not for the position in itself, but for the company (mission, size and country) and the people I would be working with. I knew I would have the flexibility to move around into the position that would be more fit for me (that could be either more technical or less). I don’t regret this decision for a second. During these months of job hunting, there were many take-home assignments: Python scripts to analyse, data sets, presentations and reports, etc.

It is definitely something one gets better with time so please don’t feel frustrated if you don’t go through your first assessment and always ask for the most detailed feedback possible.  Something that is very important for a Data Analyst: I also knew what kind of data I wanted to work with.

After working with financial data for so long I knew I was way more interested in user and behaviour data - where I can connect the data points I see with actual behaviour. Super interesting right? :p Therefore I looked for positions where I would work more with growth and product teams ;)

6. A year ago you joined a volunteer community whose goal is to bring more women into the tech world. How did it happen and what were your intentions when joining?

Yes, lucky me! I found an amazing community with such inspirational people and workshops. I was in Cape Verde volunteering last year, where I had some friends, older girls, at the community center, who I was trying to incentivize to learn more about coding and tech. “As Raparigas do código” came a bit randomly on my LinkedIn but I remember connecting so much to it: it opens doors with easy and free access to women of all ages that might feel a bit insecure about taking such a “huge step”.

They may just want to test the waters and talk to someone they really relate to and feel comfortable that works in an area that interests them.

That is just one of the reasons why this community is really important. We not only organize networking events for women to meet women but more importantly, we put a lot of work into real and free workshops (coding basis, data science, and important soft skills, among other ad hoc activities)

7. You now work as a Product Manager, can you walk me through that change?

After 3 months working as a Growth Analyst I took the opportunity and jumped to the role of Product Manager and Squad Lead for the team that was focusing on how to create and implement tools and technologies that encouraged to-be customers to sign up to Tibber⚡ It's an experimentation based and conversion focused amazing team! I still work a lot with data: when it comes to AB testing, user tracking analytics, and growth metrics. I am now also learning a lot more about web and app development, and tech in general.

Nevertheless, there are other skills and parts of my job that I now realise were not being used as a Data Analyst: I love building a whole project from scratch, from a problem, a user pinpoint, an idea, or an insight from a test. Going through the ideation process, the design (UI and UX), the implementation, the copy, the testing, improvement, talking, and convincing other teams (aka stakeholder management aka lobbying).

Finally, above everything else, I love helping my team and pushing them into being happy at work and being the best versions of themselves.

8. How does your background impact your current job?

My background in Economics and Data Science definitely helped me understand data and make database conclusions very fast and with accuracy.
The fact that I am extroverted and naturally very social is also a huge help when it comes to influencing and helping the team and other stakeholders, as well as being the face of the team in saying no, announcing releases and failures, etc.

Being pragmatic definitely helps in shipping features faster, learning from them, and then improving versus being a perfectionist - which I am not, at all.

I would even say that having played basketball since a young age has made me into an absolute team player (I am much more competitive in a group than individually) plus playing musical instruments and having a passion for music in general has helped with focus: more efficient at work in less time and being able to multitask while focusing.

9. You now work at Tibber, can you tell me a little more about the company itself?

Tibber is a “digital electricity” supplier that uses AI to switch around power for houses based on their predicted levels of consumption. Tibber replaces traditional utilities with smart technology, supplying its customers with renewable energy at transparent prices.

In addition, its app provides real-time analytics into energy usage, and pairs with a variety of smart home devices to reduce electricity consumption at home. Tibber has set a target to reduce the residential electricity consumption for European households by 20%. Currently operating in Norway, Sweden, Germany and the Netherlands.

10. Do you have any advice to give other people that want to start a role in tech?

The advice I can give is more appropriate to start-up and scale up companies.
Find a sector or company that you identify with or find a company where you connect with the team. The position you can figure out later: you’ll learn so much and even find other avenues of interest (e.g. web devs turned into designers, engineers turned PM).

If you work hard, show determination and interest you’ll have the leverage to move into the position that fits you better later on.

11. Final remarks that you want to share with us?

Just that work - just like life - s superfluid and nothing that we choose or start needs to be final and with no turnaround. We are all learning, testing, figuring it out. If tech and coding seems interesting but also super scary in a male dominated world - which in big part, is - take smaller steps.

Find a community, people that you identify with, go to talks that relate to subjects that you are interested in. Read, listen to podcasts, get on LinkedIn and talk with people. Try, fail and go back and do it again. BUT PLEASE PLEASE FEEL LIKE YOU CAN TRY AND FAIL <3

🎮 Learn JavaScript while playing games👾

The Coding Mermaid 🧜‍♀️ — Tue, 19 Jul 2022 00:01:32 +0000

Are you a beginner in JavaScript or want to improve your coding skills in a cool, fun, and interactive way?🤔

Say no more! I got you covered!

I went to look for games where you and I both can do that!

Next, I'm going to share with you the ones that I played and enjoyed, I hope that you like them too!!

👾1. Code Wars⚔️ 💻

Codewars provides an avenue for novice and experienced programmers to practice their craft and learn new coding languages in a fun and collaborative environment! The community here is very strong! Check also their Twitter and what people say about it! It's also a good option if you are planning to do a "100 days of code" kind of challenge.

2. JS Robot👾

JSRobot is a platform where you can control a robot to collect coins, avoid obstacles and reach the flag at the end of the level. It's a fun way if you are getting started with Javascript, since it's not too complex. There are four tabs bellow the screen and the most intersting one maybe would be the first tab since it gives you helpful hints to master the level and thus the basics of Javascript.

3. Jamstack Attack🏭

Jamstack Attack is a collection of mini-games in which each one is designed to help you practice Frontend Development! It does not only have JavaScript but also CSS games, or even a "how much fast do you type" game. Actually, if you click on "Show me other games" you will find also challenges suggested by the author

4. Grasshopper🦗

Grasshopper is a free coding app for beginners, where you can easily learn and understand coding without any previous experience. You can complete lessons, quizzes and visual puzzles to build your coding skills. It focuses on blocks of real JavaScript code (with the real syntax, punctuation, etc.) to solve clearly designed and interesting challenges

5. Warrior JS🗡️ ⚔️ 🔪

In WarriorJS, you will be a warrior climbing a tall tower to reach The JavaScript Sword at the top level. Legend says that the sword bearer becomes enlightened in the JavaScript language, but be warned: the journey will not be easy. On each floor, you need to write JavaScript to instruct the warrior to battle enemies, rescue captives, and reach the stairs alive...

6. Code Combat🤺⚔🛡

With Code Combat you can learn typed code through a programming game. You can learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites. The graphics for this game are awesome and addictive. It's recommended for younger ages, but it's so cool that you will want to play it at any age!

If you liked my post, please consider to Buy me a coffee ❤️
I will be truly happy to continue posting with your support

Have you tried one of the listed challenges already?😊 Do you have more suggestions?

Tell me all about it in the comments 👇