teleren/devto huggingface dataset:
The truth hurts... 😬
Tags: webdev, design, html, startup
Published: 2020-08-29 22:24:50

A few months ago I asked myself this question for my website [buildfaster.co](https://buildfaster.co).

I wanted to update it simply because I heard many people telling it looked ugly, the color palette was off, and it wasn't very user-friendly. 😬

**Yep it hurt**.

But I wasn’t just going to keep BuildFaster the way it was. I was going to fix it.

So I took the time to gather more feedback and make improvements on the landing page. It took over a month to complete the new landing page. Looking back on it, **I wish I had a faster solution**.

## So how can I get a “fresh look“, faster? 🤔
Do you feel the same way right now? If you do, then **your problems have now been solved.** 😲

I've been working on a few simple website themes for startups for the past week.

Here's a sneak peak of some of them:

![Sneak peak ;)](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fdb09bdb5-a620-4310-8aa1-2cdb3d5201bd_1800x1200.png)

What do you think? Could you use a boost right now?

I'm open to any feedback and **if you want early access, feel free to [reach out to me](mailto:brayden45.dev@gmail.com).**

Have a great rest of your day. 👋
DJANGO STEPS TO CREATING A MODULE (to show)
Tags: django, python, jinja, html
Published: 2020-08-29 21:52:26

Between app.py, url.py, modules.py .... what do you do “IN ORDER” to creating a object (class) to show up in the admin? 
I tried a test, but when I clicked on it... I came up as a error and it dosnt really day what it was.
Dynamically change number of columns in a grid using ngStyle
Tags: angular, css, javascript
Published: 2020-08-29 21:51:06

Today I'll show you how I used ngStyle along with CSS grid to create a resizeable grid. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/38vfxpmdnj3hca97sp7l.gif)

# ngStyle For The Win
ngStyle is a built-in attribute directive that lets you set styles by binding to an expression such as a function. 

Here in my `card-container.component.html` I am binding to my `getStyles` method.

```html
  <div class="cards-grid" [ngStyle]="getStyles()">
    <app-card
      *ngFor="let band of bands; index as i"
      [bandData]="bands[i]"
    ></app-card>
  </div>
```
This getStyles in my `card-container.component.ts` method returns an object with my defined styles. The magic is in the `grid-template-columns` value. I am using string interpolation to pass in a property called `columns`.

```javascript
 public getStyles() {
    return {
      display: 'grid',
      'grid-template-columns': `repeat(${this.columns}, 1fr)`,
      'justify-items': 'center',
    };
  }
```

If we look at the entire `card-container.component.html` component, you will see that I'm using an input and this is where the value for the `columns` property comes from.

```html
<div class="card-container">
  <div class="cards-header">
    <mat-form-field>
      <mat-label>Columns</mat-label>
      <input matInput type="number" min="1" max="5" [(ngModel)]="columns" />
    </mat-form-field>
  </div>
  <div class="cards-grid" [ngStyle]="getStyles()">
    <app-card
      *ngFor="let band of bands; index as i"
      [bandData]="bands[i]"
    ></app-card>
  </div>
</div>
```

If we look at the entire `card-container.component.ts` file you will see that I initialize the columns property to 4.

```javascript
import { Component, OnInit } from '@angular/core';
import * as bandData from './powermetal.json';

@Component({
  selector: 'app-card-container',
  templateUrl: './card-container.component.html',
  styleUrls: ['./card-container.component.scss'],
})
export class CardContainerComponent implements OnInit {
  public columns: number = 4;
  public bands: any = (bandData as any).default;

  constructor() {}
  ngOnInit(): void {}

  public getStyles() {
    return {
      display: 'grid',
      'grid-template-columns': `repeat(${this.columns}, 1fr)`,
      'justify-items': 'center',
    };
  }
}

```

# Thoughts?
I'd love you hear your thoughts on this. I don't think you would want to use an input like I'm doing here. The number of columns could go in to a settings page, or wherever else it fits in to the application.

