DEV Community: Omulo Samuel Okoth

Simple Website with SvelteKit

Omulo Samuel Okoth — Fri, 13 Jun 2025 13:04:47 +0000

Are you looking to build a fast, lightweight, and modern personal website with minimal setup? SvelteKit offers a refreshing developer experience and excellent performance out of the box.

Svelte is a JavaScript framework for building user interfaces. Unlike traditional frameworks, it shifts most of the work to compile time, producing highly optimized JavaScript that runs in the browser without using a virtual DOM. You write components using a clean, reactive syntax, and Svelte compiles them into efficient, minimal JavaScript.

SvelteKit, on the other hand, is a full-stack application framework built on top of Svelte. It provides everything needed to build production-grade web apps including routing, server-side rendering (SSR), API endpoints, data loading, and deployment tools. While Svelte handles the UI components, SvelteKit manages the entire app structure and runtime behavior.

This guide walks you through creating a very simple SvelteKit site from setup to deployment preview.

Project Goal

Create a basic personal site with the following:

Home page

About page

Contact form (no backend, just an alert message)

Simple layout and navigation

Step 1: Prerequisites

Before starting, ensure you have the following installed on your system:
Install Node.js (version 18 or newer is recommended)

To check your version:

node -v

If not installed, you can install it using your package manager or via nvm:

Using apt (Ubuntu)

sudo apt install nodejs npm

using nvm (recommended)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 18

Step 2: Create a SvelteKit Project

Run the following command to create a new SvelteKit project where simpleesvelt is the name of the website:

$ npx sv create simpleesvelt

Then follow the guideline bellow:

┌  Welcome to the Svelte CLI! (v0.8.10)
│
◇  Which template would you like?
│  ❯ SvelteKit minimal       ← (Select this)
│    SvelteKit demo
│    SvelteKit skeleton
│    Vanilla JS
│
◇  Add type checking with TypeScript?
│  ❯ Yes, using JavaScript with JSDoc comments   ← (Select this)
│    Yes, using TypeScript syntax
│    No
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  ◉ none    ← (Make sure none is selected, press Enter)
│  ◯ ESLint
│  ◯ Prettier
│  ◯ Playwright
│  ◯ Vitest
│
◇  Which package manager do you want to install dependencies with?
│  ❯ npm     ← (Select this or your preferred one)
│    yarn
│    pnpm
│
◇  Installing dependencies with npm...

Step 3: Project Structure Overview

Add src/routes/about/+page.svelte, src/routes/+layout.svelte and src/routes/contact/+page.svelte pages.
Here is how you file structure should look like:

simpleesvelt/
├── src/
│   ├── app.css                  # Global CSS file
│   ├── app.html                 #  HTML shell (defines <head>, links to app.css)
│   ├── routes/
│   │   ├── +layout.svelte       #  Shared layout for nav and page slot
│   │   ├── +page.svelte         #  Home page
│   │   ├── about/
│   │   │   └── +page.svelte     #  About page
│   │   └── contact/
│   │       └── +page.svelte     #  Contact page
├── static/                      #  Public assets like favicon.png
├── svelte.config.js
├── vite.config.js
├── package.json
└── ...

Step 4: Install Dependencies

Navigate into the project directory and install the required dependencies:

cd simpleesvelt
npm install

Step 5: Build Pages
Home Page – src/routes/+page.svelte

<script>
  import { onMount } from 'svelte';
</script>

<h1>Welcome to My Simple Svelte Site</h1>
<p>This is the home page.</p>

<nav>
  <a href="/about">About</a> |
  <a href="/contact">Contact</a>
</nav>

About Page – src/routes/about/+page.svelte

<h3>About Me</h3>
<p>I'm learning Svelte and loving it!</p>

<a href="/">Back to Home</a>

Contact Page – src/routes/contact/+page.svelte

<script>
  let name = '';
  let message = '';

  const submitForm = () => {
    alert(`Thank you, ${name}! We'll respond soon.`);
    name = '';
    message = '';
  };
</script>

<h3>Contact Me</h3>
<script>
  let name = '';
  let message = '';

  function submitForm() {
    alert(`Thank you, ${name}! Your message has been received:\n\n"${message}"`);

    // Reset form (optional)
    name = '';
    message = '';
  }
</script>

<h1>Contact Us</h1>

