DEV Community: Smol Codes

Adding Commenting to 11ty with Hyvor

Smol Codes — Wed, 20 Jan 2021 03:05:13 +0000

This is a repost from my personal site

Hyvor is a free commenting system for the web. It's easy to set up and has a stunning UI.

What you need

11ty (this is after all an 11ty tutorial)
A Hyvor account
Your website

After going on Hyvor you will see a dashboard.

In general you will be given options to enter a web site name and website domain. IF you don't own a domain, that's ok! My website name is Personal Blog and my
web site domain is smolnotes.netlify.app

Now go to your post template (it is generally in _includes/layouts and is listed as post.html, post.njk or some other format) and add this code where you want the comments to go:

🔔 IMPORTAN

Make sure you replace REPLACE WITH YOUR WEBSITE ID with your website id. This can be found in the general tab of the Hyvor dashboard. Make sure that the website code corresponds with the website url.


<div id="hyvor-talk-view"></div>
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = REPLACE WITH YOUR WEBSITE ID; // DO NOT CHANGE THIS
    var HYVOR_TALK_CONFIG = {
        url:  '{{ post.url | url }}',
        id: '{{page.id}}'
    };
</script>
<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>

There you have it! Happy commenting :)

I can now cross adding commenting system to my blog.
All images are taken from Hyvor.

Setting Up Java Part 2

Smol Codes — Wed, 21 Oct 2020 18:58:13 +0000

Important!

This tutorial is made for Windows 10

In Part 1 of this series, we modified our coding environment so we can start programming without straining our eyes; in this post, we will install Java and write our first program!

A program is a set of instructions that tells the computer what to do, like print "hello world!". You might be wondering how do we boss the computer around? By talking to it! A programming language is a way of talking to the computer. It's kind of like saying "please give me 50 strawberries" to the grocer. Computers talk in 0's and 1's though, and we don't. There are many languages we can use to talk to computers however: python, javascript and java are just a few. This is like how there are many languages like Spanish, French and German, we can use to talk to each other. The java virtual machine (jvm) lets us use java to talk to any computer instead of using 1's and 0's, this is why it's considered an interpreter. The JVM is called "virtual" because it's not a physical thing. We need something to actually commence the talking though, that's where the Java Runtime Enviroment (jre) comes in. The JRE starts the action. Now we need something that let's us talk in Java: that is the Java Developer Kit (jdk). The Java developer kit includes the jvm, jre and a host of other tools that will let us start writing programs.

Before installing the JDK, let's see if you already have the necessary tools.

In the command prompt type javac -version. After, enter in java -version. If both return errors that's ok!

Assuming you don't have the JDK installed on your computer, we're going to do that next. Head over here to install the JDK. You can find out if your computer is a 64 bit or 32 bit by going to
About Your PC. You will need to set its path after installation if you are on windows. Find where your computer installed the JDK, copy its path (this can be done by right clicking on the file). In the command promt type setx JAVA_HOME "PAST THE PATH HERE ". In the next line, type setx PATH "%PATH%;%JAVA_HOME%\bin";. If you are stuck, refer to this very useful tutorial.

Now open a file in Notepad and copy and past:


class HelloWorld {
    public static void main(String[] args){
        System.out.println("Hello World");
    }
}

Save this file as HelloWorld.java. It is important that the file name matches the class name. Copy the path of the folder the file is saved in. In the command promt type cd PASTE PATH OF FILE. Next type javac HelloWorld.java. This will compile the code (basically translating it from Java to a language the computer can understand). Follow this by typing java HelloWorld. Now your program will run. You should see printed out: "Hello World!".

Congratulations!! A lot was covered in this post and you just wrote your first program! It's okay if you don't know what it is you just did or what any of it means. You'll get there.

I most likely did a poor job explaining. This article explains the difference between JVM are JRE.

Here you can read a more in depth article explaining JRE.

Setting Up Eleventy

Smol Codes — Tue, 12 May 2020 19:14:21 +0000

I'm an avid user of Tumblr. I love Tumblr. I love the functionality and how quick it is to make a theme. I love the theme developing community BUT I don't like the writing experience. It's good for long notes however what if I want to post crap? And I always want to post crap!

