teleren/devto huggingface dataset:
Markdown Syntax Element to make READMEs attractive
Tags: github, markdown, webdev, beginners
Published: 2020-12-05 19:37:28

A README is a text file that introduces and explains a project. It contains information that is commonly required to understand what the project is about. While READMEs can be written in any text file format, the most common one that is used nowadays is Markdown. It allows you to add some lightweight formatting.

Some of the common syntax to make Markdown files attractive are:

<code> Heading </code>
For heading we use #. # represent heading1 (h1). The numbers of # used correspond to heading level. For example for heading6 (h6) ###### is used.

<code> Paragraph </code>
To create paragraphs, use a blank line to separate one or more lines of text.

<code>  Bold </code>
To bold text, add two asterisks (**) or underscores(__) before and after a word or phrase.

<code> Italic </code>
To make text Italic, add one asterisk(*) or underscore(_) before and after a word or phrase.

<code> Bold and Italic </code>
To make text both Bold and Italic add three asterisk(***) or underscore(___) before and after a word or phrase.

<code> Blockquotes </code>
To create a blockquote, add a > in front of a paragraph.

<code> Ordered Lists </code>
To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.  

<code> Unordered Lists </code>
To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. -,*,+ will be changed into bullets.

<code> Code </code>
To denote a word or phrase as code, enclose it in backticks (`).

`URLs and Email Addresses`
To quickly turn a URL or email address into a link, enclose it in angle(<>) brackets.





***You can find all the syntax and information related to markdown at*** 
<https://daringfireball.net/projects/markdown>
Got rejected from my first interview. 
Tags: discuss, career
Published: 2020-12-05 19:14:41

05/12/2020, the day I appeared for my first interview and got rejected! So, it was the first campus placement (could be the last one too) in our college and I was very much excited that I'll get this one for sure. There were 5 rounds which included Aptitude and Coding, Group Discussion, Technical Interview, Managerial Interview, and HR Interview. I found the first round to be easy as I got 9/10 answers right and in the coding section almost all my test cases ran. Out of 211 students only 17-18 students qualified for the next round and only 11 for the 3rd round i.e. Technical Interview.

So, here's what happened in the 3rd round. A zoom call was scheduled and the interviewer asked about my projects and stuff. Then he asked me a few questions regarding OOPS and SQL. Now! he gave me a program to execute where two lists were given and I had to print the number which was present in list1 and not in the list2. Sounds easy right? It was! I wrote the code in python (on zoom whiteboard) and I was very enthusiastic as the program was too easy. But after writing the code in Python, he said, now write it in C or Java. No problem right? as the logic was clear, but!!! I've been using python for almost everything and I was habitual of the no curly braces, no semicolon stuff. I started writing code in C and I did the silliest mistakes. I didn't close the curly braces at some point (I mean it's kind of compilers job) and I even forgot semi-colons after certain statements. At that point, I realized that I screwed up and that was it. I got rejected!

I'm actually very bummed out because of such silly mistakes which led me to get rejected and because of the pandemic, not many opportunities are available and if there are, then most of them are underpaid. 

So, my question is, how can I improve myself? and if you can share how you handled rejection then it would be quite helpful for me.
Make Your Own Translator App in TEN Minutes
Tags: javascript, html, css, github
Published: 2020-12-05 19:05:18

Hello Guys, In this Blog I will tell You how to make a Minion Translator Web App ,Enjoy :)  
Entire Code is Available on [Github](https://github.com/naveen9740/Minion-Translator-WebApp)  
Follow these Steps to get started :  

* # **Setup** :
    1. Create a New Repository in Git.
    2. Initialize index.html file in vs code or any other text editor.
    3. Put Title ,Heading in place.
    4. Initial commit ,Publish repo.

If you **Dont know Github** check my blog :[How to Host Your First Website](https://dev.to/naveen9740/how-to-host-your-first-website-n6l).

* # **Adding a Button** :
    * Create a Button in Html .  
        `<button id="btn-translate">Translate</button>`
    * Reference the button in Js using query Selector.  
        `let btnTranslate=document.querySelector('#btn-translate');`  
    * Add Event Listener to Button.  
        `btnTranslate.addEventListener('click',clickEventHandler);`  
        `function clickEventHandler(){
        console.log('clicked');`;  

Thats it Button is Ready.  
* # **Add TextArea Input** :
    * put a TextArea input Tag in html.  
        ` <textarea class="txt-input" placeholder="Enter the Sentence to Translate"></textarea>`.
    * Read that is Js:  
        `let txtInput=document.querySelector('.txt-input');`;
    * Read the value of the Tag :  
        `console.log("Input: ",txtInput.value);`;  
    
We are done with Input Area .
* # **Add a Div to show Output** :  
    * Create a Output Div .  
        `<div class="txt-input" id="output"></div>`  
    * Reference in Js:  
        `let outputDiv=document.querySelector('#output');`  
    * Use innerText to write div when button click happens  
        `outputDiv.innerText=(text in input div);`  

Final Thing Left is Calling Api from [Fun Translations](https://funtranslations.com/)

* Call a mock server using fetch() method.  
* Add fetch call in app and Update the outpur from .then() of the fetch call. 

For Example:  
     `let url='https://api.funtranslations.com/translate/minion.json'`  
    `fetch(url)`  
    `.then(response=>response.json)`  
    `.then(json=>{
        transText=json.contents.translated;  
        outputDiv.innerText=transText;
    })`

# Finally your Minion Translation APP is ready .
For source code check : [Github](https://github.com/naveen9740/Minion-Translator-WebApp)   

Thank You , Have a Nice Day :)
#Day 4: Completed all coding questions related to Mathematics of DSA Workshop GFG 
Tags: 100daysofcode
Published: 2020-12-05 18:51:18

Hello there!
I solved the rest of the four questions in the Mathematics section of DSA Workshop GFG which included problems like Primality test, GP term, Exact 3 divisors. Solving these questions is helping me improve the time and space complexity. I never paid heed to the complexity earlier. It's great that now I'm able to understand these things a bit.

I am a bit disappointed because I had planned to other things too like solving few Singly Linked List questions and learning about Binary Tree, but I couldn't. These semester exams are a stress.

Thanks for patiently reading. Bye. See you tomorrow.
How to Fix "Only the Readme Is Appearing" When You've Deployed to Github Pages
Tags: fix, issue, github
Published: 2020-12-05 18:39:31

So, you've just deployed a site with Github pages. But when you go to the url (`https://repo-name-here.github.io/`), you're only seeing the ReadMe. Where's all your work?

You need to do two things:
1. Go to the settings page of the corresponding Github repo. Scroll down to the section titled **GitHub Pages**. Where it says **source**, change the branch to be `gh-pages` and the folder to be `/(root)`. Hit save.
2. Go to your terminal of choice. `cd` into your project directory. Ensure you're on the master branch (or whatever is your root branch). Run `npm run deploy`.

Go to your project url and hard refresh (`cmd/control` + `shift` + `r`). If you don't see your website, give it a few minutes to update.

> Note: adding/committing/pushing does not update what you see at the url of your site, it only updates the repo history on Github. If you want to actually update your site, you must use `npm run deploy` - per the set up described [in this helpful tutorial](https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f).

Hope this helps. I've ran into this annoyance twice, so I thought it was worth sharing for anyone else in this dilemma. 😊
How to Look at Your GitHub API Rate Limits
Tags: github, ruby, api
Published: 2020-12-05 18:14:23

If you're using any GitHub client library worth its salt, it'll have a way to look at your current rate limits and expiry times. I have lots of tools using my GitHub account, however, and wanted an independent way to look at this data.

Luckily, if you have a [Personal Access Token (PAT)](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token) it's easy to do so.

Place your personal access token in `~/.githubtoken` (or any file of your choice) and then you can do this:

```
curl https://api.github.com/rate_limit -H "Authorization: token $(cat ~/.githubtoken)"
```

However, I wanted to be able to use the information in a Ruby script and to show the number of seconds *until* a quota were to reset, so this Ruby code fits the bill:

```
require 'http'
require 'json'

TOKEN = File.read(ENV['HOME'] + "/.githubtoken").strip

res = HTTP["Authorization" => "token #{TOKEN}"].get("https://api.github.com/rate_limit")
rates = JSON.parse(res.to_s)

def convert_epoch_to_seconds_remaining(r)
  r["resets_in_seconds"] = (Time.at(r["reset"].to_i) - Time.now).ceil if r["reset"]
  r.values.each { |rr| convert_epoch_to_seconds_remaining(rr) if rr.is_a?(Hash) }
end

convert_epoch_to_seconds_remaining(rates)

puts rates.to_json
```

The only dependency is the `http` gem, but you should have this anyway as it's fantastic. If you'd rather have no dependencies, you could use `open-uri` like so:

```
require 'json'
require 'open-uri'

TOKEN = File.read(ENV['HOME'] + "/.githubtoken").strip

res = open("https://api.github.com/rate_limit", "Authorization" => "token #{TOKEN}").read
rates = JSON.parse(res.to_s)

def convert_epoch_to_seconds_remaining(r)
  r["resets_in_seconds"] = (Time.at(r["reset"].to_i) - Time.now).ceil if r["reset"]
  r.values.each { |rr| convert_epoch_to_seconds_remaining(rr) if rr.is_a?(Hash) }
end

convert_epoch_to_seconds_remaining(rates)

puts rates.to_json
```
The easiest way to patch your npm package when there is a 🐛
Tags: npm, productivity, javascript, webdev
Published: 2020-12-05 17:36:12

What do you do when you are working on npm-based project and encounter an issue with one of your dependecies?

- The easiest way and actually most devs do, is go to Github's package repository and log a bug. The real problem with that can be the lack of time that a maintainer has to fix it. But unfortunately, the deadline is comming up and you have to find another way at least for couple of weeks.

- Fork the broken package, fix it and open a PR. Well that seems to be a good solution at first, but it also means that you need to keep it locally until the maintainer approve the changes and merge them with the main branch.

Hmm what now..?

- The best approach in such cases would be to perform your changes into a dependency and apply the fix via npm using 'patch-package'. But wait.. how this actually work? Well, very simple:

1) Fix a bug in one of your dependencies 
  nano node_modules/react-redux/dist/react-redux.js

  ```javascript
     console.log('Hi I am a redux patch');
  ```

2) Install patch-package:
 
  ```bash
     npm install patch-package -D 
  ```
  or via Yarn: 
  
  ```bash
     yarn add patch-package postinstall-postinstall --dev
  ```
 
  and also add postinstall script:

