teleren/devto huggingface dataset:
Download Amazon Alexa App And Echo Dot
Published: 2020-04-14 09:52:18

Alexa, a virtual digital companion powered by Amazon, from the day of its launch in 2014, Alexa is becoming part of everyday life by offering an "N" number of services in day to day life. whether it is communication, sports, weather updates or real-time information on news or traffic. if you are in the kitchen, Alexa is ready with the new recipe. it makes life easier with different types of skills. All you need is to <a href="https://alexaapp-setup.com/">Download Alexa App</a> and Alexa device.

Alexa is now available in more than 40+ countries worldwide and on the way to become every home product. with more than 90,000 skills, Alexa's popular skills include setting a timer, play a song or music, setting up recurring routines and regular real-time news, music or weather update. Also, the number of Alexa devices sold by the end of 2019, reached more than 100 million.

From a long Amazon echo segment of products, we have a wonderful product as Amazon Echo Show which was released in 2017 with a touchscreen and a good set of speakers, which definitely changed the digital assistant devices market. Echo Show made it possible to make calls to contacts who own an Echo or the Alexa app setup. It can also stream music and videos while promising better sound quality.
How are you helping others during quarantine?
Tags: discuss, sideprojects, motivation
Published: 2020-04-14 09:47:57

I saw many people working on projects that could make our lives easier in times of quarantine, and even after that. 

Let's all share what we as individuals or as companies are doing to help people be more productive and engaged while at home. 

It could be a completely new, creative project, or simply something you decided to give out because many people can use it. You can even share if you're helping your elderly neighbors with grocery shopping, it's really inspirational to hear stories like this right now :) 

My company [Microtica](www.microtica.com) has decided to give out its product for free to startups who are struggling with the situation. It's a tool that automates your entire CI/CD process on AWS. You can drop us an email with your story at info@microtica.com and we'll answer you as soon as possible. 

What are you working on?
Modern Build in Nuxt.js
Tags: nuxt, vue, modern
Published: 2020-04-14 09:34:53

The modern property in Nuxt.js allows you to serve both modern bundles to modern browsers and legacy bundles to those legacy browsers that still exist. When we write modern JavaScript code using async/await, fetch, arrow functions etc we still transpile this code to ES5 and bundle it with polyfills to accommodate the small percentage of users still on older browsers.

The solution is to use 
```html
<script type="module"> // for modern browsers
<script nomodule> // for legacy ones
```

Nuxt.js allows us to easily activate this by using the modern property. By default it is set to false so if you want to use it you will have to add it to your package.json script. 

There are 3 possible values for the modern mode, 'client', 'server' and false. 
- 'client': Serves both the modern bundle and the legacy bundle scripts. It will provide a link rel="modulepreload" for the modern bundle. 
- 'server' or true: The node.js server will check the browser version based on the user agent and serve the corresponding modern or legacy bundle.
- false: Disables the modern build

In order to active it you will need to add the --modern flag(-m for short) and add the mode you require to your build or start scripts.

```javascript
{
  "scripts": {
    "build: "nuxt build --modern=server",
  }
}
```

When building static sites which use the generate command the modern property also works but only the client option is honoured and will be selected automatically so we don't have to provide any values. 
```javascript
{
  "scripts": {
    "generate: "nuxt generate -m",
  }
}
```
And that's it. Just by modifying one small command you will now reduce your bundle size for modern browsers yet still have a fallback for those legacy ones. :)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n9v16e2qrorf8ttau86v.png)
Modern Java Programming Course For Beginners
Tags: java, tutorial, beginners, programming
Published: 2020-04-14 09:17:07

---
title: Modern Java Programming Course For Beginners
published: true
description: Learn or brush up your skills in modern Java
tags: #java #tutorial #beginners #programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2dy70z5eopdnhov7lvat.png
---

Java is constantly adding new features and improvements to keep it at the top. Unfortunately, a lot of courses and learning materials are not up to date with the current trends. 
If you are just starting out in Java or want a refresher course on Modern Java then this course would be beneficial to you. 

