Forem: Chris Sev

Hacktoberfest 2022!

Chris Sev — Fri, 30 Sep 2022 22:29:19 +0000

Hacktoberfest 2022 is here! Hacktoberfest is a month long celebration of Open Source, and I'm really excited about this year's Hacktoberfest. You can check out Hacktoberfest.com. We have this awesome new design that the team has put together.

How to Participate in Hacktoberfest

Hacktoberfest is about open source and open source really does make the world go ‘round. This month we are dedicated to helping out open source. What do you have to do to participate in Hacktoberfest? To participate in Hacktoberfest, you just have to create 4 pull requests that are merged on public repos that are marked as Hacktoberfest repos.

To participate in Hacktoberfest, you just have to create 4 pull requests that are merged on public repos that are marked as Hacktoberfest repos.

What are the Hacktoberfest values?

If you take a look at the Participation tab on Hacktoberfest.com, you can see the Hacktoberfest values:

Everyone is welcome
Quantity is fun, but quality is key
Short-term action, Long-term impact

Let’s make sure to put in some quality pull requests. We want to help out these repos that we are contributing to. The more we help out open source, the more impact the projects that we contribute to have on the world.

How do I participate?

What do you have to do to participate? You can register between September 26 and October 31. You can make pull requests on any GitHub or GitLab hosted project that's participating in Hacktoberfest. Make sure that they have the Hacktoberfest topic on that repo.

The project maintainers have to accept your pull or merge requests. You have to have 4 pull merge requests accepted between October 1 and October 31 to complete Hacktoberfest.

What do I get for participating in Hacktoberfest?

In addition to helping out the open source community, the first 40,000 participants are eligible to get:

A tree planted in their name
Or the Hacktoberfest 2022 T-shirt

How to make a Pull Request on GitHub

Let’s take a look at creating our first pull request. I will be using the Cloud Haiku repo. This is a repo we like to show off here at DigitalOcean. It’s a bunch of markdown files with haikus that people have created.

It's a great starting repo to create a pull request on. Now to start off, whenever you find a GitHub repo that you want to contribute to that you think is a fantastic, make sure that it has the “hacktoberfest” topic added to it. Your contributions only count if the repo is labelled.

Always check for Contributing docs

The number one thing that you need to do when you're contributing to open source projects is to see if there's any guide on contributing. You always want to make sure that your contributions to a project match what that project expects from you.

Using the Cloud Haiku Repo

To contribute to this cloud haiku repo:

We need to work in markdown with an .md file.
Name our file the name of our haiku
Put our haiku in the _haikus directory
Write in Jekyll format

Writing our haiku

Step one is to fork this repo. Forking this repo let’s us grab the code and add it to our own accounts so that we can make changes.

I'm going to click fork. 2,000 people have already forked this. I'm going to click Fork and we're going to call it Cloud haiku. Select an owner. I'm going to do this to my personal GitHub account. Copy the main branch only. I'll create the fork here.

Now you can see that this repo is in my account. Now that this repo is in our account, we can make changes because we have it.

How to clone a repository

Let's get this code locally on our computers so that we can make changes to it. I'm going to click “Code” and there's three different ways to clone it. There's the:

https URL
SSH (what we’ll use)
GitHub CLI

I'm going to go ahead and use the SSH version. Any of these would work. I'm going to copy this and let's go open up my terminal. I'm going to type:

git clone git@github.com:chris-sev/cloud_haiku.git

Editing the Code

Now let's open up this repo in VS Code so that we can edit it, make some changes, and then finally create our pull request.

Let's go ahead and open this in code using the VS Code terminal shortcut.

code cloud_haiku

We’ll create a file in the _haikus directory called 2022_my-code-doesnt-work.md.

Now we need that little code snippet from the GitHub repo in the contributing section. Let's go over to VS code and we'll add the topper section and also write in our Haiku.

---
layout: haiku
title: My Code Doesn't Work
author: Chris Sev
---

What is happening?
I typed it in correctly
My code does not work

Committing our new file with git

I'm going to click save. Now we need to commit this with git so that our GitHub repo knows that this is the file that we just created. Let's open up our terminal. Type in git status to see the file that we added needs to be staged.

What has changed is one untracked file and this is the file that we just created. I need to do two things. I need to stage this change and to do that I'm going to type:

git add .

I'm going to put a period which says all the files that are changed, let's add those and stage those. Now let's type git status and now changes to be committed.

