teleren/devto huggingface dataset:
Guide your Users with Two Lines of CSS
Tags: beginners, css, webdev
Published: 2019-08-01 22:12:56

Whether or not we realize it, we are often given multiple options for what action to take on a page. We are constantly being guided through a hierarchy where each action is on a predetermined scale of importance. A simple example of this can be seen at the Dev shop cart!

![](https://thepracticaldev.s3.amazonaws.com/i/mqrm9yk8gfavdt0855sa.png)
<center><sub><sup>good!</sup></sub></center>

Using the example above, we can see that our primary action is the most **obvious** button. The checkout button! We consider this our primary action, because the user clicking checkout is what is most anticipated in this situation. This is achieved by setting the `background-color` property to #00e4ad and setting our `color` property to white. Our secondary action is less apparent with the transparent background. The update button. The secondary action is the less obvious choice of the two.

![](https://thepracticaldev.s3.amazonaws.com/i/ayrbsp2hgeqrfp60a9h3.png)
<center><sub><sup>bad!</sup></sub></center>

If we take the same example, but fill both buttons we are unable to determine which button holds higher importance, because it is unclear which button is more obvious. The two properties, `background-color` and `color` add such an importance to these buttons!   

![](https://thepracticaldev.s3.amazonaws.com/i/bj2w3euau0wvhfbcwqfo.png)
<center><sub><sup>bad!</sup></sub></center>

Don't make the mistake of having the two buttons compete with each other! As you can see, neither of these button are obvious which is the primary action and the secondary action. One tactic to avoid this is to deemphasize the secondary action with a transparent background.

![](https://thepracticaldev.s3.amazonaws.com/i/hzm8w8gejsv5k3rajew5.png)
<center><sub><sup>good!</sup></sub></center>

Another real world example of this can seen on the React website. The hero image contains two buttons, but the “Get Started” is clearly holding a greater importance over the “Take the Tutorial” button with the transparent background. 

Although this is just one approach to display primary and secondary buttons to our user, we can see how important the two CSS properties `background` and `color` help us guide the user.
Customize Your Reddit Feed 🏋️‍♀️
Tags: watercooler, webdev, productivity
Published: 2019-08-01 21:49:12

---
title: Customize Your Reddit Feed 🏋️‍♀️
published: true
description: Curate subreddits for articles based around front-end design and development.
tags: watercooler, webdev, productivity
---

I can't even remember where I learned this, but there's a neat little trick you can do with subreddits. Simply add a plus sign (+) between the names of subreddits, after the /r/, and you'll make a feed of everything you've concatenated.

In a thread here, [Ben Halpern mentioned he met a co-founder of DEV through reddit](https://dev.to/ben/comment/dj74), so I figured I should be more active there too.

I've made a custom feed for myself and this community: [front-end reddit newsfeed](https://www.reddit.com/r/Frontend+javascript+typography+userexperience+web_design+webdev)

And if you want to go to each subreddit individually:

- [/r/javascript](https://www.reddit.com/r/javascript/)
- [/r/webdev](https://www.reddit.com/r/webdev/)
- [/r/web_design](https://www.reddit.com/r/web_design/)
- [/r/typography](https://www.reddit.com/r/typography/)
- [/r/frontend](https://www.reddit.com/r/Frontend/)
- [/r/userExperience](https://www.reddit.com/r/userexperience/)
What if Nothing Matters but Communication?
Tags: discuss, productivity, career
Published: 2019-08-01 21:22:36

Last year I gave talk — [Hot Garbage: Clean Code is Dead](https://www.youtube.com/watch?v=-NP_upexPFg).
It's about my journey as a programmer and accidental descent into being an asshole.
The practical take away is  that uncertainty isn't as bad as we fear.
We don't often have enough information to make right decisions.
That's fine. We make an wrong decision and fix it in time.

It’s good. You should watch it.

That talk spun up a question that I can't shake:
What if nothing matters but communication?
Can a team that's naive — but united — cover more ground than a team that's right but individualized?

That question has changed the way I work.

Instead of seeking an answer, I seek discussion.
Instead of trying to persuade, I try to educate.
For every interaction, the goal isn't an outcome but a continuation of the conversation.
And that conversation is delicate.

My hope is that a strong team, with a healthy process, will make better decisions with time —
Even if we have to burn a few early decisions.

This is new experiment for me.
What's your experience?
Have you been on teams that focus on unity over outcomes?
What was the effect on work and moral?

🤔 chan
Flow and Azure Cognitive Services Vision Service-OCR
Tags: development, azure, flow, ocr
Published: 2022-06-15 17:24:34

---
title: Flow and Azure Cognitive Services Vision Service-OCR
published: true
date: 2019-08-01 21:15:00 UTC
tags: Development,Azure,flow,OCR
canonical_url: https://barretblake.dev/2019/08/flow-and-azure-cognitive-services-vision-service-ocr/?utm_source=rss&utm_medium=rss&utm_campaign=flow-and-azure-cognitive-services-vision-service-ocr
---

Last time we looked at generating thumbnail images via the Vision Service. This time we're going to look at using the service to get text out of a photograph of a document utilizing the the Vision Service's Optical Character Recognition (OCR) process.

The post [Flow and Azure Cognitive Services Vision Service-OCR](https://barretblake.dev/2019/08/flow-and-azure-cognitive-services-vision-service-ocr/) first appeared on [Barret Codes](https://barretblake.dev).
Rust-scales Python: Flask Experiment
Tags: webassembly, python, rust
Published: 2019-07-31 17:33:34

---
title: Rust-scales Python: Flask Experiment
published: true
description: 
tags: Wasm, Python, Rust
series: Rust-scales Python with Wasmer
---

Going on with this series of brief demos about how to embed Wasmer binaries into Python modules via `python-ext-wasmer` (see previous episodes [1](https://dev.to/tuned/rust-scales-python-basic-experiment-49h0) and [2](https://dev.to/tuned/rust-scales-python-some-examples-1-2dj5)). 

I wondered what it would look like a Web application that leverages Wasm binaries; let's use [Flask micro-framework](https://palletsprojects.com/p/flask/)!

We start the usual way, using the previously compiled Rust functions. For this experiment we pick:
* The two versions of Fibonacci, one as Python function, the other as Wasm-compiled Rust; 
* The two versions for a static computation of Convex Hull.

This time we [wrap the pre-compiled binaries into a Flask app](https://github.com/Mec-iS/rust-wasm-python-101/blob/0ad1a42f637d505bac8cf02e594be122900ec2c2/pywasm/examples/flask_basic/__init__.py#L9) and serve them through two endpoints:
* [`fibo_wasm`](https://github.com/Mec-iS/rust-wasm-python-101/blob/0ad1a42f637d505bac8cf02e594be122900ec2c2/pywasm/examples/flask_basic/app.py#L8)
* [`convexhull_wasm`](https://github.com/Mec-iS/rust-wasm-python-101/blob/0ad1a42f637d505bac8cf02e594be122900ec2c2/pywasm/examples/flask_basic/app.py#L50)

As you can see, the loading of the binaries is practically at no-cost in terms of service performance as it is done at app creation. This allows to load as much binaries as we need to perform the processing via the endpoints. It could possibly be a good solution for a RPC API that accepts arbitrary parameters.

Let's try to run it:

[UPDATED]
```
platform linux -- Python 3.6.8, pytest-4.4.1, py-1.8.0, pluggy-0.9.0
rootdir: /home/mec-is/rustcode/wasm-python-101
collected 4 items                                                                                 

pywasm/examples/flask_basic/tests.py 2019-08-18 16:17.29 Time it                        func=fibo_wasm time=0.07568788528442383
.2019-08-18 16:17.35 Time it                        func=fibo_py time=0.06508588790893555
.2019-08-18 16:17.41 Time it                        func=convexhull_wasm time=0.10294783115386963
.2019-08-18 16:17.48 Time it                        func=convexhull_py time=0.4820021390914917

```

Not bad for a first run!
Music Collection App
Tags: showdev, react
Published: 2019-08-01 20:20:45

---
title: Music Collection App
published: true
description: I've been collecting music CDs since my childhood. For one of my very first React projects, I've decided to create an app to help me keep track of my collection and display some album details.
tags: #showdev #react
cover_image: https://thepracticaldev.s3.amazonaws.com/i/u5xuqo0lq40vno76v3p2.jpg
---

I've been collecting music CDs since my childhood. For one of my very first React projects, I've decided to create an app to help me keep track of my collection and display some album details.

I've used the following tech stack:

**Frontend:** React
**Styles:** PostCSS + postcss-preset-env + lost + cssnano
**Database:** Firebase
**API:** Discogs
**CDN:** Cloudinary

Link: https://adrians-music-collection.netlify.com/
What happens when you submit a query ?
Tags: mssqlserver, rdbms
Published: 2019-08-01 19:31:06

---
title: What happens when you submit a query ?
published: true
description: 
tags: MS SQL Server, RDBMS 
---

If you have some experience working with databases, you may certainly used several SQL commands. Have you wondered what happens when a query is submitted? How does the query optimizer work ?

When a query is submitted to a SQL Server, a number of processes on the server are set into motion. 

However, primarily it focuses on 2 stages:

1. Relational engine processes.
2. Storage engine processes. 

In a RDBMS, in the first stage of the process, a query is parsed and then processed by the query optimizer, which generates an execution plan. The execution plan which is in binary format, is sent to the storage engine. 

The storage engine then uses that plan as a basis to retrieve or modify the underlying data. The storage engine is where processes such as locking, index maintenance and transactions occur.

That's pretty much the gist of it.
Hope this floppy disk cow help you get through the day
Tags: jokes
Published: 2019-08-01 18:46:13

---
title: Hope this floppy disk cow help you get through the day
published: true
description: 
tags: jokes
---

![](https://thepracticaldev.s3.amazonaws.com/i/5f169bfbm7vynn7mrndd.jpg)
A11y tricky quiz
Tags: a11y, quiz, question
Published: 2019-08-01 18:16:46

---
title: A11y tricky quiz
published: true
description: Considering the following markup, which text will the screen reader read?
tags: a11y, quiz, question, accessibility
cover_image: https://thepracticaldev.s3.amazonaws.com/i/716cbn49birflbssok3z.png
---

Considering the following markup, which text will the screen reader read?

```
<html lang="en">
  <label for="btn">button this click</label>

  <span id="alt-btn">me button click</span>

  <button
    id="btn"
    aria-labelledby="alt-btn"
    aria-label="click this button"
  >
    click me
  </button>
</html>
```

- "button this click"
- "click me"
- "click this button button"
- "me button click button"

[click here to see the anwser](https://dev.to/vhoyer/answer-a11y-tricky-quiz-2a95-temp-slug-3736491?preview=a823d9b8d081edcb2e65fb681fb6c84a32cd1614af49e2ad7a67e5f355967ec9d9fc387c38eb8fce9fee6ae7de33779fa72c2fbfa60f07bec5a66d64)
Protecting your digital self at Hacker Summer Camp
Tags: security, privacy
Published: 2019-08-01 18:13:50

As we all prep for #HackerSummerCamp in Vegas next week *[aka BlackHat / Defcon / B-Sides / QueerCon / Diana Initiative / etc.]*, spend some time reviewing this invaluable resource from the Electronic Frontier Foundation ([eff.org](https://eff.org)) on protecting your personal digital security and privacy. 

**[SURVEILLANCE SELF-DEFENSE](https://ssd.eff.org)**

Here are some key takeaways:

1. [Use encrypted messaging](https://ssd.eff.org/en/module/how-use-signal-ios)
2. Don't bring your RFID badges unless you absolutely need them. They can be read and copied from significant distances away
3. Disable Bluetooth and automatic connection to WiFi in public places
3. [ENABLE MULTI-FACTOR AUTHENTICATION!](https://ssd.eff.org/en/module/how-enable-two-factor-authentication) Seriously, do it for every account you care about
4. Examine ATMs and credit card machines for skimmers
4. TRUST BUT VERIFY - be aware of social engineering in all your interactions
   - figure out a way to corroborate things people tell you or you read online
   - confirm someone is who they say they are, esp hotel security
   - never give out your password, pin, etc.
   - be careful about divulging personal facts that could be used in knowledge-based authentication

Be smart and look out for each other!
Typescript oddities?
Tags: javascript, todayilearned, typescript
Published: 2019-07-31 02:58:45

Today I learned (and it's only 10:47am UTC+8 so who knows what else I'll learn today) that Typescript's `external.d.ts` can be confusing and helpful at the same time.

In VSCode, writing for Lychen in V8, I can have
```javascript
if (CSSettings.ContainsKey("/MSG")) {
  console.log(CSSettings("/MSG"));
}
```
This checks if the CSSettings object, which comes in from the C# side and is declared as Dictionary<string,object>, contains the key "/MSG", and if it does, logs to the console a get from the dictionary using that key.

I had been trying for some time to put a declaration in `external.d.ts` that would cover both situations: CSSettings having a parameter and CSSettings having a method. 

This is what I came up with after getting some clues from [StackOverflow](https://stackoverflow.com/questions/57273827/how-to-describe-c-sharp-object-in-typescript/57274391#57274391)
```typescript
declare function CSSettings(s:string):any;

declare namespace CSSettings {
    function ContainsKey(s:string):boolean;
}
```

It looks like a classic symbol duplication situation, right? But no, Typescript just takes it in its stride and VSCode drops the wiggly red lines under both situations.

Weird.
Angular + Animate.css in Five Easy Steps
Tags: angular, animationcss, beginners, css
Published: 2019-08-01 16:38:39

---
title: Angular + Animate.css in Five Easy Steps
published: true
description: In this post I am going to show you how to configure Animate.css to be used in angular in only 5-1 steps.
tags: angular, animation.css, beginner, css 
canonical_url: https://carloscaballero.io/angular-animate-css-in-only-5-steps
series: five-easy-steps
cover_url: https://carloscaballero.io/content/images/2019/07/Peek-2019-07-02-15-29.gif
---

### Angular + Animate.css in Five Easy Steps
#### A step-by-step angular tutorial

![](https://cdn-images-1.medium.com/max/1000/0*-0ZOq3ZDBZ0WdrPt.gif)

[Animate.css](http://daneden.github.io/animate.css) is a cross-browser library
of CSS animations that is incredibly easy to use.

In this piece, I am going to show you how to configure Animate.css to be used in
Angular in only five steps.

*****

### Step 1: Init Your Project

If you are thinking about using Animate.css in your Angular project, you
probably have an initialized project already. However, for this tutorial, let’s
start our project from scratch.

![](https://cdn-images-1.medium.com/max/1000/1*97tms6FZeUUMuSTh3h5QfA.png)

*****

### Step 2. Install Animate.css

Install `animate.css`.

![](https://cdn-images-1.medium.com/max/1000/1*OBSAoc-krU5PlgVV8ncsVw.png)

*****

### Step 3. Include Animate.css

There are several ways to include Animate.css in our project:

- Open `angular.json` and insert a new entry into the styles array:

![](https://cdn-images-1.medium.com/max/1000/1*8RFXmHy7wJLZt32ZK_K-Sg.png)

- Open `styles.css` and insert a new entry into the file:

![](https://cdn-images-1.medium.com/max/1000/1*Q_EtLSUQKxfY216c7wpm1g.png)

*****

### Step 4. Add the Animated CSS Class

Open your template’s component and add the animated CSS class into any of the
HTML elements:

![](https://cdn-images-1.medium.com/max/1000/1*mulXKAv8Oloa_vS7ILGjEg.png)

*****

### Step 5. Run Your App!

Run your app:


*****

### More, More, and More…

* [Animate.css](https://daneden.github.io/animate.css/)

The **GitHub** branch of this post is
[https://github.com/Caballerog/angular-animate.css](https://github.com/Caballerog/angular-animate.css)

*****

Originally published at [https://carloscaballero.io](https://carloscaballero.io)
About Tom Harford
Tags: tomharfordcolumbia, tomharford, thomasharford
Published: 2019-08-01 16:34:49

Tom was born in Upstate NY. He has a wife and four children and currently resides in Albany, New York. Tom has long had a passion for exotic animals, working in pet stores, breeding animals, earning a PhD in zoology, working at a zoo and now teaching science to middle school students. 

With all this experience and knowledge of exotic animals, Tom’s passion is exotic pets and educating people on the proper care and keeping of exotic animals. His children have owned and cared for many of their own exotic animals, including hedgehogs, sugar gliders, chameleons, pythons, chinchillas and more. 

Tom volunteers part-time at a local zoo doing animal education with children. He also still owns many exotic pets of his own. He wants his articles to focus on specific exotic pets and teach people the basics of their proper care and keeping. Responsible, informed care of exotic pets is vitally important to him.
About Rhino Shield Wisconsin
Tags: rhinoshieldwisconsin
Published: 2019-08-01 16:34:10

Rhino Shield Wisconsin is among the industry leaders in ceramic coating technology. Launched in 2000, the Rhino Shield brand has grown every year since its inception and is a recognized leader in the premium wall coating industry. Rhino Shield’s specialty coatings work to protect structures for years to come.The dealer team will create the optimal installation plan and select the best coating system for your residential, commercial and industrial buildings or complexes. Nothing compares to Rhino Shield Wisconsin for long term protection of your building, home or workplace.
Leading my First Workshop 
Tags: javascript
Published: 2019-08-01 16:33:34

Today, I am leading my first-ever workshop for the development team I'm a part of at work.  I'm going to be teaching about reusable JavaScript design patterns, and how we can make react-like 'stateful components' with vanilla js (and some jQuery... yes, I know XD).  Anyways, I'm super excited, so I thought I'd share!
Byte Sized Episode 2: The Creation of Graph Theory 
Tags: computerscience, graphtheory, bytesized, history
Published: 2019-08-01 15:47:54

---
title: Byte Sized Episode 2: The Creation of Graph Theory 
published: true
description: The full story of Leonhard Euler and the creation of this fundamental computer science principle, delivered in a few minutes.
tags: computerscience, graphtheory, bytesized, history
cover_image: https://thepracticaldev.s3.amazonaws.com/i/88e62fzblbluz1dm7xjf.png
series: Byte Sized Season 1
---

Today's episode of Byte Sized is about Leonhard Euler and the creation of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory).

For more about how Graph Theory works, check out this video from BaseCS!

{% link https://dev.to/vaidehijoshi/graph-theory--basecs-video-series-1cpo %}

Follow **Byte Sized** for an adventure through computer history, a few minutes at a time. More great episodes to come.

{% organization bytesized %}

<center>
# **Today's Sponsor**
</center>

{% organization heroku %}

{% link https://dev.to/devteam/why-dev-hosts-on-heroku-and-how-we-configure-our-service-1caj %}
CSS selector locators
Tags: selenium, automation
Published: 2019-07-29 12:02:11

---
title: CSS selector locators
published: true
description: 
tags: selenium,python,automation
---

Another way to find an element on a web page in Selenium is using a CSS selector.

Again ID or Name are generally your best bet for locating elements in Selenium but a CSS Selector can be powerful too.

A CSS Selector can use the ID attribute too. I will show that below as an example. So if you have some front development and understand CSS Selectors then using mostly CSS Selectors as Selenium locators will be a good choice.

If you do not know CSS Selectors that well you can use Chrome devtools to find them easy peesy.

Go to inspect and the find the element you want. Right click on the element and select Copy... then choose selector.

Here is what a CSS Selector will look like in a Python Selenium script.

```python
        selector_path = "#form > main > div:nth-child(2) > section > section > section.hero-lockup > div > section > span.triptych-item.screenshots > div.triptych-item-meta > p > strong > span"
        e = driver.find_element(By.CSS_SELECTOR, selector_path)
```

Sometimes the CSS Selector will effectively be the ID. As an example the dev.to button "Write a Post" CSS Selector is shown below.

```CSS
#write-link
```

If you use a CSS Selector and the DOM structure changes then it is possible your locator will fail and as a result your test will fail too. You should try to pick the most specific CSS Selector you can (aka ID or name) to help mitigate this problem.

A good reference from MDN on CSS selectors can be found here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors
Some of my writing principles
Tags: writing
Published: 2019-08-01 15:37:37

- The first sentence, first paragraph are the most important. Don't bury the lede!
- The next most important thing is the last paragraph.
- Keep middle points well defined, ideally with descriptive headers.
- Don't try to broaden so it's relevant for "everyone". Writing for one person is the best.
- 85% perfect is way better than 100% perfect. You'll get diminishing returns.
- Re-read and remove unnecessary words/sentences, especially superfluous words like "very".
- Expect people to skim. Think about the "shape", e.g. squint test.
- Fleshing out a sloppy draft at night and then refining in the morning is a great pattern for me.
- Don't use a clever/cryptic title. Be descriptive!

Some of this stuff is probably inline with how they teach essay writing, but I can't remember any of those lessons from school.

This post took about 60 seconds to jot down and 60 seconds to review. I think it will be useful to a lot of folks. It's probably not perfect, but you don't need to spend hours to create useful work.

Happy writing!