```bash
 "scripts": {
  "postinstall": "patch-package"
 }

```

3) Run patch-package to create a .patch file
  
 ```bash
    npx patch-package react-redux or yarn patch-package react-redux
 ```

This will produce following changes:

```javascript
diff --git a/node_modules/react-redux/dist/react-redux.js b/node_modules/react-redux/dist/react-redux.js
index c56d7f2..3a2b1e2 100644
--- a/node_modules/react-redux/dist/react-redux.js
+++ b/node_modules/react-redux/dist/react-redux.js
@@ -27,6 +27,8 @@
 	// nor polyfill, then a plain number is used for performance.
 	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
 
+	console.log('Hi I am a redux patch');
+
 	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
 	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
 	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
```

4) Apply your fix via npm package manager:
  
```bash
   npm install or yarn install
```

5) Add your staged changes:
  
```bash
   git add .
   git commit -m 'bugfix/react-redux: Fix a react-redux bug'
   git push origin bugfux/react-redux
```

Thank you, hope you enjoy this post! 
Happy coding!😊
How to move from Software Engineering to Gamedev?
Tags: gamedev, career
Published: 2020-12-05 17:17:28

Hello everyone,

I have been working in the Software Development industry for the past 7 years. In that time I've worked with multiple technologies and been part of many different teams.