So this is the one file that we want to change and commit to this repo. We're saying we want this change to persist. Now I'm going to type:

git commit -m 'my cloud haiku'

and we're going to add a message with -m and that's my message for what this commit is about.

So that means we can push this up to our GitHub repo now. I'm going to type:

git push

Now all of our code has moved up to GitHub.com.

Creating the Pull Request

Let's go back over to the GitHub repo. There's a bunch of different ways to go create the pull request. We can go back to the original repo and then create it there. Or there's a nice handy little section in our repo. It will show us a Contribute button and show how many commits ahead of the forked repo we are.

I can open this pull request from my forked repo and I'll click that to open a pull request. This sends us back to do-community/cloud_haiku.

So any changes from this right here are getting brought over to the main cloud haiku main branch. This is how we can create code, write whatever we need to maybe fix some typos and then commit back to the original repo.

Now we just wait for the maintainers to either provide some feedback or they can write a comment and then we'll get notifications on it or merge the pull request.

That’s how you create a pull request!

Recap

To recap, to create a pull request, you’ll need to:

Fork the repo
Add your own changes
Commit and push your changes to your own repo
Create the pull request from your repo to the main repo

I'm really excited about Hacktoberfest 2022. I hope you are as well. I hope you get in some great pull requests, you contribute some fantastic projects, and let's make open source as a whole more impactful.

Happy contributing!

Creating a CSS Animated Loading Card

Chris Sev — Wed, 13 Jan 2021 21:33:30 +0000

Loading animations are used to tell users that the site they want to see is on the way. Usually we'll see spinners, but we can take this a step further.

Let's build out a card that has a loading animation to it. By creating a loading animation that looks similar to our final UI, the user will know what to expect when our page fully loads.

The steps to create an animated loading card are to:

Create a card
Add a background to specific parts (image, text)
Animate with a CSS Animation

Here's the CodePen:

The Technique: Background Animation

We can build out a sample HTML/CSS card with the following:

<div class="card is-loading">
  <div class="image"></div>
  <div class="content">
    <h2></h2>
    <p></p>
  </div>
</div>

Using Sass, we can style out the base card:

.card {
  margin: 10px;
  width: 300px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  .content {
    padding: 20px 30px;
  }
}

The CSS Loading Animation

Now we add a loading animation. This will be a CSS animation @keyframes that will move the background to give it a shining effect.

Here is the CSS animation:

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

Here is the is-loading class that will add the backgrounds to the image, header, and paragraph.