<form on:submit|preventDefault={submitForm}>
  <label>
    Name:
    <input bind:value={name} required />
  </label>
  <br />

  <label>
    Message:
    <textarea bind:value={message} required></textarea>
  </label>
  <br />

  <button type="submit">Send</button>
</form>

Step 6: Add Basic Styling

Create a new file at src/app.css and add the following:

body {
    font-family: sans-serif;
    background: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;  /* horizontally centers content */
  }


  nav a {
    -ms-flex-item-align: center;
    margin-right: 1rem;
    text-decoration: none;
    color: #0070f3;
  }

Import this CSS file in src/routes/+layout.svelte:

<script>
  import '../app.css';
</script>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<slot />

Step 7: Build and Preview for Production

Once you are ready to prepare your site for deployment, build it and preview the PORT and output:

npm run build
npm run preview

Open your browser and go to:

http://localhost:PORT

It's that simple and your site is now production-ready.

Final Thoughts

SvelteKit gives you a modern, minimal, and scalable foundation for building fast and secure websites with less boilerplate and more control. You've now laid down the groundwork for projects using a framework accessible enough for beginners. Whether you're building a portfolio, a blog, or your first client project, this setup can grow with your skills. Keep your code clean, your structure intentional, and always build with security and accessibility in mind.

How to Hash Passwords Securely Using SHA-256 in Go

Omulo Samuel Okoth — Tue, 12 Nov 2024 15:44:53 +0000

Introduction

Storing passwords securely is crucial to protecting user data. Storing passwords in plain text is a significant security risk, but hashing can mitigate this threat. In this article, we’ll explore how to securely hash passwords using SHA-256 in Go. While bcrypt and Argon2 are generally recommended for password hashing due to their added security features, we can enhance the security of SHA-256 by incorporating a unique salt and multiple iterations.
Why SHA-256 for Password Hashing?
SHA-256 produces a unique, 256-bit fixed-length hash, effectively transforming any password into a consistent, secure format. However, due to its speed, SHA-256 can be vulnerable to brute-force attacks. Therefore, combining SHA-256 with techniques like salting and iteration can significantly improve its security.

Importing necessary packages

First, let's import the necessary packages for cryptographic hashing and encoding:

package main

   import (
    "crypto/sha256"
    "encoding/hex"
    "fmt"
   )

Hash the Password

Here’s a basic SHA-256 function that hashes a password:

func hash password(password string) string {
    hasher := sha256.New()
    hasher.Write([]byte(password))
    return hex.EncodeToString(hasher.Sum(nil))
}

Add Salt for Extra Security

A salt is a unique random string added to each password. It ensures that even if two users have the same password, their hashes will be different, preventing rainbow table attacks.

func hashPasswordWithSalt(password, salt string) string {
    hasher := sha256.New()
    hasher.Write([]byte(salt + password))
    return hex.EncodeToString(hasher.Sum(nil))
}

Note:

It's essential to generate a unique salt for each user's password and store it securely in the database.
Add Iterations for More Security
Adding multiple iterations to the hashing process slows down brute-force attacks by increasing the time required to compute the hash.

Here's how to implement this:

func hashPasswordWithSaltAndIterations(password, salt string, iterations int) string {
    hash := salt + password
    for i := 0; i < iterations; i++ {
        hasher := sha256.New()
        hasher.Write([]byte(hash))
        hash = hex.EncodeToString(hasher.Sum(nil))
    }
    return hash
}

Example Usage
Let’s see how these techniques work in practice. The following example hashes a password with both a salt and iterations:

func main() {
    password := "MySecurePassword"
    salt:= "unique salt" // Generate a unique, random salt for each user
    iterations := 1000    // Choose a safe iteration count
    hashed password := hashPasswordWithSaltAndIterations(password, salt, iterations)
    fmt.Println("Hashed Password:", hashedpassword)
}

Key Points to Remember

Generate Secure Salts: Use Go’s crypto/rand to generate secure, unique salts for each user.
Store Salt and Hash: Save both the salt and the hashed password in your database. The salt should never be kept secret but must be unique to each user.
Consider bcrypt or Argon2: For even better security, consider using bcrypt or Argon2 for password hashing, especially in high-security systems. These algorithms are specifically designed for secure password storage.

Conclusion

