Forem: Jaye Hernandez

The Good Place - A GitHub Action 🍤

Jaye Hernandez — Wed, 19 Aug 2020 16:16:36 +0000

My Workflow

The Good Place may have ended, but you can be an architect of your own neighborhood (your repository) with The Good Place action! This GitHub Action:

Replaces curse words in Issues and Pull Requests with approved words in The Good Place

Comments a forking accurate GIF when you first label an issue (supports GitHub's default labels)

Submission Category

I absolutely LOVE this show! I can't get the idea out of my head so here it is. This is an entry for Wacky Wildcards. 🍤

Yaml File or Link to Code

More info about the action can be found here:

jayehernandez / the-good-place

A GitHub Action that lets you be an architect of your own neighborhood (your repository) in The Good Place

A GitHub Action that lets you be an architect of your own neighborhood (your repository) in The Good Place

🍤 Features

Replaces curse words in Issues and Pull Requests with approved words in The Good Place

Comments a forking accurate GIF when you first label an issue (supports GitHub's default labels)

🧐 How to Use

Create a new file titled action.yml inside the .github/workflows directory of your repository and copy the code below.

on:
  issues:
    types: [opened, edited, labeled]
  issue_comment:
    types: [created, edited]
  pull_request:
    types: [opened, edited]
  pull_request_review_comment:
    types: [created, edited]
jobs:
  build:
    runs-on: ubuntu-latest
    name: The Good Place
    steps:
      - name: The Good Place Action
        uses: jayehernandez/the-good-place@v1.1
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}

🙏🏻 Acknowledgements

Octokit Rest API
GIFs from Giphy

Give a ⭐️ if you think this project is cool!

…

View on GitHub

Or, you can create a new file titled action.yml inside the .github/workflows directory of your repository and copy the code below.

on:
  issues:
    types: [opened, edited, labeled]
  issue_comment:
    types: [created, edited]
  pull_request:
    types: [opened, edited]
  pull_request_review_comment:
    types: [created, edited]
jobs:
  build:
    runs-on: ubuntu-latest
    name: The Good Place
    steps:
      - name: The Good Place Action
        uses: jayehernandez/the-good-place@v1.1
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}

v1.1 introduces a fix for the Scunthorpe problem as flagged in this comment!

Additional Resources / Info

The action was created using JavaScript and the Octokit API. The documentation provided for Octokit was easy to understand for beginners like me. GIFs used were from GIPHY.

Huge thank you as well to the JavaScript Actions course of the GitHub Training Team which taught me the basic concepts I needed to learn. I highly suggest that you check that out if you'd like to create your own.

Are you a fan of The Good Place? Let me know what you think about this action!

3 Ways to Spice up your GitHub Profile README 🔥

Jaye Hernandez — Sun, 12 Jul 2020 04:25:15 +0000

GitHub recently released a feature which allows you to add a README to your profile page. This is a great way to introduce yourself to the GitHub community as you highlight your skills and projects. In this post, we'll be looking at ways on how you can improve your README! 💯

What's a Github Profile README?

Since release about two weeks ago, there have been a ton of articles on dev.to about what the GitHub Profile README is about and how you can set up your own. Here's an informative article by Monica Powell to get you started:

How To Create A GitHub Profile README

Monica Powell ・ Jul 11 ・ 3 min read

#github #branding #markdown

This tweet by Caneco contains a summary of what it's all about:

/dev/caneco

@caneco

🔒"You found a secret!"

Apparently `yourhandle/yourhandle` is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. 🤭

15:20 PM - 04 Jul 2020

251 1017

Do note that as of writing, this feature is not yet available to all GitHub users.

What to add to your README?

While sometimes simplicity is best, I do think that the README is a way to make a lasting first impression to others (this includes potential employers!). Let's break down some of the elements you can add to your own page.

I'll be using the README I created for my GitHub Profile as an example.

1. 📸 Add Images and Icons

Make your page memorable by uploading some images to your repository.

You can add a hero image, which is basically a large banner at the top of your page. This is the first thing that people will see when they visit, so make it enticing!

You'll notice that your eyes gravitate to the huge header image!

