teleren/devto huggingface dataset:
Video: Add featured images to your Jekyll posts (Part 1)
Tags: jekyll, githubpages, staticsite
Published: 2020-08-14 21:37:43

As I started building my blog, I realized it would be really nice to have a featured image that appears above my blog posts. The image gets a reader’s attention and sets the tone for the content they will read. In this 2-part video series, I show you how to do that using the standard minima site Jekyll ships with. You can take these ideas and concepts and add them to your site.

{% youtube 6oKO-7gsM4s %}

If you enjoy this video, please subscribe to [my channel](https://www.youtube.com/channel/UCo63gWfWRfEciJ98mJLIU0Q), like, and comment. Those few actions will help me build an audience and create more content.

Feel free to clone the repo and use the code freely: {% github BillRaymond/jekyll-featured-images no-readme %}

The repo has GitHub Pages installed, so you can try it out live [here](https://billraymond.github.io/jekyll-featured-images/).

I am an occasional developer, so if you have any insights on how to improve, please feel free to offer your constructive comments. On my [actual website](https://www.cambermast.com), you will see I created a shared component that can be reused throughout the site. If you are interested in learning how to do that, let me know in the comments.
The Power of Ctrl+Click
Tags: vscode, codenewbie
Published: 2020-08-14 21:26:15

**(For JetBrain IDEs, this all works with Ctrl+B or CMD+B and it already opens in a new tab)**

Ctrl+Click (CMD+Click if you're using MacOS) in VS Code is amazing. If you're working with someone else's code either because it's imported from a library or because you're working on a code base you didn't create, you'll often be lost as to what x does or how to use y.

So you'll turn to documentation or a README.md, but sometimes those are incomplete or don't provide the answer you're looking for.

Take the Go code I'm working with right now. I'm using code from [github.com/dghubble/go-twitter/twitter](https://github.com/dghubble/go-twitter/). dghubble's README is helpful but I couldn't find all the potential parameters I can pass into the `UserTimeline` function. So what should I do?

![What Parameters can I add to this Go code?](https://dev-to-uploads.s3.amazonaws.com/i/84cgeg0zouxre4x812mt.png)

**Simple.** I ctrl click it and I'm taken to where the code lives. I can see all the types of parameters I can pass in.

![type UserTimeLineParams](https://dev-to-uploads.s3.amazonaws.com/i/llb4scmovsn43jz6v62p.png)

This will work with any code you're working with as long as it's defined somewhere else in the workplace.

Finally, to make sure you don't lose your place in your own code when ctrl clicking, follow the advice from this [Stack Overflow post](https://stackoverflow.com/questions/38713405/open-files-always-in-a-new-tab) to make sure files always open in a new tab in VSCode.

Now you're all set. I only realized I could do this a month or so ago and my productivity has skyrocketed. Good luck!
Automatic like when you comment on an article
Tags: help, discuss, dev
Published: 2020-08-14 21:24:56

---
title: Automatic like when you comment on an article
published: true
description: 
tags: #help #discuss #dev
//cover_image: https://direct_url_to_image.jpg
---

Hi,

Has anyone noticed that when you add a comment to an article, it has a like immediately? I am wondering if this was intentionally and would like to know how this helps the user experience if it was.

I wanted to report it as a bug but I can't decide which category it falls under.
Checklist for every website!
Tags: webdev
Published: 2020-08-14 21:20:09

Do you check your website before publishing it?

You expect a new page to be created, and you wait a long time for the page to be ready and be able to be published. However, before this happens, it's worth checking whether everything before publishing the website, has been maintained.

# Here is the checklist for every website that you should follow:

# 1\. Typos

The headling with a typo isn't pleasant for visitors to see. Make sure to check that.

![Typos](https://dev-to-uploads.s3.amazonaws.com/i/2y2h1v1vzdjf38aky4sw.png)

# 2\. Valid SSL

It should be a standard, but still, many developers skip this, and that's not good.

![Valid SSL](https://dev-to-uploads.s3.amazonaws.com/i/n0m5iyab4inf28hmkaxc.png)

# 3\. Access URLs

Be sure that your website is accessible both from HTTP and HTTPS.

![Access URLs](https://dev-to-uploads.s3.amazonaws.com/i/g15o4hppx5lak3j6lep3.png)

# 4\. 404 page

If you don't have that, your visitors would think that your website doesn't exist.

![404 page](https://dev-to-uploads.s3.amazonaws.com/i/zngxhb36g8bea9xxdw00.png)

# 5\. Performance

The faster your site, the better. Check performance using tools like Lighthouse.

![Performance](https://dev-to-uploads.s3.amazonaws.com/i/ccpwykb2r3gge7df5pu9.png)

# 6\. Image optimize

Remember to compress your images. PNG to JPG whenever possible, and add alt attribute.

![Image optimize](https://dev-to-uploads.s3.amazonaws.com/i/fme5hyrwt948sfadroru.png)

# 7\. Meta tags

The description or the title of your website will be displayed when searching.

![Meta tags](https://dev-to-uploads.s3.amazonaws.com/i/iqkjc5d225vrtxpklw39.png)

# 8\. Responsiveness

Be sure to check how your site behaves on mobile devices. That's a must!

![Responsiveness](https://dev-to-uploads.s3.amazonaws.com/i/v1ib5rdvbzw71iprk5od.png)

# That's it!

Thank you so much for reading this post. If you enjoyed it, feel free to share that to help others!
“Just for fun” coding resources / ideas?
Tags: discuss, fun, webdev
Published: 2020-08-14 21:00:03

---
title: “Just for fun” coding resources / ideas?
published: true
tags: #discuss #fun #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/su7eq3zp9rfddvmijvaq.jpg
---

*Cover photo by <a href="https://unsplash.com/@ryanquintal?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ryan Quintal</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>*

Hi DEV!

Could you recommend any ideas/frameworks/games for “Just for fun” coding?

In my normal Tech Lead role, **I miss coding a lot**, so I decided to spend some time next week coding just for fun. Not reading too much, not configuring servers too much, not promoting or selling the product — **just good old code stuff!** 💻🥳

I mainly worked with Next.js and PHP (it was the main tech for building web sites when I started 👵), but have touched a bit of everything.

What would be your advice?
WFH: Automated plant monitor! Part 1
Tags: iot, python, javascript, api
Published: 2020-08-14 20:47:37

So I've been working from home for the last few months and I've been looking to get into a new space in tech. To start this off I crawled my way into IOT. I was amazed with all of the new IOT products coming out and they inspired me to create my own!

I remember back when I was in college a professor of mine introduced the Raspberry pi to my class. We built simple web servers and I honestly didn't revisit the device till now and that was years ago! So here we are, now in 2020! I've always wanted to grow my own herbs but I'm also lazy when it comes to maintaining plants. So I decided to build a plant monitor with a Raspberry pi 4 to help. 

To get started with part 1 I collected a few items:
- Raspberry Pi 4
- DH11 Humidity Sensor
- Mouse
-Keyboard
-Monitor
-Power Supply
-Python version 2.7 and up

Cool so now that we have our supplies lets boot on our raspberry Pi and use the text editor of our liking. I'm using VS Code!

First step is to connect your DH11 sensors to the correct pins on your rapsberry pi. In our case choose pin 1,4 and 6.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3kg88j8k3ra0uxx3qy82.jpg)

Next lets add some code!
```
import RPi.GPIO as GPIO
import Adafruit_DHT
import time 

dht_sensor = Adafruit_DHT.DHT11
dht_pin = 14

y1_channel = 21
GPIO.setmode(GPIO.BCM)
GPIO.setup(y1_channel, GPIO.IN)

while True:
    humidity, temperature = Adafruit_DHT.read_retry(dht_sensor, dht_pin)
    moisture_reading = GPIO.input(y1_channel)
    if moisture_reading == GPIO.LOW:
        moisture = "Sufficient Moisture."
        moisture_db = 1
    else:
        moisture = "Low moisture, irrigation needed"
   

    print("Sensor data: Humidity = {0:0.2f} % Temp = {1:0.2f} deg C moisture: {2}".format(humidity, temperature, moisture))
    

                   
    time.sleep(10)
```
I installed packages to read the GPIO sensors. Keep in mind that these are digital sensors. If you do have an analog sensor then you need an additional part to convert to digital. 

The code is pretty straight forward but as we go to step two things will start to pick up. 

Till next time!
PHP Array Count
Tags: php
Published: 2020-08-14 20:42:23

By default PHP has two methods for count array.

- **array_count_values**
- **count**

## array_count_values()

Using this function, the number of times a `value` in an array can be determined.

**Example :**
```php
<?php
  $array = array(1, "hello", 1, "world", "hello");
  print_r(array_count_values($array));
?>
```
**Result :**
```php
Array (
    [1] => 2
    [hello] => 2
    [world] => 1
)
```

## count()

These function is very common & its return total amount of `value` from array .

```php
<?php

 $array = array("a" => "green", "b" => "brown", "c" => 
  "blue", "red");
 echo count($array);

?>
```

```php
4
```
Thanks
10 Git Anti Patterns You Should be Aware of
Published: 2020-08-14 20:20:20

[Link](https://speakerdeck.com/lemiorhan/10-git-anti-patterns-you-should-be-aware-of) to SpeakerDeck
https://speakerdeck.com/lemiorhan/10-git-anti-patterns-you-should-be-aware-of
Visual Studio Code Tips — Como exibir os pontos de identação?
Tags: vscode, productivity, tips, ident
Published: 2020-08-14 20:09:45

Para que eu preciso exibir os pontos de identação quando eu uso o auto ident da minha IDE? 🤔

Simples, para ter melhor legibilidade dos códigos! 🥳 Se você também acredita nisso, esse post pode lhe ser muito útil. 🙌

#Eis um código sem os pontos de identação.

![visual studio code — sem os pontos de identação](https://miro.medium.com/max/700/1*ugus39S1B9zny641QMrhsg.png)

#Agora o código com os pontos de itentação.

![visual studio code — com os pontos de identação](https://miro.medium.com/max/700/1*YRU1EghwKL5KxZDX3-nJLA.png)

---

#👏Muito bom! Agora mostra qual a extension ou configuração fazer?

Calma jovem, não é necessário instalar mais nada na sua IDE favorita, precisamos apenas habilitar acessando o **menu View / Render Whitespace**.

![visual studio code — ativando a renderização de espaços em branco](https://miro.medium.com/max/700/1*wyy3E8jIXYQbMQ2DjRCFAg.png)

---

####Muito obrigado por ter ficado até o final! 🥳 Se você considera o conteúdo útil deixe sua curtida ❤️ e fique a vontade para compartilhar com seus amigos e seguidores!

####Abaixo tem o espaço para você deixar seus comentários e dicas que vão me ajudar na jornada de evolução do conteúdo, então não exite, comenta e deixa suas dicas.
Up Your Editor Game With VSCode Workspaces
Tags: beginners, vscode, webdev, codenewbie
Published: 2020-08-14 20:08:56

# Why Workspaces Will Up Your Efficiency Game

Do you ever find yourself working on a project and having to open multiple folders in vscode manually? Well, VSCode Workspaces can do this for you by opening several folders in the same window with one click.

Workspaces are a .code-workspaces file that save our project folder configuration. Once configured, instead of opening multiple folders manually the .code-workspaces file opens them for you. This is much faster and easier then writing a shell script or setting up a custom command because one set up it can be as easy as one click.

Now, let's check out how to make a workspace!

# A Step by Step Guide to Making a Workspace

## Step 1 - Pick Your Folders

Before we do anything we need to know which folders we want in our workspace. The great part about workspaces is that these folders and files can be anywhere on your computer!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vtmgjp0stks8ucerchxb.png)

## Step 2 - Add Your Folders

Now that we have our folders selected, you can add them to your workspace. In vscode, go to File > Add Folder to Workspace

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z6lj3w8h7vvrbxd02eqp.png)

Once you've added them in, this is what your vscode file explorer will look like. Notice the round circle to the left of each folders name.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yij8s4v7ksfi2ga3a0rv.png)

## Step 3 - Save Your New Workspace

With our workspace set up, the last thing we have to do is save it so we don't have to make it again. In vscode, go to File > Save Workspace As

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qt33qff07tbpiiba47f.png)

Once you save your new workspace, it should show up as a [NAME].code-workspace file wherever you saved it. Now you can open it whenever you want to work in those folders together!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uf2gy1zif1h5kbq0384c.png)

When you open your new workspace, you should see its name in the file explorer.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l7rn16bwoeeved0x2x3p.png)

### Hot Tip 🔥

If you use a Mac and have Alfred, you can make this even better by setting up a workflow to open your .code-workspaces in vscode via a command. This can mean typing one keyword versus opening vscode and searching your computer files each time.

Happy Learning 😄👋🏾
🎉 Announcing Nightingale 4 -- a modern, resource-friendly REST Client for developers
Tags: career, webdev, productivity, csharp
Published: 2020-08-14 19:56:41

Iterate, iterate, iterate. That's been my mantra when making apps. And in that spirit, I'm excited to share the latest iteration of this crazy experiment: Introducing Nightingale 4 — a high-performance, resource-friendly REST client for developers to send and receive HTTP requests. If you're a developer, I'd love to hear your feedback. Download here: https://nightingale.rest

![](https://i.imgur.com/NptSxvl.png)

![](https://i.imgur.com/tt6wLpW.png)

The tool is built using C# and the powerful UWP framework.
Making the jump to start blogging!
Tags: career, introduction
Published: 2020-08-14 19:50:07

---
title: 'Making the jump to start blogging!'
published: '2020-08-10'
description: 'I am ready to take my career and knowledge to the next level. One of the best ways of doing that is blogging.'
canonical_url: 'https://codebycorey.com/blog/making-the-jump-to-start-blogging'
---

I am ready to take my career and knowledge to the next level. One of the best ways of doing that is blogging. I want to be able to share all the knowledge I have along with anything new I learn from now on. This is a challenge for me since I do not share things publicly. I never posted things on social media. I was always sat back and watched. Being judged or people thinking I sucked always deterred me from writing out and in the open. I have decided I do not care. It is my time to start producing and helping others.

Reasons why I want to start blogging:

1. To document things I learn.
2. To help others learn.
3. Build my Personal Brand.
4. Work on my technical writing skill.

## Document Things I Learn
Keeping all the things I learn documented is a nice resource to look back. It is like taking notes in a notebook that others can read and learn from also. Making the effort to document everything I learn would help solidify the topics in my head. If I cannot explain it simply to someone else, I do not know it well enough myself.

## Helping Other Learn
Having my knowledge published can help others learn. The extra time after doing the research to compile and simplify the knowledge will benefit me and the reader. If a topic is complex and they stumble on my version, it could help bridge the gap on their understanding. If no one ends up reading my posts, that's okay. I am treating this like I am writing to help my past self.

## Building My Personal Brand
Having a strong personal brand is important in my career. It can help increase my chances of getting more opportunities. Some employers look up candidates online to see what they are about. I deleted most of my social media accounts a couple of years ago so there was not much of me out there. I recently opened up a Twitter account and actually started posting to build up my followers.

## Work on my Technical Writing
You are always writing technical documents as a Software Engineer or Web Developer. Whether its tech stack, infrastructure running your platform, or onboarding. Documenting is important to make sure your entire team knows how everything works. It is impossible for your team to be a part of every decision. Having the documentation is nice to have for when they need to look back. By sharing and writing about tech, I will increase my technical writing skill. The best way to learn is by doing.
How to understand difficult concepts faster and better.
Tags: productivity, codenewbie, career, beginners
Published: 2020-08-14 19:33:27

<span>Photo by <a href="https://unsplash.com/@mattragland?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Matt Ragland</a> on <a href="https://unsplash.com/s/photos/studying?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

This works for everything. Not only programming. Also works whether you just started or have been working for 400 years. I'm using currently to learn webpack for my job and Unity for my hobbies.

## So, what is it?

It's called the Feynmann Technique. Some of you probably have heard it already.

# How do you do implement it?

Whenever I have to learn something new. Let's say webpack. I try to gather all the information possible at the beginning. I try to understand the concepts and practice a bit. But that's rarely enough when you are dealing with complex subjects. What do you do next?

You teach it. It doesn't matter if you don't fully understand it yet. Teaching it is the best way to find exactly where the missing pieces of your knowledge are. It's faster to find what you don't exactly understand. It's less overwhelming. It's even fun. It can make you help other people. Who do you teach it to?

You can teach it to a rubber duck, write an article on [dev.to](http://dev.to/) 🙄. Your colleagues. Here you have to find the best way for you to teach it. Only important thing is to enjoy this process.

Suddenly your mental model starts to establish and things make sense. You start to understand the why and if you don't you clearly see what's missing and can find more information.

The more you apply this technique the easier and faster you start learning.

## Only thing to have in mind

Learning is a process, you're never done with it. Especially in programming. You will forget things. You will get concepts mixed up. You will learn something wrong and make mistakes. But you will learn and improve.

See learning as a something that accompanies you along the journey. Don't expect to finish 2 courses on react and suddenly "You know React" and are ready to work. You have to work and learn at the same time.

Anyway that's it, have a good day ✌

Find me on [twitter](https://twitter.com/jordienr)
GitHub Actions Hugo Site
Tags: hugo, github, staticsite, actions
Published: 2020-08-14 19:28:35

---
canonical_url: https://www.joshkasuboski.com/posts/deploy-site-github-actions/
---
[GitHub pages](https://pages.github.com/) is a free static hosting provider that unsurprisingly works well with a git workflow. It enables `git push` to deploy type workflows. My [personal site](https://www.joshkasuboski.com) is a static site built with [hugo](https://gohugo.io/) and deployed to GitHub Pages using GitHub Actions.

## GitHub Pages Repo
GitHub Pages expects that you have a repo named something like `user.github.io` that has static files you want deployed. However, if your site requires any sort of building this doesn't really work for you (at least if you want to automate the build step).

One way around this is to treat your GitHub Pages Repo as the output for your build. You create a separate repo that just has the built static files. You can see the repo for my site at [kasuboski/kasuboski.github.io](https://github.com/kasuboski/kasuboski.github.io).

You'll notice it just has static html, css, etc. I write the content for this site in markdown however, using Hugo.

## Code Repo
The actual content is stored in a separate repo that I'm referring to as the code repo. The repo for mysite is [kasuboski/personal-site](https://github.com/kasuboski/personal-site). This repo should look a little more familiar to anyone who has used Hugo.

The content is under `content/posts` and is written in markdown. This is the repo that I actually modify and have checked out locally. If I wanted to create a new release of it manually I would build the site and push it to the GitHub Pages Repo with the commands below.

```
hugo --minify
cp ./public ../kasuboski.github.io/
cd ../kasuboski.github.io
git commit -am "cool new post"
git push origin master
```

## Automatic Deploy with GitHub Actions
I don't really want to mess with multiple repositories locally, especially when one of them is essentially machine generated. GitHub Actions can build the site with Hugo and then push it to the GitHub Pages Repo for me.

The workflow file for this can be found [here](https://github.com/kasuboski/personal-site/blob/master/.github/workflows/gh-pages.yaml) if you just want to copy it.

The basic steps are: check out the code repo, build the site with hugo, push the files to the GitHub Pages Repo, and notify me of the status using [Pushover](https://pushover.net).

It relies heavily on already available actions. The only prerequisite setup is to make a deploy key for the GitHub Pages Repo and to register an app with Pushover.

You can find a walkthrough of creating a deploy key [here](https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-create-ssh-deploy-key).

Configuring a Pushover app is [here](https://pushover.net/apps/build). You'll need the app token and user token. I added both as secrets on the Code Repo.

Now anytime I push a change to the code repo, GitHub Actions will generate the files, update the GitHub Pages repo and send me a push notification with the status.

What's your personal site setup?
A guide on using a design system for email
Tags: productivity, tutorial, webdev, html
Published: 2020-08-14 19:24:15

---
title: A guide on using a design system for email
published: true
description: Overview of how to use a design system to help with your email's production
tags: productivity, tutorial, webdev, html
cover_image: https://blocksedit.com/img/email-design-system-guide-preview.jpg
---

A design system is a set of documentation, tools, and resources to help your team scale design and code-related processes by using a shared workflow and assets to help follow brand guidelines. It helps solve the following problems:
* Allows everyone to easily understand decisions made (including non-designers and developers), while having to make less of them as they can refer to a single source of truth for how to do things
* Improves workflow, not having to reinvent the wheel each time by reusing components and following best practices
* Maintains consistency with on-brand visuals and messaging voice and tone
* Fixes design and code debt with a reusable framework for increased efficiency and speed
* Communicates expectations clearly to team members with guidelines to refer to when questions come up, reducing the potential for specs and tasks to be misunderstood or misinterpreted

###[Check out a complete guide and template doc for setting up a design system for your email work](https://blocksedit.com/email-design-system/)