DEV Community: Yash Dave

Commiticons: Hashes are boring, Identify commits with Avatars via Actions

Yash Dave — Fri, 21 Aug 2020 13:17:51 +0000

It's a fine morning, the birds are chirping outside your window. You just had a hearty breakfast and are ready to get down to business, push some improvements to the next revolutionary project that you have been working on for the past month. You let out a small burp, chuckle to yourself and fire off git log to remind yourself what you did yesterday.

Immediately, a bunch of commits pop up on your screen lead by lifeless strings of chars. What a mood killer to the perfectly fine morning! Only if you had some better way to uniquely identify your commits.

I think I have figured out the solution:

My Workflow

"Why should users have all the fun?", the concept of identicons has been around for long and many websites use it to generate a default avatar for users. They take a unique property attached to the user, such as email or username. Next, they run a hashing algorithm on it which generates a long incredibly unique string, called as a hash, from your smaller unique string. This hash is then passed to an algorithm which generates images as programmed by its dev.

This is where my idea comes in. Since all git commits already have unique hashes, why not generate identicons for them? I configured a small (but interesting) workflow to automatically generate unique avatars for your commits. I call these avatars Commiticons, identicons but for commits! 😬🎉

Commiticons are avatars for your commits directly saved to your GitHub Commits as a Commit Comment.

Here's what the workflow does:

First, I check-out my repo with actions/checkout since I want to save the Commiticons to my repo.

- name: Checkout
  uses: actions/checkout@v2

Next, I want my Commiticons to be accompanied by a joke to make them even more fun. So, I use the infamous icanhazdadjoke API to grab one for me via cURL. I also must perform a few clean-up steps on them to make it simple for me to push them to the GitHub as a commit comment later.
I clean up any new lines, \n or \r\n, in the joke to prevent problems when I later push it to GitHub with cURL. The sed command replaces \n with the <br> tag. Next, the tr command deletes \r which is present in case of Windows Line Endings. Read more about \r, \n and the problem of CRLF.

- name: Get a dad-joke
  run: |
    echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"

Next, I replace all " in the text with ', via tr, in order to avoid clashes with the " with the commands in the cURL command. The $TEMP is the env variable that saves output of previous command.

- name: Escape double-quotes
  run: |
    echo "::set-env name=DAD_JOKE::$(echo "$TEMP" | tr \" \')"

These commands are enclosed within echo and set-env to save them as Environment variables for future steps.

Now, I use the GitHub REST API v3 to push them as a commit comment. Here are some more details about how to Create a commit comment. The request is also authenticated by using GITHUB_TOKEN.

- name: Create commit comment
  run: |
    curl \
    -X POST \
    -H "Accept: application/vnd.github.v3+json" \
    -H 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
        $GITHUB_API_URL/repos/$GITHUB_REPOSITORY/commits/$GITHUB_SHA/comments \
        -d "{\"body\":\"| ![Commiticon](https://avatars.dicebear.com/api/human/$GITHUB_SHA.svg?h=250) | $DAD_JOKE |\n|:-:|:-:|\"}"

The process of generating the Commiticons is handled by Dicebear Avatars, a hidden gem that I was glad I came across! They are the ❤ and soul of Commiticons.

Finally, I save the svg image to my repo which is already present here courtesy of actions/checkout in first step!
I also need to push it to my repo via git. You might be going "Wait what? Isn't this already GitHub?". It's a Gotcha that had me surprised when I was new to Actions too! In simple terms, actions are their own computers which run automatically by following a script which we provide them (our workflow files).

- name: Write Commiticon
  run: |
    curl https://avatars.dicebear.com/api/human/$(echo $GITHUB_SHA).svg?h=250 --output .commiticons/$(echo $GITHUB_SHA).svg

- name: Push Changes
  run: |
    git config user.name Amorpheuz
    git config user.email connect@amorpheuz.dev
    git add .commiticons/
    git commit -m "Generated Commiticon for: $GITHUB_SHA"
    git push

Submission Category:

I would happily argue that this is a "Maintainer Must-Have". But on further thought, I would like to nominate this Workflow for the "Wacky Wildcards" category. Who wouldn't find a commit followed with a Dad joke Wacky?

Yaml File or Link to Code

Amorpheuz / Commiticons

Bring your commits to life with unique Avatars for each of them!

Commiticons

Bring your commits to life with unique Avatars for each of them!

"Why should users have all the fun?"

The concept of identicons has been around for long and many websites use it to generate a default avatar for users. Since all git commits already have unique hashes, why not generate identicons for them? I configured a small (but interesting) workflow to automatically generate unique avatars for your commits. I call these avatars Commiticons, identicons but for commits! 😬🎉

A submission for the DEV: GitHub Actions For Open Source! hackathon! Read more about commiticons on my blog post Commiticons: Hashes are boring, Identify commits with Avatars via Actions.

Demo

Workflow File

The workflow file for Commiticons can be found at .github/workflows/commiticons.yml.

Core Functionality

Commiticons are a concept, they are unique avatars for a specific…

View on GitHub

Workflow file:

name: Generate Commiticon

