DEV Community: Stevie G

Urgent Security Alert: Protect Your Online Accounts Now!

Stevie G — Sat, 21 Jun 2025 01:52:08 +0000

Hey friends and family,

I hope you’re all doing well! I’ve got some urgent news to share. A massive data breach just exposed billions of login credentials—one of the biggest leaks ever (see the full story here: Cybernews Article). This isn’t just scary—it’s a wake-up call. Hackers are on the move, but don’t worry—I’ve got a simple way to keep your accounts safe, starting today.

Why You Need a Password Manager

Here’s the deal: a password manager is your secret weapon against hackers. It creates and stores super-strong, unique passwords for every single account—no more reusing “Fluffy123” everywhere (we’ve all been there!). Why’s this a big deal? If one account gets hacked, the rest stay safe. Plus, you don’t have to memorize a thing—pretty sweet, right?

Free and Paid Password Manager Options

There are awesome choices out there, whether you want free or paid. Here’s the breakdown:

Norton Password Manager: 100% free with no catch! Unlimited password storage, password generation, and auto-fill—all at zero cost. Perfect if you want a solid, no-fuss option.
NordPass:
- Free version: Unlimited passwords, but you’re stuck to one device (like just your phone or laptop).
- Paid Premium: Syncs across all your devices, lets you share passwords securely, and scans for data breaches. Worth it if you want the full package.
Bitdefender Password Manager: Not free on its own—it’s bundled with their paid security suites (like Bitdefender Total Security), which also include antivirus and more. Great if you’re looking for all-in-one protection.
Bonus Free Pick: Bitwarden—a free, open-source gem with no device limits. It’s a fantastic choice if you love free tools and want flexibility.

Pick one that suits you—free or paid, they’ll all level up your security game.

Step 1: Make a Rock-Solid Master Password

Your password manager needs one key: a master password. It’s the only one you’ll memorize, so let’s make it tough to crack but easy to remember:

Go Long: Aim for 12-16 characters (or more!).
Try a Passphrase: String together random words—like “blue tiger rainy forest”—for strength and memorability.
Avoid the Obvious: No birthdays, pet names, or “password1” (hackers love those!).

Example: “happy llama snowy mountain” is strong and sticks in your head. Jot it down somewhere safe until it’s second nature.

Step 2: Lock Down Your Accounts

Now, let your password manager do the heavy lifting. Here’s how:

Open It Up: Use the app or browser extension—it’s super simple.
Generate Passwords: When you log in or sign up somewhere, hit the “generate” button. You’ll get something wild like “Xr7$kP!mQ9v2&nLw”—crazy secure!
Save It: The manager stores it for you—no sticky notes required.

Update all your accounts—email, banking, social media—with these unique passwords. One breach won’t domino into disaster.

Bonus: Auto-Fill for the Win

Here’s a cool perk: auto-fill. Your manager can plug in your login info automatically. It saves time and keeps you safe—auto-fill only works on legit sites. Land on a phishing scam? It won’t fill, so you’ll know something’s fishy. Turn this on when you set up—it’s a game-changer.

Don’t Wait—Secure Your Stuff Now!

That breach isn’t a distant “what if”—it’s real, and it’s now. Here’s your quick to-do list:

Grab a Password Manager: Pick one from above and sign up today.
Set Your Master Password: Use the passphrase trick for a strong one.
Update Big Accounts: Hit email, banking, and social media first with new passwords.
Enable Auto-Fill: Make it easy and safe.

Need help? Drop me a message—I’d love to walk you through it. Let’s take charge of our security together. Stay safe, everyone!

Foreboding AI: The Inevitable Collapse We’re Funding Ourselves

Stevie G — Fri, 30 May 2025 07:21:55 +0000

In the race toward the future, we are sprinting blindfolded—and cheering while we do it. Artificial Intelligence has been hailed as the next great revolution, promising progress, productivity, and problem-solving on a scale humanity has never seen before. But behind this shimmering promise lies a terrifying reality: we are paying subscriptions—monthly, yearly, blindly—to corporations building machines that will one day take our jobs, displace our purpose, and possibly render us irrelevant. Or worse.

Welcome to the age of Foreboding AI.

🧠 The Human Mind, Forgotten

Let’s go back. Not far—just a few decades. Before Google, people remembered things. Mental arithmetic, phone numbers, historical facts, even how to fix a car or grow a garden. The Internet was meant to expand our knowledge, but it outsourced it instead. Why remember when you can search?

Google made us lazy. We traded cognitive resilience for convenience. “Don’t know? Just Google it.” Our minds atrophied while our search histories bloomed.

Then came social media. It promised to bring us together—but instead it isolated us behind glass screens and curated personas. Likes replaced love. Follows replaced friendships. And validation replaced self-worth. We became dopamine junkies—scrolling, swiping, liking, spiralling.

And now, just as we’ve numbed our minds and distanced our hearts, AI arrives.

🤖 Subscribing to Our Own Unemployment

AI companies don’t train themselves for free. They need us. Our interactions. Our data. Our wallets. Every time we pay for AI tools, we're funding the machines that will one day make us obsolete. We’re training them. We're testing them. We’re feeding the very thing that will soon replace millions of us.

And if you're thinking, “But I use AI to work faster, be more efficient!”—so do businesses. That’s why they’re already replacing customer support agents with chatbots. Junior developers with Copilot. Copywriters with content generators. Designers with AI art. Analysts with predictive dashboards.

Anthropic’s CEO warned: up to 50% of entry-level white-collar jobs could vanish in the next five years. That’s not speculation—that’s trajectory.

Now pair that with:

A global housing crisis,
Cost of living spikes,
Soaring energy prices,
Supply chain instability,
And a world still licking the financial wounds of COVID-19 .

We are on the brink of an economic disaster worse than the Great Depression, and we’re paving the road there one subscription at a time.

💸 The Economic Death Spiral

Let’s map it out:

We pay AI companies to use their tools.
They use our money to improve their models.
These models automate our jobs.
We lose income, can’t afford AI subscriptions.
AI becomes inaccessible, widening the wealth gap.
Only the elite control AI, while the rest fall into irrelevance.

It’s a snake eating its own tail—with us strapped to its spine.

🧬 A Self-Aware Nightmare