.card.is-loading {
  .image,
  h2,
  p {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
  }

  .image {
    height: 200px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  h2 {
    height: 30px;
  }

  p {
    height: 70px;
  }
}

The important line here is the animation line:

animation: 1.5s shine linear infinite;

We are animating the background infinitely so that the gradient keeps moving across the element.

My VS Code Setup for 2021! Theme, Font, Extensions, and Settings

Chris Sev — Tue, 12 Jan 2021 23:16:06 +0000

My VS Code setup is something I change often. I often get asked about my setup, so here is all of the stuff I use! This will most likely be changed and tweaked over time as I search for my best setup. I encourage you to try new themes/fonts/extensions/settings and see what fits you best.

Here's the VS Code theme, font, extensions, and main settings I'm using for 2021:

Theme

Monokai Pro

Favorite Fonts

Cascadia Code
Operator Mono
Dank Mono
Fira Code

Extensions

amVim
Better Comments
Bracket Pair Colorizer 2
Color Highlight
EditorConfig for VS Code
ES7 React/Redux/GraphQL/React-Native Snippets
ESLint
Git Indicators
Git Project Manager
gitlink
Highlight Matching Tag
Import Cost
JavaScript (ES6) code snippets
laravel-blade
Material Icon Theme
Monokai Pro
npm
Path Intellisense
Peacock
Prettier- Code formatter
Sublime Text Keymap and Settings Importer
Tailwind CSS IntelliSense
View Node Package
Kite AI Code AutoComplete
PHP Intelephense
Vetur
Vue Inline Template

Next.js Image Component - Automatic Image Optimization

Chris Sev — Tue, 12 Jan 2021 23:08:25 +0000

Next.js 10 came out recently and with it brought the Next.js Image Component.

Next.js Image Component Features

The main features of the Next.js Image Component are that it requires very little configuration to immediately optimize our images.

Main features include:

Automatic Image Optimization: Deliver the right optimized image and format
Lazy loading: An image will only load when it is within the viewport
Automatic Resizing (srcset): Deliver the correct size image based on the browser size

Image Optimization on-demand

The cool thing about Next's Image Optimization is that it all happens when a user requests the page, not when we build our static sites.

Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.

To Use the Next.js Image Component

Replace your <img> tags with the Next.js <Image /> component. Required properties are:

src
width
height

Let's say we have an image located in our Next.js project at /public/images/mountains.jpg. Instead of having an tag:

<img src="/images/mountains.jpg" />

Replace with the Next.js Image Component

import Image from 'next/image';

export default function Home() {
  return (
    <Image 
      src="/images/mountains.jpg" 
      width="1920" 
      height="1080"
    />
  )
}

Our image will be optimized and will be a smaller size.

Delivering Resized Images

To deliver a Next.js Image Component with a resized image, add a layout property to your component.

<Image 
  src="/images/mountains.jpg" 
  width="1920" 
  height="1080"
  layout="responsive"
/>

You should see even smaller file sizes now.

One Time Secret App: Hackathon Submission

Chris Sev — Fri, 08 Jan 2021 21:19:40 +0000

What we built

My fellow DigitalOcean Dev Advocate, Mason Egger and I built a onetimesecret.com clone. You can share secrets with your friends that are secure and disappear after they are read!

Category Submission:

Random Roulette

App Link

https://python-ots-app-8p2lv.ondigitalocean.app/

Screenshots

Description

A one time secret app is a tool for sending sensitive information to people. The tool ensures that the secret can only be viewed one time and will expire after a certain amount of time if not read. The tool takes a secret and a passphrase from one user and stores that secret in the database. A user trying to access this secret will need the passphrase as well as the unique ID that is generated by the API to retrieve the passphrase. Once the secret is read it is removed from the database. If a user doesn’t read the secret within a given period of time (7 days by default) the system will automatically purge the secret from the database.

Link to Source Code

Python API - https://github.com/do-community/python-ots-api
React Frontend - https://github.com/do-community/one-time-secret-frontend

Permissive License

BSD 3 Clause

Background

(What made you decide to build this particular app? What inspired you?)

This app was inspired by a similar app that I had used in college when resetting people’s passwords for them. I realized that the use case for being able to send a secret once is very valuable so I decided to build an app to do just that.

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

The API uses DigitalOcean’s App Platform to deploy the service but also uses the Database as a Service offering to provide us with managed Redis for our database.

API

The API is built using the Flask Web Framework (Python) connected to a Redis database. This API has only two calls, one for creating the secret and one for reading the secret. Flask was a good choice for this application as it needs no login, is relatively small, and interacts with Redis. My litmus test for “Should I use Flask or Django” boils down to “Do I need authentication? Do I need a database?” If I say yes to either of those two I tend to use Django. While this app does need a database, all we need to store is the passphrase and a secret associated with it. This is a perfect use case for using Redis as a key value store. Using the cryptography library I was able to create an encryption key based off of the passphrase for the secret that is sent. I then take the hash of this passphrase and use that as the key for the encrypted text in the Redis database. This way if the database were to be compromised the data would be relatively safe. Since hashes are a one way function it is highly improbable that someone could get the passphrase out of the key and use it to decrypt the message. The API also generates a UUID for each message so a passphrase can be used by multiple people and not have collisions. As for the expiration time Redis already has us covered. I can set the expiration time when I add the secret to the database and Redis will handle the deletion for me. No extra code needed!

So when a user is ready to retrieve their secret they pass in the ID and the passphrase to the API. The API then hashes the passphrase and does a lookup on the database to see if that ID is in the database. If it is it will then compute the hash of the passphrase and validate that it is indeed the same. Finally it will use the passphrase to decrypt and return the message to the user and delete the secret from the database.

Frontend

The frontend is built with React and styled with Tailwind. It is split into two different React components:

Create a Secret
Show a Secret

We’re using the useState hooks to take care of our form data. Once a form is submitted, we go ahead and make a POST request to the backend.

Conclusion

It was a ton of fun to join the hackathon. We were able to stream on Twitch while we built this also.

I procrastinated. Coding frenzy incoming

Chris Sev — Tue, 05 Jan 2021 17:17:40 +0000

The DEV + DigitalOcean Hackathon started on December 10.

It's the last week to join the hackathon!

I had lofty goals of the things I wanted to build.

Personal Site
Wedding Site
URL Shortener App
One Time Secret App

This post is me saying to the world that I am still going to build all these things!

Procrastination can happen due to the holidays and the new year. Not anymore!

I'll be building this all on my Twitch. Join me there for the next few days.

5 Awesome DEV Hackathon Submissions

Chris Sev — Wed, 23 Dec 2020 21:35:26 +0000

THe DEV + DigitalOcean App Platform Hackathon is in full swing (Dec 10 - Jan 10).

I've seen lots of amazing people getting involved and some fun submissions. Here's 5 submissions I've found awesome so far:

1. Random Potato Mood Generator by Alba Silvente 💃🏼

This project uses Nuxt and Tailwind. I want to play around with Nuxt more after seeing this.

Random potato mood generator using Nuxt and TailwindCSS

Alba Silvente 💃🏼 ・ Dec 22 '20 ・ 6 min read

#nuxt #vue #dohackathon #jest

2. Color Game by Bo Iliev

Color Game - A DO Hackathon Submission

bo-iliev ・ Dec 16 '20 ・ 1 min read

#dohackathon #javascript

3. McBroken Dashboard by Caleb Lemoine

An app to show you all the broken McDonald's Ice Cream Machines in the US. Amazing!

The mcbroken dashboard - digitalocean hackathon entry

Caleb Lemoine ・ Dec 21 '20 ・ 2 min read

#dohackathon #monitoring #showdev #cloud

4. Landing Laravel by Erika Heidi

I adore Laravel so it's good to see some Laravel submissions!

Landing Laravel - my submission to the DigitalOcean App Platform Hackaton

Erika Heidi ・ Dec 23 '20 ・ 2 min read

#dohackathon #opensource #laravel #php

5. Gitalitycs by Dharmen Shah

Gitalytics - A simple overview of Github activities

Dharmen Shah ・ Dec 16 '20 ・ 1 min read

#dohackathon

Conclusion

This only scratches the surface of the great submissions. Be sure to join the DEV Hackathon! Excited to see what else you all make!

I'm joining the DEV hackathon! Here's what I'm going to build

Chris Sev — Mon, 14 Dec 2020 18:19:42 +0000

We're running a hackathon with DEV and DigitalOcean for December 10 - January 10. This is a great opportunity to force ourselves to build the projects we've been wanting to build.

I'll be spending this hackathon building and streaming on Twitch. Here's the things I want to build:

Personal Site/Portfolio (Blog)
New Side Project Site (Blog)
Vue URL Shortener (App)
Wedding Site for me and Kapehe's upcoming marriage! (Site)

Join me in building some fun stuff to close out the year! You can always chat with me on Twitter and find me streaming on Twitch

Deploying to DigitalOcean App Platform

All of these apps will be deployed to DigitalOcean's App Platform. The cool thing about App Platform is that we can deploy a backend (API or CMS), a database, and a frontend (React/Vue) all in one place.

Deeper Dive into the Apps

Let's take a deeper dive into how I'll be building each of these.

Building Blogs/Sites

To build the personal site, side project site, and wedding site, I'll need a frontend tool that I'm comfortable with. I'll be using React and more specifically Next.js.

I've done some research building out App Platform projects with Strapi and Next.js and also with Laravel and React

Vue URL Shortener

I'll be using a Django API and Vue for the frontend. I'm using Vue here to switch things up and try something that isn't React. A hackathon is a great place to try out new technologies!

Let's Build

Lots of fun to happen in December and I'm excited I finally get to finish out some projects I've wanted to do for a while now. Join me by checking out the hackathon.

Animating Your VS Code Cursor w/ Cursor Blinking

Chris Sev — Mon, 31 Aug 2020 19:11:57 +0000

The VS Code settings are packed to the brim with fun hidden gems. Cursor Blinking is one of those settings.

The Cursor Blinking VS Code setting allows us to display our cursor as an animated version of itself.

How to Use VS Code's Cursor Blinking Setting

Open VS Code settings: cmd + ,
Search for Cursor Blinking

There are five settings that you can use on Cursor Blinking:

blink
smooth
phase
expand
solid

Seeing Cursor Blinking in Action

Here's the different ways and looks of our cursor:

blink

smooth

phase

expand

solid

Conclusion

I'm really liking expand although it may get a little annoying after some time. smooth and phase seem to be great daily drivers since they are fun but not too intrusive.