teleren/devto huggingface dataset:
Bootcamp in Software Engineering 
Published: 2020-10-11 19:05:46

When I was an undergraduate student in Ethiopia in 2002, I took an Introduction to Computers course. The course taught me how computers work, and I learnt how to use Microsoft office. In addition, the professor taught us some coding concepts using Visual Basic. However, I had not had the opportunity to explore further in programming as I could not find books or the right resources since the University had no access to the internet.

When I came to the United States, people whom I knew from Ethiopia kept on recommending that I would start studying computer science or engineering. As I was not sure that I could make it, I kept on procrastinating. At the beginning of 2019, they gave me some resources that I could use to start programming. I started to use these resources and the free resources I could find on the internet. After I started using these resources, i wanted for more. I, then, purchased different programing courses from Udemy. I, then, said that I could make a career in software engineering. 

Even if these resources helped me in learning the basics of programming, it was not well structured. I needed some structured curriculum to guide me. After searching for the right bootcamp, I applied at Flatiron. I am currently studying to becoming web developer.
Simple Search Bar Design
Tags: html, css
Published: 2020-10-11 18:59:28

This post is about a search bar I've made for a project I'm working on. It's mostly vanilla HTML and CSS, though I'm using Bootstrap to define the sizing and Font Awesome for the search icon. Both can easily be dispensed with though by using the sizing classes in your framework of choice and sourcing a search icon elsewhere. The full code is available on my GitHub <a href="https://github.com/Ara225/mini-frontend-projects/blob/master/5-custom-form-controls/5-custom-form-controls.html">here</a> along with some matching dropdown boxes.


## HTML
I wanted a search bar which would expand to almost 100% of the screen on small devices and contract to about three-fourths on larger screens. I additionally wanted it to have an actual button to submit the search rather than just a icon. This is what I came up with: 
```html
<form class="p-3">
    <div class="col-12 col-md-8 container">
        <input id="search-bar">
        <button class="fas fa-search btn" id="search-btn"></button>
    </div>
</form>
```

## CSS
For the input element, I set it to a fixed height of 46px and added border radius values that turn the ends of it into neat semi-circles. I added a subtile border and a bit of padding so that the curved ends and button never conceal the text. 
```css
#search-bar {
    height: 46px;
    border-radius: 48px;
    border: 0.5px solid lightgrey;
    width: 100%;
    padding-right: 40px;
    padding-left: 10px;
}
```

For the button, as input elements don't let you embed HTML inside them, I used absolute positioning to place it over the end of the input. Bootstrap container elements always have 15px padding so it needs to be 15px away from the container edge. I also added border radius values only to the right end and a border on the left end to make it clear there was a difference. 
```css
#search-btn {
    height: 46px;
    border-top-right-radius: 48px;
    border-bottom-right-radius: 48px;
    padding: 15px;
    font-size: 1.1em;
    position: absolute;
    right: 15px;
    border-left: 0.5px solid lightgrey;
} 
```
If you want to add text to the search button, increase padding-right on the search bar to account for the longer button, remove the fas fa-search classes from the button and remove the padding styling.
Use Django to Add Schema for Rich Results
Tags: django, javascript
Published: 2020-10-11 18:53:26

I recently went through the process of learning about Schema markup and how to use it and figured I would share what I ended up with. 

For my website, I built a feature where users can search for different car shows that are going on in their area but I wanted the results to be able to show up similar to how they do on Eventbrite and the other larger sites so I started to investigate Schema. Generally, it's pretty self explanatory once you go through a few of the examples at their docs page:

> https://schema.org/Event

