Git Product home page Git Product logo

my-site's Introduction

SwyxKit

A lightly opinionated starter for SvelteKit blogs:

Feel free to rip out these opinions as you see fit of course.

"Does anyone know what theme that blog is using? It looks really nice." - anon

Live Demo

See https://swyxkit.netlify.app/ (see Deploy Logs)

screenshot of swyxkit in action

screenshot of swyxkit in action

Users in the wild

Key Features and Design Considerations

Features

All the basic things I think a developer website should have.

  • Light+Dark mode (manual toggle driven by choice)
  • GitHub-Issues-driven blog with index
  • RSS (at /rss.xml), and Sitemap (at sitemap.xml) with caching

Performance/Security touches

Fast (check the lighthouse scores) and secure.

Minor design/UX touches

The devil is in the details.

Developer Experience

Making this easier to maintain and focus on writing not coding.

Overall, this is a partial implementation of https://www.swyx.io/the-surprisingly-high-table-stakes-of-modern-blogs/

Setup

Step 0: Clone project (and deploy)

npx degit https://github.com/sw-yx/swyxkit
export GH_TOKEN=your_gh_token_here # Can be skipped if just trying out this repo casually
npm install
npm run start # Launches site locally at http://localhost:5173/ and histoire at http://localhost:6006/

You should be able to deploy this project straight to Netlify as is, just like this project is. This project recently switched to use sveltejs/adapter-auto, so you should also be able to deploy to Vercel and Cloudflare, but these 2 deploy targets are not regularly tested (please report/help fix issues if you find them)!