# Repository
If you want to see the code, you can check it out [here](https://github.com/JasonFritsche/dynamicgridangular).
[Tutorial Linux] Terminal: Desligando o computador
Tags: shutdown, linux, terminal, womakerscode
Published: 2020-08-29 21:49:39

Para desligar o computador através do terminal, digite:

```
$ shutdown -h now
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **shutdown** programa um horário para que o sistema seja desligado, mas também pode ser usado para reiniciar ou travar a máquina.

- **-h** para finalizar e desligar o sistema.

- **now** diz a máquina para desligar imediatamente.

Também é possível especificar um horário para o desligamento. Exemplo:

```
$ shutdown -h 21:55
```

Depois do **-h** temos o horário descrito em **hh:mm (horas e minutos)**.

Caso queira desligar usando daqui a um determinado tempo, por exemplo, daqui a 45 minutos, usamos o comando

```
$ shutdown -h +45
```

Para cancelar qualquer um desses desligamentos agendados, digite:

```
$ shutdown -c
```

- **-c** do inglês, *cancel*, para cancelar.
HTML & CSS Comments
Tags: html, css, codenewbie, comments
Published: 2020-08-29 21:46:43

Writing lots of lines of code and you're worried you might not understand your code next week?

Want to make your project understandable to other programmers? 

   Comments are the way to go about it. A comment is a programmer-readable explanation or annotation in the source code of a computer program.

   Comments are added to make the source code easier for humans to understand and are generally ignored by compilers and interpreters.

   Comments are started with a language-specific symbol 

###**HTML5**
```
<!--This is a comment -->
```
###**CSS**
```
/* This is a comment */
```
###**JavaScript**

```
//This is a comment
```

**When to use comments**

>"A handy rule of thumb is: a comment should only be added to answer a question that the code can't. If you aren't confused by what a piece of code is doing, but rather why it's doing it at that moment, then a comment should be added." - [Mark Cronin](https://itnext.io/what-makes-a-good-code-comment-5267debd2c24) 

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines. This allows commenting inside a block of code and between a group of codes. What matters is making your code glanceable.
```
/* A one-line comment */

/*
A comment
which stretches
over several
lines
*/
```

###**Note**
The /* */ comment syntax is used for both single and multiline comments. There is no other way to specify comments in external style sheets.
Portfolio Website Builder - Build Your Portfolio Within 10 minutes Without Coding
Tags: javascript, webdev, showdev, python
Published: 2020-08-29 21:22:02

You need a resume that you can update and share at any given moment. On top of that, potential employers should also be able to find you online with a quick search of your name. Having a well-designed CV website that conveys your personality sends a clear message to recruiters that you are serious about your career.

###Why You Should Create a Personal Website ASAP
- A personal website helps recruiters find you much more easily.
- By having a personal website, you'll gain a competitive advantage.
- A personal website gives you the freedom to be creative.
- Having a personal website helps you acquire new skills.
- Having a personal website will boost your chances of landing a job

![Input](https://j.gifs.com/gZojQZ.gif)

So I came up with an amazing tool to make this an easy experience.
**Resume Website Builder** tool provides a beautiful UI to create a Resume website (Portfolio) in an easy and efficient way.

- **Just fill some details like Name, About, Education, Experiences, Skills, etc With a Simple and attractive UI.**

- Click on the submit button to create your resume Website.

- Click on Show/Hide Code Button and copy your website code by 
  clicking on Click to copy button

![Input](https://j.gifs.com/ANZG97.gif)

**🚀Try it out:[Live Demo](http://www.codescript.run/)**

**How it Works [Watch Video](https://youtu.be/HMUmI9kfSDc)**

**Currently It has only one theme but I'm working hard I will come with new multiple themes ASAP.**

####**If you like the tool, show some love by leaving a star on the [GitHub repository](https://github.com/mjmaurya/resume-website-builder).**
Top 4 Reasons behind Building a Team
Tags: javascript, career, management, devops
Published: 2020-08-29 20:51:09

Why teams are even put together in the first place. You've heard the saying "if you want something done right, do it yourself." There are reasons why you might not want to do it yourself. 

<strong>#1 The More Resources You Deploy The More Quality And Faster Results You Get</strong>

One of the most obvious reasons to have a team is because there's an idea that the more resources that you throw at something, resources being; 
•	More people, 
•	More eyeballs, 
•	More man-hours, 
•	More diverse skill sets, etc., 
We can accomplish something at a higher quality or faster. You know that's not necessarily true. 

You've probably worked on teams where having more people or more time or more skills actually made things slower or lower quality or even caused the failure of the final product. But we do like to think that if we add more resources, then we can have something better. 

<strong>#2 Synergy</strong>

Another reason why teams are put together is the idea of synergy. I know a lot of people don't like this buzz word “Synergy”, I love it. The idea of synergy is that you take two things, add them together, and you get more than the sum of the two things. In this case, the value of one person paired with another person is bigger than just those two. Working together they create more than two. 

<strong>#3 To train other people</strong>

From a management and leadership perspective, one of the big reasons why you would use teams is to train other people. For example, if you put a cross-functional team together, not just developers, but maybe people from the marketing team, what happens is the developers understand marketing better, and the marketers understand development better. 

That cross-training helps people understand the organization better and maybe understand the motives behind different departments. An example like that can also help strengthen the culture of an organization. Putting people together on a team that might not otherwise have ever worked together or even crossed paths in the hallway, having them solve problems together can strengthen relationships to lead to a more unified organization. 

<strong>#4 When more people work on a product they work through the challenges</strong>

Another reason why teams bring value is that when more people work on a product they work through the challenges, they talk about the issues, they come up with solutions, and they implement those solutions, those people are more bought into the final product. They're even bought into the issues that the product is trying to resolve. You can imagine the ownership that those people have in the problems and solutions.

Understanding why teams are put together is of utmost importance to the upward movement of any organization.

Thanks for reading.
Creating my private notification feed for automated tasks
Tags: discuss, python
Published: 2020-08-29 20:34:44

Thinking of creating a feed of sorts which sends notifs (simple text) and files (though files count at max will be 2) from some of my automated projects. It must be sent to both mobile and my laptop, but I don't wanna create an app at all. 
I have thought of using RSS feeds, creating an discord bot and my own private channel (not explored yet), emails and sms (though are limited if I use trello or something).

Any other ideas or suggestions as to how I can go about it?
Setup Your Computer For Web Development
Tags: webdev, beginners, tutorial, html
Published: 2020-08-29 21:04:00

---
title: Setup Your Computer For Web Development
published: true
date: 2020-08-29 20:30:35 UTC
tags: webdev, beginners, tutorial, html
canonical_url: https://www.risingblock.com/setup-your-computer
cover_image: https://i.imgur.com/6FVnNxA.jpg
published: true
series: web-fundamentals
---

Let’s set up your computer so it’s ready to code.

I recommend the [Atom text editor](https://atom.io/) for coding.

Watch this video to see how to get yourself setup.

{% vimeo 452898775 %}

## Code Explained

HTML stands for HyperText Markup Language. It’s used to create every webpage. It defines the structure and the content of a page.

Tags are what HTML uses to define these structures. Tag names are surrounded by <>, also known as angle brackets.

Angle brackets are the greater than and less than signs, above the period (.) and comma button (,) on most keyboards.

Tags typically have an opening tag and a closing tag (there are some exceptions to this rule).

All HTML files must start and end with an **html** tag.

```
<html>
</html>
```

Closing tags in HTML have a ‘/’ after the first angled bracket.

To display something in the browser, you should enclose the content inside **body** tags.

```
<html>
  <body>
    Hello HTML! 
  </body>
</html>
```

Notice how we start to _indent_ our HTML code here. This makes it easier to read. The indents represent what tag we are “inside”. It’s clear that the body tag is inside the html tag here, and that our sentence “Hello HTML!” is inside the body tag.

The last tag that was used in the video was a heading 1 tag. There are 6 heading tags in HTML from h1 all the way to h6. We’ll look into this more in the next lesson.

```
<html>
  <body>
    <h1>Heading 1!</h1>
    Hello HTML! 
  </body>
</html>
```

## Hotkeys

- CMD + S / CTRL + S to save 
- CMD + R / CTRL + R to refresh your browser 

## Action Items

Before proceeding you should have completed the following:

- Installed Atom on your computer 
- Opened Atom and created a _website.html_ file 
- Added the code in this lesson to your _website.html_ file
- Loaded _website.html_ in your browser (Google Chrome is recommended) 
- Modified the code (simply change the text), saved it and refreshed your browser to see the change. 

Once you’ve completed these steps and are comfortable with how everything works, you’re ready to move on to the [next lesson](https://www.risingblock.com/html-basics-with-cheatsheet).

If you have any questions, please let me know – email me eddy@risingblock.com
My #100DOC - Day 3
Tags: 100daysofcode, challenge, log
Published: 2020-08-29 20:23:29

### Day 3: August 29, 2020

#### **Today's Progress**: 
1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (1h 30min):<br>I reviewed JavaScript arrays, objects and their methods, and I also completed challenge 3 and 4.
2. **[Learned how to create a .gitignore file](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (20min):<br>I had the need to prevent some of my files from my repositories from syncing, so I learned how to create and use a .gitignore file.
    
#### **What I learned**: 
* Review of JavaScript arrays and objects.
* How to create a .gitignore file.

#### **Total time**:
1h 50min.
Day 44: TypeOrm and Heroku bug fixes.
Tags: 100daysofcode, typescript, typeorm, heroku
Published: 2020-08-29 20:15:30

####Heroku bug fixes
I finally fixed the error encountered on [deploying backend to heroku](https://dev.to/mtee/day-40-deployed-back-end-to-heroku-1fli). I changed the main in package json from index.js (which is none existent in my project) to app.js which is my program's entry point and everything was working in no time.
```javascript
 "main": "app.js",
```
I also added my `.env` variables to heroku. The backend is up and running and almost ready to be consumed. 
Response from app on browser:
![Image: response on browser](https://dev-to-uploads.s3.amazonaws.com/i/fprwvx8y6v0a0ljm1dqp.png)

####Typeorm
Onto the next business of the day, learning typeORM. My key takeaways:
* TypeORM supports both Active Record and Data Mapper patterns. Active record pattern encompasses accessing the database from the models while Data Mapper pattern uses repositories to access the database instead of models.
* Data mapper pattern is preferred in large systems because it easily maintainable while Active Records are preferred cause of their simplicity. 
* We use either a repository or entity manager to save data to our database. Each entity has a repository.
* Creating a model:
```typescript
import {Entity, Column, PrimaryGeneratedColumn} from "typeorm";

@Entity()
export class User {

    @PrimaryGeneratedColumn() //generated id
    id: number;

    @Column()//column
    firtName: string;

    @Column()
    lastName: string;

    @Column()
    email: string;
}
```
* `@expression` is a typescript decorator. 

That's it for today, looking forward to diving deeper into typeORM.
_Day 44_
Attach new EBS to your EC2 instance
Tags: aws, mount, linux, ebs
Published: 2020-08-29 20:01:17

No long stories straight steps.

1. Click on volumes under Elastic Block Store in EC2 dashboard

2. Create new EBS drive

3. Use already running instance or create new EC2 instance.

4. Again from EC2 dashboard navigate to volumes under Elastic Block Store. Select your volume that you want to attach and from action click attach and select your ec2 instance.

5. SSH into your EC2 instance

6. `lsblk` this will list all devices attached to your instance.

7. Try to identify new EBS volume name in the results

8. Check mountpoint column for that row and that should be empty and that's fine

9. `sudo file -s /dev/xvdf` **replace xvdf with your volume** this command will result in `/dev/xvdf: data` that means there is no file system associated with that drive. We have to format this newly created volume with some file system which is supported.

10. `sudo mkfs -t ext4 /dev/xvdf` this will format that newly created volume in **ext4** file system.

11. Now we will create mount point where we will mount this new volume in our system. `sudo mkdir /data` and then `sudo mount /dev/xvdf/ /data` this will mount it to /data directory.

12. Make sure we have mounted successfully by `lsblk`

13. To mount this volume everytime we reboot run ` sudo cp /etc/fstab /etc/fstab.orig` and then `sudo nano /etc/fstab` . Enter following statement at the end and save this file `/dev/xvdf /data ext4 defaults,nofail 0 2`

14. Check if everything is on track by `sudo file -s /dev/xvdf` and now you should see everything about this new volume.

15. Check if it is mounting on every reboot by `cd /` and `sudo umount /data` will unmount and then `sudo mount -a` will run the script to mount all volumes on reboot.

16. Check back by `lsblk` and everything should be mounted as expected.


*This post is written based on AWS documentation and please make sure you read all types of services and charges associated with them. You will be charged if you use any service out of their free tier. I am not responsible for your any types of issues and charges. Please use this post on your own understanding.*
Top 5 vs CODE extensions for web developers
Published: 2020-08-29 19:52:45


A list of essential Visual Studio Code extensions to help you become a more efficient web developer.

####   1. Live Server

![vscode.png](https://res.cloudinary.com/practicaldev/image/fetch/s--9j5ZH-3---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.postimg.cc/3wYswsNh/vscode-liveserverlogo.png)

A must-have for any developer creating webpages using HTML and CSS. Once installed all you have to do is open your project, look for the Go Live button on the status bar at the bottom, or use the command Alt+L Alt+O in order to launch a quick development live server so you can view your current project live on any browser.

####   2. GitLens

![vscode-gitlenslogo.png](https://res.cloudinary.com/practicaldev/image/fetch/s--sXUdheVv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.postimg.cc/kGPJfjwg/vscode-gitlenslogo.png)

If you know and work with git, you will want this extension. This customizable extension lets you better understand your code by easily allowing you to view when, why, and by whom the code was added/edited.

![gitlens](https://res.cloudinary.com/practicaldev/image/fetch/s--2ZR2V-8o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.postimg.cc/WbqXc527/vscode-gitlens.png)


####   3. IntelliSense for CSS class names in HTML

![vscode-intellicss.png](https://res.cloudinary.com/practicaldev/image/fetch/s--F3fZSAFQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.postimg.cc/3RRSz7SL/vscode-intellicss.png)

You don’t need to remember all the CSS class names while you are working on your HTML file. This extension will provide you with a completion list for the HTML class attribute based on your workspace or external files referenced beforehand.

Alternative: HTML CSS Support
Complementary: CSS Peek

####   4. Visual Studio IntelliCode
![vscode-intellicode.png](https://res.cloudinary.com/practicaldev/image/fetch/s--Xpgs8iYh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.postimg.cc/GtXfHtBn/vscode-intellicode.png)

This extension uses AI technology to help Python, TypeScript/JavaScript, and Java developers. As you code, it will show a recommended completion items list sorted by context, rather than alphabetically or by most recent.

####  5. Rainbow Brackets
![vscode-rainbow-Brackets.png](https://res.cloudinary.com/practicaldev/image/fetch/s--XfEmxVcS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.postimg.cc/5NjN4FGg/vscode-rainbow-Brackets.png)

Visual help for those programmers that need to worry about closures, like javascript programmers. It does this by providing different colors for round brackets, square brackets, and squiggly brackets.

Alternative: [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

There is no shame in using tools to help you. Quite the contrary, a smart developer is one that will use these to make their lives easier and become more efficient in the process!

## Good Luck ! 😊
I present my Github Profile
Tags: github, opensource, showdev
Published: 2020-08-29 19:33:40

---
title: I present my Github Profile 
published: true
description: My new readme.md of github profiles
tags: github, opensource, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/o5ycq87thnvqxpjj49tr.png
---

Hi, 
I'm happy to present my new homepage of github profile, a short presentation of all my active projects: [https://github.com/ptkdev](https://github.com/ptkdev)

I have focused on a simple layout that can facilitate access to my social profiles and my pojects/works. Opinions?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m0jz3qd4waze50ix4dyl.png)
Rest Operator in Javascript
Published: 2020-08-29 19:30:12

---
title: Rest Operator in Javascript
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

যখন এটা ফাঙ্কশন আরগুমেন্ট (Function Argument) এর মধ্যে ব্যবহার করা হবে তখন এটাকে রেস্ট অপারেটর (Rest Operator) বলা হবে । 

যেমন আমি একটা Function ধরে নিলাম । 
```
const numbers = (...args) => {
  
};
```

যদি আমরা Function এর Argument এর মধ্যে ...args করে লিখি তাহলে এটা Unlimited নাম্বার Argument ডাটা রিছিভ করতে পারে । 

তাহলে আমি যখন Function টা কল করবো তখন অনেকগুলো ১,২,৩,৪,৫ নাম্বার দিয়ে কল করলাম । 

`numbers(1, 2, 3, 4, 5);`

এখন যদি আমরা এই টাকে দেখতে চাই তাহলে -

```
const numbers = (...args) => {
  console.log(args);
};
```

`Output: [1, 2, 3, 4, 5]`

তারমানে আমি parameter হিসাবে যা পাঠাব টা Array আকারে দেখাবে । 
যেহেতু Array আকারে পাচ্ছি তাহলে এখানে Array এর বিভিন্ন মেথড ব্যবহার করতে পারব । 

[Source](https://codepen.io/bipon68/pen/NWNgyZW)