However, I was using Django and wanted to make sure that the results could be looped through using the Django template engine. For instance, for [car shows in houston](https://www.topmarq.com/car-shows/tx/houston) I just set the Event markup to loop through the queryset and use the appropriate data pieces. Of course, you'll need to put in you specific model attributes. See the full example of what I used below. Just add this code to the rest of your scripts and you'll be off to the races. 

You'll also likely want to add the single event markup to the detail page of your events. 

While generally pretty straightforward, the json code is very particular about ending commas so you have to make sure the last one isn't there with an if statement. Google search console will also still suggest that you add a few additional parameters if you use the rich text results tool that they provide. These aren't dealbreakers though so you can choose to implement or not.

Hope this helps on your journey to improve your site with Rich Results!

`<script type="application/ld+json">
    [
        {% for event in events %}
        {
          "@context": "https://schema.org",
          "@type": "Event",
          "name": "{{ event.title }}",
          "description": "{{ event.description }}",
          "image": "{{ event.logo.url }}",
          "location": {
            "@type": "Place",
            "address": {
              "@type": "PostalAddress",
              "addressLocality": "{{ event.locality.name }}",
              "addressRegion": "{{ event.state.code }}",
              "postalCode": "{{ event.postal_code }}",
              "streetAddress": "{{ event.street_address }}"
            },
            "geo":{
              "@type":"GeoCoordinates",
              "latitude":"{{ event.location.latitude }}",
              "longitude":"{{ event.location.longitude }}"
            }
          },
          "startDate": "{{ event.start_time|date:'c' }}",
          "endDate": "{{ event.end_time|date:'Y-m-d' }}T{{ event.end_time|time:'H:i' }}",
          "url": "{{ event.get_absolute_url }}"
        }{% if not forloop.last %},{% endif %}
        {% endfor %}
    ]
    </script>`
Linux Commands: wc
Tags: linux, beginners
Published: 2020-10-11 18:53:11

`wc` stands for **word count**. It is used to display the number of lines, words, characters, and byte for a file or input received via pipe(|).


![Screenshot 2020-10-11 at 10.50.59 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602436869935/aXrMwvjq3.png)

the output shown above is explained below.

- 1 - Number of lines.
- 2 - Number of words
- 14 - Number of bytes

There are four options that can be used with `wc`.


-  -c: The number of bytes in each input file is written to the standard output.
- -l: The number of lines in each input file is written to the standard output.
- -m: The number of characters in each input file is written to the standard output.  If the current locale does not support multi-byte characters, this is equivalent to the -c option.
- -w: The number of words in each input file is written to the standard output.

Let's see these options in action.

This will count the lines.
```
$ wc -l hashnode.txt
       1 hashnode.txt
```

This will count the words.
```
$ wc -w hashnode.txt
       2 hashnode.txt
```

This will count the number of bytes.
```
$  wc -c hashnode.txt
      14 hashnode.txt
```
But sometimes you have a file with multi-byte(non-ASCII charsets). For example, the Unicode character where one character is represented by multiple bytes.

![Screenshot 2020-10-11 at 11.04.09 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602437662071/OZR9fHip6.png)

If you see this carefully, we added an emoji character to the end of the file. Both -c and -m output differ from each other because of that.

You can also pass more than one file to the `wc` as input.

![Screenshot 2020-10-11 at 11.08.56 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602437946888/CKZxe-7cY.png)

### Advance usage.

You can also apply the `wc` on the output of other commands.
![Screenshot 2020-10-11 at 11.11.41 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602438108459/IYeVSQNao.png)

```bash
$ ls -al | wc
     118    1065    7139
```

### Conclusion

`wc` is very helpful and can be used quite frequently. Let me know in comment how you use it.

> If you liked this post please share it with others so that it can help them as well. You can tag me on twitter [@imumesh18](https://twitter.com/imuesh18).
Library Updates thought out Hacktoberfest
Tags: hacktoberfest, naetverkjs, dataflow
Published: 2020-10-11 18:39:54

In the last two years have spent a lot of time writing different node editors to define processes. A couple of months ago I stumbled over a JavaScript library that I really liked, it's called [retejs](https://rete.js.org/).

I found the event based approach interesting, so I started to see if I could contribute. But understandably the original author didn't have the time to continue the work on it, and I planned to integrate some internal changes that would have never made it in to the original repo. So I forked the project, converted the plugins from JavaScript to TypeScript and put everything into a monorepo to have an easier way to test the dependencies.

> [naetverkjs](https://github.com/naetverkjs/naetverk)

The whole project is my first open source endeavor, so a lot of Opportunities to learn and test out the tools GitHub offers, also library publishing in a [NX](https://nx.dev/) setup. 

So I migrated all the Plugins I needed and used the [naetverkjs](https://github.com/naetverkjs/naetverk) in an internal application of my company. Since I did not have any other users I did not add any more functionality in there, besides some small e2e tests.  

### Hacktoberfest 

With the start of Hacktoberfest and a bit of free time on my hands because I am locked in quarantine, I picked up on the library and extended its documentation, add more plugins and finally added a React example. Everything else I do in Angular and I never worked with React before, so I thought I will do that some other time... And now was :)

My plans for October are to extend on documentation and samples. Also, to make the React demo nicer and work on a svelte sample.
Request: Articles, Books, FOSS for Persisted State Machine Workflow?
Tags: statemachine, workflow, design, devops
Published: 2020-10-11 18:26:15

I’ve been thinking about all the persisted State Machine Workflow implementations I’ve refactored, created, maintained, or otherwise interacted with in various places.  I’m trying to do a survey of best practices.  If anyone has good sources of books, blogs, etc., I’d appreciate it.  It seems like simple state machines are used everywhere and I’ve seen a lot of patterns both good and bad, but they’re too simple for anyone to write much about.

On the other hand, the more complex workflows, like Petri Net, BPM, and Orchestration have tons of published articles and software.  There are also tons of articles and software for non-persisted Finite State Machines in GUI and other applications, and that’s not what I’m talking about either.

I’m going to write articles about what I find, focus on the pragmatic side, things like operational load and maintenance costs.
✨ module to read git user config from the system and return it as a JSON object.
Tags: showdev, javascript, github
Published: 2020-10-11 18:04:33

{% github RocktimSaikia/read-git-user no-readme %}

**Read-git-user** is a tiny 1.3kB✨ module that can be used to retrieve the git username and email right from the systems global `.gitconfig` file.

How this works is that the module looks for `HOME || USERPROFILE` and reads the `ini` file from there and returns it as a parsed JSON object. 

## Usage

```js
import readGitUser = require('read-git-user');

(async () => {
        const gitUser = await readGitUser();
        //=> {user: rocktimsaikia, email: rocktimsaikia@gmail.com}

        const gitUser = readGitUser.sync()
        //=> {user: rocktimsaikia, email: rocktimsaikia@gmail.com}
})();
```

[ PS: I created this tool to use it in a project that I am working on. I thought someone might find it handy so made a quick post. Leave a star at the repo 🌟 if find this helpful. Thanks for reading 👋]
Why I used WordPress for my portfolio
Tags: codenewbie, portfolio, wordpress
Published: 2020-10-11 18:00:08

September was a month for sure. There wasn't anything particularly off about it but being furloughed for this long is messing with my head a lot as well as going through the job hunt process and everything going on with Covid-19 and the election and stressing if I'll even get called back. So I decided to distract myself by redoing my portfolio, something I've been meaning to do since I first created it. 

I had done one around this time last year and was never fully happy with it. If you want to see it it's still live [here](https://jennakoslowski.github.io).

### I used WordPress because:
1. I bought the URL for my book blog but decided to focus my time and effort on other things so I switched the URL for that back to the free .wordpress version.
2. Easy updates. I don't want to have to spend a ton of time working though the code to add a page, post, photos or projects. It's not that I'm lazy, I just want to spend that time on other things. 
3. I missed WordPress. Not going to lie. I've used WordPress at my past couple jobs and haven't had an excuse to create one in a while so it was fun to mess around with it more. 
4. I want to create WordPress sites for others and I didn't have anything that fully showed what I was capable of so this is it. 

And the final result is [here](https://jkimexploring.com/). I'm planning to update the copy after Halloween and I still have to do SEO on all the pages but for the most part it's done!

Have you used WordPress before? What makes you decide whether to hard code or use WordPress?
Future of JavaScript tooling
Tags: javascript, tools, linter, bundler
Published: 2020-10-11 17:47:17

Recently I've seen a transition of building tooling infra in the JavaScript ecosystem using languages other than JavaScript! Specifically with compiled languages such as Rust and Go. The main goal is **performance**.

JavaScript is a great language for most of the use cases in software development. But when it comes to creating high performant tooling, there are better options out there.

Here are a few tools built with compiled languages,
- esbuild - https://github.com/evanw/esbuild
- RSLint - https://github.com/RDambrosio016/RSLint
- volta - https://github.com/volta-cli/volta

Even at the early stage of development, these tools have shown better performance compared to their counterparts written in JavaScript.

esbuild performance comparison,
![esbuild perf](https://raw.githubusercontent.com/evanw/esbuild/master/images/benchmark.png)
Any library for Terraform API?
Tags: question, terraform
Published: 2020-10-11 17:33:10

---
title: Any library for Terraform API?
published: true
description: Any library for Terraform API?
tags: question, terraform
//cover_image: https://direct_url_to_image.jpg
---

Hi! I've checked Terraform official [documentation](https://www.terraform.io/docs/cloud/api/index.html#client-libraries-and-tools), but all the projects listed there *seem* are either abandoned (last commits 2-3 years ago) or not maintained.  There is go-tfe but I don't want to code on go. I wonder if there is any library for any of well known scripting languages ( python, ruby, perl ) that I could use ?

---

I'd probably go with Rest API and implement all the logic myself, I just hope that there should be already well maintained libraries,  so I could have some short cuts and don't waste my time reinventing  wheels.
TIL that git can checkout commits, not just branches
Tags: git
Published: 2020-10-11 17:13:33

---
title: TIL that git can checkout commits, not just branches
published: true
description: Git allows you to check out commits, not just branches
tags: git
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7r44g054d501p5y1jy4a.png
---

You can pass a commit hash to checkout to quickly see a previous version of code. I like to commit often as I get new chunks of partial code working. If I advance to the point of breaking everything, it's an easy way to see what used to work.

```bash
git checkout <commit hash>
```
What's the hardest thing about learning React JS?
Tags: react, webdev, javascript, productivity
Published: 2020-10-11 17:08:37

Learning React can have it's ups and downs especially when you are learning it by yourself. 

#### Great react questions and discussions
This week I came across these resources that I found useful in breaking down the hard parts of React.
- [Common React questions (plus answers) by Max on Academind
](https://www.youtube.com/watch?v=XI27nSXSrYs)
- [Getting Hooked on React by Ladybug Podcast](https://open.spotify.com/episode/08qtVnuzAMbMywShNXwPvW)
- [React interview questions and answers by Simplilearn](https://www.youtube.com/watch?v=-dS9pvGqlX8)

I would love to hear: 
#### 1) what you found hard or confusing at first when you started learning React?
#### 2) How you solved it.
Polymorphism in JavaScript
Tags: javascript, beginners, codenewbie, 100daysofcode
Published: 2020-10-11 17:08:07

Polymorphism is a concept from Object-Oriented Programming. It is the capability to create a property, a function, or an object that has more than one implementation.

It allows us to substitute properties or methods in classes that have common functionality. It is similar to method overriding. With polymorphism, we can implement a standard interface but still serve slightly different needs or scenarios.

```javascript
function Employee(name) {
    this.name = name;
    this.getName = () => {
        return this.name;
    }
}

const employee = new Employee("Parwinder");

console.log(employee.getName()); // Parwinder

Employee.prototype.getDetails = function () {
    return this.name.toUpperCase();
}

console.log(employee.getDetails()); // PARWINDER
```

You can see how `Employee` will implement the standard interface but depending on where we use the instance of `Employee` we can change the behavior slightly to fit our needs. We could either get the name as is or get the name in all uppercase.

We can do the same with classes.

```javascript
class Shape {
    area() {
        return 0;
    }
}

class Circle extends Shape {
    constructor (radius) {
        super(); // needed to use this
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius * this.radius;
    }
}

class Rectangle extends Shape {
    constructor (width, height) {
        super();
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

const circle = new Circle(2);
const rectangle = new Rectangle(5, 6);

console.log(circle.area());
console.log(rectangle.area());
```

`Shape` is the base class that we use to create `Circle` and `Rectangle` by extending it. They all have the `area` method but change the implementation based on the type of shape.
Which age is the best age to do online coding classes for kids ? Does learning coding is important in young ages ?
Tags: html, css, javascript, computerscience
Published: 2020-10-11 17:02:54

Nowadays, all education companies are more keen in selling kids coding classes online, but what we felt is "They are completely incompetent in designing the curriculum" understanding the grasping power of kids. We have undergone a complete research by taking classes on all the EdTech companies and we have evaluated the set of kids from top EdTech companies. 

We've got a shocking result that the kids couldn't even write a code on their own. Kids were getting forced by parents to join the coding class without interest and completely making an inefficient class to kids. We've created a team of developers and teachers to create a curriculum which involves learning through activity and engagement to make kids understand with their daily life examples. 

We've successfully started practising this methodology and getting more interesting things to do in education with the thought process we got as a developer. 

You may think, why there is a need to write this here. Yes, We are still looking for more inputs and understand the thought process from other developers to make our online coding classes for kids to get it more vibrant. 

if you have any ideas that we can incorporate, please visit our website https://learn2code.asia/ and help us grow more in making Values than money.
SoundBot! A Discord soundboard generator.
Tags: node, discord, javascript
Published: 2020-10-11 16:57:29

---
title: SoundBot! A Discord soundboard generator.
published: true
description: A soundboard generator for Discord that uses message reacts as buttons.
tags: #nodejs #discord #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5cp79xo00tkuom2k5f6i.jpg
---

Hey all,

I'd like to introduce SoundBot! A soundboard generator for Discord that uses message react emojis as buttons.

You can easily make multiple soundboards for you Discord channel simply by creating folder filled with sounds. Projects and instructions can be found on [GitHub](https://github.com/Radlad-io/Soundbot).

I originally wanted to create a soundboard based on The Office and realized I had build something that was more universal.

Let me know what you think!
delegate_to in Rails
Tags: ruby, rails
Published: 2020-10-11 16:48:15

Ruby is known as Developer's favourite language, for a reason. Why it shouldn't when it makes our life so easier. ❤️

`delegate_to` is another wonderful library, as its name sounds it means delegating your work to someone else. In programmitcal word, provides a delegate class method to easily expose contained objects’ public methods as your own.

`delegate_to` is a very easy to go method with ActiveRecord in Rails. 

The very basic example of how to use it is given below.

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

Whenever a method is dependent on the presence of another object, we always have the fear of getting `NoMethodError` and to solve that `delegate_to` has an option of `allow_nil` to return nil if object is not present.

```
class User < ActiveRecord::Base
  has_one  :profile
  delegate :first_name, to: :profile, allow_nil: true
end
```

```
User.new.first_name
>> gives nil if profile is not present.
```

We could pass more than one method to be delegated.

```
class User < ActiveRecord::Base
  has_one  :profile
  delegate :first_name, :age, :last_name, to: :profile, allow_nil: true
end
```

To make the delegated method more readable, it comes with an option of `prefix` 

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

Hope you like it. And you find it useful for your next method callings. Don't forget to show some love. Thank you.