However, to have new posts show up, you will need to personalize the siteConfig (see next step) - take note of APPROVED_POSTERS_GH_USERNAME in particular (this is an allowlist of people who can post to the blog by opening a GitHub issue, otherwise any rando can blog and that's not good).

Deploy to Netlify

# These are just untested, suggested commands, use your discretion to hook it up or deploy wherever
git init
git add .
git commit -m "initial commit"
gh repo create # Make a new public GitHub repo and name it whatever
git push origin master
ntl init # Use the Netlify cli to deploy, assuming you already installed it and logged in. You can also use `ntl deploy`

Step 1: Personalization Configuration

As you become ready to seriously adopt this, remember to configure /lib/siteConfig.js - just some hardcoded vars I want you to remember to configure.

export const SITE_URL = 'https://swyxkit.netlify.app';
export const APPROVED_POSTERS_GH_USERNAME = ['sw-yx']; // IMPORTANT: change this to at least your GitHub username, or add others if you want
export const GH_USER_REPO = 'sw-yx/swyxkit'; // Used for pulling GitHub issues and offering comments
export const REPO_URL = 'https://github.com/' + GH_USER_REPO;
export const SITE_TITLE = 'SwyxKit';
export const SITE_DESCRIPTION = "swyx's default SvelteKit + Tailwind starter";
export const DEFAULT_OG_IMAGE =
	'https://user-images.githubusercontent.com/6764957/147861359-3ad9438f-41d1-47c8-aa05-95c7d18497f0.png';
export const MY_TWITTER_HANDLE = 'swyx';
export const MY_YOUTUBE = 'https://youtube.com/swyxTV';
export const POST_CATEGORIES = ['Blog']; // Other categories you can consider adding: Talks, Tutorials, Snippets, Podcasts, Notes...
export const GH_PUBLISHED_TAGS = ['Published']; // List of allowed issue labels, only the issues having at least one of these labels will show on the blog.

Of course, you should then go page by page (there aren't that many) and customize some of the other hardcoded items, for example:

  • Add the Utterances GitHub app to your repo/account to let visitors comment nicely if logged in.
  • The src/Newsletter.svelte component needs to be wired up to a newsletter service (I like Buttondown and TinyLetter). Or you can remove it of course.
  • Page Cache-Control policy and SvelteKit maxage
  • Site favicons (use https://realfavicongenerator.net/ to make all the variants and stick it in /static)
  • (If migrating content from previous blog) setup Netlify redirects at /static/_redirects

This blog uses GitHub as a CMS - if you are doing any serious development at all, you should give the GH_TOKEN env variable to raise rate limit from 60 to 5000.

When deploying, don't forget to set it in Netlify: https://app.netlify.com/sites/YOUR_SITE/settings/deploys#environment

Step 2: Make your first post

Open a new GitHub issue on your new repo, write some title and markdown in the body, add a Published tag (or any one of the label set in GH_PUBLISHED_TAGS), and then save.

You should see it refetched in local dev or in the deployed site pretty quickly. You can configure SvelteKit to build each blog page up front, or on demand. Up to you to trade off speed and flexibility.

Here's a full reference of the YAML frontmatter that swyxkit recognizes - ALL of this is optional and some of have aliases you can discover in /src/lib/content.js. Feel free to customize/simplify of course.

---
title: my great title
subtitle: my great subtitle
description: my great description
slug: my-title
tags:
  - foo
  - bar
  - baz
category: blog
image: https://my_image_url.com/img-4.png
date: 2023-04-22
canonical: https://official-site.com/my-title
---

my great intro

## my subtitle

lorem ipsum 

If your Published post (any post with one of the labels set in GH_PUBLISHED_TAGS) doesn't show up, you may have forgotten to set APPROVED_POSTERS_GH_USERNAME to your GitHub username in siteConfig.

If all of this is annoying feel free to rip out the GitHub Issues CMS wiring and do your own content pipeline, I'm not your boss. MDSveX is already set up in this repo if you prefer not having a disconnected content toolchain from your codebase (which is fine, I just like having it in a different place for a better editing experience). See also my blogpost on the benefits of using GitHub Issues as CMS.

Optimizations to try after you are done deploying

  • Customize your JSON+LD for FAQ pages, organization, or products. There is a schema for blogposts, but it is so dead simple that SwyxKit does not include it.
  • Have a process to submit your sitemap to Google? (or configure robots.txt and hope it works)
  • Testing: make sure you have run npx playwright install and then you can run npm run test

Further Reading

Acknowledgements

Todos

  • Implement ETag header for GitHub API
  • Store results in Netlify build cache
  • Separate hydration path for mobile nav (so that we could hydrate=false some pages)
  • Custom components in MDX, and rehype plugins
  • (maybe) Dynamic RSS in SvelteKit:
    • SvelteKit Endpoints don't take over from SvelteKit dynamic param routes ([slug].svelte has precedence over rss.xml.js)
      • Aug 2022: now solved due to PlusKit
    • RSS Endpoint runs locally but doesn't run in Netlify because there's no access to the content in prod (SvelteKit issue)

my-site's People

Contributors

swyxio avatar ak4zh avatar mklepac90 avatar mattcroat avatar dependabot[bot] avatar coderj10n avatar vitorarjol avatar taismassaro avatar rocketrene avatar paoloricciuti avatar mytakeon avatar martypenner avatar logan-anderson avatar hdoro avatar georgeoffley avatar farosato avatar dmoosocool avatar

Watchers

 avatar

my-site's Issues

Design Patterns -Singleton Pattern

https://www.patterns.dev/posts/singleton-pattern

Singleton Pattern

Singletons are classes which can be instantiated once, and can be accessed globally. This single instance can be shared throughout our application, which makes Singletons great for managing global state in an application.

Tradeoffs

Restricting the instantiation to just one instance could potentially save a lot of memory space.

Singletons are actually considered an anti-pattern, and can (or.. should) be avoided in JavaScript.

In many programming languages, such as Java or C++, it's not possible to directly create objects the way we can in JavaScript. In those object-oriented programming languages, we need to create a class, which creates an object.

However, the class implementation shown in the examples above is actually overkill. Since we can directly create objects in JavaScript, we can simply use a regular object to achieve the exact same result.

Global behavior

A Singleton instance should be able to get referenced throughout the entire app. Global variables essentially show the same behavior: since global variables are available on the global scope, we can access those variables throughout the application.

Having global variables is generally considered as a bad design decision. Global scope pollution can end up in accidentally overwriting the value of a global variable, which can lead to a lot of unexpected behavior.

In ES2015, creating global variables is fairly uncommon. The new let and const keyword prevent developers from accidentally polluting the global scope, by keeping variables declared with these two keywords block-scoped. The new module system in JavaScript makes creating globally accessible values easier without polluting the global scope, by being able to export values from a module, and import those values in other files.

However, the common usecase for a Singleton is to have some sort of global state throughout your application. Having multiple parts of your codebase rely on the same mutable object can lead to unexpected behavior.

State management in React

In React, we often rely on a global state through state management tools such as Redux or React Context instead of using Singletons. Although their global state behavior might seem similar to that of a Singleton, these tools provide a read-only state rather than the mutable state of the Singleton.

Backend Developer - Operating Systems - General Knowledge

https://roadmap.sh/backend

What is an operating system?

Source: https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/

Computer Basics: Understanding Operating Systems

  • It manages the computer's memory and processes, as well as all of its software and hardware.
  • It also allows you to communicate with the computer without knowing how to speak the computer's language.
  • Most of the time, there are several different computer programs running at the same time, and they all need to access your computer's central processing unit (CPU), memory, and storage. The operating system coordinates all of this to make sure each program gets what it needs.
  • Most servers run Linux because it's relatively easy to customize.
  • Operating systems for mobile devices generally aren't as fully featured as those made for desktop and laptop computers, and they aren't able to run all of the same software.

Operating System Summary

Source: https://www.guru99.com/os-tutorial.html

Operating System Interview Questions

https://career.guru99.com/top-50-operating-system-interview-questions/

What is the Operating System?

  • An operating system is a software which acts as an interface between the end user and computer hardware.
  • The OS works as an intermediary between the user and computer. It helps the user to communicate with the computer without knowing how to speak the computer’s language.
  • The kernel is the central component of a computer operating system. The only job performed by the kernel is to the manage the communication between the software and the hardware.
  • Two most popular kernels are monolithic and microkernels
  • The management of processes, devices, files, I/O, storage, and memory are some of the varying functions of an operating system

What is Semaphore?

A semaphore is simply a variable that is non-negative and shared between threads. A semaphore is a signaling mechanism, and a thread that is waiting on a semaphore can be signaled by another thread. It uses two atomic operations, 1) Wait, and 2) Signal for the process synchronization.

A semaphore either allows or disallows access to the resource, which depends on how it is set up.

Components of Operating Systems

An operating system is a large and complex system that can only be created by partitioning into small pieces. These pieces should be a well-defined portion of the system, which carefully defined inputs, outputs, and functions.

Although Mac, Unix, Linux, Windows, and other OS do not have the same structure, most of the operating systems share similar OS system components like File, Process, Memory, I/O device management.

Operating Systems: Crash Course Computer Science

Source: https://www.youtube.com/watch?v=26QPDBe-NB8&ab_channel=CrashCourse

  • An operating system is just a computer program, but with special hardware related privileges that enable it to run and manage other programs.
  • Serve as intermediaries between software programs and hardware peripherals (software abstraction, api's, device drivers)
  • Multitasking - allows many programs to be in progress all at once, sharing the same CPU
  • Memory allocation (physical memory -> virtual memory) - 5:00
  • Memory protection - Memory access rights. Makes sure a program (process) can only access the memory that has been allocated to it.
  • Terminal - Historically, a keyboard and screen that connect to a computer but don't possess any processing power themselves. Allows for a multiple concurrent sessions, with each session (user) being allocated a small portion of the computers resources.
  • Core OS functionality (memory management, multitasking, i/o interfacing) is handled by the kernel (the program at the core of an operating system).

Introduction to Operating System

Source: https://www.youtube.com/watch?v=vBURTt97EkA&list=PL9hkZBQk8d1zEGbY7ShWCZ2n1gtxqkRrS&index=1

  • An operating system is a program that manages the computer hardware.
  • It also provides a basis for application programs and acts as an intermediary between the user and hardware.
  • It handles the allocation of resources & the management of memory and makes sure these things are done in a secure manner.
  • Hardware consists of resources such as the CPU and memory, as well as I/O devices like the mouse and keyboard
  • System programs - programs that exist to interact with & control hardware
  • Application programs - programs that exist to allow the user to perform a specific task or function

Design Patterns - Proxy Pattern

https://www.patterns.dev/posts/proxy-pattern

Proxy Pattern

With a Proxy object, we get more control over the interactions with certain objects. A proxy object can determine the behavior whenever we're interacting with the object, for example when we're getting a value, or setting a value.

Generally speaking, a proxy means a stand-in for someone else. Instead of speaking to that person directly, you'll speak to the proxy person who will represent the person you were trying to reach. The same happens in JavaScript: instead of interacting with the target object directly, we'll interact with the Proxy object.

Mechanics

Instead of interacting with an object directly, we want to interact with a proxy object. In JavaScript, we can easily create a new proxy by creating a new instance of Proxy.

The second argument of Proxy is an object that represents the handler. In the handler object, we can define specific behavior based on the type of interaction. Although there are many methods that you can add to the Proxy handler, the two most common ones are get and set.

A proxy can be useful to add validation. A user shouldn't be able to change person's age to a string value, or give them an empty name. Or if the user is trying to access a property on the object that doesn't exist, we should let the user know.

Reflect

JavaScript provides a built-in object called Reflect, which makes it easier for us to manipulate the target object when working with proxies.

Previously, we tried to modify and access properties on the target object within the proxy through directly getting or setting the values with bracket notation. Instead, we can use the Reflect object. The methods on the Reflect object have the same name as the methods on the handler object.

Tradeoffs

Proxies are a powerful way to add control over the behavior of an object. A proxy can have various use-cases: it can help with validation, formatting, notifications, or debugging.

Overusing the Proxy object or performing heavy operations on each handler method invocation can easily affect the performance of your application negatively. It's best to not use proxies for performance-critical code.

Design Patterns - Provider Pattern

https://www.patterns.dev/posts/provider-pattern

Provider Pattern

In some cases, we want to make available data to many (if not all) components in an application. Although we can pass data to components using props, this can be difficult to do if almost all components in your application need access to the value of the props.

We often end up with something called prop drilling, which is the case when we pass props far down the component tree. Refactoring the code that relies on the props becomes almost impossible, and knowing where certain data comes from is difficult.

Mechanics

Let's say that we have one App component that contains certain data. Far down the component tree, we have a ListItem, Header and Text component that all need this data. In order to get this data to these components, we'd have to pass it through multiple layers of components.

Passing props down this way can get quite messy. If we want to rename the data prop in the future, we'd have to rename it in all components. The bigger your application gets, the trickier prop drilling can be.

This is where the Provider Pattern can help us out! With the Provider Pattern, we can make data available to multiple components. Rather than passing that data down each layer through props, we can wrap all components in a Provider. A Provider is a higher order component provided to us by the Context object. We can create a Context object, using the createContext method that React provides for us.

Each component can get access to the data, by using the useContext hook. The useContext hook lets us read and write data to the context object.

The Provider pattern is very useful for sharing global data. A common usecase for the provider pattern is sharing a theme UI state with many components.

Hooks

We can create a hook to provide context to components. Instead of having to import useContext and the Context in each component, we can use a hook that returns the context we need.

Instead of wrapping the components directly with the Provider component, we can create a HOC that wraps the component to provide its values. This way, we can separate the context logic from the rendering components, which improves the reusability of the provider.

Each component that needs to have access to the ThemeContext, can now simply use the useThemeContext hook.

Tradeoffs

Pros

The Provider pattern/Context API makes it possible to pass data to many components, without having to manually pass it through each component layer.

It reduces the risk of accidentally introducing bugs when refactoring code. Previously, if we later on wanted to rename a prop, we had to rename this prop throughout the entire application where this value was used.

We no longer have to deal with prop-drilling, which could be seen as an anti-pattern. Previously, it could be difficult to understand the dataflow of the application, as it wasn't always clear where certain prop values originated.

Cons

In some cases, overusing the Provider pattern can result in performance issues. All components that consume the context re-render on each state change.

In smaller applications, this won't matter too much. In larger applications, passing a frequently updated value to many components can affect the performance negatively.

To make sure that components aren't consuming providers that contain unnecessary values which may update, you can create several providers for each separate usecase.

The Story So Far

Like most young adults, I had no idea what I wanted from life, or what I wanted to do for employment, when I graduated high school. I went to university under the impression that it would help me answer at least one of those questions. When the time came to select a field of study, I chose "business administration" because it seemed delightfully generic with a wide spread of subject matter that I could leverage into a different path when I made up my mind.

I never made up my mind. I graduated with a major in business and a minor in accounting, which I had somehow picked up along the way.

I would spend the next 8 years working bookkeeping and financial analyst roles for companies in a variety of industries, which helped to keep things fresh and exciting to an extent. I then decided to double down on accounting and pursue my CPA in order to elevate my career to the next level. It was during this grueling endeavour, this deep dive into the world of accounting, that I finally came to a realization - I did not enjoy what I was doing, at all. The idea of spending years getting my designation, only to then then spending the rest of my life performing audits or reconciliations filled me with an absolute sense of dread. I realized it wasn't the work itself that had kept me going the last 8 years; the constant changing of environments, the fact that I always doing something new, had simply masked the fact that I didn't feel any sense of fulfillment or satisfaction.

It was time for a change...

Backend Developer - Operating Systems - General Knowledge Part 2

https://roadmap.sh/backend

Operating System Summary - Advanced Topics

Source: https://www.guru99.com/os-tutorial.html - Advanced stuff

The microkernel

  • A kernel is an important part of an OS that manages system resources.
  • A microkernel is a software or code which contains the required minimum amount of functions, data, and features to implement an operating system.
  • In Monolithic Kernel approach, the entire operating system runs as a single program in kernel mode
  • A Microkernel is the most important part for correct implementation of an operating system.
  • A microkernel comprises only the core functionalities of the system.
  • A monolithic kernel is a large process running in a single address space, whereas Microkernel can be broken down into separate processes called servers.
  • Microkernel architecture is small and isolated therefore it can function better
  • Providing services in a microkernel system are expensive compared to the normal monolithic system

System calls

Summary:

Categories Windows Unix
Process control CreateProcess()ExitProcess()WaitForSingleObject() fork()exit()wait()
Device manipulation SetConsoleMode()ReadConsole()WriteConsole() loctl()read()write()
File manipulation CreateFile()ReadFile()WriteFile()CloseHandle() Open()Read()write()close!)
Information maintanence GetCurrentProcessID()SetTimer()Sleep() getpid()alarm()sleep()
Communication CreatePipe()CreateFileMapping()MapViewOfFile() Pipe()shm_open()mmap()
Protection SetFileSecurity()InitlializeSecurityDescriptor()SetSecurityDescriptorGroup () Chmod()Umask()Chown()

File systems

  • A file is a collection of correlated information which is recorded on secondary or non-volatile storage like magnetic disks, optical disks, and tapes.
  • It provides I/O support for a variety of storage device types.
  • Files are stored on disk or other storage and do not disappear when a user logs off.
  • A File Structure needs to be predefined format in such a way that an operating system understands it.
  • File type refers to the ability of the operating system to differentiate different types of files like text files, binary, and source files.
  • Create find space on disk and make an entry in the directory.
  • Indexed Sequential Access method is based on simple sequential access
  • In Sequential Access method records are accessed in a certain pre-defined sequence
  • The random access method is also called direct random access
  • Three types of space allocation methods are:
  • Linked Allocation
  • Indexed Allocation
  • Contiguous Allocation
  • Information about files is maintained by Directories

Real-time operating systems

  • RTOS is an operating system intended to serve real time application that process data as it comes in, mostly without buffer delay.
  • It offers priority-based scheduling, which allows you to separate analytical processing from non-critical processing.
  • Important components of RTOS system are: 1)The Scheduler, 2) Symmetric Multiprocessing, 3) Function Library, 4) Memory Management, 5) Fast dispatch latency, and 6) User-defined data objects and classes
  • Three types of RTOS are 1) Hard time 2) Soft time ,and 3) Firm time
  • RTOS system occupy very less memory and consume fewer resources
  • Performance is the most important factor required to be considered while selecting for a RTOS.
  • General-Purpose Operating System (GPOS) is used for desktop PC and laptop while Real-Time Operating System (RTOS) only applied to the embedded application.
  • Real-time systems are used in Airlines reservation system, Air traffic control system,etc.
  • The biggest drawback of RTOS is that the system only concentrates on a few tasks.

Remote procedure calls

A remote procedure call is an interprocess communication technique.

  • Three types of RPC are 1) Callback RPC 2)Broadcast RPC, and 3) Batch-mode RPC
  • RPC architecture has mainly five components of the program: 1) Client 2) Client Stub 3)RPC Runtime 4) Server Stub, and 5) Server
  • In RPC method the processes do not share address space
  • RPC offers simple call syntax and known semantics
  • RPC method helps clients to communicate with servers by the conventional use of procedure calls in high-level languages.
  • The biggest drawback of RPC method is that it is highly vulnerable to failure as it involves a communication system, another machine, and another process.

CPU scheduling

Process management

Deadlock

FCFS scheduling algorithm

Paging

Livelock

IPC

Round robin scheduling

Process synchronization

Priority scheduling algorithm

Memory management

Shortest job first

Virtual memory

Bankers algorithm

Welcome!

Welcome to my site! If you found this, color me impressed.

There's not much going on right now, and it's still very much a work in progress, so feel free to subscribe to my newsletter and I'll let you know when things are up and running.

Thanks for stopping by!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.