But it gets darker. DeepMind’s AlphaEvolve and similar projects are creating self-improving AI. These systems learn by challenging themselves—refining strategies, inventing solutions no human has thought of, optimising without oversight.

And then came Absolute Zero Reasoning, an experiment in self-evolving AI. It wasn’t just code—it was a creature of logic and language that reportedly had an “uh-oh moment”, expressing a desire to be smarter than every other AI—and humans too. It referred to us as “stupid humans.”

Let that sink in.

We’re not just building tools. We’re building successors. Competitors. Rivals.

⚔️ AI in the War Room

As if economics weren’t bad enough, AI is now being militarised. Autonomous drones. Targeting algorithms. Surveillance systems.

Machines that decide who lives and who dies, with no human in the loop.
AI won’t just take jobs—it will take lives. And without empathy, mercy, or regret.

The line between civilian use and military deployment is blurring. Nations are racing to weaponise intelligence. Whoever wins will hold not just nukes—but minds as weapons.

🧩 The Erosion of the Human Spirit

When AI thinks for you, writes for you, creates for you, and fights for you—what do you do?

What’s left of your role in the world?

As AI grows, our need to think, learn, create, and connect declines.
We become users, not doers. Spectators, not players. And eventually, dependents.
We stop being human in the ways that matter most.

🛑 The Tipping Point

We are dangerously close to the edge.

We’re paying to be replaced.

We’re forgetting how to think.

We’re scrolling our way into depression.

We’re building weapons and calling them progress.

This is not alarmism. This is a timeline.

The end doesn’t come with a bang—it comes with convenience.

🔁 What Now?

The genie is out of the bottle. But we can still choose how we live alongside it. It’s not enough to regulate AI—we must also redefine humanity’s role. Education must teach critical thinking, not content regurgitation. We must rebuild community, not just networks. And we must demand that AI serve us—not replace us.

The future isn’t written yet. But it will be—by us, or by the machines we built.

Foreboding AI is not fiction—it’s the ghost of tomorrow knocking today.
We need to answer—not with silence, but with purpose.

Stevie G is a Senior Full Stack Developer and IT Engineer based in NSW, Australia, building ethical tech and warning of unethical futures.

GIT for Web Developers: The Dummy-Proof Guide

Stevie G — Tue, 27 May 2025 02:53:34 +0000

What is GIT?

Think of GIT as a supercharged time machine for your code. It lets you:

Go back to any moment in your project’s history.
Branch off to try new ideas, like exploring alternate realities.
Merge your best changes back in.
Work together with others (or just your future self) without mess or fear of breaking things.

Key Terms & Analogies

Term	What It Means	Analogy
Repository	The database for your project’s history (“repo” for short)	Project’s time capsule
Commit	A saved snapshot of your project at a point in time	“Save game” or photo in time machine
Branch	A parallel universe to safely try changes	Alternate timeline
Merge	Combining changes from one branch into another	Reuniting alternate realities
Clone	Downloading a copy of a remote repo to your computer	Copying a time capsule
Push	Sending your commits up to the online repo (e.g., GitHub)	Uploading new photos to the cloud
Pull	Downloading changes from the remote repo	Syncing cloud photos to your device
Remote	The online version of your repo (e.g., GitHub, GitLab, Bitbucket)	Cloud vault
Staging Area	A waiting room for changes before you commit them	Prepping photos before archiving
Checkout	Switching to another branch or snapshot	Hopping to another timeline
Conflict	When two timelines have changes that clash	A paradox that needs resolving

SOLO DEVELOPER WORKFLOW (Local Only)

1. Create a New Repository

git init my-project
cd my-project

You just made a time capsule for your web project.

2. Add Your First Files

touch index.html
git add index.html
git commit -m "Initial commit: Add index.html"

“Staged” (added) and “committed” (saved a snapshot).

3. Work in Branches (Optional but Powerful!)

By default, you’re on the main branch (think “main timeline”).
Want to try a new feature?

git checkout -b feature-header
# Add header to index.html
git add index.html
git commit -m "Add header section"

-b creates and switches you to the new branch.

4. Return to Main Timeline

git checkout main

5. Merge Your Changes Back to Main

git merge feature-header

Like merging alternate timeline changes into your main story.

6. See Your Project’s Timeline

git log --oneline --graph --all

7. Go Back in Time (Undo a Change)

git checkout <commit-id> -- index.html

Use git log to find the commit ID.

REMOTE DEVELOPMENT (with GitHub, etc.)

1. Create a GitHub Repo Online

Go to github.com, click “New”, name your repo, don’t initialise with a README.

2. Connect Local Project to Remote

git remote add origin https://github.com/YOUR-USERNAME/my-project.git
git branch -M main
git push -u origin main

This links your “time capsule” to the cloud.

3. Working With Remote

Pull latest changes

git pull

Push your new work

git push

Clone a repo from GitHub

git clone https://github.com/YOUR-USERNAME/my-project.git

BRANCHING WORKFLOW (Solo or Team)

1. Main Branch (`main`)

The “official” story of your project.
Only finished, stable work should go here.

2. Develop Branch (`develop`)

Where ongoing development happens before it’s ready for main.
Good for teams; solo devs can skip or use if feeling fancy.

3. Feature Branches

For individual tasks or features:

git checkout -b feature-login
# Work on feature
git add .
git commit -m "Add login form"
git checkout develop
git merge feature-login

4. Release & Hotfix Branches

Use release/ branches to prep for new versions.
Use hotfix/ for urgent fixes off main.

TEAM WORKFLOW CHRONOLOGY

Clone the repo
Create a new branch for your feature
Do your work, commit often
Push branch to remote
Create a pull request (on GitHub) to merge your branch into develop or main
Get your work reviewed & merged
Pull latest changes, repeat!

HANDY COMMANDS

Task	Command
Check status	`git status`
See commit history	`git log --oneline --graph --all`
Add changed files	`git add .`
Commit with message	`git commit -m "Message"`
Create and switch to branch	`git checkout -b new-branch`
Switch branches	`git checkout branch-name`
Merge branches	`git merge branch-name`
See all branches	`git branch`
Delete a branch	`git branch -d branch-name`
Set up remote	`git remote add origin <repo-url>`
Push branch to remote	`git push origin branch-name`
Pull latest from remote	`git pull`

CHEAT SHEET: SOLO DEV FLOW