Want to link to external sites? Add some icons which redirect to your social networks or projects. I used the free and open source RemixIcon library for mine and just changed the color to suit the color scheme.

One thing to note: Make sure your images are of great quality. We wouldn't want images to show up pixelated. If you are using vector images, upload them using SVG instead of JPG or PNG.

2. 📈 Include Statistics

If you are using GitHub for your projects or use it to contribute to open source, you probably have a lot of commits and Pull Requests. Anurag Hazra created this amazing widget which compiles all those stats into one!

Here's the blog post if you want to learn more:

Dynamically Generated Github Stats For Your Profile ReadMe

Anurag Hazra ・ Jul 10 ・ 2 min read

#showdev #github #api #statistics

You can also add a widget that counts the number of page visits in your page. This widget created by Jiang Wenjian does the job, and it's very easy to setup. The docs for the visitor badge is available in this site!

3. 🛠 Use HTML

You are not limited to Markdown when it comes to editing your README. GitHub's Flavored Markdown allows using some of the HTML tags.

Here's some of the basic things you can do:

Center a section using <center>

Create a widget that opens and closes using <details>

For advanced use, you'll want to read up on the HTML blocks section to see the other tags that are available for use.

Hope this helps you in creating your own README! You can see the source code for mine over at my GitHub profile. Leave a ⭐️ if you found it useful!

jayehernandez / jayehernandez

Profile README + Site made with 11ty and TailwindCSS

I'd love to know what you came up with for yours! Add your README's down below, or tweet them over at @jayehernandez_.

Sudden Influx of Issues in my GitHub Repo? 🤖

Jaye Hernandez — Wed, 24 Jun 2020 15:49:50 +0000

I launched an open source side project last month and bots have been taking over — well, hopefully not?

A little background: I maintain a repo at Github for over a month now, and new issues from different people are popping up. This is great - more people wanted to collaborate!

I made it beginner-friendly so that people can have an introduction to open source. This wasn't the initial goal, but I'm happy with the direction it's taking. Sometimes though, there would be a surge of new issues with odd titles, and the description would be a default template. 🤷‍♀️

Here's the running list of all the ones we've caught so far. Attaching some sample issues below:

984971 #182

reetine posted on Jun 17, 2020

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

View on GitHub

Hi sir how ryou #133

matelecom123 posted on Jun 04, 2020

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here. Hi sir how r you how to use mikmon

View on GitHub

Shoutout to @vaibhavkhulbe for always checking on the issues page, a great guy to collaborate with!

I gave them the benefit of the doubt at first. Maybe they're just first time contributors, right? It started to get really fishy though. There was even a PR that featured Python code, when the repository was built with Vue.js and Node.js. What is "kay"? 😂

Create kay #139

olukayode545 posted on Jun 04, 2020

View on GitHub

To be quite frank, I was just really confused at how this small project was found. So what steps did I take? Note this for your future 🤖 encounters!

1. 🕵️‍♀️ Check the accounts

First thing you can do is to visit the account's Github profile page to determine if the account is legit or not. The people (or are they even people?) opening up these issues had some things in common:

Blank GitHub Profile
Little to no activity
Newly created accounts

Compare these two and tell me which is more suspicious:

Quick tip: Set up your GitHub Profile. Add a display picture and a short summary about yourself!

2. 🗄 Categorize the created issues

I didn’t want these issues to clutter up the Issues page since this is one of the first pages that people go to when they want to contribute. So we got to clean this up by:

Removing any attached labels and adding an invalid label
Closing the issue

3. 🚨 Report the accounts

Last thing to do is to report the user who created the issue. You can do this in two ways. Do note that you can only report a few accounts at a time!

Report from the issue itself
Report from the user's page