# Controls when the action will run. Triggers the workflow on push
# events but only for the main branch
on:
  push:
    branches: [ main ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:

    # Checkout latest commit
    - name: Checkout
      uses: actions/checkout@v2

    # Fetch a dad joke from icanhazdadjoke and replace newlines with <br> tag
    - name: Get a dad-joke
      run: |
        echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"

    # Replace double quotes with single quotes to avoid clashes in further text
    - name: Escape double-quotes
      run: |
        echo "::set-env name=DAD_JOKE::$(echo "$TEMP" | tr \" \')"

    # Add Commiticon as Commit Comment
    - name: Create commit comment
      run: |
        curl \
        -X POST \
        -H "Accept: application/vnd.github.v3+json" \
        -H 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
        $GITHUB_API_URL/repos/$GITHUB_REPOSITORY/commits/$GITHUB_SHA/comments \
        -d "{\"body\":\"| ![Commiticon](https://avatars.dicebear.com/api/human/$GITHUB_SHA.svg?h=250) | $DAD_JOKE |\n|:-:|:-:|\"}"

    # Write file to .commiticons folder
    - name: Write Commiticon
      run: |
        curl https://avatars.dicebear.com/api/human/$(echo $GITHUB_SHA).svg?h=250 --output .commiticons/$(echo $GITHUB_SHA).svg

    # Push changes
    - name: Push Changes
      run: |
        git config user.name Amorpheuz
        git config user.email connect@amorpheuz.dev
        git add .commiticons/
        git commit -m "Generated Commiticon for: $GITHUB_SHA"
        git push

Additional Resources / Info

Here are all the projects that make this workflow possible, A huge shout out to all of them:

Dicebear Avatars for the lovely avatars. 🖼
Icanhazdadjoke for the jokes! 🤣
actions/checkout for making repo interactions a breeze. 🏄🏽‍♂️
The sed, cURL and tr commands. 👨🏽‍💻
GitHub Docs for all the knowledge! 🧠

With Commiticons, I aimed to improve my grasp over not only Actions but also shell commands. Commiticons can be used for a variety of useful things too, like identifying releases with their unique avatars, jailing an avatar for mischief (if it introduced a bug) or even celebrating its birthday every year with a cake! The possibilities are endless. 🤯

I hope you found this concept fun and look forward to seeing how you take it ahead! If you are confused about something, have some ideas, or just want to chat; reach out to me via my Twitter @Amorpheuz, the discussion below or via DEV Connect!

WSL2: Setup DEV.to with Linux but on Windows!

Yash Dave — Thu, 18 Jun 2020 10:18:08 +0000

This post was originally posted on my new and shiny blog site amorpheuz.dev, do give it a visit! You will also find a bonus section on setting up Chrome in WSL towards the end, which will enable you to run test-cases on your machine.

Hey Everyone! In this post, I will be outlining how you can run the DEV Community website on your windows machine with all your dependencies installed to Linux. Installation - DEV Docs lists a variety of methods you can use to do the same, and we will be following the Linux Guide with minor modifications.

WSL was the first time where I was able to work with a Linux environment. Since then, the idea of running Windows and Linux together has always been fascinating to me. I have been dabbling with dual-boot systems of Windows and Manjaro, but it does keep breaking time to time leading me to setup Manjaro again. With the introduction of WSL2 to Windows Stable with version 2004, I was excited to try setup DEV again on Windows. WSL2 brings a lot of improvements over WSL1, including better support for applications, and you can read more about them in this VS Code Blog from when WSL2 was in beta.

Prerequisites
Installing DEV's presrequisites
- Ruby & rbenv
- Nvm, Node and Yarn
- PostgreSQL
- Imagemagick
- Redis
- Elasticsearch
Installing DEV
End Notes

Prerequisites [Back to Top]

Before we start, if you are new to Windows Subsystem For Linux, I recommend following the Install Windows Subsystem for Linux (WSL) on Windows 10 documentation on how to install it. After setting up WSL2 as the default version, download the Ubuntu 18.04 LTS distribution.

Visual Studio Code is an open-source code editor by Microsoft that has a ton of features. One of its extensions allows a developer to Remote into the WSL environment and directly develop over there! I recommend installing the Visual Studio Code application with Remote development in WSL extension if you aren't comfortable with terminal-based editors.

After completing the initial setup, we move on to another bunch of prerequisites, the repository prerequisites!

Installing the DEV community's prerequisites

Ruby & rbenv [Back to Top]

Rbenv is a nifty tool that allows developers to set up a Ruby environment easily. Grab a quick note of the Ruby Version listed in the badge of DEV's README.md file before you begin.
Install Ruby's dependencies with the following commands.

sudo apt-get update 
sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev

Clone rbenv and Ruby with the following set of commands, replace *.*.* in the second-last and third-last lines with the ruby version you noted earlier. If you are not using Bash as your shell, replace ~/.bashrc with the config file of your shell.

cd 
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer | bash
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
 exec $SHELL
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

rbenv install *.*.* 
rbenv global *.*.* 
ruby -v

Nvm, Node & Yarn [Back to Top]

Like how Ruby has a version manager, Node has one too, called nvm. Take a note of the node version from here. To install it, follow the commands below. Replace *.* with the version in the link above.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
exec $SHELL
nvm install *.*
node -v

Then install Yarn with the following commands.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
yarn -v

PostgreSQL [Back to Top]

PostgreSQL is the database that powers DEV. Let's install it next! Run the following commands to set up PostgreSQL. Make sure to replace $YOUR_USERNAME with the username you set for Ubuntu.

sudo apt update && sudo apt install postgresql postgresql-contrib libpq-dev
sudo -i service postgresql start
sudo -u postgres createuser -s $YOUR_USERNAME
createdb
sudo -u $YOUR_USERNAME psql

The last command will open PostgreSQL's shell for you. Use the command \password to set a password for your user. After setting up the password, use the command \quit to exit.
Use the command sudo -i service postgresql start to start PostgreSQL server everytime you restart your WSL machine.

Imagemagick [Back to Top]

Imagemagick is an open-source Image manipulation software suite that is used by DEV and lots of other projects to modify and optimize images. Although there is an option to install Imagemagick from the source, we will be installing it as a package via apt. I have noticed from different issues on github that installing from the source lead to buggy installs on WSL.

sudo apt update && sudo apt install imagemagick

To check if the installation was successful, use the command identify with a path to a .png or .jpg file, example identify 10489.png. Pro Tip, to open the Linux environment in Window's file explorer, use explorer.exe .!

Redis [Back to Top]

Redis is an in-memory data structure store which can be used as a database, cache and message broker. Use the following commands to install it.

sudo apt update && sudo apt install redis-server
sudo -i service redis-server start

Execute the command redis-cli to verify its installation. It will open the Redis CLI. Type exit in the Redis CLI to go back to the shell.
Use the command sudo -i service redis-server start to start the Redis server everytime you restart your WSL machine.

Elasticsearch [Back to Top]

DEV uses Elasticsearch for lightning-fast search results. Follow the commands below to install it.

cd
wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-oss-7.5.2-linux-x86_64.tar.gz
wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-oss-7.5.2-linux-x86_64.tar.gz.sha512
shasum -a 512 -c elasticsearch-oss-7.5.2-linux-x86_64.tar.gz.sha512 
tar -xzf elasticsearch-oss-7.5.2-linux-x86_64.tar.gz
cd elasticsearch-oss-7.5.2/
echo 'export ES_HOME="$HOME/elasticsearch-7.5.2/"' >> ~/.bashrc
echo 'export PATH="$ES_HOME/bin:$PATH"' >> ~/.bashrc
exec $SHELL

To run the Elasticsearch server, run the command elasticsearch.

Installing DEV [Back to Top]

Congratulations! You are almost done with your journey, now for the final stretch. We will be setting up your fork of the DEV repository on your machine.

Fork DEV's repository by clicking on the Fork button on the top right of the dev.to repository on GitHub.
Clone your forked repository. Here's a quick rundown of the concepts of Forking a repo by GitHub if you are new to Git & GitHub.
Run the command gem install bundler within the dev.to folder on your machine which you get after cloning your fork. All the further instructions refer to items within the dev.to folder unless mentioned otherwise.
Now, we need to set up some configuration details for the other tools to work with your DEV fork on the local machine.
- If you are a VS Code user and set up with Remote development extension, execute the command code ..
- Create a file called application.yml inside the config folder. This file will contain sensitive details and thus is automatically ignored by git via configuration in .gitignore. Here's more information on gitignore.
Within the application.yml file, add the following piece of code. Replace USERNAME with the username of your ubuntu user which you also set for PostgreSQL earlier. Replace PASSWORD with the password for the same user while configuring PostgreSQL.

DATABASE_URL: postgresql://USERNAME:PASSWORD@localhost

I also recommend setting up GitHub credentials by following GitHub Authentication - DEV Docs. You can set up the credentials with the following format in application.yml. Add Client ID on GitHub beside GITHUB_KEY: and Client Secret beside GITHUB_SECRET:. Don't forget to leave a space (whitespace) after the : and before the Client ID and Client Secret. These variables enable your local copy to login with GitHub.

GITHUB_KEY: 
GITHUB_SECRET:

Now, time to use the two magic commands bin/setup and bin/startup.

Make sure you have Redis and PostgreSQL Services, and Elasticsearch running before you fire the following command. You can check the status of services with the command sudo -i service --status-all, the services with + beside them are running.
Run the command bin/setup. This command will perform an automatic setup of all the related services and dependencies.

That was it! After the bin/setup command gets completed, Run the command bin/startup and open localhost:3000 in your browser to see your copy of DEV load up! It will take some time for the server to boot, I recommend waiting until webpacker posts Compiled Successfully before trying to load localhost:3000.

Press Ctrl + C in your console windows to shut down elasticsearch and DEV server when you are done!

End Notes [Back to Top]

Thank you for making it this far! I would love to see you tweet me @Amorpheuz a screenshot of DEV running on your local machine. If you encounter any problems or still are confused about a certain part, feel free to leave a comment or shoot a DM on DEV/Twitter.

Getting Open Source Projects running on local machines if often one of the most intimidating tasks of starting contributing to one, with this post I hope I made your journey of contributing to DEV easier! You can go in-depth about many of the finer details on DEV Docs at your own pace.

I have a Portfolio now 👨‍💻🎉

Yash Dave — Sun, 31 May 2020 17:22:53 +0000

Edit

Updated URLs to the new domain ♥

Hey Everyone, I'm very thrilled to announce that the first version of my portfolio website is ready for everyone to see! Check it out at https://amorpheuz.dev/.

I am originally a front-end developer, who has been polishing his React and Gatsby Skills throughout the past year. But my current pursues of Data Science academically ended up hampering my progress where I couldn't find time for projects. At the start of the worldwide lockdown situation, I was determined to get at least a couple of projects completed during my time at home. The first one of those finalized was my Portfolio Website.

Throughout 2020, I started coming across more and more blog posts that emphasized Blog Post Syndication. And you know what, they sold the idea to me! I started researching various things from other dev portfolios/blogs to design systems for it. The recent Blogging for Devs by @monicalent acted as a reaffirmation of my plan.

I found the Terminal theme by @PaulieScanlon to be the perfect foundation for my plan and started working on the idea. Many developers go with building their portfolio from scratch. I felt it would be better to start with a solid base/starter rather than starting from nothing. It thereby highlights my ability to integrate with others with my custom touches to the base. What I envisioned was a website that gave the visitor a feel of editing his development environment, basically their virtual home. My portfolio is the initial interpretation of the plan!

As you might have noticed already, I feel developing a portfolio is a continuous process. The milestone I have reached feels a great stable before moving ahead, and thus I have decided to showcase it to get some feedback! Please do leave your feedback in the comments. 😀

Before closing out, I would like to post a mix of my long and short term plans on what's next for my blog!

Enable Canonical URLs after obtaining a custom domain.
Start with syndication from my next blog post (Coming soon 😉).
Develop custom components for third party content like DEV does with its liquid tags.
Improve SEO with further research.
Add support for the Hindi Language on the website, improve accessibility.
Customize layouts and GraphQL queries to fetch more custom data.
Add comments & interactivity to the website via serverless architecture.
Integrate Projects & activity with GitHub API.

Follow me on Twitter at @Amorpheuz to catch up on my progress! Once again, thank you to @PaulieScanlon for providing such an awesome theme. I am looking forward to what you folks have to say about it!

P.S. Here's a link to the Heart in the footer to use, as thank you for making this far. Open with your favorite text editor and change the fill values to modify its colors!

How should a total beginner to the field of CS and Programming get started?

Yash Dave — Fri, 31 Jan 2020 16:59:14 +0000

Hey DEV community! I have recently come across a situation that has put a great sense of responsibility on me. I come from a family where even the cousins like to stay in touch and meet regularly and I have turned out to be the eldest in my generation of cousins. 😲🎉

Now the time has finally come where I have a younger cousin who has finally reached the age of selecting what career she wants to pursue in the future. The awesome part is that she is interested in looking into the field of computers as a future. The catch is that I am the first person in this giant household/family to have ever pursued the field of Computers as a study choice and I still am pursuing my masters. 👨‍🎓

Her family would like me to help her out on checking out the field and decide whether she wants to fully commit or not! How do I do that?

She has never had any computer subject as a study course in her school and high-school tenure, so one can assume she is a total newbie to the field.

Should I introduce her to the concepts of computer science like logical thinking, algorithms, basic data structures initially? OR
Should I go for a basic programming language like C/Python?
Should I find and introduce her to some of those no-code drag and drop tools which I have seen in news articles help children of much younger age than her learn too? (Do recommend if you have used any and loved it!) OR
Should I introduce here to a get started with XYZ Language?

I would love to hear from people more experienced in the field, both computer science, and the elder brother ones 😆, on what they think should be a sound option. Thank you for your time and help!

Hacktoberfest Week 2 & 3: Refactors and Bug Fixes!

Yash Dave — Sun, 20 Oct 2019 16:56:30 +0000

Hello Everyone! During week 1, I had sent out my first PR to the DEV Repo, and I continued the mission through weeks 2 and 3. I have already become considerably familiar with workings of the Repo and thus felt it was the better choice while I had less time to spare. By the way, do check out their Repo if you haven't yet!

forem / forem

For empowering community 🌱

For Week 2, the issue I helped tackle was Issue #3777. An issue for fixing lint errors throughout the JavaScript files of the repo.

Lint issues with JavaScript Files #3777

nickytonline posted on Aug 20, 2019

Describe the bug This compliments work being done in #2470.

The *.js files inside app/javascript and app/assets/javascripts still have plenty of lint issues

To Reproduce Steps to reproduce the behavior:

From the command line in the app/javascript folder, run eslint . --ext .js From the command line in the app/assets/javascripts folder, run eslint . --ext .js

Expected behavior There shouldn't be any lint issues.

Time to do some cleanup 😆

View on GitHub

It consisted of tons of files that required fixing and it was recommended to resolve one file at a time. By the time I viewed the issue, Rhymes had already listed an extremely helpful task-list for the list of remaining files and was actively helping out to mark which files had already been grabbed or were still up for grabs. I started taking grabbing one file at a time and resolving them one after another. While testing out one of the Pull Requests fully, I also ended up on an issue where Errors were being printed to the /Comments sub-page of the articles due to it trying to reference an element that is only present on the article page itself. Here's a list of all the PRs I opened for the files I fixed:

🤯🤯 So many of them! Even I don't know how I managed that. They weren't smooth sailing but I did learn a lot of lessons while tackling them!

Always test-out manually whatever you are refactoring. Just because it's appearing correct visually doesn't mean it is fully working. I noticed the reaction numbers loading correctly but forgot to test out the functionality for actually reacting to the article which turned out to be broken. 😅
Never forget to check the contents of a file it runs an eslint auto-fix due to a pre-commit hook. Turns out it might break itself. 😆
if(element) is a thing in JavaScript, the things about JavaScript I learn daily, hehe. 😅😅

That list also means I have fully completed the Hacktoberfest Challenge. But I feel unsatisfied! Surely I am not the only one? Turns out I ain't, I loved reading that so many others were feeling the same and had become addicted to contributing! Maybe I am one of them now. 😳 Yay! 🎉🎉

Week 3 turned out to be a Responsiveness fix. Dev.to has slowly become my pastime for the day when I am out and about, maybe chilling a bit post-lunch or riding a taxi back home (Darn you rains). Thus a lot of browsing was done on my trusty smartphone, via the PWA. While replying to one of the Hacktoberfest posts, I tried attaching a Screenshot and turns out Images were overflowing the container in the Comment Previews!? Time to open an issue. 👨‍💻

Images in comment preview are not scaled down to container width on mobile #4382

Amorpheuz posted on Oct 11, 2019

Describe the bug The image when uploaded through the mobile site/PWA isn't scaled down to fit the comment's container when in preview mode.

There is an earlier issue which #3264 which was marked as a duplicate of #3085 which was fixed by #3086 but from what I can see, that only tackles the image upload button's issue.

To Reproduce

Open any article on DEV, say this
Go to comments, upload a large sized image. (In my case I just added a screenshot)
Click on the preview button.
The image will overflow.

Expected behavior The image scales down to the preview container's size as it does when the comment is posted.

Screenshots

Desktop (please complete the following information):

OS: N/A
Browser: N/A
Version: N/A

Smartphone (please complete the following information):

Device: Nokia 6.1
OS: Android 9
Browser: Chrome
Version: 77.0.3865.116

Additional context The image is correctly sized when posted as the CSS for class single-comment-node adds CSS for the image to be max-width: 100%. A similar CSS solution should be viable for the preview.

View on GitHub

I picked it up once I was done with the Refactor fixes and opened my favorite browser to tackle such issues, the Firefox Developer Edition. Seriously, give it a try if you have never done it, I ensure you it will be love at first sight! I straight up opened two tabs, one with the comment preview and one with an article preview (which I knew worked correctly). I compared the behavior of images on both and found the img element in comment preview to be lacking the CSS max-width: 100%. Next, I tackled on how to ensure that the CSS only affects the images inside the preview-box of the comments and Aha! I had a working solution. I tested it out with varying resolutions to ensure that no funny behavior was occurring and opened my PR.

[deploy] Fix Image Overflow in Comment Preview - #4382 #4466

Amorpheuz posted on Oct 16, 2019

What type of PR is this? (check all applicable)

[ ] Refactor
[ ] Feature
[x] Bug Fix
[ ] Documentation Update

Description

Enforces max-width:100% on images in .comment-preview-div to prevent them from overflowing their container.

Related Tickets & Documents

Fixes #4382

Added to documentation?

[ ] docs.dev.to
[ ] readme
[x] no documentation needed

Screenshots of bug fix

Before:

After:

[optional] What gif best describes this PR or how it makes you feel?

View on GitHub

Currently, I am waiting for my PR to get fully approved and resolve errors if any. My aim for the remainder of Hacktoberfest is to find a new Repo to contribute to and successfully submit a satisfying PR. How is your Hacktoberfest going till now? Feel free to hit me up in DMs for any beginner-ish level troubles you are encountering with Hacktoberfest. Have a PR filled Hacktoberfest to you all! 🎆🎊

Adding the DEV badge to github.dev starter website

Yash Dave — Sat, 12 Oct 2019 19:41:29 +0000

Hey everyone! How is your Hacktoberfest going on? Mine has been awesome so far and I hope yours has been too!

Getting my portfolio site has always been on the back of my mind as a project I would like to complete this year. I recently learned about two great ways you could easily start with a basic portfolio/showcase/blog site just by performing a few clicks.

The Github Personal website generator

github / personal-website

Code that'll help you kickstart a personal website that showcases your work as a software developer.
The DEV's very own Static Blog

You can now generate self-hostable static blogs right from your DEV content via Stackbit

Ben Halpern for The DEV Team ・ Sep 26 '19 ・ 4 min read

#meta #projectbenatar #webdev #changelog

I decided to try out both of them and am currently experimenting on the GitHub personal website. One of the awesome features of it is that many of the basic features like adding your Social Tags, your programming interests and enabling blogs are extremely easy to do. I found it to be more feature-rich than DEV's offering, which is a given since DEV's offering is new and just launched the last month.

So, off I went configuring basic elements of the site while also reading up on Primer the site's CSS framework for future modifications. While configuring my social links, I noticed that DEV was missing 😱! At the back of my mind, I remembered that DEV gives a link to easily configure your badge on your personal site in the Settings of your Profile. Time to get that badge on my site!

Tutorial

Once you have configured your personal website as per the instructions in the README.md of github/personal-website follow these steps:

Go to _config.yml and scroll down till you see the social_media dictionary begin.
Under Behance's line, with a similar amount of padding as the other lines, add dev: <username> where <username> is the text after https://dev.to/ on your profile link.

E.G.: My profile link is https://dev.to/amorpheuz so I will add
dev: amorpheuz.
Go to social_media.yml in the _data folder. Add the following content below behance's icon_svg in a similar arrangement as the other social media sites:

dev:
  name: DEV
  profile_url_prefix: https://dev.to/
  icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512" fill="#959da5"><path d="M137.3,201.5c-4.4-3.3-8.9-5-13.3-5H104v119.4H124c4.4,0,8.9-1.7,13.3-5c4.4-3.3,6.7-8.3,6.7-14.9v-79.6C143.9,209.8,141.7,204.8,137.3,201.5L137.3,201.5z M461.8,0H50.2C22.5,0,0.1,22.4,0,50.1v411.9C0.1,489.6,22.5,512,50.2,512h411.7c27.7,0,50.1-22.4,50.2-50.1V50.1C511.9,22.4,489.5,0,461.8,0z M176.2,296.2c0,21.5-13.3,54.1-55.3,54h-53V161.1h54.1c40.5,0,54.1,32.5,54.1,54L176.2,296.2L176.2,296.2z M291.3,194.9h-60.9v43.9h37.2v33.8h-37.2v43.9h60.9v33.8h-71.1c-12.8,0.3-23.4-9.7-23.7-22.5v-143c-0.3-12.7,9.8-23.3,22.5-23.6h72.2L291.3,194.9L291.3,194.9z M409.7,326.7c-15.1,35.1-42.1,28.1-54.2,0l-44-165.5h37.2l34,130l33.8-130h37.2L409.7,326.7L409.7,326.7z"/></svg>'

NOTE: I have slightly modified the SVG provided by the DEV to remove the padding around the logo, as the logo spacing is taken care of by default by the site and others logos are added similarly without any padding. If you do change how logos are arranged/shown on the site always be sure to leave adequate spacing around every logo to make them distinctly clear from other elements.

And that's it! Startup your local development server by running bundle exec jekyll serve and bask in the glory of your own custom DEV badge 🎉🎉🎉.

That was all for this short tutorial, special thanks to DEV for providing the SVG at an accessible location! Feel free to ask help with any troubles you encounter during the setup process.

Diary of a Hacky kid: Hacktoberfest week 1

Yash Dave — Mon, 07 Oct 2019 15:42:06 +0000

Hey everyone! I would love to share my journey throughout Hacktoberfest with you all. Here is how my week 1 went.

While browsing through dev the week before Hacktobest began, I noticed certain links broken in a few articles. I had already started contributing to dev.to's repo, albeit small-time, and thus was fully aware of how bug reporting worked. Off I went to GitHub and opened

Links in Comments get appended by dev.to's URL #4101

Amorpheuz posted on Sep 24, 2019

Describe the bug When I clicked on the link to the leanpub in the comment of article Your First Year In Code: Now Available In Print! by Issac it redirected me to https://dev.to/isaacdlyman/comment/leanpub.com/firstyearincode instead of https://leanpub.com/firstyearincode. Just to confirm also created a test article here with a test comment which seems to be having the same issue!

Getting hit by dev.to's 404 Page instead.

base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:70 GET https://dev.to/amorpheuz/github.com/amorpheuz?i=i 404
XMLHttpRequest.send @ base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:70
w @ base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:111
m @ base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:111

The element seems to be coded correctly <a href="github.com/amorpheuz" rel="nofollow">github.com/amorpheuz</a>

To Reproduce

Go to here
Click on the test link in the comment.
Hit by 404 Page.

Expected behavior Should open the link correctly without appending dev.to.

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser: Google Chrome
Version: 77.0.3865.90 (Official Build) (64-bit)

Smartphone (please complete the following information):

Device: Nokia 6.1
OS: Android 9
Browser: Google Chrome
Version: 77.0.3865.90

Additional context

View on GitHub

One of the contributors to the repo, Akshay Mahajan, pointed out that it might be due to the href attribute of a tag missing the http:// or https:// protocol. I did some searching of my own after the hint which led to me finding out that the href tag needs to have the protocol defined for it to know that it is a separate link and not a relative path to a file on the server.

Time to figure out what causes this kind of link to appear in the href tag. I loaded up my development repo on VS-Code and entered in a simple link:
[Test](google.com)
Aha! I had managed to replicate the issue. The markdown parser did not account for whether the http(s) protocol was passed along with the URL or not. I grabbed the issue as something I would like to tackle and moved ahead onto figuring out a solution.

The technical overview is the place to start whenever contributing to dev, it provides a complete picture of all the technologies that power it and enables any contributor to know exactly what they are looking in the massive repo. I found out that Redcarpet and Rouge empower markdown parsing. A basic overview of RedCarpet's readme allowed me to figure out what exactly I should be looking out for.

Turns out there was already a file that was performing another task on the links and I had to just add my logic to the same. I decided that regex was the way to go for detecting if the link contained http(s) or not. I pulled up my favorite tool for regex, Regex101, switched to the unit testing mode and started formulating the regex.

The initial solution I came up with was /^(http(s*):\/\/)/m. It seemed to pass all the tests and I happily open a PR.

Bug/fixes links without http(s) #4155

Amorpheuz posted on Sep 30, 2019

What type of PR is this? (check all applicable)

[ ] Refactor
[ ] Feature
[x] Bug Fix
[ ] Documentation Update

Description

Fix invalid links in article/comments due to absence of http/https

updates app>lin>redcarpet>render>html_rouge.rb
checks if a link added to article or comment by author contains https:// or http:// or is nil.
- If true keeps link as is.
- If false appends // to the link in order to prevent it from appending to dev.to's url.

Related Tickets & Documents

#4101

Added to documentation?

[ ] docs.dev.to
[ ] readme
[x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

Figured out a way to test WSL changes via travis 🎉. After ditching a previous branch, hehe.

View on GitHub

Turns out my familiarity with Regex is still beginner tier, and there are a lot of subtleties involved when working with regex. Rhymes, one of the core team members, pointed out various flaws which I happily formulated a fix for. He also requested me to configure tests for the same.

Here's where I hit a roadblock, I am still learning ruby and have never written a test in any other language I am familiar with throughout my development career (I swear this is the year that changes). I also had my university exams (Ongoing as I write this post) which were going to last for the better half of the month. I notified about the same on the PR and since it was a core feature of dev that the fix was affecting, Rhymes requested whether one of the core contributors would see the PR to completion.

Mac came to my PR's rescue and carried it all the way to completion along with Rhymes and I am happy to report that the PR has been successfully merged. 🎉🎉

I am extremely satisfied to have such an adventurous first week in Hactoberfest and finally being able to contribute at a core functionality level (although partially) from the minor CSS fixes here and there.

Once again, thank you to all the people that helped me throughout my first week and a ton of thanks to all of them!

.ltag__user__id__178508 .follow-action-button { background-color: #161616 !important; color: #FFFFFF !important; border-color: #161616 !important; }

Akshay MahajanFollow

Full Stack Developer at LetX | JavaScript Nerd 👨🏼‍💻| ML Enthusiast 🤖| DMs open on Twitter.

.ltag__user__id__2693 .follow-action-button { background-color: #550a61 !important; color: #ffffff !important; border-color: #550a61 !important; }

rhymesFollow

Principal @ Forem/DEV

.ltag__user__id__560 .follow-action-button { background-color: #bc3c41 !important; color: #ffffff !important; border-color: #bc3c41 !important; }

Mac SiriFollow

I'm a refactor-loving developer and I promise you I have nothing to do with Apple's Siri.

Contributors Wanted: Mozilla Reps Mobile App

Yash Dave — Tue, 01 Oct 2019 09:26:13 +0000

Reps-Mobile aims to bring Mozilla Reps to your mobile with the help of Flutter!

obitodarky / Reps-Events-Mobile

reps.mozilla.org events data on mobile

Reps-Mobile

Reps Events Mobile

📝 Description

Mozilla Reps Events and Reps data on mobile.

🚀 Installation Guide

Install Flutter on your machine

Install flutter by selecting the operating system on which you are installing Flutter:

Flutter installation tutorial

To check if you have flutter installed along wtih proper necesarry SDKs installed run flutter doctor
Clone the Repo

To clone this repository, run git clone https://github.com/obitodarky/Reps-Events-Mobile.git Then run cd Reps-Events-Mobile
Get Packages Make sure you are in the Reps-Events-Mobile/reps_events_app directory
- From the terminal: Run flutter pub get.
  
  OR
- From Android Studio/IntelliJ: Click Packages get in the action ribbon at the top of pubspec.yaml.
- From VS Code: Click Get Packages located in right side of the action ribbon at the top of pubspec.yaml.
Test the App

Make sure you are in the Reps-Events-Mobile/reps_events_app directory.

Run the App

On terminal:
- Check that an Android device is running by running flutter…

View on GitHub

Hey everyone! Few of my friends from the MozGujarat community have started working on a Mobile app for bringing Mozilla Reps website to everyone's mobile devices a few months back. One can say it's a pretty new repo and still in the process of being fully flushed out.

They are looking for contributors that can help out with the same. They have issues up ranging from entry-level ones to intermediate ones that are up for grabs and will be posting more throughout the month.

Some of the issues, currently up are:

Create theme for the app #42

AyushBherwani1998 posted on Aug 11, 2019

Use case

Create a theme for the app to avoid styling widgets in every page.

Proposal

Currently there is no theme defined for the app and developer needs to style the widgets in every page. Creating theme for the app will remove the redundant styling required in every widget. You can refer this for more information Use themes to share colors and font styles

Would you like to work on this issue?

No

View on GitHub
Add Lazy loading to Images #36

obitodarky posted on Aug 10, 2019

Use case

The Images are getting fetched from an API. This sometimes takes a while to fetch all the images and they may start to behave improperly.

Proposal

We need to add lazy loading for images to load images properly when necessary.

Would you like to work on this issue?

No.

View on GitHub
Use Tabs instead of Drawer #21

obitodarky posted on Jul 23, 2019

Instead of using an App Drawer which has been implemented, it is a better idea to use Tabs. The App Drawer as such serves no purpose since we only have 3 pages. Therefore there is no such need of an App Drawer. To simplify things, we need a TabView. You learn more about Tabs in Flutter here

View on GitHub
Create custom gif for loading #39

AyushBherwani1998 posted on Aug 10, 2019

Use case

Create custom gif for loading animation.

Proposal

The current gif leaves a white patch in dark mode.

Would you like to work on this issue?

No

View on GitHub

Do check out the Repo for more issues throughout October!

How you can contribute

Grab an available issue to tackle.
Have an idea that isn't up in issues? Make an issue for the same and go ahead with it.
Found a bug? Open an issue.

Feel free to reach out to me or Harsh via DMs or in the discussion section below for any doubts.

.ltag__user__id__189729 .follow-action-button { background-color: #ce346e !important; color: #1acece !important; border-color: #ce346e !important; }

Harsh MehtaFollow

A Flutter Dev who likes to talk about tech and communities

Have a great Hacktoberfest and Happy Contributing!

Setting up Dev.to on Manjaro Linux for Hacktoberfest

Yash Dave — Mon, 30 Sep 2019 21:30:17 +0000

EDIT:

The guide is no longer up to date as there have been significant changes to the platform. Do refer to latest guidelines on https://docs.dev.to/ . Feel free to dm me if you are facing any trouble in the setup procedure on Manjaro!

As Hacktoberfest approached and my WSL setup of dev.to's repo not behaving properly when it comes to Acceptance testing; I finally steeled myself up for switching to a Linux distro for the same. Manjaro had always been on the back of my find from reading a lot of praise about it online and hearing about it from peers. I wanted something beginner-friendly, with a great team & community behind it along with the ability to game smoothly during the rare occasions I was free. Manjaro seemed to check all these boxes and thus I was all aboard the Manjaro train.

On a different note, this post is also going to talk about my experience too along with the steps. I also won't go fully into finer details of every step as that will make this guide more into a booklet, feel free to ask below if you are stuck somewhere!

The guide

Installing Manjaro

I am seriously amazed by how easy it was to install Manjaro compared to my previous experience with Fedora. I feel it was the experience and confidence I gained messing about in fedora and WSL along with the very detailed guide Manjaro provides.

I am not going to go into the install that much, and you should refer to the Installation guide and find the various flavors of the same at https://manjaro.org/download/.

There are a ton of options depending on what kind of environment you want, each flavor curating to a particular cause. I went with the KDE Plasma Version.

Personal Prerequisites

Once my Manjaro was smoothly running, I began with downloading all my development necessities. The list turned out to be:

VS Code
GitKraken
Google Chrome
Spotify

Snapcraft is a great app store for all your Linux needs and has easy to install packages of many major app publishers. Manjaro comes with a great GUI app that manages not only Snap packages but also Flatpak and AUR packages called Bauh. Search your applications in the same and you will find it easily.

I grabbed the Snaps for Spotify and GitKraken via Bauh but from past experience of VS Code's Snap misbehaving I decided to take a different route for it and Google Chrome.
VS Code and Google Chrome both have AUR packages that I grabbed off the website and installed. The steps are the same for both and are as follow:

Use git clone along with the Git Clone URL on the package page to download the repo at the location of your choice.
Take your terminal into the downloaded repo via Cd.
Run makepkg -si where s will generate the source tarball for the repo and i will install it after a successful build. Be ready with your root password for the install!

Dev.to's Prerequisites

Next came setting up dev.to's repo for development. It can be an intimidating task at first but stick it out and you are in for a treat! Open the Linux Installation guide from their docs and keep it handy.

First comes the Ruby installation. Manjaro already comes with Ruby 2.6.4 but Dev's repo requires 2.6.3, so be sure to be careful throughout these steps as to not get caught up later on.
- Use rbenv-installer for getting rbenv, follow the steps in README.md. The installer should install rbenv smoothly and then run rbenv-doctor automatically. It will ask you to 2 paths to your PATH variable.
- You have to add these manually to your .bashrc file (hidden by default) in your home directory. To keep it simple, I recommend initially to just use the inbuilt text-editor (Kate) for editing it. Open your File Manager, go to your home directory, enable viewing hidden files in Extras/Controls. Open .bashrc by double-clicking on it and scroll to the bottom.
- Add the line export PATH="<paths>:$PATH" to the bottom in order to make rbenv command functional. There will be 2 paths to add which will be mentioned by the install command one after other. Replace <path> with those two paths, separating both by :.
- Run rbenv-doctor again to check if everything is set up correctly. Type rbenv -v.
- Next, Restart your terminal and run, rbenv install 2.6.3.
- Add eval "$(rbenv init -)" in the next line after the PATH line in .bashrc to initialize rbenv by default when you open the terminal.
- Run ruby -v after restarting your terminal to ensure both have been set up correctly. The Ruby version should point to 2.6.3xxxx.
Next in line is Yarn. Open it's Installation Page for Arch and run the command as indicated. Once installed run yarn -v to confirm the installation. You might have to add it to the path in some cases, which you can do as indicated later on the installation page.
- Installing it via npm is not recommended.
Next comes PostgreSQL. Go to its download page for Other Linux distros and download the interactive EnterpriseDB installer.
- Once downloaded, open the terminal in the same directory. Run chmod +x postgresql-10.10-2-linux-x64.run, replacing the postgresql-10.10-2-linux-x64.run with appropriate downloaded file name. This gives it executable permissions.
- Next run sudo ./postgresql-10.10-2-linux-x64.run or whatever the package name might be to start the installer. Follow the instruction. Be sure to remember the password set for postgres here.
- If you need a GUI for PostgreSQL, you will need pgAdmin4. The one that comes by default with the PostgreSQL installer doesn't work correctly on my PC, So I grabbed it via Pacman. Run sudo Pacman -S pgadmin4 to install it.

The Dev.to Repo

Once done with PostgreSQL, it's finally time to move on to getting the actual repo on your system. Follow the Steps on the Linux Setup guide to Fork and Clone dev.to repo. Follow it thoroughly till you reach Step 5.
Before Step 5, go to PostgreSQL Configuration section and do accordingly.
Next, run bin/setup as indicated in Step 5. Troubleshoot errors if any as shown in Possible error messages of both Windows and Linux docs.

Finally, if all goes well, you will get an awesome Dev Banner in your console at the end of bin/setup.

Run bin/startup to see the server bootup and have the massive ecosystem of dev running on your tiny computer.

Have an amazing Hacktoberfest, all the best with your PRs and Happy Coding!

EDIT: Here's an awesome post by the Founder of Dev on how you can get started once you are setup with the development environment!

How to contribute to DEV this hacktoberfest

Ben Halpern for The DEV Team ・ Oct 1 '19 ・ 6 min read

#hacktoberfest #beginners #contributorswanted

test post

Yash Dave — Tue, 24 Sep 2019 15:47:02 +0000

Test Case post for issue:

Links in Comments get appended by dev.to's URL #4101

Amorpheuz posted on Sep 24, 2019

Getting hit by dev.to's 404 Page instead.

base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:70 GET https://dev.to/amorpheuz/github.com/amorpheuz?i=i 404
XMLHttpRequest.send @ base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:70
w @ base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:111
m @ base-21348764b2d6ec27daf94a953246cd11e24aac20da16f75fca16b9ff96b994a8.js:111

The element seems to be coded correctly <a href="github.com/amorpheuz" rel="nofollow">github.com/amorpheuz</a>

To Reproduce

Go to here
Click on the test link in the comment.
Hit by 404 Page.

Expected behavior Should open the link correctly without appending dev.to.

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser: Google Chrome
Version: 77.0.3865.90 (Official Build) (64-bit)

Smartphone (please complete the following information):

Device: Nokia 6.1
OS: Android 9
Browser: Google Chrome
Version: 77.0.3865.90

Additional context

View on GitHub

How did you setup Capybara + Webdrivers on WSL for testing?

Yash Dave — Tue, 10 Sep 2019 19:37:05 +0000

I recently started contributing to dev.to's GitHub repository by refactoring some .js files to meet the eslint specs. Some of the files that need to be refactored require multiple other ones to be refactored too at the same time in order to not break certain functionality.

In order to check for that I have been trying to setup the Acceptance testing as specified in the docs + with some online help to check whether all functionality remains as is or not. But I have been hitting various hurdles throughout where either the chrome binary wouldn't be found, post that after installation it posted Invalid Session id or sometimes it would work totally. It's a mystery for me currently.

Any help / pointer in the right direction would be much appreciated :D. Willing to provide any details required for the same!

DEV Community: Yash Dave

Commiticons: Hashes are boring, Identify commits with Avatars via Actions

My Workflow

Submission Category:

Yaml File or Link to Code

Amorpheuz / Commiticons

Bring your commits to life with unique Avatars for each of them!

Commiticons

Demo

Table of Contents

Workflow File

Core Functionality

Additional Resources / Info

WSL2: Setup DEV.to with Linux but on Windows!

Table of Contents

Prerequisites [Back to Top]

Installing the DEV community's prerequisites

Ruby & rbenv [Back to Top]

Nvm, Node & Yarn [Back to Top]

PostgreSQL [Back to Top]

Imagemagick [Back to Top]

Redis [Back to Top]

Elasticsearch [Back to Top]

Installing DEV [Back to Top]

End Notes [Back to Top]

I have a Portfolio now 👨‍💻🎉

Edit

How should a total beginner to the field of CS and Programming get started?

Hacktoberfest Week 2 & 3: Refactors and Bug Fixes!

forem / forem

For empowering community 🌱

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Added to documentation?

Screenshots of bug fix

[optional] What gif best describes this PR or how it makes you feel?

Adding the DEV badge to github.dev starter website

github / personal-website

Code that'll help you kickstart a personal website that showcases your work as a software developer.

You can now generate self-hostable static blogs right from your DEV content via Stackbit

Ben Halpern for The DEV Team ・ Sep 26 '19 ・ 4 min read

Tutorial

Diary of a Hacky kid: Hacktoberfest week 1

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Added to documentation?

[optional] What gif best describes this PR or how it makes you feel?

Akshay MahajanFollow

rhymesFollow

Mac SiriFollow

Contributors Wanted: Mozilla Reps Mobile App

Reps-Mobile aims to bring Mozilla Reps to your mobile with the help of Flutter!

obitodarky / Reps-Events-Mobile

reps.mozilla.org events data on mobile

Reps-Mobile

Reps Events Mobile

📝 Description

🚀 Installation Guide

Run the App

Use case

Proposal

Would you like to work on this issue?

Use case

Proposal

Would you like to work on this issue?

Use case

Proposal

Would you like to work on this issue?

How you can contribute

Harsh MehtaFollow

Setting up Dev.to on Manjaro Linux for Hacktoberfest

EDIT:

The guide

Installing Manjaro

Personal Prerequisites

Dev.to's Prerequisites

The Dev.to Repo

How to contribute to DEV this hacktoberfest