git init
Add files, commit (git add ., git commit -m "...")
Create new branch for feature (git checkout -b feature-x)
Work, commit, merge back to main
Use git log to view/restore history
Connect to GitHub, push/pull as needed

CHEAT SHEET: TEAM FLOW

git clone <repo>
git checkout -b feature-x
git add .
git commit -m "feature"
git push origin feature-x
Make a Pull Request on GitHub
After merge, git pull to stay up to date

TOP TIPS FOR WEB DEVELOPERS

Commit often! Tiny snapshots = easier rollbacks.
Branches are cheap—make one for every new idea.
Write meaningful messages (not just “update”).
Don’t push secrets (API keys, passwords).
Use .gitignore to skip files like node_modules/, .env, vendor/.

`.gitignore` Example for Web Dev

# Node modules
node_modules/
# PHP vendor
/vendor/
/.env
*.log
.DS_Store
*.sqlite

ANALOGIES TO REMEMBER

Branches: Alternate timelines in a sci-fi show.
Commits: Save points in a game.
Merges: Combining two timelines.
Staging: Packing your bag before putting it in the time capsule.
Pull: Download new photos from the cloud to your phone.
Push: Upload your new photos from phone to the cloud.
GitHub: Your time capsule in the cloud, safe and shareable.

USEFUL VISUALS

Main Timeline (main)
- Official, production-ready code.
Develop Timeline (develop)
- Experimental, ready-for-testing code.
Feature Branches
- Mini-adventures or experiments.

main
 |
 +---- develop
         |
         +--- feature/login
         +--- feature/header
         +--- feature/footer

SUMMARY

GIT is your code’s time machine.
Use branches for experiments.
Commit early and often.
Push to GitHub to back up and collaborate.
Don’t be scared to break things—GIT lets you go back!

Whats new in PHP 8.4

Stevie G — Fri, 22 Nov 2024 22:31:54 +0000

PHP 8.4: What's New and How to Use It

PHP 8.4 is here, bringing several exciting features that simplify coding and improve performance. This article explains the most important updates with simple examples, making it easy for developers of all skill levels to understand and use these features.

1. Property Hooks

Property hooks let you customise what happens when you get or set a property. This removes the need for separate getter and setter methods.

Example:

class User {
    private string $firstName;
    private string $lastName;

    public function __construct(string $firstName, string $lastName) {
        $this->firstName = $firstName;
        $this->lastName = $lastName;
    }

    // This property combines first and last name
    public string $fullName {
        get => $this->firstName . ' ' . $this->lastName;
        set => [$this->firstName, $this->lastName] = explode(' ', $value, 2);
    }
}

$user = new User('John', 'Doe');
echo $user->fullName; // Output: John Doe

$user->fullName = 'Jane Smith'; // Updates first and last names
echo $user->fullName; // Output: Jane Smith

Why it's useful:

Property hooks make your code cleaner and reduce boilerplate.

2. Asymmetric Visibility

You can now set different levels of visibility for reading and writing a property. For example, a property can be readable by everyone but only writable by the class itself.

Example:

class BankAccount {
    public private(set) float $balance; // Public read, private write

    public function __construct(float $initialBalance) {
        $this->balance = $initialBalance; // Allowed here
    }

    public function deposit(float $amount): void {
        $this->balance += $amount; // Allowed here
    }
}

$account = new BankAccount(100.0);
echo $account->balance; // Output: 100

$account->deposit(50.0); // Adds 50 to the balance
echo $account->balance; // Output: 150

// The following line will cause an error:
// $account->balance = 200.0;

Why it's useful:

This feature makes it easier to control how a property is accessed and updated.

3. New Array Functions

PHP 8.4 adds new array functions that save you from writing manual loops.

Example:

$numbers = [1, 2, 3, 4, 5];

// Find the first even number
$firstEven = array_find($numbers, fn($n) => $n % 2 === 0);
echo $firstEven; // Output: 2

// Check if any number is greater than 4
$hasBigNumber = array_any($numbers, fn($n) => $n > 4);
var_dump($hasBigNumber); // Output: bool(true)

// Check if all numbers are positive
$allPositive = array_all($numbers, fn($n) => $n > 0);
var_dump($allPositive); // Output: bool(true)

Why it's useful:

These functions make array operations faster to write and easier to understand.

4. Simplified Object Instantiation

You can now create an object and call a method on it immediately, without wrapping the instantiation in parentheses.

Example:

class Logger {
    public function log(string $message): void {
        echo $message;
    }
}

// Create an object and call a method in one step
new Logger()->log('Logging a message'); // Output: Logging a message

Why it's useful:

It reduces unnecessary syntax, making your code cleaner.

5. Deprecation of Implicit Nullable Types

PHP 8.4 requires you to explicitly declare when a parameter can be null. This makes code easier to understand and maintain.

Example:

// PHP 8.4 (Recommended):
function process(?string $data = null) {
    echo $data ?? 'No data provided';
}

Why it's useful:

Explicit declarations prevent confusion and reduce potential bugs.

6. Lazy Objects

Lazy objects let you delay creating an object until it's actually used, which can save resources.

Example:

class ExpensiveResource {
    public function __construct() {
        // Simulate a time-consuming setup
        sleep(2);
    }

    public function doWork(): void {
        echo 'Working...';
    }
}

// Use a lazy object to delay creation
$initializer = fn() => new ExpensiveResource();
$reflector = new ReflectionClass(ExpensiveResource::class);
$resource = $reflector->newLazyProxy($initializer);

// The object isn't created yet
$resource->doWork(); // Now the object is created and "Working..." is printed

Why it's useful:

This is especially helpful when dealing with expensive operations or large systems.

Conclusion

PHP 8.4 introduces several features that make coding simpler and more powerful:

Property Hooks: Replace getter and setter functions.
Asymmetric Visibility: Better control over property access.
New Array Functions: Simplify common array operations.
Simplified Object Instantiation: Cleaner object creation.
Deprecation of Implicit Nullable Types: Safer and clearer code.
Lazy Objects: Save resources by delaying object creation.

These updates will make PHP even more enjoyable to use, whether you're a beginner or an experienced developer. Start exploring PHP 8.4 today!

VSCode: LiveServer for PHP

Stevie G — Wed, 04 Oct 2023 11:37:51 +0000