🔗[Modern Java Course](https://www.udemy.com/course/modern-java-programming/?couponCode=2BC5EC8A9E67A51DC7F2)

###What's Inside?

In the course, we start with **Jshell** instead of using an IDE. This would help beginners because the simplicity of Jshell helps students focus on the code and not how to operate the IDE. An IDE would be introduced later in the course. 

Programming concepts are explained with animations and real-life examples. You get to understand *why* certain things are done and not just *how*. 

We introduce modern Java features such as the use of **var** for type inference. 

A lot of programmers dive into Android development without learning the core fundamentals of Java thereby resulting in a rough learning experience. This course is designed to give you a good start in that learning journey.

🔗[Modern Java Course](https://www.udemy.com/course/modern-java-programming/?couponCode=2BC5EC8A9E67A51DC7F2)

*The course is available to you the Dev community 💙 at a 67% discount* :)

Learn modern Java and add it to your toolbox ☕
Accessibility For the Colour Blind #2 - Text
Tags: font, text, colourblind
Published: 2020-04-14 09:09:05

Navigating the web as a colour blind person can be difficult sometimes. It's not a life ender or anything but it can be annoying and some times frustrating. Infact, as a developer it can be even worse. 

According to Colour Blind Awareness 4.5% of the population are color-blind. If your audience is mostly male this increases to 8%. Designing for color-blind people can be easily forgotten because most designers aren’t color-blind.

## Text Readability

To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size as follows:

>"WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).” —[WebAim color contrast checker](https://webaim.org/resources/contrastchecker/)

Here are a few examples of color and size combinations that do and do not pass:

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

## Fonts

In terms of font accessibility, there are a number of principles to keep in mind:

- Use real text rather than text within graphics.
- Select basic, simple, easily-readable fonts.
- Use a limited number of fonts.
- Ensure sufficient contrast between the text and the background.
- Avoid small font sizes.
- Use relative units for font size.
- Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
- Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
- Avoid blinking or moving text.

When all else fails, the best option for an accessible website is a popular font with a clean, sans serif aesthetic. Some of the most appropriate fonts in this regard are Arial, Helvetica, Lucida Sans, Tahoma, and Verdana.

## Text Overlaid On Background Images

![Bad Example](https://dev-to-uploads.s3.amazonaws.com/i/jt99s2bdo2tth7tnr62e.jpg)

When using text on an image dev's should reduce the opacity of the image to ensure maximum readability of the text. Ensure you are using proper alt descriptions as well. 

![Good Example](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f5aff0d-2d00-4a57-9dbd-7a1c91a1fcaa/text-overlay-good-large-opt.jpg)

##  Alert Messaging

Success and error messages are often colored green and red respectively. Most color-blind people don’t suffer from achromatism, and so will naturally associate different colors with different messages. However, using prefix text such as “Success” or, my preference, an icon makes it quick and easy to read as shown below:

![Error Messages](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8722ee5d-206d-4d1a-ade0-70dfc710e773/messaging-preview-opt.jpg)

These are all pretty easy fixes but make a world of difference for a colour blind person. 

In the next article I am going to be tackling forms. This has always been a really big issue for me so I'm excited to share what I have found on this.
CSS Text Decoration Quick and Simple Tutorial
Tags: html, css, beginners, tutorial
Published: 2020-04-14 08:54:20

CSS Text Decoration allows us to bring attention to important content on our website by creating underlines. We're going to take a look at how this happens and ways we can customise it.

{% youtube omqFOVMAGns%}
<strong>[Youtube: CSS Text Decoration](https://youtu.be/omqFOVMAGns)</strong>

You would have seen it's most common use is applied every day by default in A tags that have a link, these are visible by an underline. While the link may also turn blue, the use of a CSS text-decoration provides greater accessibility for those people who might be colourblind to understand the item is clickable.

There are a few different ways to use text decorations so in this video we will go through their default behaviour, as well as different designs and uses we can apply them to, such as striking out text, changing the style of their underline and providing hover effects.

Let's start with the basics, which is the actual **CSS property,** **text-decoration**. This can apply with value such as **underline**. By doing so, we have a single line under our text block that is the same colour as the font. Be careful how you use this though, as it could be confused as a hyperlink. 

An example of [text-decoration](#) in practice for this tutorial.
```html
An example of <span>text-decoration in practice</span> for this tutorial.
```
```css
span { text-decoration:underline; }
```

This is actually applied by default any time we place an `<a>` tag in our html code. But sometimes we might have to also remove this default behaviour, and only apply it on hover.
```html
<a href="#">Example Link</a>
```
```css
a { text-decoration:none; }
a:hover { text-decoration:underline; }
```
Linkedin Bot (Web Automation Using Selenium)
Tags: python, time, selenium
Published: 2020-04-14 08:52:31

Hi, it's Ankur.

This post is about powerful web automation library called Selenium and its implementation in python to login automatically into different famous social media sites.Sometimes its worth time taking to login everytime into your social media and remembering credentials. Web automation is one of the most hottest fields now a days used by a large scale of organization to automate their different processes.

But for todays article we are considering only *Linkedin* to get automatically logged into it with the help of web automation.

Tools/libraries which are going to use are as follows
**python**,**selenium**,**time**,**chrome driver**


###Follow the following Steps to start

1.Download Chrome webdriver to enable Selenium to connect with your browser.
2.GOTO http://chromedriver.chromium.org/downloads
3.Downlaod the required version of Webdriver according to your Browser Version
4.Now extract the downloaded zip file and copy the .exe file to the Python main directory

## Let's Start Coding 

a. Create a Linkedin.py file
b. import the libraries (*Assuming you have already installed the above mentioned libraries*)
```sh
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time
```
c. Make a class named as Linkedin and make a function inside it that takes your *username*,*password* as arguement to login.
```sh
class Linkedin:
    def __init__(self,username,password):
        self.username=username
        self.password=password
        self.bot=webdriver.Chrome(PATH_TO_BROWSER_DRIVER)
```
 Give path of your chrome driver in *webdriver.chrome*

d. Make a function inside the same class named as login 
```sh
 def login(self):
        bot=self.bot
        bot.get("https://www.linkedin.com/uas/login")
        time.sleep(3)
        email=bot.find_element_by_id("username")
        email.send_keys(self.username)
        password=bot.find_element_by_id("password")
        password.send_keys(self.password)
        time.sleep(3)
        password.send_keys(Keys.RETURN)
```
Here *bot.get* will get the url of linkedin and after 3 second bot will find element by id "username" where it will fill your provided username.similarly for password it does same.

e. Now call the above class and press login
```sh
load=Linkedin("your_email","your_password")
load.login()
```
f. Now all done type the following command to execute
```sh
$ python3 Linkedin.py
```

similarly you can use the same concept to auto login into several social media account.

I hope this article will help people who want to learn about web automation.
And I hope the dev.to community grows more!
Dark mode – React JS First Attempt
Tags: darkmode, materialui, react, javascript
Published: 2020-04-14 08:48:28

---
title: Dark mode – React JS First Attempt
published: true
description: First ever attempt on react and material ui on dark mode switch
tags: dark mode, material ui, react, javascript
cover_image:
---
![Dark mode – React JS First Attempt](https://dev-to-uploads.s3.amazonaws.com/i/jwhzgyo83mujv0gfowfy.png)
Since the release of macOS Mojave, a lot of people have expressed their love for dark mode and a lot of websites like Twitter, Reddit or Youtube have followed this trend. Why you may ask? Check out my post Dark mode – React JS First Attempt.

**Why dark mode you may ask?**
*Night is dark. Screen is bright. Eyes hurt.
Night is dark. Screen is dark. Eyes not hurt.*

As I want to see even more websites have this feature, I started experimenting with an easy a non-intrusive way to add a dark mode to my React projects, and this is what this article is about.

What we’re going to build:

The objective here is to have a functional dark mode on a website with the following features:

a switch to be able to enable or disable the dark mode
a dark and light theme for our styled components to consume

On my example I have used the following:

- react js – 16.12.0
- material ui – 4.9.5
- classnames package – 2.2.6

[Check Demo & Code](https://www.panayiotisgeorgiou.net/dark-mode-react-js-first-attempt/)

😉That’s it for now. 

If you liked this article, then please subscribe to my [YouTube Channel](https://www.youtube.com/c/PanayiotisGeorgiou?sub_confirmation=1) for video tutorials.

You can also find me on [Twitter](http://twitter.com/panay_georgiou) and [Facebook](https://www.facebook.com/panayiotisgeorgiou.net).
Join the Stop COVID-19 hackathon with over 20k in prizes up for grabs
Published: 2020-04-14 08:47:00

We’re all sitting at home to reduce the spread of COVID-19 and many of us are feeling pretty helpless.

But what if you have skills that can help map COVID-19, create support structures or solve problems that have emerged as cities shut down and many services are closed to reduce the pandemic?

Consider joining the STOP COVID-19 hackathon, you will receive support from many health experts and engineering experts from Kaleido and Infura.

Make an impact! => https://gitcoin.co/hackathon/onboard/stop-covid/
Zero Bug Policy, is it really worth it?
Tags: bugs, zerobugpolicy, backlog, agile
Published: 2020-04-14 08:37:57

Years ago, I was on a project where the number of bugs was considerably growing day after day. This situation led to a poor backlog management because we had to spend a lot of effort to triage and prioritize hundred of bugs every few weeks, almost all them remained in the backlog for several months. As you have probably experienced, bugs tend to become obsolete as time passes.

As a team, we were aware that most of reported bugs actually were not real bugs but enhancements and they were completely ignored because the priority was to implement new features and of course fix only critical defects. As you know, customers always want value.

It took a time to figure out how to solve the problem. I remember that at the first opportunity, I proposed the *Zero Bug Policy* based on what I read in articles and books. In my opinion, this was the optimal and effective way to handle the issue but for the team, it sounded a little bit extreme.

The concept of Zero Bug Policy is very simple. There is basically one rule to follow: any identified bug should be either fixed immediately or rejected. In other words, an issue is either a high priority bug or it is not a bug at all.

Here are some benefits of applying this rule:
* Reduce the effort spent in bug tracking
* Eliminate the need of triage and reprioritization of bugs
* Focus on fixing most relevant issues first
* Keep the backlog as small as possible

In our case, finally we adopted a conservative approach that consisted in fixing as soon as possible any critical bug and leave the others to be fixed later in the near future, as long as they are considered relevant.
This rule contributes considerably to the better management of the backlog. However, an effort was still needed to review the existing bugs since their number could not be reduced to zero or close to zero.

I was pretty sure that this could be an important step to apply the Zero Bug Policy in the future.
It's Time to Take a Stand - #COVID19 Ergonomics Design Challenge
Published: 2020-04-14 08:35:30

Due to #COVID19 maximum people working from home with laptop and computers. Today I challenge everyone you to create your own standing desk in the home using hashtags #MyStandingDesk #Jugada #ReverseEngineering

Creating own Standing Desk in the home using existing home tables or furniture is not an impossible task. Just look around in your home, and you get many small tables and furniture items that help you to set up your own Standing Desk. 

#COVID19 Ergonomics Design Challenge ( Desi Jugada )



Benefits of Using a Standing Desk

1. Standing Lowers Your Risk Of Weight Gain And Obesity

2. Using A Standing Desk May Lower Blood Sugar Levels

3. Standing May Lower Your Risk Of Heart Disease

4. Standing Desks Appear To Reduce Back Pain

5. Standing Desks Help Improve Mood And Energy Levels

6. Standing Desks May Even Boost Productivity

7. Standing More May Help You Live Longer

8. Keep Your Back Correctly Straight While Raising Your Neck To Prevent Neck Pain

9. More Calories Burned

10. Less Back Pain

11. More Productive

12. Improve Mood And Gain Energy

Work Smarter. Feel Better. https://www.linkedin.com/pulse/create-your-own-standing-desk-in-home-challenge-padmaraj-nidagundi/
Rails : How to preview Office files ?
Tags: rails, office, openoffice, linux
Published: 2020-04-14 08:29:21

We use to work with CSV or PDF files when we talk about web apps. CSV are easy to use and edit after exportation (we can also easily create them), PDF are easy to read and and pretty much a standard. But when we have to deal with `.docx`, `.xslx` or similar formats, things get complicated. 

## Preview a file

In your app, you have certainly used a preview for images or PDFs files. But how will you do in case of an emails app that must show preview of all attachments or another DMS app that must preview files with exotic extensions (*docx, pptx, xslx, odt, ods, odp etc.*) ? 

**Convert them to PDF** and you are done !

## Libre office to the rescue

To get this tool, just install libreoffice on your server using :

```
apt-get install libreoffice -qq
```

A little look to the doc and you can see two options we will use : 

`--convert-to` : allow us to convert a file from our extension to pdf
`--headless` : it ignore GUI environment

```
libreoffice --headless --convert-to pdf my_file.docx
```

## Rails : there is a gem for that

In a rails app, just add a gem on your Gemfile : 

```ruby
# Gemfile
gem 'libreconv'

# In your ruby file module or class
Libreconv.convert("#{Rails.root}/public/files/my_file.docx", "#{Rails.root}/public/files/my_file.pdf")
```

Bundle install, and now you can make a preview of your file using the PDF version on your server. Note that libreoffice's tool don't convert only in PDF but can convert a file from extension that it can open and read to a file with extension that he can write. PDF won't disappoint you ;)
Declaring Variables
Tags: javascript, beginners
Published: 2020-04-14 08:04:41

---
title: Declaring Variables
published: true
description: the bricks of a variable
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ylvqm6dxd7ww8rosbsm4.jpg
---

#variable
If we have the number 22 and 12 and we write in our console 22 + 12 javaScript do the math for us and return 34.
Well, but we don't know if 22 and 12 are persons, apples or bricks.
We can do that with variable:
```
const(key) candiesRed(name of our variable) =(assignment symbol) 12(value)
```
Like a key we may use const or let, var is not necessary yet.
Like a name we may use anything except [Reserved keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)
and it cannot begin with a number.
Like a value we may hold primitives(number, string...), objects(functions, arrays).
Now we can do this:
```
const redApples = 22;
const yellowApples = 12;
const sum = redApples + yellowApples // Result 34
```
If a variable name is composed of two or more words we may use camelCase to tie the words together: my red apples become myRedApples.
const key don't allow us to reassign a new value to our variable:
```const newValue = 10;
   newValue = 43 // returns an error (// ERROR! Cannot assign another value a variable declared with const)```
If we want to change the value stored in our variable we have to use let:
```let newValue = 10;
   newValue = 22; // now the value of our variable is 22 without any error```
There is more to talk about the difference from const and let and about changing the value in const, but this is advanced topic, not important now.