My first foray with Static Site Generators was with Jekyll but I found it difficult to set up. Gems? What and why do I need that? Making a theme for Jekyll is kind of a hassle. Also at the time, Jekyll was not easy to use for a Windows person like me.

llty is very easy and quick to install. Here's a guide to how I set it up. This is not the best guide or the best way to do things but ya know, we're all learning and having fun.

Pre-install

Before doing anything, stop and learn a bit about the command line. Install Git and watch + work out the git tutorial from Traversy Media's Youtube video . I do everything from Microsoft's Command Line and I don't use the git command line. Next you'll want to install NPM using the command line. Follow the instructions for Windows very carefully.

I was a noob and didn't know what global versus local meant. Local means in a specific folder so only that folder can use what you install. Global means in some designated place that every folder has access to. If you're coming from Tumbrl, also know that directory means folder.

Install Time!!

If you are ever stuck, stop and look up the terms you don't understand! You don't need to know everything. You just need to know enough. I didn't know what liquid format was or njk and I'm still not sure about JSON. Liquid template language is very similar to Tumblr's {block} structures.

Create a folder named blog . I made this folder in my documents folder but it doesn't really matter where you make it.

Now hover over that folder, hold the cmd button and right click. Click "copy path". Another easier way to get the location of the folder is by dropping the folder in your internet browser and copying it from there.

In the command line type cd and right click paste the location of your blog. Now type npm --version to make sure you have npm 8 or higher. NPM by the way stands for Node Package Manager. If you do feel free to continue on.

Install 11ty by typing npm install -g @11ty/eleventy.

Clone the 11ty base blog by clicking the "clone or download" button at that link. Cloning basically means to copy. What I actually did was individually copied the files and folders one at a time and put them in the blog folder because I didn't really know how cloning worked.

Back to the command line you're going to need to install a few plugins by copy pasting and pressing enter for these:

npm install @11ty/eleventy-plugin-rss
npm install @11ty/eleventy-plugin-syntaxhighlight
npm install @11ty/eleventy-navigation
npm install markdown-it
npm install markdown-it-anchor

In your blog folder, look for a file named .eleventy.js. Open it in any old text editor and paste this in it:

 eleventyConfig.addPassthroughCopy('css')
  return {
    passthroughFileCopy: true
  }// rest of .eleventy.js config
};

Now back in the command line, type eleventy --serve this will serve your website. Go to http://localhost:8080/ and you should be able to see your site. If not that means something wrong happened. Maybe the instructions I gave were terrible. In that case go here. Wish I'd discovered this post earlier. Oh well.

Edit: here's a link to my 11ty blog!

Setting Up the Programming Environment for Java pt. I (as a legally blind person)

Smol Codes — Wed, 26 Feb 2020 21:53:56 +0000

I've been hesitant to post this as I try not to corner myself as a blind person but here's a post on what I do to make things easier as someone with shit eyesight.

The most important thing to do is recognize that yes, your eyesight is shit. You've got to embrace this. Once you do this, everything will be much easier. BUT understand the better you are at blending in or hiding your bad eyesight, the more people will disbelieve you and think your eyesight is truly not bad. I've been accused of lackluster effort multiple times by people (including friends and family) because they don't realize how certain things (socializing, reading emotional cues, interpersonal relationships in general) is far easier even second nature if you are blessed with decent site. So this embrace must be external as it is internal. This will be hard (especially in the unfriendly tech sector) and it will take a very long time, but it is necessary and worth it!

Ok now to the programming stuff. You are going to need a place to write your code. I'm going to use Notepad because it comes preinstalled in Windows. I like to set the font size to 22px for black on white and 28px for white on black. To open Notepad, click on the magnifier icon/ search bar at the bottom of the screen and type in "Notepad". After it is opened, click "Format", go to "Font" and under "Site" choose the size you prefer.