Recently I've realized I don't enjoy the field and I would like to be a Game Developer instead. The problem is that I have no idea to what extent I can "market" the skills I already have.

I understand that I'd have to start from a Junior position most likely but do you think my background as a Software Engineer will be worth something? Should I try to focus on that during interviews or in my resume?

Has anyone done any similar "jump" between career paths?
Enigma 7.0 - An Online Cryptic Hunt
Tags: showdev, gamedev, cryptichunt, eventdriven
Published: 2020-12-05 17:11:50

# Enigma 7.0
It's an Online Cryptic Hunt that my friends at [IEEE-VIT](https://github.com/IEEE-VIT) and I had developed. We curated and created a bunch of questions and put it as a challenge to the open vast world of internet in the hopes that one could solve it. We conduct this cryptic hunt every year and till date its a record that no one has been able to solve it!

If you are ready for a challenge head over to [Enigma 7.0](http://enigma.ieeevit.org/) and try your best to crack it!

Put your thinking caps on and give those brain cells some good exercise!

# Shoutout

Shoutout to IEEE-VIT for creating this epic game, had fun developing this, do let me know your thoughts about the game in the comment section, meanwhile you can also follow IEEE-VIT on Twitter.

{% twitter 1334812253460152320 %}

# Sneak Peak

Here is how it looks!

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/w6nrrg4yw4vnux9dhhoq.png)
What are CSS variables?
Tags: css, webdev, html, codenewbie
Published: 2020-12-05 17:11:01

