teleren/devto huggingface dataset:
The end of Hacktoberfest
Tags: opensource, typescript
Published: 2021-10-30 18:03:45

Finally, I've got my [4th pull request](https://github.com/uclaacm/opensource/pull/28) merged. 

## The issue: 
I was looking some good issues in repos that I have starred and I found the issue [Update CreateEvent to deal with repository creation](https://github.com/uclaacm/opensource/issues/23). 

This is the live feed of the website and it failed to display the message whenever someone would create a new repo in the organization. 
![Website ucla opensource screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5vpt506rmy6wthdi2q9.png)

## Coming up with a solution 
Let's take a look at how the front-end component deals with the REST endpoint 
```javascript 
    case 'CreateEvent':
    case 'DeleteEvent': {
      const target = payload?.ref;
      const targetType = payload?.ref_type;
      const action = type === 'CreateEvent'? 'created' : 'deleted';
      if (!targetType || !target) {
        return unknown;
      }
      return <span>{action} {targetType} <code>{target}</code> in</span>;
    }
```
and the data returned by the api
```json 
{
    "id": "18549674018",
    "type": "CreateEvent",
    "actor": {
      "id": 65370631,
      "login": "matthewcn56",
      "display_login": "matthewcn56",
      "gravatar_id": "",
      "url": "https://api.github.com/users/matthewcn56",
      "avatar_url": "https://avatars.githubusercontent.com/u/65370631?"
    },
    "repo": {
      "id": 419984626,
      "name": "uclaacm/status-check",
      "url": "https://api.github.com/repos/uclaacm/status-check"
    },
    "payload": {
      "ref": null,
      "ref_type": "repository",
      "master_branch": "main",
      "description": "Check the health/status of ACM's various websites/deployments!",
      "pusher_type": "user"
    },
```
Since `ref` is `null` when a user creates a new repo, the code returns the default message `unknown`. Therefore, adding a condition should fix it. 

```javascript 
      if (!target) {
        return <span>{action} the {targetType} </span>;
      }
      if (!targetType) {
        return unknown;
      }
```

## Reflection 
Though the issue wasn't hard to solve, I found it more valuable getting to know the project's workflow. I got to learn about `husky`, `pre-commit` hooks and how to make sure code linting has no error before passing the PR tests as well as GitHub API.
Ruby gem explained
Tags: ruby, rails, webdev, tutorial
Published: 2021-10-30 18:00:22

#### What is a Ruby Gem?

Gems are open source libraries just like jar packages in java or modules in Go, the gem contains contain Ruby code. This helps in modularization of the code. A gem can be used by a developer in their own program, without writing that piece of code.

You can check the different gems at https://rubygems.org/. Below are some of the popular gems:

Bundler — Provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed. 

RSpec — A testing framework that supports BDD for Ruby.

Devise — Devise works with authentication. Website that needs to user log-in’s, Devise handles sign in, sign up, reset password, etc.

JSON — Provides an API for parsing JSON from text.

Nokogiri — Provides HTML, XML, SAX, and Reader parsers with XPath and CSS selector support.

Rails — Rails is a fullstack web application development framework.

#### Install Gems

To Install gems locally you can run the command: 

```gem install [gem_name] ```

The gem install command fetches the code, downloads it to your computer, and installs the gem and any necessary dependencies and builds documentation for the installed gems.

To see all gems installed locally run the command 

```gem list```


Thank you folks. Please do check my other articles on https://softwareengineeringcrunch.blogspot.com 

If you like my article, you can support me by buying me a coffee ->


<a href="https://www.buymeacoffee.com/sn04" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
(Compilation) 10 Common Javascript Coding Interview Questions
Tags: html, css, javascript, tutorial
Published: 2021-10-30 17:22:11

Are you ready for your next front-end role 💼 💻 or are about to start a career as a front end developer/engineer? If so, here is a video 🎥 of 10 Common Javascript Coding Interview Questions that may appear on your next or future interview.

I took my previous post/video and compile it on a one video. Good luck if you are about to interview!

### Contents:
0:06 - Palindrome
1:18 - Find Min and Max
2:59 - Balanced Parenthesis
4:46 - Remove Duplicates In Array
6:08 - Reverse a string
7:27 - Count Vowels in a string
9:31 - Capitalize All Words in Sentence
11:25 - Commonly used character in a string
13:49 - Fizz Buzz
15:08 - Anagram

### Codepen: 
(If you want to see code that was used and play around with code)
Palindrome: https://codepen.io/angelo_jin/pen/RwgPVwr
Find Min and Max: https://codepen.io/angelo_jin/pen/zYzvQdM
Balanced Parenthesis: https://codepen.io/angelo_jin/pen/OJgwaed
Remove Duplicates In Array: https://codepen.io/angelo_jin/pen/PojPRzQ
Reverse a string: https://codepen.io/angelo_jin/pen/LYyvBKy
Count vowels in a string: https://codepen.io/angelo_jin/pen/zYzYdmQ
Capitalize All Words in Sentence: https://codepen.io/angelo_jin/pen/xxrdBVE
Commonly Used Character in a string: https://codepen.io/angelo_jin/pen/abwYGPo
Fizz Buzz: https://codepen.io/angelo_jin/pen/MWobgqj
Anagram: https://codepen.io/angelo_jin/pen/xxrVmdg

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)