This will then show up GitHub’s report page, and you can add in details about your complaint there. I have yet to receive any confirmation on the reports I made from Github though. :(

These definitely lessened the spam issues coming in, but it’s not completely gone yet. Have you experienced this with your repository? What preventive measures did you take? I would love to know!

VSCode Extensions for Faster Testing with Rspec 🛠

Jaye Hernandez — Sun, 24 May 2020 03:04:21 +0000

Let's run through some extensions to improve your workflow if you use Rspec, a testing tool for Ruby!

It’s another one of those VSCode extensions post - I know. But trust me on this one.

If you haven’t heard about Visual Studio Code (VSCode), it’s a text editor by Microsoft. One of the reasons why it's my editor of choice is the ability to install extensions made by fellow developers.

You can actually spend a day just installing and configuring extensions to your liking. Not that I did that. 😅

These three extensions made Test Driven Development (TDD) with Rspec much better. I love the ease of use these offer without sacrificing anything. Writing tests became faster and easier for me to do, I hope these help you out too! Hey that rhymed.

Rails Go To Spec by sporto

No need to look through your files in the sidebar, or use the search bar to open the spec file. You can jump between code and spec files with one command: Ctrl + Shift + Y (Cmd for Mac)

If the code file does not exist yet, this creates one for you! Works both ways.

Use case: I often do this at the start of the test writing process. I create the code file first, then press Cmd + Shift + Y to create the spec file.
Rails Run Specs by Peter Negrei

I used to get the path of a file/inside/lots/of/folders/sad_spec.rb just to type out the test command: bundle exec rspec file/inside/lots/of/folders/sad_spec.rb.

This extension runs a spec file for you with in one swift command: Ctrl + Shift + T (Cmd for Mac) It works even if you are in the code file as well, which is a pretty nifty feature.

Use case: Probably my most used extension as I use it to run all the tests in one file. Gotta make sure they all pass. 💯
Ruby Test Explorer by Connor Shea

If you're a more visually oriented person, this is the extension you’re looking for. It helps you visualize all the tests in one file, with groupings according to files inside a describe or context block.

You get to see which blocks passed and which failed in an instant, and re-run any of those on their own.

Image from Connor Shea

Use case: Great for debugging that one single failing test that you have absolutely no idea why it’s failing when all other 10 tests passed. You can just select that single test (or block of tests) and debug.

This is just a small list, but the impact they have is unmatched.

Do you use any other VSCode Rspec extensions? I’d love to know about them, let’s help each other out!

Learning a Foreign Language? Try Letra: A New Tab Extension for Passive Language Learning ☀️

Jaye Hernandez — Sat, 02 May 2020 16:17:05 +0000

...and just to be 100% clear, I'm talking about foreign languages like German and French. Not programming languages. 😅

Why not learn something every time you open a new tab?

Introducing Letra. A Chrome Extension (Working on a Firefox extension as well!) that serves as a supplementary guide for learning a new language. A new word will pop up in your new tab every day, in your chosen language(s).

Go to the Extension

✨ Features

New word everyday
Listen to the word in the chosen language
New inspirational quote about learning
Dark Interface

🌎 Available Languages

🇩🇪 German
🇫🇷 French
🇪🇸 Spanish
🇯🇵 Japanese
🇰🇷 Korean
➕ More to come!

Launched this on ProductHunt yesterday, too. This is the first side project I created and it has been a crazy ride, but that's a story for another time.

Built with VueJS and NodeJS. Here's the repository for the extension! Do click on the Star ⭐️ button if you found it interesting

jayehernandez / letra-extension

Passively learn a new language every time you open a new tab

Passively learn a new language every time you open a new tab.

Download Chrome Extension

✨ Features

New word everyday
Listen to the word in the chosen language
New inspirational quote about learning
Dark Interface

🌎 Supported Languages

🇩🇪 German
🇫🇷 French
🇪🇸 Spanish
🇯🇵 Japanese
🇰🇷 Korean
🇮🇳 Hindi
🇵🇭 Filipino
🇮🇩 Indonesian
🇨🇳 Chinese (Simplified)
🇧🇷 Brazilian Portuguese
🇷🇺 Russian
🇸🇦 Arabic

🛠 Built With

Vue.js - Frontend
Node.js - Backend
Pug - Template Engine
Jest - Testing Framework

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page for any open issues. If this is your first time contributing to Open Source, check out the Contributing Guidelines.

You can also suggest a new feature by creating an Issue. Please wait for confirmation before working on it.

Good for First Timers

Add a learning quote (Easiest way to contribute! 🚀)
…

View on GitHub

EDIT: You can now contribute to this repository as well! 🎉

Let me know if you decide to try it out for yourself. I would love to hear your thoughts!