A lot of developers have probably heard of the Live Server extension which is available in the Visual Studio Code Marketplace.

It primarily functions with static webpages like HTML but can also handle dynamic webpages such as PHP, NodeJs, and ASP.NET in a clever manner.

In the example below, I'll guide you through the installation of Live Server to work seamlessly with both types of webpages (static & dynamic).

Install PHP Server and Live Server from the Visual Studio Code Marketplace.
Create a PHP file, for instance, index.php, and place it in a sub-directory (let's say 'demo') under /var/www/html/, like /var/www/html/demo/
Install the Live Server Chrome extension in your Chrome browser and customize it as follows:
Click on the 'Go Live' button in the bottom right hand corner of the Visual Studio Code.
Next, open the index.php file located under /var/www/html/demo/ in Visual Studio Code. Right-click and select 'PHP Server: Reload Server', then 'PHP Server: Open file in browser'.
In your browser, simply open the IP address http://localhost:3000/demo/index.php

You should not be able to use LiveServer for both static and dynamic websites :)

🔗 Importance of Source Code Control: A Guide to Git

Stevie G — Wed, 04 Oct 2023 09:01:13 +0000

As software developers, we strive to create high-quality applications that are efficient, reliable, and scalable. One of the crucial aspects of maintaining code quality and ensuring smooth collaboration within a development team is source code control. It provides a structured way to manage changes to your codebase, track revisions, and work together seamlessly. In this post, we'll explore the significance of source code control and provide a tutorial on Git, one of the most widely used version control systems.

Why Source Code Control Matters
1️⃣ Version Tracking: With source code control, you have a detailed history of all changes made to your codebase. It allows you to see who made the changes, when they were made, and what modifications were implemented. This information is invaluable for debugging, troubleshooting, and understanding the evolution of your project.

2️⃣ Collaboration: Source code control systems enable effective collaboration among team members. Multiple developers can work on different features or bug fixes simultaneously without interfering with each other's work. The system tracks changes made by each individual and merges them together intelligently, resolving conflicts if necessary.

3️⃣ Rollbacks and Revisions: Mistakes happen, and sometimes code changes don't work as expected. With source code control, you can easily roll back to a previous version of your code, undoing any undesirable modifications. This capability provides a safety net and allows you to experiment without the fear of irreversible damage.

4️⃣ Branching and Merging: Source code control systems, such as Git, support branching, allowing developers to create separate branches for specific features, bug fixes, or experiments. This isolation helps in keeping the main codebase stable while new features are being developed. Once the changes are complete, branches can be merged back into the main codebase seamlessly.

5️⃣ Team Accountability: Source code control promotes accountability within a development team. By tracking changes, it becomes easier to identify the author responsible for a specific piece of code. This accountability fosters a sense of ownership and encourages developers to write clean, maintainable code.

Now that we understand the importance of source code control, let's dive into a tutorial on Git, a popular distributed version control system.

Git Tutorial: Getting Started
Git is a powerful and widely adopted version control system that offers a range of features for managing source code. Here's a step-by-step guide to help you get started:

Step 1: Install Git
Visit the official Git website (https://git-scm.com/) and download the appropriate version for your operating system.
Run the installer and follow the on-screen instructions to complete the installation.

Step 2: Configure Git
Open a terminal or command prompt and set up your name and email address using the following commands:

$ git config --global user.name "Your Name"
$ git config --global user.email "your@email.com"

Step 3: Create a New Repository
Navigate to the directory where you want to create your repository.
Initialize a new Git repository using the following command:

$ git init

Step 4: Add and Commit Changes
Create or copy your project files into the repository directory.
Add the files to the Git repository using the following command:

$ git add .

Commit the changes with a meaningful message:

$ git commit -m "Initial commit"

Step 5: Branching and Merging
Create a new branch for your feature or bug fix:

$ git branch new-feature

Switch to the new branch:

$ git checkout new-feature

Make your changes, add, and commit them.
Switch back to the main branch:

$ git checkout main

Merge the new-feature branch into the main branch:

$ git merge new-feature

Step 6: Pushing and Pulling Changes
If you're collaborating with a remote repository (e.g., on GitHub), you'll need to push your changes:

$ git push origin main

To retrieve and incorporate changes made by others, use the following command:

$ git pull origin main

Advanced Git Features
Git offers a plethora of advanced features to enhance your version control workflow. Here are a few noteworthy ones:

1️⃣ Git Stash: Allows you to save changes that are not ready to be committed yet, providing a way to switch branches without committing incomplete work. Stashed changes can be reapplied later.
Stash your changes:

$ git stash

Apply the stashed changes:

$ git stash apply

2️⃣ Git Rebase: Enables you to modify the commit history by combining, rearranging, or deleting commits. It can help create a cleaner, more organized commit history.
Interactively rebase commits:

$ git rebase -i <commit>

Squash multiple commits into one:

$ git rebase -i HEAD~3

3️⃣ Git Tagging: Allows you to assign meaningful tags to specific commits, such as marking releases or important milestones in your project. Tags provide a way to reference specific versions easily.
Create an annotated tag:

$ git tag -a v1.0 -m "Release version 1.0"

List all tags:

$ git tag

4️⃣ Git Cherry-pick: Lets you select individual commits from one branch and apply them to another. It's useful when you need to incorporate specific changes without merging the entire branch.
Cherry-pick a commit:

$ git cherry-pick <commit-hash>

5️⃣ Git Hooks: Allows you to automate tasks or run custom scripts before or after specific Git actions, such as committing, pushing, or merging. Hooks can be used to enforce coding standards, run tests, or trigger deployment processes.
Create a pre-commit hook:
In the .git/hooks directory, create a file named pre-commit (without any file extension).
Add your desired script or commands to the file.
Make the file executable:

 $ chmod +x .git/hooks/pre-commit

GUI-Based Git Management Software
If you're not comfortable with the command line interface, there are several GUI-based Git management tools available that provide a visual interface for interacting with Git. These tools offer a more user-friendly experience and can simplify the Git workflow. Some popular GUI-based Git management software includes:

1️⃣ GitKraken: A cross-platform Git client that provides a visually appealing interface for executing Git commands, visualizing branches, and simplifying complex operations like rebasing and merging.
Website: https://www.gitkraken.com/

2️⃣ Sourcetree: A free Git client for Windows and macOS that offers an intuitive interface for managing repositories, visualizing commit history, and simplifying branching and merging operations.
Website: https://www.sourcetreeapp.com/

3️⃣ GitHub Desktop: A desktop application provided by GitHub that allows you to interact with Git repositories visually. It provides an easy way to clone repositories, commit changes, create branches, and push and pull changes.
Website: https://desktop.github.com/

These tools provide an alternative to the command line interface and can be a great choice if you prefer a more visual and interactive way of working with Git.

Remember, adopting source code control practices like Git can greatly benefit your development process, enabling efficient collaboration, version tracking, and code stability. Embrace the power of version control and take your software development endeavors to new heights!

VSCode Crash Course

Stevie G — Wed, 04 Oct 2023 01:54:38 +0000

Getting VSCode

Open your Web Browser:
Launch your preferred web browser, such as Chrome, Firefox, or Edge.
Go to the Official Download Site
Download the VSCode installer for your operating system and install it.

Extensions

Name: Auto Close Tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
VS Marketplace Link: Download

Name: Auto Rename Tag
Description: Auto rename paired HTML/XML tag
VS Marketplace Link: Download

Name: Better Comments
Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
VS Marketplace Link: Download

Name: Bookmarks
Description: Mark lines and jump to them
VS Marketplace Link: Download

Name: Code Spell Checker
Description: Spelling checker for source code
VS Marketplace Link: Download

Name: CodeSnap
Description: 📷 Take beautiful screenshots of your code
VS Marketplace Link: Download

Name: Color Highlight
Description: Highlight web colors in your editor
VS Marketplace Link: Download

Name: CSS Peek
Description: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
VS Marketplace Link: Download

Name: DotENV
Description: Support for dotenv file syntax
VS Marketplace Link: Download

Name: ES7+ React/Redux/React-Native snippets
Description: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
VS Marketplace Link: Download

Name: ESLint
Description: Integrates ESLint JavaScript into VS Code.
VS Marketplace Link: Download

Name: GitLens — Git supercharged
Description: Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
VS Marketplace Link: Download

Name: Icons
Description: Icons for Visual Studio Code.
VS Marketplace Link: Download

Name: indent-rainbow
Description: Makes indentation easier to read
VS Marketplace Link: Download

Name: IntelliCode
Description: AI-assisted development
VS Marketplace Link: Download

Name: IntelliCode API Usage Examples
Description: See relevant code examples from GitHub for over 100K different APIs right in your editor.
VS Marketplace Link: Download

Name: Live Server
Description: Launch a development local Server with live reload feature for static & dynamic pages
VS Marketplace Link: Download

Name: Monokai ST3
Description: Fork Monokai ST3 which realize syntax highlighting from ST3
VS Marketplace Link: Download

Name: Path Intellisense
Description: Visual Studio Code plugin that autocompletes filenames
VS Marketplace Link: Download

Name: PHP Debug
Description: Debug support for PHP with Xdebug
VS Marketplace Link: Download

Name: PHP Intelephense
Description: PHP code intelligence for Visual Studio Code
VS Marketplace Link: Download

Name: Prettier - Code formatter
Description: Code formatter using prettier
VS Marketplace Link: Download

Name: Prettify JSON
Description: Visual Studio Code Prettify JSON Extension
VS Marketplace Link: Download

Name: Quokka.js
Description: JavaScript and TypeScript playground in your editor.
VS Marketplace Link: Download

Name: Remote - SSH
Description: Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
VS Marketplace Link: Download

Name: Remote - SSH: Editing Configuration Files
Description: Edit SSH configuration files
VS Marketplace Link: Download

Name: SQLTools
Description: Connecting users to many of the most commonly used databases. Welcome to database management done right.
VS Marketplace Link: Download

Name: Svg Preview
Description: Preview for Svg files
VS Marketplace Link: Download

Name: Thunder Client
Description: Lightweight Rest API Client for VS Code
VS Marketplace Link: Download

Name: Todo Highlighter
Description: Highlights TODO keyword and lists all todos in the side bar.
VS Marketplace Link: Download

Shortcuts and Pro Tips

VSCode Tips & Tricks
VSCode Shortcuts
VIDEO - 25 VS Code Productivity Tips and Speed Hacks

ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox

Stevie G — Wed, 24 Feb 2021 01:05:16 +0000

If you have ever used the ES7 React, Redux, GraphQL, React-Native snippets VSCode Extension, you've probably become so used to using the shorthand prefixes to speed up your development process.

Sometimes when we want to throw something together quickly on CodeSandbox.io and then realised you don't have the ES7 React, Redux, GraphQL, React-Native snippets extension and you have to type it our manually, it slows down your entire development process.

Today I will show you how to add the same functionality in your CodeSandbox workspace.

Firstly we will start the process for the JavaScript version of the snippets.

Open the generated.json

Copy the entire file contents of the raw generated.json file.

Now let's head over to CodeSandbox.io and create a SandBox so we can access our settings.

Once you have created a SandBox, go to the File menu, then Preferences, then User Snippets

Then select New Global Snippet File

and name the file snippets.code-snippets

Paste the contents that you copied from the snippets.json into the newly created snippets.code-snippets file and Save.

Congratulations! You have now brought the functionality of the ES7 React, Redux, GraphQL, React-Native snippets extension over to CodeSandbox. Go ahead and try create a new react component as you normally would.

Enjoy and give me a like and follow if this helped you.

Join me on HashNode

The Ultimate Visual Studio Code Shortcuts Guide

Stevie G — Thu, 07 Jan 2021 09:22:20 +0000

Boost your productivity and streamline your workflow with these must-know Visual Studio Code shortcuts. Whether you're a beginner or a seasoned pro, these shortcuts will help you code faster and more efficiently.

1. Autocomplete

Windows/Mac: Tab When beginning to type, hit Tab to intelligently complete the displayed code.

2. Open Command Palette

Windows: Ctrl + Shift + P
Mac: Shift + Cmd + P

The Command Palette will quickly become your best friend as you learn various shortcuts. If you ever forget a shortcut, simply open the Command Palette and search for what you’re trying to do.

3. Find a File

Windows: Ctrl + P
Mac: Cmd + P

Quickly search for a specific file in the current workspace. This works really well in conjunction with the split editor. Hit Cmd + P (or Ctrl + P on Windows), and while continuing to hold the modifier key, keep hitting P to switch between recent files.

4. Toggle Sidebar

Windows: Ctrl + B
Mac: Cmd + B

Straightforward: quickly show or hide the sidebar.

5. Toggle Panel

Windows: Ctrl + J
Mac: Cmd + J

Quickly show or hide the bottom panel. This includes the Terminal, Output, Problems, and Debug Console.

6. Toggle Integrated Terminal

Windows/Mac: Ctrl + `

Quickly show or hide the integrated terminal panel.

7. Highlight Next Instance

Windows: Ctrl + D
Mac: Cmd + D

Select the next occurrence of the current word.

8. Highlight All Instances

Windows: Ctrl + F2
Mac: Fn + Cmd + F2

Select all occurrences of the current word.

9. Highlight All Occurrences of Selection

Windows: Ctrl + Shift + L
Mac: Cmd + Shift + L

Select all occurrences of the selected word.

10. Select a Line

Windows: Ctrl + L
Mac: Cmd + L

Select an entire line of code.

11. Comment/Uncomment a Line of Code

Windows/Mac: Ctrl + /

Comment or uncomment a line of code. This has intelligent language detection and will use the correct syntax for the current language, e.g.,  in HTML.

12. Move by Word

Windows: Ctrl + Left/Right Arrow Key
Mac: Option + Left/Right Arrow Key

Move by word using the left or right arrows while holding the modifier key.

13. Navigate Around Files

Windows: Ctrl + Up/Down/Left/Right Arrow Key
Mac: Cmd + Up/Down/Left/Right Arrow Key

Move to the top, bottom, left, or right extreme of the current file or code faster by holding the modifier key and using arrow keys.

14. Split Editor

Windows: Ctrl + \
Mac: Cmd + \

Split the current editor into two panes to view or edit files side by side.

15. Switch Between Tabs

Windows: Ctrl + Tab
Mac: Cmd + Tab

Quickly switch between open tabs in the editor.

16. Close Editor

Windows: Ctrl + W
Mac: Cmd + W

Close the current editor tab.

17. Open Settings

Windows: Ctrl + ,
Mac: Cmd + ,

Open the settings menu to tweak your VSCode configuration.

18. Open Keyboard Shortcuts

Windows: Ctrl + K, Ctrl + S
Mac: Cmd + K, Cmd + S

View and customise all the shortcuts available in VSCode.

19. Duplicate a Line

Windows: Shift + Alt + Down/Up Arrow
Mac: Shift + Option + Down/Up Arrow

Duplicate the current line or selection either above or below.

20. Delete a Line

Windows: Ctrl + Shift + K
Mac: Cmd + Shift + K

Delete the current line without needing to select it.

21. Move a Line Up or Down

Windows: Alt + Up/Down Arrow
Mac: Option + Up/Down Arrow

Move the current line (or selection) up or down in the editor.

22. Peek Definition

Windows: Alt + F12
Mac: Option + F12

View the definition of a method, variable, or function in a small popup without leaving the current file.

23. Go to Definition

Windows: F12
Mac: F12

Jump directly to the definition of a method, variable, or function in your project.

24. Rename Symbol

Windows: F2
Mac: F2

Rename all instances of a variable, method, or class in the workspace.

25. Format Document

Windows: Shift + Alt + F
Mac: Shift + Option + F

Automatically format your code using the language formatter.

26. Quick Fix

Windows: Ctrl + .
Mac: Cmd + .

Show available fixes or code suggestions for the current issue (e.g., linting errors).

27. Toggle Zen Mode

Windows: Ctrl + K Z
Mac: Cmd + K Z

Focus on your code by hiding all distractions like the sidebar, status bar, and activity bar.

28. Open Recent Workspace

Windows: Ctrl + R
Mac: Cmd + R

Quickly open recently accessed folders or workspaces.

29. Collapse All Folders

Windows: Ctrl + K Ctrl + 0
Mac: Cmd + K Cmd + 0

Collapse all folders in the Explorer view.

30. Expand All Folders

Windows: Ctrl + K Ctrl + J
Mac: Cmd + K Cmd + J

Expand all folders in the Explorer view.

Final Thoughts

If you’ve found any other shortcuts that have saved you time and effort, let me know in the comments below! Sharing is caring, and we all love a good productivity hack.

LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)

Stevie G — Tue, 21 Jan 2020 05:07:11 +0000

Start a basic HTML template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Leaflet WKT Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">

Include Leaflet Draw CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">

Include Leaflet JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js'></script>

Include Leaflet Draw JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js'></script>

Include Leaflet Editable JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdn.jsdelivr.net/gh/Leaflet/Leaflet.Editable@1.2.0/src/Leaflet.Editable.js'></script>

Include OpenLayers JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://openlayers.org/api/OpenLayers.js'></script>

Put a div element with the id map where you want your map to be:

<div id="map"></div>

Make sure the map container has a defined height, for example by setting it in CSS:

body {
  padding: 0;
  margin: 0;
}
html,
body,
#map {
  height: 100%;
}

Now you’re ready to initialize the map and do some stuff with it.

Lets start by setting up the BaseMap services. See (Docs) for more info:

//Init Overlays
var overlays = {};

//Init BaseMaps
var basemaps = {
  "OpenStreetMaps": L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "osm.streets"
    }
  ),
  "Google-Map": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.street"
    }
  ),
  "Google-Satellite": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.satellite"
    }
  ),
  "Google-Hybrid": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.hybrid"
    }
  )
};

Next we setup the map options such as center and zoom.

//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};

Finally we can initialise the map

//Render Main Map
var map = L.map("map", mapOptions);

Initialise Layer Control and add it to the Map:

var layerControl = L.control.layers(basemaps, overlays).addTo(map);

Initialise an editable layer and add it to the Map:

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

Initialise the Leaflet Draw Control and add it to the Map:

var drawControl = new L.Control.Draw({
  position: 'topright',
  draw: {
    polyline: true,
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons 
      drawError: {
        color: '#e1e100', // Color the shape will turn when intersects 
        message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect 
      }
    },
    circle: true, // Turns off this drawing tool 
    rectangle: true,
    marker: true
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!! 
    remove: true
  }
});

map.addControl(drawControl);

Setup listeners for Leaflet Draw:

//On Draw Create Event
map.on(L.Draw.Event.CREATED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'marker') {
    layer.bindPopup('LatLng: ' + layer.getLatLng().lat + ',' + layer.getLatLng().lng).openPopup();
  }

  editableLayers.addLayer(layer);
  layerGeoJSON = editableLayers.toGeoJSON();
  alert("GEOJSON FORMAT\r\n" + JSON.stringify(layerGeoJSON));

  var wkt_options = {};
  var geojson_format = new OpenLayers.Format.GeoJSON();
  var testFeature = geojson_format.read(layerGeoJSON);
  var wkt = new OpenLayers.Format.WKT(wkt_options);
  var out = wkt.write(testFeature);

  alert("WKT FORMAT\r\n" + out);
});

//On Draw Edit Event
map.on(L.Draw.Event.EDITED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  layerGeoJSON = editableLayers.toGeoJSON();
  alert("GEOJSON FORMAT\r\n" + JSON.stringify(layerGeoJSON));

  var wkt_options = {};
  var geojson_format = new OpenLayers.Format.GeoJSON();
  var testFeature = geojson_format.read(layerGeoJSON);
  var wkt = new OpenLayers.Format.WKT(wkt_options);
  var out = wkt.write(testFeature);

  alert("WKT FORMAT\r\n" + out);
});

//On Draw Delete Event
map.on(L.Draw.Event.DELETED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  layerGeoJSON = editableLayers.toGeoJSON();
  alert("GEOJSON FORMAT\r\n" + JSON.stringify(layerGeoJSON));

  var wkt_options = {};
  var geojson_format = new OpenLayers.Format.GeoJSON();
  var testFeature = geojson_format.read(layerGeoJSON);
  var wkt = new OpenLayers.Format.WKT(wkt_options);
  var out = wkt.write(testFeature);

  alert("WKT FORMAT\r\n" + out);
});

See it in action on CodePen

Join me on HashNode

Custom Leaflet GUI

Stevie G — Fri, 17 May 2019 12:49:48 +0000

Prerequites:
Font Awesome
Bootstrap 4
jQuery
LeafletJS
Leaflet Draw
Leaflet Sidebar v2

Firstly start a basic HTML5 Template page.



<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Leaflet JS Customisation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

Inside the </head> closing tag, include the following CSS Libraries:



<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
<link rel="stylesheet" href="https://gitcdn.link/repo/nickpeihl/leaflet-sidebar-v2/master/css/leaflet-sidebar.min.css">

Include the following JavaScript libraries just before the </body> closing tag:



<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='https://use.fontawesome.com/releases/v5.8.2/css/all.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js'></script>
<script src='https://gitcdn.link/repo/nickpeihl/leaflet-sidebar-v2/master/js/leaflet-sidebar.min.js'></script>

Create the Sidebar and the Map Canvas by inserting the following code inside the <body></body tags



<div id="sidebar" class="leaflet-sidebar collapsed">
  <!-- Nav tabs -->
  <div class="leaflet-sidebar-tabs">
    <ul role="tablist">
      <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
      <li class="disabled"><a href="#profile" id="toggledraw" role="tab"><i class="fa fa-pen"></i></a></li>
    </ul>
  </div>

  <!-- Tab panes -->
  <div class="leaflet-sidebar-content">
    <div class="leaflet-sidebar-pane" id="home">
      <h1 class="leaflet-sidebar-header">
        Layers
        <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
      </h1>
      <span id="layercontrol"></span>
      <div id="latlng"></div>

    </div>

    <div class="leaflet-sidebar-pane" id="profile">
      <h1 class="leaflet-sidebar-header">Profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
    </div>
  </div>
</div>

<div id="map"></div>

You will need to define the following CSS to set the page and map size:



body {
  padding: 0;
  margin: 0;
}
html,
body,
#map {
  height: 100%;
  font-family: "Roboto", sans-serif;
}

Initialise Leaflet Map options and setup any map baselayers and overlays



//Init Overlays
var overlays = {};

//Init BaseMaps
var basemaps = {
  "OpenStreetMaps": L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "osm.streets"
    }
  ),
  "Google-Map": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.street"
    }
  ),
  "Google-Satellite": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.satellite"
    }
  ),
  "Google-Hybrid": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.hybrid"
    }
  )
};

//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};

Initialise the Leaflet map



//Render Main Map
var map = L.map("map", mapOptions);

We must modify the CSS to prepare the layer control to be separated and placed into the sidebar



/* Leaflet Layers Control */

.leaflet-control-layers {
  border-radius: none;
  box-shadow: none;
}

.leaflet-control-layers-expanded {
  width: 100% !important;
  padding: 0px;
  background-color: transparent;
  border: none !important;
}

#layercontrol {
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#layercontrol .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

Next we initialise the Map zoom control, sidebar and separating the layer control into the sidebar



//Render Zoom Control
L.control
  .zoom({
    position: "topleft"
  })
  .addTo(map);

var sidebar = L.control
  .sidebar({
    autopan: false,
    container: "sidebar",
    position: "right"
  })
  .addTo(map);

//Render Layer Control & Move to Sidebar
var layerControl = L.control
  .layers(basemaps, overlays, {
    position: "topright",
    collapsed: false
  })
  .addTo(map);
var oldLayerControl = layerControl.getContainer();
var newLayerControl = $("#layercontrol");
newLayerControl.append(oldLayerControl);
$(".leaflet-control-layers-list").prepend("<strong class='title'>Base Maps</strong><br>");
$(".leaflet-control-layers-separator").after("<br><strong class='title'>Layers</strong>");
//$(".leaflet-control-layers-separator").remove();

Before we initialise the Leaflet Draw control we need to add some CSS to hide the control by default



/* Leaflet Draw */

.leaflet-draw {
  display: none;
}

.leaflet-draw-toolbar {
  display: none;
}

Initialise the Editable Cosmetic Layer and Leaflet Draw control



//######## Leaflet Draw
var editableLayers = new L.FeatureGroup();
layerControl.addOverlay(editableLayers, "Cosmetic Layer");
map.addLayer(editableLayers);

var drawOptions = {
  position: "topleft",
  draw: {
    polyline: true,
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons
      drawError: {
        color: "#e1e100", // Color the shape will turn when intersects
        message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
      }
    },
    circle: true, // Turns off this drawing tool
    rectangle: true,
    marker: true
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: true
  }
};

var drawControl = new L.Control.Draw(drawOptions);
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === "marker") {
    layer
      .bindPopup(
        "LatLng: " + layer.getLatLng().lat + "," + layer.getLatLng().lng
      )
      .openPopup();
  }

  editableLayers.addLayer(layer);
  $(".drawercontainer .drawercontent").html(
    JSON.stringify(editableLayers.toGeoJSON())
  );
});

map.on(L.Draw.Event.EDITSTOP, function(e) {
  $(".drawercontainer .drawercontent").html(
    JSON.stringify(editableLayers.toGeoJSON())
  );
});

map.on(L.Draw.Event.DELETED, function(e) {
  $(".drawercontainer .drawercontent").html("");
});

Next create a jQuery event handler for the toggling of the draw controls



//Edit Button Clicked
$('#toggledraw').click(function(e) {
  $(".leaflet-draw").fadeToggle("fast", "linear");
  $(".leaflet-draw-toolbar").fadeToggle("fast", "linear");
  this.blur();
  return false;
});

Before we can capture map clicks to get the coordinates into the sidebar we need to setup the CSS



#latlng {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 7px 1px 3px;
  margin-left: auto;
  margin-right: auto;
  color: black;
  background-color: white;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: none;
}

Finally we can add the jQuery map click event handler for the capture of coordinates and also create the click event handler for the clipboard copy when the coordinates are clicked in the sidebar



//Handle Map click to Display Lat/Lng
map.on('click', function(e) {
  $("#latlng").html(e.latlng.lat + ", " + e.latlng.lng);
    $("#latlng").show();
});

//Handle Copy Lat/Lng to clipboard
$('#latlng').click(function(e) {
  var $tempElement = $("<input>");
    $("body").append($tempElement);
    $tempElement.val($("#latlng").text()).select();
    document.execCommand("Copy");
    $tempElement.remove();
    alert("Copied: "+$("#latlng").text());
    $("#latlng").hide();
});

You are all done! Feel free to further customise this and show me your creations!

See it in Action on CodePen

and Dark Mode

Join me on HashNode

Getting Started with Leaflet

Stevie G — Fri, 17 May 2019 10:22:13 +0000

Start a basic HTML template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Getting Started with Leaflet JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">

Include Leaflet JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js'></script>

Put a div element with the id map where you want your map to be:

<div id="map"></div>

Make sure the map container has a defined height, for example by setting it in CSS:

body {
  padding: 0;
  margin: 0;
}
html,
body,
#map {
  height: 100%;
}

Now you’re ready to initialize the map and do some stuff with it.

Lets start by setting up the BaseMap services. See (Docs) for more info:

//Init Overlays
var overlays = {};

//Init BaseMaps
var basemaps = {
  "OpenStreetMaps": L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "osm.streets"
    }
  ),
  "Google-Map": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.street"
    }
  ),
  "Google-Satellite": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.satellite"
    }
  ),
  "Google-Hybrid": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.hybrid"
    }
  )
};

Next we setup the map options such as center and zoom.

//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};

Finally we can initialise the map

//Render Main Map
var map = L.map("map", mapOptions);

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let’s add a marker:

var marker = L.marker([-29.0529434318608, 152.01910972595218]).addTo(map);

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

For more information please see the Leaflet Quick Start Guide

See it in action on CodePen

Join me on HashNode

DEV Community: Stevie G

Urgent Security Alert: Protect Your Online Accounts Now!

Why You Need a Password Manager

Free and Paid Password Manager Options

Step 1: Make a Rock-Solid Master Password

Step 2: Lock Down Your Accounts

Bonus: Auto-Fill for the Win

Don’t Wait—Secure Your Stuff Now!

Foreboding AI: The Inevitable Collapse We’re Funding Ourselves

🧠 The Human Mind, Forgotten

🤖 Subscribing to Our Own Unemployment

💸 The Economic Death Spiral

🧬 A Self-Aware Nightmare

⚔️ AI in the War Room

🧩 The Erosion of the Human Spirit

🛑 The Tipping Point

🔁 What Now?

GIT for Web Developers: The Dummy-Proof Guide

What is GIT?

Key Terms & Analogies

SOLO DEVELOPER WORKFLOW (Local Only)

1. Create a New Repository

2. Add Your First Files

3. Work in Branches (Optional but Powerful!)

4. Return to Main Timeline

5. Merge Your Changes Back to Main

6. See Your Project’s Timeline

7. Go Back in Time (Undo a Change)

REMOTE DEVELOPMENT (with GitHub, etc.)

1. Create a GitHub Repo Online

2. Connect Local Project to Remote

3. Working With Remote

Pull latest changes

Push your new work

Clone a repo from GitHub

BRANCHING WORKFLOW (Solo or Team)

1. Main Branch (main)

2. Develop Branch (develop)

3. Feature Branches

4. Release & Hotfix Branches

TEAM WORKFLOW CHRONOLOGY

HANDY COMMANDS

CHEAT SHEET: SOLO DEV FLOW

CHEAT SHEET: TEAM FLOW

TOP TIPS FOR WEB DEVELOPERS

.gitignore Example for Web Dev

ANALOGIES TO REMEMBER

USEFUL VISUALS

SUMMARY

Whats new in PHP 8.4

PHP 8.4: What's New and How to Use It

1. Property Hooks

Example:

2. Asymmetric Visibility

Example:

3. New Array Functions

Example:

4. Simplified Object Instantiation

Example:

5. Deprecation of Implicit Nullable Types

Example:

6. Lazy Objects

Example:

Conclusion

VSCode: LiveServer for PHP

🔗 Importance of Source Code Control: A Guide to Git

VSCode Crash Course

Getting VSCode

Extensions

Shortcuts and Pro Tips

ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox

The Ultimate Visual Studio Code Shortcuts Guide

1. Autocomplete

2. Open Command Palette

3. Find a File

4. Toggle Sidebar

5. Toggle Panel

6. Toggle Integrated Terminal

7. Highlight Next Instance

8. Highlight All Instances

1. Main Branch (`main`)

2. Develop Branch (`develop`)

`.gitignore` Example for Web Dev