teleren/devto huggingface dataset:
Building My Portfolio from Scratch Pt. 1
Tags: portfolio, webdev, html, css
Published: 2020-07-09 14:38:57

Hi everyone, this is my first blog post!

Since I started in the world of web development in 2017 I wanted to do a portfolio, but why? Because it summarizes who you are at a professional level showcasing your best projects and some information about you.

The thing is that I wanted to do something different than before, I made some attempts to do a portfolio a year ago but it was really quirky with zero responsiveness and without a solid design, so I told myself to do something different for this version.

I've selected Github Pages as the host for my portfolio website, it is pretty easy to set it up. To make it mobile friendly and also easier to work with the CSS, [Tailwind CSS](http://tailwindcss.com/.com) is my best friend, quick to set up, and good for simple pages. I wouldn't call my design minimalist but I like to keep things clean and tidy.

#### Let's talk about performance:

I've done some tests with Google Lighthouse, at the beginning I had some problems with my website going from non-optimized images, CSS not minified and SEO related issues. Here are the results after some tweaks: 

**Desktop version** ![Desktop Performance](https://dev-to-uploads.s3.amazonaws.com/i/mr1cyjw0fpndh3466eg5.png)

**Mobile version** ![Mobile Performance](https://dev-to-uploads.s3.amazonaws.com/i/o3g7w12lloqevwwx0k5x.png)

#### Short Performance Tips that I've learned:
- Use SVGs instead of favicons, this will reduce your loading time plus you might need a couple to load not the whole file. 
- For SVG optimization and converting it into a tag I've used: [Jake's SVGOMG] (https://jakearchibald.github.io/svgomg/)
- Minify CSS, Duckduckgo has a built-in minifier when you search the word `Minify CSS`.
- Don't forget to add `ALT` text to images, this will help improve your SEO score.
- Optimize it for mobile users.

##### Some Notes 

This portfolio is not yet fully done, it is missing the most important part which is the project showcase and I will be talking about it in **part two of this series**. 

Another important note is that the mobile version works perfectly on my Oneplus 7T using Chrome or Duckduckgo browser, but when tested on an iPhone had some alignment issues which I will be focusing to fix soon. 

##### I've couldn't make it without these great resources

- This helped me create the I'm A section: https://bit.ly/3iKZFPo
- Inspiration on how to create the Portfolio: https://bit.ly/2Zb2h1d

You can check out my code on Github:
{% github Luismi74/luismi74.github.io no-readme %}
Day 5 Tailwind CSS
Tags: tailwindcss, learning
Published: 2020-07-09 14:36:02

Ok, this part is interesting for me as I want to include icons, in Tailwind CSS case, SVG icons. This is because I used icons from Bootstrap and I am curious on how to do this in Tailwind CSS.

👉 BTW There’s a good screencast on how to here: [Working with SVG Icons - Tailwind CSS](https://tailwindcss.com/course/working-with-svg-icons)

👉 You can check out Tailwind’s resources page for images and illustrations: [Resources & Assets - Tailwind CSS](https://tailwindcss.com/resources/)

## Tips:
1. A bunch of SVG icons ready to inject  into your site via [Resources & Assets - Tailwind CSS](https://tailwindcss.com/resources/)
2. Clean up SVG, head over to [SVGOMG - SVGO’s Missing GUI](https://jakearchibald.github.io/svgomg/)
	* Copy the script in your SVG file
	* Paste it in SVGOMG, you would get a new version of the SVG and it’s smaller in size.
	* Copy from SVGOMG (there’s a copy button)
	* Paste it into your SVG file replacing the old script
3. You can paste that new script into your template/html file.
	* Delete the width and height from SVG script, and add `class=“”` and start adding your tailwind attributes like `h-4 w-4`
4. What about other things you can do?
	* Colour: Look for the `fill=“...”` property  in your SVG script. Delete it. Then in your `class`, use Tailwind’s CSS utility: `fill-current` - this will match the current text colour. Then you can use Tailwind’s **text color** utility, e.g. `text-red-500`. 

	Example:-
	```
	class=“h-24 w-24 fill-current text-red-500
	```

##### 💡Pro-tip: If you are working with custom SVG icons, make sure they are exported as **squares**. It just makes it easier when resizing the icon in Tailwind CSS.

The rest of the webcast is rendering multiple icons in a row, in that example is star ratings - 5 stars in a row. I’m not interested using that at the moment for what I’m doing. But you can use `v-for`, `:key` & `flex` utility to show multiple star icons on a row and not stacked on top of one another. Then it’s just using Tailwind utilities to make it nicely aligned. So check out  the webcast if you are interested in this part.

{% youtube MbUyHQRq2go %}
The Gig Economy
Published: 2020-07-09 14:20:54

We all know the world as we know it has changed over the last few months. Freelancers and "gig workers" were always there, and many of us are ourselves. Now we have a huge influx of new businesses being started revolving around our own person talents and capabilities. Whether thats home remodeling, handyman, website building, you name it. But whats the best platform to use when looking for work? Fiverr can be good, but many manipulate the system with fulfilling orders then recanting the work after the fact. Upwork you have to pay to submit proposals for each POTENTIAL job, and the success rate is very low. Freelancer.com is tough to find consistent work. HomeAdvisor is too expensive, same for Thumbtack and other platforms of this kind. So whats a consistent way to find work as a freelancer? PayMyPrice.com is set to launch next month and turn the industry on its head, by addressing the need for [consistent work for service providers/freelancers](http://paymyprice.com), while providing the consumer with an easy way to find local talent able to perform the work at an economical price. Cuts out the haggle and hassle associated to these cumbersome online platforms, and solves a major problem in our new gig economy.
So if you are a web developer, keep an eye on this new platform set to launch. It may just be your best avenue with finding paying customers in America's major cities.
JavaScript ความแตกต่างระหว่าง Primitive Type และ Reference Type
Tags: javascript, thai, beginners
Published: 2020-07-09 14:13:58

# Primitive Type คืออะไร ?
  คือเมื่อสร้างตัวแปรใหม่โดยอ้างอิงจากตัวแปรเก่า ค่าที่ได้จะเป็นการคัดลอก
```js
let num1 = 1
let num2 = num1
console.log(num1,num2)//จะได้ผลลัพธ์เป็น 1 ทั้งสองตัวแปร
```
แต่ถ้าเปลี่ยนเป็น
```js
let num1 = 1
let num2 = num1
num1 = 3
num2 = 4
console.log(num1)//จะได้ผลลัพธ์เป็น 3
console.log(num2)//จะได้ผลลัพธ์เป็น 4
```
เพราะตัวแปรจะใช้ค่าของแต่ละตัวโดยไม่เกี่ยวข้องกันถึงแม้ num2 จะอ้างอิงมาจาก num1 ก็ตาม

# Reference Type คืออะไร ?
  คือเป็นการสร้างตัวแปรแบบอ้างอิง โดยที่เมื่อตัวแปรไหนเปลี่ยนตัวแปรอื่นก็จะเปลี่ยนตามด้วย จะใช้กับทั้ง Array และ Object

```js
const person1 = {name: "A"}
const person2 = person1
person2.name = "B"
console.log(person1)//จะได้ผลลัพธ์เป็น B
```
ทั้ง person1 และ person2 จะใช้ค่าเดียวกัน

ถ้าต้องการคัดลอกเฉพาะค่าใน Object ให้สามารถใช้งานแยกออกจากกันสามารถทำได้โดยใช้ Spread Operator
```js
const person1 = {name: "A"}
const person2 = {...person1}
person2.name = "B"
console.log(person1)//จะได้ผลลัพธ์เป็น A
```
America's Cash Crop
Published: 2020-07-09 14:08:06

Hemp has been around for centuries, but up until 2018 American farmers weren't allowed to grow it. Now that things are opened up, there is a great opportunity to cash in on the hemp product and CBD market.
American farmers who typically buy seeds from their local supply store, can [buy hemp seeds](http://davishempfarms.com) from reputable online wholesale sources such as Davis Hemp Farms. You want to do your research on each individual company before placing your order, to ensure the THC level is below .3% even at full plant maturity. There is a high risk to have your harvested crop seized due to the plant's high THC content. Its not worth the risk, so ask for Certificates of Analysis from multiple third party agencies. Most companies have these available if you ask, or on the website.
Daily Challenge #267 - Braking Speed
Tags: challenge
Published: 2020-07-09 13:59:51

---
title: Daily Challenge #267 - Braking Speed
published: true
series: Daily Challenge
description: Calculate how much distance is needed to safely stop your car. 
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
Braking distance `d1` is the distance a vehicle will go from the point when it brakes to when it comes to a complete stop. It depends on the original speed `v` and on the coefficient of friction `mu` between the tires and the road surface.

Braking distance is just one of two principal components of the total stopping distance. The other component is the reaction distance, which is the product of the speed and the perception-reaction time of the driver. We can just assume that the reaction time is constant and equal to 1 second.

The kinetic energy `E` can be found using the formula `0.5*m*v**2`, the work `W` given by braking is `mu*m*g*d1`. Finding `E` and `W` gives the braking distance: `d1 = v*v / 2*mu*g` where `g` is the gravity of Earth and `m` the vehicle's mass.

So, to complete this challenge, there are two tasks you need to complete. 
1. Calculate the total stopping distance in meters given `v`, `mu` (and the reaction time `t = 1`).
`dist(v, mu) -> d` = total stopping distance

2. Calculate `v` in `km` per hour knowing `d` in meters and `mu`. The reaction time is still `t = 1`.
`speed(d, mu) -> v such that dist(v, mu) = d`

###Examples
1. `dist(100, 0.7) -> 83.9598760937531`

2. `speed(83.9598760937531, 0.7) -> 100.0`

###Tests
`dist(144, 0.3)`
`dist(92, 0.5)`

`speed(159, 0.8)`
`speed(153, 0.7)`

Good luck!

***
_This [challenge](https://www.codewars.com/kata/565c0fa6e3a7d39dee000125) comes from g964 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Cyber Security Course Training In Hyderabad
Published: 2020-07-09 13:54:54

"India’s Cyber Security market is projected to grow to $35.5 billion by 2025. Cyber Security experts are drawing salaries in the range of 7-24 lakhs." - (Source). The term Cyber Security has become a matter of global interest and importance. As, companies and organizations, especially those who are given the responsibility to safeguard information relating to national security, financial records, intellectual property, or health, need to take urgent steps to safeguard this information from the volume and sophistication of cyber-attacks. Organizations today want to attain digital transformation without having to compromise on security. They are prioritizing to protect sensitive data by hiring Cyber Security staff to safeguard their organization from security loopholes and future attacks. Cyber Security Course Training in Hyderabad involves various tools, risk management approaches, and best practices designed to protect networks from attacks or prohibited access.

Cyber Security Training in Hyderabad is created to help you command security conventions in information processing systems. There is no doubt that the security threat environment will continue to evolve and enterprises will need to build a strong security stance. Cyber Security professionals are responsible for the security of an organization's computer systems. Explore and Understand security architecture with SABSA, TOGAF, and Zachman frameworks along with common attack types, malware, and vectors. Manage firewalls and master cryptography and encryption techniques like Digital Signature. Appreciate the forensics applications of Cyber Security in the best Cyber Security course in Hyderabad.

Cyber Security Institute In Hyderabad focuses on the fundamentals and concepts of cyber security. And will explore the principles of security architecture, networks, systems, applications, data, incident response, and the adoption of evolving technologies in Cyber Security. Understand the common attack types and vectors, kinds of information security policies, firewalls, detection systems, encryption techniques, cryptography, process controls, disaster recovery, advanced persistent threats, and much more in the best Cyber Security course in Hyderabad at 360DigiTMG..
As a programmer, how do you keep yourself healthy? Tips | Apps | Tools
Tags: discuss, help, webdev, codenewbie
Published: 2020-07-09 13:07:02

> Health is Wealth!

Being a programmer, we all need to keep learning, applying and repeating. With so much to learn and so much to do, 

1. How do we hit the balance?
2. What tips would you give, to follow everyday, that would ensure good health?
3. Are there any Apps or webapps that you would recommend, that helps in this direction?
4. Are there any tools like chair, table, keyboard, mouse, screen guard or whatever, that you would recommend?

Even the smallest/sillest tip would help all of us. 🙂


Written by,
{% user developertharun %}

# Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

![Tharun Shiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxq6bdms36fmn62450h.png)
Add a markdown version for DEV badge link
Tags: feature, pr, discuss, badge
Published: 2020-07-09 13:52:31

---
title: Add a markdown version for DEV badge link
published: true
description: 
tags: #feature #PR #discuss #badge
//cover_image: https://direct_url_to_image.jpg
---

You can find your DEV badge link [here](https://dev.to/p/badges).

```html
<a href="https://dev.to/bravemaster619">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="bravemaster619's DEV Profile" height="30" width="30">
</a>
```

I think it would be better if it includes markdown version too.

```md
[![bravemaster619's DEV Profile](https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg)](https://dev.to/bravemaster619)
```

Should I open an issue in github instead?

Click ❤️ if you like the idea!

UPDATE
======

I've sent a PR to dev.to team. You can check its status [here](https://github.com/thepracticaldev/dev.to/pull/9227).

Happy coding!
Project: COVID 19. 😷
Tags: showdev, python, machinelearning, datascience
Published: 2020-07-09 13:42:43

#Disclaimer:
Built this project after taking inspiration from a lot of projects that I saw on youtube based on COVID19. I'm glad I completed this project. Even though I did not know all the tech used, I learned all of it in the process of making this project.😊

#📝Aim of the Project:
Build an application to combine my ML + web development skills. Create a Web application to predict the patient's probability of the contract of COVID19 based on the given symptoms.

#👩🏻‍💻Technologies and Languages Used:
Python libraries - pandas, NumPy, Sklearn, pickle;
Jupyter Notebook,
Flask,
HTML,Bootstrap,
and Visual Studio Code.

#📄Dataset:
Generated a dataset that contains 6 columns, where 5 columns are namely **age**(1-100), **Body temperature** in Fahrenheit(98-104), **Body pain**(0/1), **Cough**(1/0), **Difficulty in breathing**(-1/0/1) and the 6th column tells if the person has the disease or not(0/1).

#📊Training the dataset:
I trained it using **logistic regression** and predicted the probability. Logistic regression is a statistical model that in its basic form uses a logistic function to model a binary dependent variable, although many more complex extensions exist. In regression analysis, logistic regression (or logit regression) is estimating the parameters of a logistic model (a form of binary regression).

You can see how I used the logistic regression on the dataset [here](https://github.com/rakshakannu/COVID19/blob/master/training%20covid19.ipynb).

#📈Saving the model:
Used the python **pickle** library to save the model. The pickle module implements a fundamental, but powerful algorithm for serializing and de-serializing a Python object structure. “Pickling” is the process whereby a Python object hierarchy is converted into a byte stream, and “unpickling” is the inverse operation, whereby a byte stream is converted back into an object hierarchy. Pickling (and unpickling) is alternatively known as “serialization” or “flattening”, however, to avoid confusion, the terms used here are “pickling” and “unpickling”.

#🌸Creating the UI:
Used simple HTML and Bootstrap to create the UI. Used basic elements like navbar, forms, and buttons. You can check the screenshots of the App below.

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

#👾Putting it all together:
Now the only thing left is to combine everything using the **Flask web framework**. Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries.

You can understand how I did it [here](https://github.com/rakshakannu/COVID19/blob/master/main.py).

#📟Live Demo & Source code:
Source code can be viewed at the GitHub repository given below. 🎉
{% github rakshakannu/COVID19 no-readme %}

Live demo of the project is shown below.

{% youtube IRoOPAkJWVI %}

Do check it out and provide feedback. Thank you!💖
🚀 Github Hidden Feature: Profile README
Tags: github, watercooler
Published: 2020-07-09 13:31:10

Github has a brand new secret feature! Now you can setup a README for your entire profile. Here's how mine looks: [godcrampy](https://github.com/godcrampy)

To enable this, make a repository with the same name as your username:

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

Then add a `README.md` which will then be displayed on your profile page. And that's it!
Thanks, Github for this super cool feature!

----
🌟 I made some [Cheat-Sheets](https://github.com/godcrampy/cheat-sheets)
🚀 Stalk me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Twitter](twitter.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!
How to spot fake job posts and offers
Tags: career, beginners, codenewbie, security
Published: 2020-07-09 13:30:19

9 months ago, I received a message in my inbox about a job. When I finally looked at the message it was clear to me that the job was a scam. It only took me seconds to know that it was a not a real job offer.

Here are the signs of fake jobs:

###1. Little or no information about the job.
There is no information provided or the job description is too vague. The only thing mentioned was "a phone and laptop" were the only requirements for the job. 

###2. Bad grammar and misspellings.
Grammatical errors in the job description are red flags and a common sign of a fraudulent job offers. 

###3. The pay is too good to be true.
The pay was $2700 per week and claimed to be an office assistant job (see #1 above). It sounded very suspicious and did not make any sense to me. A indication of a spam message sent out to many people as possible to lure them into this scam.

###4. Malicious links (DON'T CLICK)
Shady links are the norm when it comes to fake jobs. Strange links to a website that does not exist are embedded in messages. It can be virus that can compromise your security.

###5. Fake profiles
 The benefit of LinkedIn and social media is that you can easily spot fake accounts. If you witness a fake profile pretending to be a recruiter sending direct messages offering jobs, report them immediately. 

The targets are mostly job seekers and college students. I find it necessary to share information on job scams. These actions are predatory and take advantage of individuals. 

Any stories or encounters with job posts and offers that where fraudulent?
When have you done something you thought was "simple" that has impressed a client or stakeholder?
Tags: discuss, webdev
Published: 2020-07-09 13:29:20

Sometimes we take things for granted as developers. The Web is a magical place when you know how the magic works. There are plenty of people we work closely with that may not have that understanding.

Have you ever done something that felt simple, but seemed magical to someone that hasn't written code?

I can remember multiples that I've opened up dev tools in a browser and made an adjustment to something live next to a client and had their eyes widen in surprise. What sorts of things have you done that surprise non-coders?

<span>Photo by <a href="https://unsplash.com/@blackpoetry?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">pixpoetry</a> on <a href="https://unsplash.com/s/photos/surprise?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
My Take on OAuth2  (part 1)
Tags: webdev, javascript, android
Published: 2020-07-09 13:25:49

I really am against any small scale web project implementing their own user-password authentication feature , and I ensure I don't implement this feature in any project I am involved in ( I mean, not any more ). 
    First of all, your implementation can never be secure enough, no matter how many developers eye balled your shitty codes, they just won't be enough.
    Secondly it is a big hassle for end users to memorize and store so many passwords from so many shitty sites that offers no significant value, not that your site provides no value but it may at some point.             
      Therefore, I propose for all of you still using this messed up outdated authentication system to switch to OAuth2, you might have heard of it or not, OAuth is an access delegation protocol that can be used as the basis for an authorization  and authentication protocol. It is secure enough to be used for authorization and also it doesn't task the user's poor memory each time he want to sign up or login to your shitty site. It works in this simplified way:
1) Redirect the user to the authorization server when he tries to access a website protected resource that is opened to only authorized users.
2) The user authenticates with the authorization server because he trusts the server and she has an account with them.
3) Then, the user delegates access to the browser's own copy of the website to acts as his personal assistant.
4) After that, the user is redirected back to the original website , which then gets a token ( this signifies your passkey to access protected resources on the website server) from the authorization server .
5) The token is added alongside any request that is sent to the website server to access it's resource. The website server accepts any token that can be identified as coming from that  authorization server and allowes the request for any protected resource by the user to be accepted and resource delivered to the user .
6) Voila , you  now have access to the protected resource.
   Easy right ?, I don't think so. In the next part, I am going to explain what an authorization server is and make it all clear to you. The major take away from this post is that from now on , OAuth2 is your friend and username-password feature is your enemy.