Next, you need a place to tell the computer to compile and run your program (don't worry, I'll go over what this means in a later post). Luckily this place is also preinstalled in the computer. This is called the terminal (it has many other names like command line and command prompt). It lets you tell the computer what to do using texts instead of clicking on pictures (icons). For example, to open Chrome, you might click on the Chrome icon but in the terminal you can enter "chrome.exe tumblr.com". Open the terminal like you did for Notepad. In the search bar, type in "terminal", click it and then once it's opened right click, go to "Properties". Click font to change the font size (I have mine set to 28px), go to "Color" to change the text.

All right! There you have it! We'll use this setup for the first program that we'll write!

Codeland: My First Conference

Smol Codes — Sat, 03 Aug 2019 17:12:57 +0000

Let me tell you: it was an adventure. We need to start at the very beginning.

Arriving in NYC

I (last minute) bought tickets via Grayhound and booked a hotel to the New World Hotel. The Grayhound bus driver didn't accept my e-ticket so I had to dig around my phone for a printable receipt. I landed in Port Authority around 9.30pm on Sunday. But I didn't know how to use the subway and was too anxious to ask for help so I walked from there all the way to the hotel. Of course, my phone ran out of battery so I had to drop by a Duane Reid to purchase an emergency battery pack. The hotel wasn't obscenely far but I am poor with direction, thus I arrived at 11.30pm. The hotel reeked of cigarettes and there was an unkempt mattress propped against a wall along with hand towels strewn in random places. I checked in, got my keys and went to my (very small) room. The bedsheet was disgusting and there was a loud TV blasting the benefits of Chinese healing cream that could make you look significantly younger. I tried to go to sleep but couldn't because I felt super itchy. By 4.45am I gave up, checked out of the hotel and wandered around Bower St. looking for a place to shower. At 6am I stumbled into a YMCA. They were generous and because it was my first time there, let me shower for free. I almost passed out in the shower from sleep deprivation.

At the Conference

Finally, after an hours' respite (thanks YMCA!), it was off to the conference! The line to the NYC Skirball was decently sized. Getting inside was easy. The conference was super well organized. I got a small pink tote bag that was filled with goodies (hey Flatiron, thanks for the battery pack). The breakfast was much needed. I was beyond thankful for Flatiron's lattes.

The beginning. talks had dancing-which made me really nervous (I didn't want people to see how visibly sleepy drunk I was).

Luna Malbroux's talk was hilarious. It reminded me of Starbucks' #racetogether movement (one question the Bux posed was: how many people did you eat with who wasn't the same race as you? And how often? Well my brother is a different race and I, a Chinese person, am surrounded by white people so this is often. However, this absolutely doesn't make me more #woke). I loved the fake app and everything about the talk.

Pedro Cruz's speech was inspiring. A lot of the programming hype is around the fat paycheck or making beautiful design or having a snazzy "programmer" lifestyle, but I love how he talked about an existing problem and how he tried to solve it using existing technology. He's truly made a difference in Puerto Rico, more so I can easily see his solution being used globally (it probably is). His DronAid tackled many problems, from receiving "Help" messages from people in need to seeing what they actually needed, to making sure non-profits weren't getting redundant information to creating a form of communication between various groups.

I chose Raymond Camden's Real Person's Guide to Vue.js. I'm new to learning JavaScript (I only know HTML and CSS) but I've always wanted to know: why do people always talk about Vue, React and Angular? What's the big deal? Although this talk was aimed towards more advanced web developers (aka not COMPLETE noobies), I gained so much from this workshop (plus cats!! A lot of them!!). I learned how useful Vue could be for acquiring data and also allowing interactions between the user and the site. I've been able to go over his github and Codepen at a (much) slower pace to fully piece together the workshop.

The closing talks were very fun and entertaining. I loved Ali Spittal's talk about blogging (I'm going to try to put real effort). It is necessary for me to explain what I'm learning to someone so I can sort of figure out what I'm learning. It is also a good way to keep myself organized. Building a Gendered Dictionary and An Immigrant's Journey into Tech hit home with me as I think we should consider what we are doing and how they impact society.

Coding is a tool. It's what we do with it that matters.

I didn't go to the afterparty but next year, now that I know better how to plan my trip, I will!