{% youtube nxzGjfet388 %}
Inspired by Docusaurus
Tags: opensource, javascript
Published: 2021-10-30 17:14:31

This week I had a chance too explore Docusaurus, a tool that helps developers create a documentation React site fast and customizable. There are a lot of ways to customize a Docusaurus site, I tried adding some markdown files in the pages folder as well as customizing a sidebar by editing the file `sidebar.js` and pass it into `@docusaurus/plugin-docs`. It was great, I didn't have to code at all :)

Inspired by Docusaurus, I decided to make my SSG project fully support parsing markdown files. I chose [showdown](https://www.npmjs.com/package/showdown) to do the job for me. I will also implement code highlighting when I have a chance. 

By introducing `showdown` into my project, I was able to clean my code up quite drastically. I also removed `html-creator` module and used raw string interpolation to render html. I ended up reducing about 100 lines of code and refactoring some incorrect async behavior. 

You can take a look at [the commit](https://github.com/TueNguyen2911/tue-1st-ssg/commit/1a3ba2dd941eb5ebabd48ffcb30c0e9a7aad3408) and my [Docusaurus demo site](https://github.com/TueNguyen2911/Docusaurus-Sample/tree/gh-pages)
Sveltekit web gallery app
Tags: svelte, sveltekit, tailwindcss, daisyui
Published: 2021-10-30 15:50:43

> Sveltekit is a fullstack web framework for creating fast web application on top of svelte.

> Sveltekit comes with page splitting, file based routing, server side rendering and more for better performance.

**I have created a simple web based gallery app using sveltekit,daisyui and tailwindcss**

{% github harshmangalam/sveltekit-web-gallery %}

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc158rp74mz3j59rbb75.png)

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn9ym0t0r1e2ly3g0ywz.png)


![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmhyuym2tigyqfcbeoo1.png)


![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea5n8w48oh7h9ht5jeoy.png)
XPanel #6: Activities 3/*
Published: 2021-10-30 15:49:46

[Wrong English Disclaimer](https://dev.to/alabex_/wrong-english-disclaimer-2daa)

Ok... this is a PostHolder xDDDD

**Maybe** I will write with detail all the steps I done this days in the future, but it were hard and it were looot of them.. and I had to handle a lot of things related with the proyect and non related (my life things)..  

Simplify..

* Full finish the template system.

* Thinking about all possible templates for phase 1 activities and all the requirements (roles and assets) and add all of this to the plataform by the admin system.

* I was more than 2 days working in the match making algorithm, this should be a only one post talking about it

* Finishing the whole activities module, this is a good point, the most important and hard part was done :)

