teleren/devto huggingface dataset:
Improve website design in a couple of hours
Tags: webdev, design
Published: 2021-06-05 17:05:28

You are a developer. You made a website and submitted it to the client. The client loves it but says that the design could look better. They ask you to fix the design by the deadline, which is... tomorrow morning. What can you do? Where to start? Is it even possible?

![pablo-meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zclx153bbamretyn3y2r.jpeg) 

---
You won't become a designer overnight. It's impossible. So it doesn't make sense to search for UX/UI courses. What may help is a design hotfix, something small, specific, and easily applicable to the existing design.

---
### Design tips on Twitter

Steve Schoger has a [collection of small UI tips on Twitter](https://twitter.com/i/events/994601867987619840). Every tip has a screenshot containing a bad version of the design and how to fix it. Using this resource, you can easily identify problematic parts of your UI and fix them one by one. Some of them will have a great impact on your existing design, and some just moderate. Your task is to identify what tips will have the greatest impact and apply them.

![refactoring-ui-twitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pv0httqt11g7ic57xl9.jpeg) 
  
---
### Refactoring UI tutorials on YouTube

Another place to go is [Refactoring UI playlist on YouTube](https://www.youtube.com/playlist?list=PLDVpvW8ghDr9tasku_YvuTy_l0xPUtOHE). There you can see a couple of videos of Steve redesigning existing web pages. Identify the video with a design that resembles yours the most, and watch it. It will help you pinpoint the areas you can immediately improve on your website.

![refactoring-ui-youtube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxym8f24u4zropiryrqy.png) 

---
This should help you drastically improve the look of your website in a short time. Good luck!
HandWritten Digit Recognizer || Tensorflow || Keras || OpenCV
Tags: deeplearning, machinelearning, devops, opensource
Published: 2021-06-05 16:55:17

Hello Devs! I have completed 𝐇𝐚𝐧𝐝𝐰𝐫𝐢𝐭𝐭𝐞𝐧 𝐃𝐢𝐠𝐢𝐭 𝐑𝐞𝐜𝐨𝐠𝐧𝐢𝐭𝐢𝐨𝐧. It is my first work with TensorFlow and OpenCV together. Had a very nice experience while working on this project.
This indeed has given me insights into the never-ending potential of the machine learning domain.

![computer_vision](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/234luedyp2v8me3l3dni.png)

𝐍𝐞𝐭𝐰𝐨𝐫𝐤 𝐮𝐬𝐞𝐝 : 𝐂𝐨𝐧𝐯𝐨𝐥𝐮𝐭𝐢𝐨𝐧𝐚𝐥 𝐍𝐞𝐭𝐰𝐨𝐫𝐤
𝐃𝐚𝐭𝐚𝐬𝐞𝐭 : 𝐌𝐍𝐈𝐒𝐓 𝐃𝐚𝐭𝐚𝐬𝐞𝐭
𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐮𝐬𝐞𝐝 : 𝐓𝐞𝐧𝐬𝐨𝐫𝐟𝐥𝐨𝐰
𝐀𝐏𝐈 𝐮𝐬𝐞𝐝 : 𝐊𝐞𝐫𝐚𝐬
𝐂𝐨𝐦𝐩𝐮𝐭𝐞𝐫 𝐕𝐢𝐬𝐢𝐨𝐧 𝐥𝐢𝐛𝐫𝐚𝐫𝐲 𝐮𝐬𝐞𝐝 : 𝐨𝐩𝐞𝐧𝐂𝐕

<a href="https://github.com/GauravSingh9356/Computer-Vision" target="_blank">GitHub link</a>
Add some color to your profile picture! 🎨 
Tags: twitter, tech, socialmedia
Published: 2021-06-05 16:48:14

---
title: Add some color to your profile picture! 🎨 
published: true
description: Amp up your social media game by adding a colored background to your profile picture in two simple steps
tags: twitter, tech, socialmedia
//cover_image: https://direct_url_to_image.jpg
---

Hey all! The Twitter community is a great place to find and interact with folks from all over on shared passions and interests.

Most recently, I've been way more active on Twitter and becoming a more active part of the developer community. 

It's been an awesome time sharing knowledge and building in public along with learning from what others have to say. 

One thing that can help with others recognizing you and your content is making your profile stand out a bit. 

There's a million people online and standing out can help with people remembering who you are and what type of content you tend to put out.

With all that said, **adding a nice and eye-catching color to your profile picture** can really add some pizazz to your profile picture! Regardless of where you're using it (except LinkedIn, where your mileage may very 🙂).
  
## Profile Picture Maker ##

This is the main step of creating your very own profile picture with a colored background. [Profile Picture Maker](https://pfpmaker.com/)

Most of the time, this app will work without a hit, and you'll get some awesome different styles for your profile picture. 

In the below example, I've uploaded a picture of Justin Timberlake. 

You can even select from a multitude of colors for your background.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11875l3zqe2vftulwar3.png)
 
After uploading your profile picture, it just takes a few second to generate your different pictures.

See the neat results below

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

After you've picked your favorite, you're good to go with uploading it to Twitter, Facebook, or wherever you want.

## If Profile Picture Maker isn't working for you ##

Sometimes, Profile Picture Maker might not colorize __your entire background__, or it might colorize something that __isn't your background__.

This was the case for me, where my white hat was being seen as part of the background and so was being colorized as part of the background-coloring process.

In comes [Photo Scissors](https://photoscissors.com/) to the rescue! You can use this app to manually crop out the background from your profile picture.

In doing so, only the transparent background will be left, which will be easy for Profile Picture Maker to identify and colorize properly.

**And that's it!**

Hopefully you've found some value from this post and can make your profile picture a nice and unique color for others to see and recognize.

Until next time!
Elementor Discount - Rabatte und Aktionen
Tags: wordpress, discountsundrabatte, pagebuilder, wordpressplugins
Published: 2021-06-06 14:59:09

---
title: Elementor Discount - Rabatte und Aktionen
published: true
date: 2021-06-05 16:26:35 UTC
tags: Wordpress,DiscountsundRabatte,pagebuilder,WordPressPlugins
canonical_url: https://bloggerpilot.com/elementor-discount/
---

![Elementor Discount Codes](https://bloggerpilot.com/wp-content/uploads/2021/06/elementor-discount.png)

 Mit dem Elementor Discount kannst du kräftig bei Elementor Essential, Elementor Expert und dem Agency …

[Elementor Discount - Rabatte und Aktionen](https://bloggerpilot.com/elementor-discount/)
Javascript Tip: How to fetch phone contact list on the web in Android ? | Contact Picker API
Tags: webdev, 100daysofcode, news
Published: 2021-06-05 16:06:57

Did you know you can access your **contact list** on the web in **Android** ? 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a35ne9233m7i30dqu43.jpeg)

Chrome recently launched an API that allows you to fetch contact data from your phone and you can share those data in your webapp.

**But to use this Contact Picker API there are certain restrictions-**
1. Contact Picker API will run only on chrome > v80.
2. Application should run on https protocol.
3. Contact Picker API will work only on mobile android.

You can check if you chrome browser support this API or not by -
``` const supported = "contacts" in navigator && "ContactsManager" in window; ```

There are multiple customisations that are available in this Contact Picker API-
1. Picker has the option of Single / Multi select contact data.
2. Filter of data like Name, Email, Address, Tel etc are there.

Demo Codepen- https://codepen.io/jyotishman/pen/vYxjZaE
Demo GitHub- https://jyotishman.github.io/contactpicker/
Source code-  https://github.com/jyotishman/contactpicker
How to Write Ruby Like a Pro – A Brief Style Guide
Tags: ruby
Published: 2021-06-05 16:00:44

So you’ve been writing Ruby for a while. Maybe you’re familiar with control flow, data types, and the overall way to work with Ruby.

Before you start writing large programs or before working with others, it’s important that your code is consistent and sticks to a single style.

In this article, I’m going to give you some guidance on how to write Ruby that looks nice and that will be similar to how others write Ruby.

I got these guidelines while reading Eloquent Ruby by Russ Olsen. In his book, so if you want to know more about writing readable Ruby code, make sure to pick up his book.

## Use spaces, not tabs
Make sure your code editor is set up to use spaces instead of tabs. And make sure that you are using two tabs for each level of indention.

## Use # for comments
The hash sign (#) is used for comments in ruby. It’s also possible to write multi-line comments like so:
``` ruby
=begin
  this comment is
  two lines
=end
```
But in the real world, most Rubyists use # even for multi-line comments.
```ruby
# this comment is
# two lines
```
## Use snake_case for pretty much everything
Methods and variables should use snake_case. Constants should use SCREAMING_SNAKE_CASE.

##Use parentheses most of the time
In Ruby, parentheses are optional. Here are two ways to call the same method in Ruby:
```ruby
sum(2, 4)
sum 2, 4
```
You should usually use parentheses when calling methods. However, some methods are often called without parentheses such as:
```ruby
puts "Hello, World!"
```
It’s very common to not use parentheses in Ruby on Rails.
```ruby
before_action :set_post, only: [:index, :create]
```
You can also use parentheses in conditionals like so:
```ruby
if (true)
 puts "true"
end
```
Instead, you should omit the parentheses:
```ruby
if true
  puts "true"
end
```
It’s possible to write code-blocks in one line. Instead of this,

##Use single-line code blocks when possible
Here's a normal code block

```ruby
[1,2].each do |i|
  puts i
end
```

you can write it as a single-line code-block:
```ruby
[1,2].each { |i| puts i }
```
## Make use of if, unless, while, and until
In Ruby, you can write a conditional like so:
```ruby
if true
  puts "true"
end
```
But you can also write a single-line conditional like so:
```ruby
puts "true" if true
```
You can also take advantage of unless:
```ruby
puts "true" unless dont_print
```
While and until can also be used similarly:
```ruby
puts "keep going" while has_gas
puts "keep going" until gas_is_empty
```
The best way to learn how to write readable Ruby code is to read Ruby code written by more experienced developers. So, make sure you’re reading code by others often.

If you found this post helpful and want to get better at Ruby and all things web development, make sure to [follow me on Twitter](https://twitter.com/heyjoshlee) where I post helpful articles and tips all the time.
Building Health Insurance App like Oscar Health: Everything You Need to Know
Tags: appdevelopment, health, tips, guide
Published: 2021-06-05 14:52:17

---
title: Building Health Insurance App like Oscar Health: Everything You Need to Know
published: true
description: Oscar Health offers a virtual care experience for patients along with insurance plans from home, work through video-calling. Let’s discuss its business model, benefits, and how you can build an insurance app like Oscar.
tags: appdevelopment, health, tips, guide
cover_image: https://www.techtic.com/wp-content/uploads/2021/06/build-health-insurance-app-like-oscar-health.png
---

The healthcare industry has come a long way from requiring the patient to be physically present to allowing remote access to consultation. Quantifically speaking, the telemedicine market is burgeoning to record over 170bn by 2026.

Growing at such a speed, it is natural for the telemedicine industry to attract budding entrepreneurs and business aspirants. One such disruptive healthcare insurance app in recent times is Oscar Health.

Oscar Health is a virtual care experience for patients to access consultation from home, work, or other places, through video-calling. Oscar Health offers Virtual Urgent Care and Virtual Primary Care to patients along with insurance plans for numerous stakeholders.

If you want to develop a healthcare app like Oscar Health, read on to the benefits of creating a healthcare insurance app like Oscar Health.

<ul>
 	<li>Business Model of Oscar Health</li>
 	<li>What are the top benefits of health insurance app like Oscar Health?</li>
 	<li>Detailed SWOT analysis and porter’s five forces law for Oscar Health</li>
 	<li>Fixed price or dedicated resource - what should be your call?</li>
</ul>

If you want to more information of Oscar Health Insurance App's Benefits, Business Model, and How to Build? then visit <a href="https://www.techtic.com/blog/build-oscar-health-insurance-app/">https://www.techtic.com/blog/build-oscar-health-insurance-app/</a>
The best way to learn something is to teach others
Tags: watercooler, discuss
Published: 2021-06-05 14:46:27

They say the best way to learn is to teach. I ***strongly*** agree. 

## Wait, how is that possible?

- It only makes sense that you will work harder to understand and be more aware of the material you are teaching, whether you know it or not. You will be forced to really dig into the "why" behind whatever you are teaching and use it yourself until it becomes completely natural. 
- Additionally, the real act of writing makes stuff stick in your minds

This is why they have stuff like rubber duck debugging (Quack overflow!), where you explain your code line by line to a rubber duck to find out errors. I even use a variation of this, _writing_ (again, _writing_) questions on stackoverflow, finding the solution myself, and discarding drafts. I do this like everyday. When we have to explain stuff, it automatically becomes clear in our own minds.

## I don't know enough!!!

Don't worry about that, you will eventually learn when you teach. If you don't know everything, teach the basics.

And also, have you never heard of the French saying _"prêcher le faux pour savoir le vrai"_ or the more internet based [Cunningham's law](https://meta.wikimedia.org/wiki/Cunningham%27s_Law) which states that "the best way to get the right answer on the internet is not to ask a question; it's to post the wrong answer."

**Key takeaway:** write more tutorials, because it not only helps others, it helps you
Kadence Theme Discount - 20 % Rabatt
Tags: wordpress, discountsundrabatte, kadencewp
Published: 2021-06-06 14:26:00

---
title: Kadence Theme Discount - 20 % Rabatt
published: true
date: 2021-06-05 14:22:55 UTC
tags: Wordpress,DiscountsundRabatte,KadenceWP
canonical_url: https://bloggerpilot.com/kadence-discount/
---

![Kadence Discount](https://bloggerpilot.com/wp-content/uploads/2021/06/kadence-discount.png)

 Mit dem 20 % Kadence Discount kannst du kräftig bei Kadence Pro, Kadence Membership und …

[Kadence Theme Discount](https://bloggerpilot.com/kadence-discount/)
Brief History of Python
Tags: python, programming, computerscience, codenewbie
Published: 2021-06-05 14:06:58

The idea of Python programming was conceived in the late 1980s by Guido van Rossum. In late 1989, He was looking to work on a Hobby project that will keep him busy near Christmas days. So he decided to write an interpreter for the language he had been thinking of.  
Python was created as a successor of ABC language, with the ability of Exceptional Handling and interfacing with the Amoeba OS. Since he had a wide experience with the implementation of the interpreted language in the ABC group at CWI (Centrum Wiskunde & Informatica is a research center in the field of mathematics and theoretical computer science). So as he has written he learned a lot about language design at CWI and this is the main origin of most Python features.
Python was first released on 20th Feb 1991 as Python 0.9.0 at alt.source. During the first release, python was already enriched with exceptional handling, core data types, and functions. Python was object-oriented from its first release and has a module system at that time also. 
In Jan 1994, Python version 1.0 was released with major new features like lambda, filter, and map and reduces which were more functional programming tools.
Python version 2.0 was released on October 16, 2000, with many major new features, which includes a cycle-detecting garbage collector for memory management and support for Unicode. However, the development process was the most important change in Python 2.0, with a shift to a more transparent and community-backed process.
Python 3.0 version was released on December 3, 2008 after a long period of testing. The new version was incompatible with previous 2.x line releases. In this new version many details such as Built-in objects have been changed considerably. And removed many of deprecated features.
สมมุติว่าอยากเขียนภาษาไทย และเป็นอิสระจากเครื่องหมายแปลก ๆ
Tags: thai, clojure
Published: 2021-06-05 14:16:17

---
title: สมมุติว่าอยากเขียนภาษาไทย และเป็นอิสระจากเครื่องหมายแปลก ๆ

published: true
description: 
tags: thai,clojure
//cover_image: https://direct_url_to_image.jpg
---


อันนี้ลองเขียน Clojure ดู ข้อดีคือ Clojure ก็ไม่ค่อยใช้สัญลักษณ์มากมายอยู่แล้วยกเว้นวงเล็บ แม้แต่ def ก็เขียน macro มาครอบได้ 

เอาภาษาไทยมาตั้งชื่อได้ทุกสิ่งทุกอย่างเลย

```Clojure
(defmacro กำหนดให้ [a b]
  `(def ~a ~b))

(กำหนดให้ แสดงผล println)
(กำหนดให้ เอามาคูณกัน *)

(กำหนดให้ จำนวนบ้าน 20)
(กำหนดให้ จำนวนหมู่บ้าน 10)

(แสดงผล (เอามาคูณกัน จำนวนบ้าน จำนวนหมู่บ้าน))
```

ปกติแล้วก็คงไม่มีใครทำแบบนี้ แต่ก็ไม่แน่บางทีอาจจะมีโอกาสได้ใช้ก็ได้
Improving the esolang
Tags: esolang, esoteric, discuss
Published: 2021-06-05 14:16:12

So I wrote an article making an esolang and got this comment:
![The dev.to comment that instigated the writing of this article](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oxtocleths4cf9z58d9.png)
Thanks to @olus2000 for this comment.

Here is the full code so far:
```python
value = 0
code = input("Enter your loo code here please > ")

lexed = []
for i in code:
    lexed.append(i)

for j in lexed:
    if j == "+":
        value += 1
    elif j == "-":
        value -= 1
    elif j == "#":
        print(chr(value))
    elif j == ";":
        quit()
```

In this guide, I am going to add a quine (quine prints out the code), a way to specify how much you want to increment or decrement by putting a number between 1 and 9 inclusive before `+` or `-` and finally, I am going to add numeric printing.

# Step 1: quine
The quine functionality can easily be implemented by adding another branch to the if statement.
```python
elif j == "q":
    print(code)
```

# Step 2: improving `+` and `-`
To make the changes to `+` and `-`, we are going to have to modify the for loop. This must be done to make sure we can access the index. This will be useful later.
```python
for k in range(0, len(lexed) - 1, 1):
    j = lexed[k]
    if j == "+":
        value += 1
    elif j == "-":
        value -= 1
    elif j == "#":
        print(chr(value))
    elif j == ";":
        quit()
    elif j == "q":
        print(code)
```
From here, we then have to modify the `+` and `-` branches to make the changes
```python
for k in range(0, len(lexed) - 1, 1):
    j = lexed[k]
    if j == "+":
        scale = int(lexed[k - 1])
        value += scale
    elif j == "-":
        scale = int(lexed[k - 1])
        value -= scale
    elif j == "#":
        print(chr(value))
    elif j == ";":
        quit()
    elif j == "q":
        print(code)
```

# Step 3: numeric printing
After the changes made in step 2, it is now possible to read other tokens given an offset. We are going to use this in numeric  printing as well.
```python
for k in range(0, len(lexed) - 1, 1):
    j = lexed[k]
    if j == "+":
        scale = int(lexed[k - 1])
        value += scale
    elif j == "-":
        scale = int(lexed[k - 1])
        value -= scale
    elif j == "#":
        if lexed[k - 1] == "|":
            print(chr(value))
        else: print(value)
    elif j == ";":
        quit()
    elif j == "q":
        print(code)
```

And there we have it! The esolang has been improved. I hope you like this article.
Front-end vs. Back-end in 2 minutes
Tags: devjournal, webdev, 100daysofcode, codenewbie
Published: 2021-06-05 14:14:34

When you're first dipping your toes into the IT world, two of the most common terms you'll usually encounter are **Front-end** and **Back-end**. You'll typically see this lingo when you're working in web development but they are also important to know when you're working in IT infrastructure.

Now, what really is the difference between the two?

## Display and Function ##

**Front-end** deals with the instructions that tells your browser how to display a certain website - how texts and images are displayed, what buttons are used, how much spacing is placed, etc. These are directly accessible and can be viewed by the users through their browser.

Think of this as the late-night show host you see when you watch the TV. He is talking to his guests who are comfortably sitting in leather couches. When it's time for a commercial break, he faces the camera again and drops some cliffhanger question before telling the audience that they'll be right back.

![frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0blrk81gjti0ybcifbq.jpg)

**Back-end** deals with instructions such as saving information, fetching data, processes business logic, etc. This is basically the work that users doesn't see. 

Think of this the cameraman, director, and the rest of the crew that operates the equipments behind the scenes. When it's time for a commercial break, the director signals a cue to the host before cutting the show.

![backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghouyknsf5qda9nuvnu1.jpg)

## Which uses which

Since **front-end programming** takes place in your browser, it'll actually use your computer's resources to process the text and images and render the display. Your browser is basically the stage.

Behind the curtains, or rather on a far away location, servers holds the data which the users are accessing. **Back-end programming** runs on these servers, which is why it is also called as **server-side programming**. 

Unlike front-end programming, back-end uses the server's resources to process requests and complete the task.

## Tools for each one ##

Now that you know how front-end differs with back-end, you can further learn each one by knowing which tools to use. These are just some of the few you can explore.

![tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lnibbr1hy91y1rq1udf.png)

____________________________________________

{% user jeden %}
5 Web Crawling Habits You Should Adopt
Published: 2021-06-05 14:13:06

1. Learn a framework like Scrapy.
I am just going to preach it to you. Here is the list of frameworks you HAVE to know about and study because if you don’t and call yourself a programmer that knows web scraping, well, there is something wrong with you.

a. Scrapy — please, for the love of GOD, don’t take a step in any direction before you have explored what this can do for you… let it open your mind to what is out there, the kind of abstractions and weaponry the community has created before you venture out on your own armed with your cute CURL calls and stupid RegEx patterns.

b. Puppeteer — Whatever a human can do, you can simulate that with Puppeteer. Do you see those services that take snapshots of entire webpages, fully rendered in their evening best? Ever wondered how they do it? It is by using Puppeteer man. Go know it now before you read another line or waste another breath.

c. There is a lot more. But I know you are not listening to me. Just do this for now. I have low expectations for you!

2. Take these tests to ramp up your web crawling genius.

3. Ask yourself — How can I double the speed of my web crawler? 

The path should take you to something like Scrapyd. When you come to it, tell them my name, and they will set you right up.

4. Just learn XPath and CSS selectors if you haven’t already. That's how you get good at extracting data. XPath is confusing, to be honest, just force yourself to learn it, man. It's your life raft!

5. I can't remember the 5th…. I KNOW I SAID THERE ARE 5 !@^$#@… Just do the 4 for now, will you?

Sorry, I am in a bad kinda way today.

The author is the founder of Proxies API, a proxy rotation API service.