If you google <i> What are CSS variables? </i> you'll get answers such as this one :
 "<b>Custom properties</b> (sometimes referred to as <b>CSS variables</b> or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document"

To be honest this definition of CSS variables was too confusing for me! like what does that even mean?!

In this article I'm gonna try to simplify it for you.

<br>
Here I created a lot of simple shapes with just two colors : pink and powderblue.


{% codepen https://codepen.io/nazaneyn/pen/MWjKLZZ %}

<i>P.S I could just use</i> <code> class="circle" </code> or  <code> class="square" </code> <i>instead of writing too much codes , but it's just an example , I'm only trying to you show how CSS variables works</i>

<br>
So there are lots of 
<code> background-color: pink;
background-color: powderblue; </code> (you can also check the CSS section in pen)
<img src="https://dev-to-uploads.s3.amazonaws.com/i/fstcigh528r809nk8g2x.jpg">

If I were to change the color to something else I had to change the <code>background-color</code> <i> one by one</i>

<img src="https://dev-to-uploads.s3.amazonaws.com/i/28owl6s6ivgo43fna24i.jpg">

It would take so much of my time
BUT instead of doing so, we can create a CSS variable for it

<h2>Now the question is how to write a CSS variable?</h2>
We can do so with the help of <i>pseudo-class</i>, like this : 
<code> :root {
--variable's name : property;
} </code>

By declaring a custom property the change will be applied throughout our HTML document 

<h4> Let's write our code with a variable and apply it to our page </h4>
<code> :root {
       --square-color : red;
} </code>

<code> .Square {
      background-color: var(--square-color);
}

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ved3le0nok01doh2h6x9.jpg">

{% codepen https://codepen.io/nazaneyn/pen/abmdgvO %}

If you change the variable's color from red to any color of your choice, all of the square's color will change and it will save you a lot of of time.
You can play around and experiment with the pen to understand it better.

<br>
I've made another pen just to show, you can use other property as well :

{% codepen https://codepen.io/nazaneyn/pen/XWjdpGK %}
Matrix code on cmd acts like hack!!!
Tags: akweb, programming, aman, cmd
Published: 2020-12-05 17:09:10

@echo off
pause 1000
color 0a
mode 1000
:a

echo %random%%random%%random%%random%%random%%random%%random%%random%(HACKED)%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%
goto a
How can we know if someone is doing TDD?
Published: 2020-12-05 17:05:00

---
title: How can we know if someone is doing TDD?
published: true
description: Writing code before writing tests produces code smell
tags: 
//cover_image: https://direct_url_to_image.jpg
---
I got an interesting question during the TDD Dojo I held two days ago (I love those challenging questions). A student asked how can I know whether someone delivered a solution using TDD? Is there a way to tell? My answer was that there is a certain 'smell' in the repo if it was done by writing code first.

That certain 'smell' can be detected when examining the tests. Engineers who write code first tend to subsequently write tests that are coupled with the structure of the shipping code. Furthermore, they tend to write larger tests. It's rare to see microtests in code-first repos.

Because of that (tendency to write larger tests that are tightly coupled to the structure of the already implemented code), code-first repos tend to result in larger percentage of surviving mutants. Doing TDD properly results in code that is loosely coupled.

When I look at the repo done by teams that follow TDD, the first thing I notice is the simplicity of the tests. You can see that each test took no more than a minute or two to write. And you can see that tests are not interested in the structure of the code they are testing.

TDD discipline results in simple tests that are single-minded and only care about the values produced by the shipping code under test. Each test only talks to the interface/API, never to the concrete method.

That's why tests produced with TDD are not brittle & don't impede the development/refactoring. So the only reason we actually use TDD is to enable us to embrace change. We should be able to completely gut our system and experiment with implementation without disturbing our tests.

My answer to the student was: "At the end of the day it doesn't really matter how you get there, and if you can deliver decoupled system that is easy/risk-free to change without doing TDD, more power to you. But I have yet to see an example of that."
Personalizing Landing Page
Tags: portfolio, rebass, netlify, gatsby
Published: 2020-12-05 16:19:44

The cover image above shows the [gatsby-starter-mate](https://gatsby-starter-mate.netlify.app/) working locally on my PC. The landing page customization is done by setting up my own [Contentful CMS account](https://app.contentful.com).

Learn about [Rebass](https://rebassjs.org/) (a react primitive UI components built with [Styled System](https://styled-system.com)) when trying to make the [React TextLoop component](https://www.npmjs.com/package/react-text-loop) to work properly. I was not able to make the text inside of the TextLoop component to wrap around to the next line. The solution is to set the `noWrap` props of the component to `false`. 

Another great learning when working using Rebass is [responsive styles](https://styled-system.com/responsive-styles), specifically on how [array props](https://styled-system.com/guides/array-props) works. The syntax of using array `[]` to represent media query breakpoints needs some getting used to, but once I did it looks so clean and sweet 🍬! 

Next post - deploying using [Netlify](https://app.netlify.com).
What's your commit strategy in personal projects?
Tags: watercooler, discuss, git
Published: 2020-12-05 16:15:45

One commit for every feature, regardless how long you'll work on it? One commit a day, regardless which features or bugfixes you worked on?

Or do you go full git-style? Particular Branches for dev and release, a new branch for every feature, one commit for every little part of the feature?
Do you even have your own ticket systems or user stories?

What's your workflow with versioning in personal projects?
Looking forward to your comments and thoughts.
How I Choose a Tech Stack for my Side Projects
Tags: sideprojects, programming, startup
Published: 2020-12-05 16:04:45

When I start a new side project, I often find myself asking the question: “What tech stack should I use for my side project?”

Over the years, I have found this approach to work the best for me. I ask myself this question: What do I want from this project?

If I want to get it out soon and/or make money from it, I choose the tech stack I’m most comfortable with.

If it is to learn something new, I choose a somewhat unfamiliar stack. I have also found that it works best for me when I limit new parts of the tech stack to maximum two. If there are more than two unfamiliar things, I find it hard to make progress and I give up eventually.

That being said, at the end of the day, I get more done by starting than mulling over what tech stack to use.

If you are reading this, I would love to know how you choose a tech stack for your side projects.
Bash Scripting: Variables & String Manipulation
Tags: bash, linux, beginners, tutorial
Published: 2020-12-05 15:44:17

Today we will start work with variables in bash. If you already are a programmer or a developer, then you know about variables. It's a medium to store values in computer memory in order to use it later in the program.

Check out previous bash tutorials:
- [Bash commands for beginners](https://youtu.be/-JY9DDLHaD8)
- [Bash commands chaining, redirecting and nesting](https://youtu.be/UXM8KNTC3aY)
- [Bash shell file walk-through](https://youtu.be/H_bU7u2dvT8)
- [Bash scripting: passing arguments & user input](https://youtu.be/H_bU7u2dvT8)

Bash variables are dynamically typed. We already used them before. However, in this tutorial we will deep dive into how to assign a variable, how to call it, assign a variable from a command directly.

Also, you will learn about string manipulation in bash which could get a bit tricky since we are using special characters to perform such manipulation instead of built-in functions in other languages.

{% youtube GuX72I8f71g %}