* I was other 2 days learning about docker and implementing it to my project.

* Migrating from sqlite3 to postgres, adding celeris, flower, redis, learning about Django REST Framework and how to I should implement,.. 

* How to implement a OAuth Token to auth the api client and the different methods.

* Solving problems with a looooooot of star citizen relevant persons and fixing possible problems what I think I probably have in the growth time of the plataform, again I should write one single post talking about this, was a lot of time and relevant choices.

* Trying choose a frontend framework and a css framework... after a loot of time I choosed Angular and probably Material Design.

Anyway.. I should wrote all this process, doesnt care if I was really bussy this days.. my bad.

Whatever.. I'm going to start learning Angular right now,.. wish me luck :)
Hacktoberfest 2021 - How it went for me
Tags: hacktoberfest
Published: 2021-10-30 15:41:46

### Who am I and why did I participate

I joined Dev.to to read blogs, post blogs and learn new things. I mainly wanted to join hacktoberfest because I really wanted to plant a tree. #TeamTrees

### Background

I was just a average kid in school about a year ago. Now, I learnt that coding gives me happiness and is a really good excuse for coffee too. 

### Progress

My progress went a lil' terrible. I had my exams so, I was always studying. Then, on 27th and 28th there was Github universe which I had enrolled in. I had to attend so many sessions that I didn't get sleep at all. Then, on 29th and 30th, also I was awake the whole night. 

### Contributions

I contributed to 5 repos. 2 were related to blockchain, 2 were related to web design and the last one was a list of things todo list.
Continuous improvement and a steady diet of growth
Tags: javascript, webdev, productivity, discuss
Published: 2021-10-30 15:22:21

Hello Devs,

I'm currently looking to pool opinions and suggestions on an Saas platform I've been building, I'll be linking the repo and twitter channel at the end of this for those who wish to keep in touch.

A year ago, I stumbled across a picture which said, if you grew/learned or added to your knowledge base by one percent every day for a year, you'd make 30%+ progress. Now, even without ever verifying the math, I quickly understood the underlying message. Being good consistently is the ONLY sure fire recipe for greatness.

Following this path, I decided on tracking my growth over a year, making a daily snippet (day snip) and learning in public via my dev twitter (@Elixir_js).

Turns out, I made well over 30% growth in the last year in my field (UI engineering), secured a solid internship and successfully built a  freelance client list to boot.

With this theme in mind, and my personal success story; I started building onePercent (twitter @on3Percent). A platform based on repetitive, public accountability. 

The primary goal being to solve the problem of procrastination, along with building a public profile for yourself and your journey -  a public journal of some sort.

Users contribute to a universal feed by creating daily accounts of what they've learned - each user gets one post a day; listing technology, topic, code snippet and a brief explanation of what they learned that day -  accounting for their daily one percent.

The feed is public, other users can like, comment and share(outside) these short snippets or give accountability points. 

Beyond solving procrastination, this platform also solves the problem of documentation for people who cannot blog about their experiences or have no affinity for technical writing - giving everyone a chance to be heard and noticed, and held accountable as they grow. Every week, your notes are compiled into a progress node and emailed to you...creating a form of personalized spaced repetition and giving you a sense of progression and achievement going into the next week.

At the moment, we're looking into more features and looking to hire QA engineers, a couple frontend engineers and a product manager to handle new features before official launch.