While SHA-256 isn't the ideal choice for password hashing in high-security systems, combining it with salting and multiple iterations can significantly strengthen password protection. This approach helps deter brute-force attacks and keeps your users' data safer. For applications that require the highest security, consider using algorithms like bcrypt or Argon2 instead.

Unleash the Power of Passwords in the DevOps Era

Omulo Samuel Okoth — Mon, 14 Oct 2024 11:20:38 +0000

Introduction

In our increasingly digital world, where cyber threats loom large and data breaches can have serious repercussions, effective password management has never been more crucial. This article explores the intricate landscape of password management across various domains covering organizations, personal devices, social media, community accounts, personal computers, and developer-related and product-specific passwords. We will discuss best practices, tools, and policies to strengthen password security in the era of DevOps.

Why Password Management Matters

The urgency of effective password management cannot be overstated, especially considering that a significant percentage of data breaches are linked to weak or compromised passwords. Organizations must understand that a strong password strategy is essential for protecting sensitive information and maintaining user trust.

Password Management Best Practices for Organizations

As the need for security and compliance intensifies, organizations are increasingly embracing best practices for password management. Here are some effective strategies:

Password Complexity: Enforce the creation of passwords that incorporate a mix of uppercase and lowercase letters, numbers, and special characters to bolster security against brute-force attacks.

Password Lifespan and Expiration: Establish policies dictating the maximum duration for which passwords can be used. Recommendations often suggest changing passwords regularly to mitigate the risk of unauthorized access. However, it’s important to strike a balance, as frequent changes may lead to users choosing predictable patterns.

Two-Factor Authentication (2FA): Implementing 2FA can significantly enhance security by requiring a second form of verification, with methods that provide verification codes at the user’s convenience.

Secure Password Recovery Options: Establish secure methods for verifying user identity during password resets.

The Role of DevOps

In a DevOps framework, automation is key to effective password management. Tools enable teams to store and manage sensitive credentials securely, allowing applications to retrieve passwords programmatically without exposing them in the codebase.

Embedding Security in the Development Lifecycle: DevOps encourages the integration of security practices throughout the software development lifecycle. This approach emphasizes that security should not be an afterthought but a fundamental component from the very beginning.

Automated Security Testing: By incorporating security testing tools and practices into the CI/CD (Continuous Integration/Continuous Deployment) pipeline, DevOps teams can automatically scan for vulnerabilities, including weak passwords or insecure configurations.

Credential Management: DevOps practices advocate for the use of automated tools to manage and rotate credentials securely, allowing teams to store, manage, and access sensitive information programmatically without hardcoding them in applications.

Environment Variables: Developers can utilize environment variables for storing passwords and sensitive information, ensuring they remain separate from the source code.

Configuration as Code: DevOps promotes the use of Infrastructure as Code (IaC), where infrastructure is provisioned and managed through code. This practice can help enforce security configurations, including password policies, across environments automatically.

Monitoring and Incident Response: DevOps encourages the implementation of monitoring tools that can detect unauthorized access attempts or unusual activities related to password usage, facilitating rapid incident response through automated scripts.

Collaboration and Communication: DevOps promotes a culture of collaboration among development, operations, and security teams to ensure effective password management strategies are communicated and understood across the organization.

User Education and Training: DevOps teams can contribute to security awareness initiatives by providing training on secure password practices, ensuring all members of the organization understand the importance of password security and adhere to established practices.

Compliance and Governance: DevOps can help organizations align their password management practices with relevant compliance requirements. This includes implementing policies for password complexity, age, and storage, along with audit trails to track changes made to password policies.

Best Practices for Personal Gadgets

As personal devices become ubiquitous, ensuring their security is paramount. Best practices include:

Unique Passwords: Avoid reusing passwords across multiple devices to enhance security.
Biometric Authentication: Utilize biometric features like fingerprint scanning and facial recognition to enhance security and streamline access.
Challenges with IoT Devices: Many Internet of Things (IoT) devices are shipped with default passwords that can be easily exploited. Users should promptly change default passwords and keep their device firmware updated to guard against vulnerabilities.

Securing Passwords on Social Media Platforms

Social media accounts are prime targets for cybercriminals. Effective password management strategies include:

Using Password Managers: Tools can help users generate and securely store unique passwords for each account.
Two-Factor Authentication: Implementing 2FA adds an extra layer of security, making unauthorized access significantly more difficult.
Awareness of Phishing Attacks: Educating users to recognize suspicious emails and links is essential to combat phishing attacks that aim to obtain passwords.

Managing Passwords for Community Accounts

Community accounts, such as those used in collaborative tools, come with their own set of challenges:

Shared Access Vulnerabilities: Using shared passwords can expose community accounts to risks. Utilizing role-based access controls can determine who can access specific channels and files.

Regular Password Updates: It’s crucial to update shared passwords regularly, especially when team members depart, to prevent unauthorized access to sensitive information.

Password Management on Personal Computers

For individual computers, several measures can enhance password security:

Encrypting Sensitive Files: Utilizing software to encrypt files and folders can ensure that sensitive information is protected, even if the device is lost or stolen.

Secure Backups: Regularly backing up password databases is vital to maintain access while reducing the risk of data loss.

Password Management for Developers and Creators

Developers and creators face unique challenges regarding password management, especially when working with various tools and platforms:

API Keys and Tokens: Developers often handle API keys and tokens, which require the same level of security as passwords. Developers should avoid hardcoding these credentials in their code, opting instead for secure management practices.

Attention to Version Control Systems: Passwords related to version control systems must be handled with care, and implementing security measures like 2FA and password managers can mitigate risks.

Dealing with Default Passwords on Products

Many products, particularly software and hardware, come with default passwords that users frequently neglect to change:

Routers and IoT Devices: Default credentials should be changed immediately upon installation to prevent unauthorized access.

Enterprise Software: Organizations must change default admin credentials upon installation to prevent unauthorized access to sensitive data.

Establishing Effective Password Policies

Creating robust password policies is vital for organizations. Key elements include:
Defining Policies: Organizations should outline password policies that specify requirements for complexity, length, expiration, and secure storage.
Continuous Training: Regular training sessions keep employees informed about evolving security threats.
Standards: Organizations must align their password management practices with relevant compliance requirements, implementing policies accordingly.

Emerging Trends in Password Management

As technology continues to advance, password management practices are evolving. Notable trends include:

Passwordless Authentication: Innovations aim to eliminate passwords altogether, enhancing security and user convenience.

Decentralized Identity Solutions: Exploring decentralized identity management empowers users to control their credentials independently of a central authority.

Planning for Incident Response

Having a clear incident response plan for password breaches is crucial. Key elements include:

Breach Response Protocols: Organizations should have well-defined breach response protocols that outline immediate actions in the event of a password breach, including notifying affected users to change their passwords and investigating the root cause of the breach.

Regular Security Audits: Conducting audits to evaluate password security policies and practices enables organizations to identify vulnerabilities and improve defenses.

Importance of User Education and Awareness Programs

User education is paramount in enhancing password security:

Ongoing Training Programs: Organizations should implement regular training sessions to inform employees about password security best practices and emerging threats.

Conclusion

In today’s interconnected world, effective password management is vital for mitigating the risk of cyber incidents. By adopting best practices across various domains organizations, personal devices, social media, community accounts, and developer-related passwords individuals and businesses can significantly enhance their security posture. Ongoing education, robust policies, and the adoption of modern technologies are critical in staying ahead of evolving threats.

As we navigate the complexities of digital security, prioritizing password management as a fundamental aspect of cybersecurity strategy is essential. Organizations must remain adaptable to changing threats, ensuring their password management practices evolve in tandem with technological advancements and user behavior.

DEV Community: Omulo Samuel Okoth

Simple Website with SvelteKit

Project Goal

Final Thoughts

Further Reading & Resources

How to Hash Passwords Securely Using SHA-256 in Go

Introduction

Importing necessary packages

Hash the Password

Add Salt for Extra Security

Key Points to Remember

Conclusion

Unleash the Power of Passwords in the DevOps Era

Introduction

Why Password Management Matters

Password Management Best Practices for Organizations

The Role of DevOps

Best Practices for Personal Gadgets

Securing Passwords on Social Media Platforms

Managing Passwords for Community Accounts

Password Management on Personal Computers

Password Management for Developers and Creators

Dealing with Default Passwords on Products

Establishing Effective Password Policies

Emerging Trends in Password Management

Planning for Incident Response

Importance of User Education and Awareness Programs

Conclusion