I'd love to hear your thoughts on this project and if this is something you'd love to add to your daily process(creating daily submissions of what you've learned), or be a part of.

The plan is to go open source in the near future, and make publicized modules for short contract roles to aid junior engineers in gaining paid experience while contributing to a project for the community.

Feel free to ask any questions to gain more insight about the features and suggest anything else you'd like to see added.

read more about continuous improvement here - https://jamesclear.com/continuous-improvement
How to stop docker containers from auto starting
Tags: docker, container, devops, development
Published: 2021-10-30 15:18:39

##Problem
As a developer, We work on different projects. Some of the projects (having oAuth or constant ports) work on only specific ports. For example, I've a project which always run on ***8080***. If any other process is using this port, I've to stop that process and then restart the project. 
Most of the time, `docker` containers from other projects run 
automatically on these ports after starting the system. So we've to manually shut them down.

##Solution
- We can stop specific container by going to the specific directory and then running the following command

```javascript
docker-compose down // this will shut down all the containers running in that docker environment
```
Additionally, to prevent a specific container from auto starting when a system is powered on (started), we can run following command

```javascript
docker update --restart=no [container id] //without square brackets
```
Next.Js Series #7 - Deploying the Web Page to Vercel for FREE (from Github repo)
Tags: deployment, vercel, webdev, nextjs
Published: 2021-10-30 14:46:06

We are going to demonstrate how easy it is to deploy your static web app to Vercel for free in the last article of the series. 

First, commit and push the project to a Github repo if you haven't. Go to https://vercel.com/login, create a Vercel account with Github account authorization. You will now see an empty dashboard (if you have not deployed anything to Vercel before).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nz8wm81quw8p2iesqvl.png)

Click "Create a New Project".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ftbfdi93em917wcw4v5.png)

Choose a Github account, and Github window will pop up for you to select the project that you want to deploy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecp3zsvjzruelwggyu0w.png)

Type and select the repo that you commited your project to install Vercel.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1yg7ro7vykd8dhfoyi8.png)

You will now see that the Github repo is ready to be imported. Click on "Import".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df20guu5hbl3pphzn0ni.png)

You can skip all the customisable configurations for our demo project. Click on "Deploy".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iri6q1b6gseyfuze1e9s.png)

You may see that the app is being deployed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fddh7dirrlsnx6xl3ix2.png)

When you see this page, it means the deployment has been successful. Click on "Go to Dashboard".

Select the app that we have deployed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erxtj6b1wjbpxyqsnvpc.png)

You can see that now the app is live and running.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xtyohx7rweab81marzh.png)

You may test on different routes to see if they are working properly.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2koyt8lgu30q82a4jd9e.png)

I might consider to add one more article on the topic for Next.Js Analytics by Vercel to this series. It has a great dashboard and tracking some metrics that we mentioned in series #6.

Thanks for following through this short series of brief introduction to Next.Js. 

**I shall continue to post more Web Dev, UIUX related articles (and more non-technical articles) in the future. Stay tune!**

**Do follow me for more future articles on web design, programming and self-improvement** 😊
Automatic Update of Django Models from a Google Spreadsheet
Tags: webdev, database, datascience, python
Published: 2021-10-30 14:20:28

Often Data Model definition and Data Model Implementation are performed by different people and a little change in Data Model definition should be transformed into an implemented model as soon as possible.

The speed with which changes in the model can be translated into implementation depends on how definition and implementation are related to each other.

In this tutorial I propose a mechanism to directly translate changes in the model into changes in the implementation. I exploit the following tools:
* Google Spreadsheet for the Data Model definition
* Python to translate changes in the spreadsheet into changes for Django
* Django to render the model in a Web interface.

Three steps are needed to automatically update a Data Model in Django through a Google Spreadsheet:
* Data Model Definition in Google Spreadsheet
* Model Translation from a Google Spreadsheet to a Django Model
* Model Update in Django

## 1 Data Model Definition
Firstly, I define a basic Data Model. For example, I can consider three tables:

* `Person(id,name,surname,birthDate,sex)`
* `Organization(id,name,address,website,locality)`
* `Staff(person_id,organization_id)`

Then, I create a new Google Spreadsheet and I devote one sheet for each table, as shown in this example. For each table, I define the following columns:
* attributes — the list of attributes for a table
* description — what the attribute represents
* data type — the attribute data type
* max length — the max length of char type variable. It is valid only for char attributes
* key — specifies if an attribute is a key (primary or foreign)
* foreign key table — if the attribute is a foreign key, specify the associated table

The Data Model can be dynamically updated by the Model Designer, without taking care of any implementation. They can even add other tables to the spreadsheet or modify existing ones, by adding or removing attributes.
It is sufficient that the Model Designer respects the structure of the table.

## 2 Model Translation to a Django Model
The next step involves Model Translation from the Google Spreadsheet to Django. This can be achieved by dynamically building the Django Model with the content of the Google Spreadsheet. In practice, I can write a Python code, which generates the Django model.py script on the fly, depending on the Google Spreadsheet.

Model Translation can be achieved in three steps:
* Read the Google Spreadsheet
* Create a Mapping between tables and Django model classes
* Create the content of the model.py script

### 2.1 Read the Google Spreadsheet
In my previous article, I described how to load the content of a Google Document in Python. Regarding Google Spreadsheets, the procedure for authentication is quite similar, with the difference that Google Spreadsheets APIs should be enabled in the Google Console, instead of Google Documents API.

Continue Reading on [Towards Data Science](https://towardsdatascience.com/automatic-update-of-django-models-from-a-google-spreadsheet-7c6d4f30e3ca)
Looking for contributors (pentest project)
Tags: programming, python, showdev, cybersecurity
Published: 2021-10-30 13:59:21

Hawk is a network and pentest utility that I developed so that I could perform different kinds of task using the same suite, instead of jumping from one tool to another.
Currently, this script can perform a good variety of tasks such as: 
- ifconfig, 
- ping, 
- traceroute, 
- port scans (including SYN, TCP, UDP, ACK, comprehensive scan), 
host discovery (scan for up devices on a local network), 
- MAC address detection (get MAC address of a host IP on a local network), 
- banner grabbing, 
- DNS checks (with geolocation information), 
- WHOIS, 
- subdomain enumeration, 
- vulnerability reconnaissance, - 
- packet sniffing, 
- MAC spoofing, 
- IP spoofing, 
- SYN flooding, 
- deauth attack, 
- brute-force attack (beta).

Other features are still being implemented. Future implementations may include WAF detection, DNS enumeration, traffic analysis, XSS vulnerability scanner, ARP cache poisoning, DNS cache poisoning, MAC flooding, ping of death, network disassociation attack (not deauth attack), OSINT, exploits, some automated tasks and others.
If you want to become a contributor, make a pull request or issue.
Waiting for your feedback. Kudos
Link to the repository: 
https://github.com/medpaf/hawk
WordPress: Custom link in taxonomy row actions
Tags: wordpress, php, taxonomy
Published: 2021-10-30 13:51:32

```php
add_action( 'category_row_actions',  'zl_actions_rows' , 10 ,2 );
public function 'zl_actions_rows' ( $actions, $category ) {
	$new_actions                         = array();
	$new_actions['edit']                 = $actions['edit'];
	$new_actions['template']             = '<a href="#" aria-label="' . __( 'Custom Link', 'zl') . '">' . __( 'Custom Link', 'zl') . '</a>';
	$new_actions['view']                 = $actions['view'];
	$new_actions['inline hide-if-no-js'] = $actions['inline hide-if-no-js'];
	
	return $new_actions;
}
```
Day 43-45/100 Program Structure
Tags: 100daysofcode, challenge, programming, 100daysofchallenge
Published: 2021-10-30 13:33:53

"And my heart glows bright red under my filmy, translucent skin and they have to administer 10cc of JavaScript to get me to come back. (I respond well to toxins in the blood.) Man, that stuff will kick the peaches right out your gills!"

_why, Why's (Poignant) Guide to Ruby

![reading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzdeclvfla3tq56roszc.png)