teleren/devto huggingface dataset:
🚫😩 An array of react refs
Tags: todayilearned, react, facepalm, workjournal
Published: 2019-01-25 04:20:07

---
title: 🚫😩 An array of react refs
published: true
cover_image: https://media.giphy.com/media/Aw0rWhkkqvQv6/giphy.gif
tags: #til, #react, #facepalm, #workjournal
canonical_url: https://ajsharp.com/an-array-of-react-refs/
---


Apparently you can't store [React refs](https://reactjs.org/docs/refs-and-the-dom.html) in an array. For some reason they get wiped out, so if you need to store a collection of refs, you have to do something like this (forgive me lord, for I hath sinned):

```jsx
import React from 'react'

const collection = ["label 1", "label 2"]

class SinFactory extends React.Component {
  constructor(props) {
    super(props)
    this.ref0 = React.createRef()
    this.ref1 = React.createRef()
  }

  render() {
    return (
      <div>
        {collection.map((label, i) => {
          return <div key={label} 
            ref={this[`ref${i}`]}>{label}
          </div>
        })}
      </div>
    )
  }
}
```

It's truly filthy, but it works. 

****

☝️ _**Be sure to check out [Sharesecret](https://www.sharesecret.co), which makes it easy to securely share sensitive data.**_
Should color be included in alt text?
Tags: webdev, a11y, html, help
Published: 2019-01-25 03:11:06

---
title: Should color be included in alt text?
published: true
description: 
tags: webDev, accessibility, html, help
---

A lot has been written about how to write meaningful alt attribute description for image elements, for those who use screen readers or with a slow connection where images that won't load. There are ground rules for [when to use add a description to an alt attribute versus an empty alt text attribute.](https://webaim.org/techniques/alttext/) What I haven't been able to find anywhere is if it is useful to include colors in an alt attribute description. Even the [W3 developer guidelines](https://www.w3.org/TR/WCAG20-TECHS/H37.html) and [WebAIM ](https://webaim.org/techniques/alttext/) don't mention color in alt attribute descriptions at all. I've been looking at many websites' image alt text, from bloggers to corporations, and [Twitter users who take advantage of their relatively new alt text feature](https://help.twitter.com/en/using-twitter/picture-descriptions). Many times I have seen an image described as something like "Person in a red shirt reading a blue book." or "A huge green field under a bright blue sky."

If anyone has any insight, I would love to learn more to write the best alt attribute descriptions.
How to break Rails built-in Active Record's Validations
Tags: rails, activerecord
Published: 2019-01-25 02:15:50

---
title: How to break Rails built-in Active Record's Validations
published: true
description: This past week I got an error which as it turn out originated because Rails failed with its built-in Active Record validation checkers. 
tags: Rails, Active Record
canonical_url: https://www.arjunrajkumar.in/blog/how-to-break-rails-built-in-active-record-s-validations
---

This post originally appeared on [Arjun Rajkumar's](https://www.arjunrajkumar.in)  [blog](https://www.arjunrajkumar.in/blog/how-to-break-rails-built-in-active-record-s-validations).

This past week I got an error which as it turn out originated because Rails failed with its built-in Active Record validation checkers. 


I have this has_many association set up in my database - a `Website` has many `pages` 


```ruby

class Website < ApplicationRecord
  has_many :pages, -> { order("created_at DESC")} , dependent: :destroy
end

class Page < ActiveRecord::Base
  belongs_to :website, touch: true, counter_cache: true
end

```

Each `page` has a unique URL scoped to a website. This means that pages under a website shouldn't have the same URLs.


I’m using Sidekiq workers to crawl a website in the background, get all it's on-page links and add those link as pages to the website. Sidekiq is multi-threaded - and runs thousands of jobs at the same time. Each of these jobs is creating a page with the crawled link as the URL. So, it may happen that two different jobs creates two pages with the same URL value at the same time, if it discovers two identical links on the website. 

And this is exactly what happened. 

Here are a few things I tried that didn’t stop Sidekiq from creating duplicate pages under the same website.
 

##### These didn't work.

```ruby

#Active Record's built-in Validation checkers
class Page < ActiveRecord::Base
  validates_uniqueness_of :url, :scope => :website_id
  belongs_to :website, touch: true, counter_cache: true
end

#Transactions
ActiveRecord::Base.transaction do
  website.pages.create(url: new_url) 
end

```


#### This worked!
What worked instead was pretty simple.
Adding a unique index directly in the database solved this error.

```ruby
class AddIndexToPageUrls < ActiveRecord::Migration[5.2]
  def change
    add_index :pages, [:website_id, :url], unique: true
  end
end

```

And this works 100% of the time. Rails has documented this properly in their docs, and I fixed the error quickly once I knew what was causing it. But diagnosing this error initially to understand why this is happening took time. 

I hope this helps someone in the future.
A name that describes someone's position or job.
Tags: tagheuer, tagairlines, tagliabue, theaviationgroup
Published: 2019-01-24 20:12:55

---
title: A name that describes someone's position or job.
published: true
description: noun - a spoken or written representation or account of a person. object, or event.

tags: tag heuer, TAG Airlines, Tagliabue, The Aviation Group
---

An amoeba, sometimes written as "ameba", is a term generally used to describe a single celled eukaryotic organism that has no definate shape and that moves by means of pseudopodia. Pseudopodia or pseudopods are temporary projections of the cell and the word literally means "false feet". The cell uses the pseudopodia as a means of locomotion. The plural of amoeba is "amoebae", not "amoebas". Although the word "amoeba" or "amoeboid" is often used to refer to all protozoa that move using pseudopodia, the word Amoeba (written in italics and with a capital letter) refers to a specific genus of protozoa of which Amoeba proteus is the best-know species.
The cytoplasm of an amoeba contains the organelles and is enclosed by a cell membrane. An amoeba uses a process called phagoctyosis to obtain food. This is a process in which projections of the cell membrane of the amoeba extend and surround the food particle, totally enclosing it. The food particle is thus internalized in a sort of "bubble" called a vacuole. The food particle can then be digested in the vacuole. The amoeba reproduces via mitosis.

Some amoebae can cause disease. For example Acanthamoeba can cause amoebic keratitis and encephalitis in humans.

Amoebae, viruses and bacteria are microorganisms. The study of microorganisms is called microbiology.
How can i load sass files on nuxt with sass-loader ?
Tags: help, sass, nuxt
Published: 2019-01-25 01:07:47

---
title: How can i load sass files on nuxt with sass-loader ?
published: true
description: 
tags: #help #sass #nuxt
---

I intend loading bulma sass files from node modules into my components on nuxtjs but I am not getting any lead way. After installing both node-sass and sass-loader (coupled with the several hours I have spent trying to set them up on nuxt.config.js with zero success) I have really hit a dead end here guys, please help me.
Quick Tip to Stop Flexbox from Overflowing
Tags: css, tips
Published: 2019-01-25 00:48:33

I ran into an issue (yet again 😅) where my flex items weren't shrinking below a certain point in one browser but not another (e.g. it worked in Chrome but not Firefox). Turns out, it's a one-line fix: add `min-width: 0;` to the item.


```css
.flex-container {
    display: flex;
}

.flex-item {
    flex: 1 1 0;
    min-width: 0;
}
```
It’s alive! Simple CSS animations in CodePen
Tags: html, css, animations, codepen
Published: 2019-01-25 00:30:06

---
title: It’s alive! Simple CSS animations in CodePen
published: true
description: After stumbling upon the [Dogs of CodePen](https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/), I thought it would be fun to try animating our company mascot, Cody.
tags: html, css, animations, codepen
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ynp55nt7uzgh8ngkva1v.gif
---

After stumbling upon the [Dogs of CodePen](https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/), I thought it would be fun to try animating our company mascot, [Cody](https://codepen.io/brettmstevens/pen/bOpPdX).* 

![It’s alive!](https://media.giphy.com/media/d3Kq5w84bzlBLVDO/giphy.gif)



Whether you’re new to coding or just interested in making an animation for fun, here’s how you can make your own. 

First, I partitioned Cody into four parts—a head, body, left arm, and tail—using [Figma](https://www.figma.com/file/LbODAJHebYmoqvLRyVvEPdjJ/Cody-from-Software-animation?node-id=0%3A1). These were the parts I wanted to animate in my CodePen.



Next, I exported these partitions to SVG and uploaded them to a [URL encoder](https://yoksel.github.io/url-encoder/). Asset uploading is a pro feature of CodePen, but there are [several different ways](https://css-tricks.com/lodge/svg/09-svg-data-uris/) you can use Data URIs instead of uploading assets. I am using the Data URI as the `background-image` property. 

Then I created a parent `<div>` element for the body and nested a child `<div>` element for the tail, arm, and head. I set the position of the parent element to `relative` and the position of each child element to `absolute` (if you need some refreshing on CSS positioning, [here is a good guide](https://dzone.com/articles/css-position-relative-vs-position-absolute)).

I used [keyframe-based syntax](https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/) to create a tail wag, subtle thumbs-up motion, and a slowly unraveling tongue. 

Last but not least, I made a simple Javascript function to add and remove classes when you click anywhere on Cody.

{% codepen https://codepen.io/brettmstevens/pen/bOpPdX default-tab=result %}

 

Happy coding!

**More about Cody: Cody is our robot AI puppy-persona whose mission is to help developers improve their craft. Cody is a border collie, one of the world’s smartest dogs and was created by Simon Oxley (the creator of the Twitter bird and the GitHub Octocat).*
__str__ vs. __repr__
Tags: python
Published: 2019-02-03 18:45:22

---
title: __str__ vs. __repr__
published: true
tags: python
description: How to easily remember the difference between __str__ and __repr__ functions in Python?
canonical_url: https://switowski.com/python/2019/01/25/str-vs-repr.html
cover_image: https://thepracticaldev.s3.amazonaws.com/i/y6bvebgs4leaqnyd7qev.jpg
---

Every now and then, when I go back to writing Python code after a break, a question comes to mind:

> _What message should I put into the \_\_str\_\_ and the \_\_repr\_\_ functions?_

When you search for the difference between them, you will find out that ` __str__ ` should be **human readable** and ` __repr__ ` should be **unambiguous** (as explained in [this StackOverflow question](https://stackoverflow.com/questions/1436703/difference-between-str-and-repr)). It’s a great, detailed answer. But for some reason, it never really stuck with me. I’m not the smartest developer and sometimes to remember something, I need a very simple example. What I actually found helpful was written straight in the [documentation of the _repr()_](https://docs.python.org/3/library/functions.html#repr) function:

> For many types, this function makes an attempt to return a string that would yield an object with the same value when passed to eval()

An excellent example of what it means, is the `datetime` module:

```python
>>> import datetime
>>> now = datetime.datetime.now()
>>> str(now)
'2019-01-21 19:26:40.820153'
>>> repr(now)
'datetime.datetime(2019, 1, 21, 19, 26, 40, 820153)'

```

As you can see, the `repr` function returns a string that can be used to create an object with **the same properties** as `now` (not **the same** as `now`, but with **the same properties** ). You can verify it with following code:

```python
>>> timestamp = datetime.datetime(2019, 1, 21, 19, 26, 40, 820153)
>>> now == timestamp
True
# But!
>>> id(now) == id(timestamp)
False

```

So how can you use it in your own classes? For instance, if you are writing a class `Car` that has the attributes `color` and `brand` and is initialized in the following way:

```python
red_volvo = Car(brand='volvo', color='red')

```

then this is what the ` __repr__ ` function for the car should return:

```python
>>> repr(red_volvo)
"Car(brand='volvo', color='red')"

```

It’s not always possible to write the ` __repr__ ` function that can recreate a given object, but simply keeping in mind those examples with `datetime` and `Car` has helped me to remember the difference between the ` __repr__ ` and ` __str__ `.

Credits: I found out about this trick in “[Python Tricks](https://www.google.com/search?q=Python+Tricks:+A+Buffet+of+Awesome+Python+Features)” book, by Dan Bader. If you haven’t heard of it, it’s a great source of intermediate-level pieces of knowledge about Python. I’m in no way associated with Dan, but his book was one of the most enjoyable Python technical reads I’ve had in a long time.

 

More credits: Image from [Pexels](https://www.pexels.com/photo/accessory-bobbin-close-up-clothing-355148/)
New Feature: Mute Notifications
Tags: changelog, meta
Published: 2019-01-24 23:59:17

---
title: New Feature: Mute Notifications
published: true
description: You can now mute notifications for your articles and comments.
tags: changelog, meta
---

You can now mute notifications for your own articles and comments! Muting notifications means that you won't receive any web, email, and push (iOS only) notifications for new comments or reactions.

To mute notifications for one of your posts, go to your [dashboard](https://dev.to/dashboard) and click "MUTE NOTIFICATIONS":

![Example of the dashboard mute notifications button](https://thepracticaldev.s3.amazonaws.com/i/59s98la8oyx77nndcp9w.png)

To mute notifications for one of your comments, click the top right dropdown menu button of a comment and visit the settings page (or add `/settings` to your comment's URL):

![Example of the dropdown menu of a comment](https://thepracticaldev.s3.amazonaws.com/i/uiplkgwoiv57lm0ucqrf.png)

![Example of a comment's setting page](https://thepracticaldev.s3.amazonaws.com/i/moipzj6iz3n36w55e3hb.png)

Muting a comment will mute all parent and children comments of the same chain that belong to you.

Happy muting!
What's your favorite Markdown editor?
Tags: tools, webdev, discuss
Published: 2019-01-24 23:40:08

---
title: What's your favorite Markdown editor? 
published: true
description: I try to write all my notes in markdown, but I'm new to MD editors
tags: tools, webdev, discuss
---


## The discussion

So I've been writing Markdown for years but never thought of using an official editor. I do use the ones that come from the Jetbrains suite (PHPStorm, WebStorm, Intellij, ...) but the plugin and default markdownn editors seem a little buggy in UI mode, so I keep them in text view.

My co-worker uses an official editor called <a href="https://getlightpaper.com/" target="_blank">LightPaper</a>. I decided to look for my own today. I found a free one for mac called <a href="https://macdown.uranusjr.com/" target="_blank">MacDown</a> and so far I love it. It's simple and works. 

I do miss my VI/M shortcuts (wanna learn vim? checkout <a href="https://dev.to/webdevchallenges/a-brief-introduction-to-vim-o2" target="_blank">Marc's post on it, there are 9 parts!</a>, they are amazing!) in it but I guess I can live without them for the benefit of seeing both my raw markdown along with the UI version.

So list your editor, or if you just stick to raw. Thoughts on the topic? Editors, plugins, or anything else that is cool for Markdown. 

I'm looking forward to your thoughts.

--DeChamp


## List created from comments

I took the time to create a list and find the links to the referred editors suggested, for your easy use! 

- StackEdit (browser) | https://stackedit.io/
- Typora (osx, windows, linux)| https://typora.io/
- Quiver (osx) | http://happenapps.com/#quiver
- Neovim w/ markdown preview plugin | https://neovim.io/ with https://github.com/iamcco/markdown-preview.nvim
- Ulysses (osx) | https://ulysses.app/features/
- VSCode w/ Markdown Preview Enhanced | https://code.visualstudio.com/ with https://shd101wyy.github.io/markdown-preview-enhanced/
- Joplin (osx, windows, linux) | https://joplin.cozic.net/
- Boostnote (osx, windows, linux, mobile?) | https://boostnote.io/
- MWeb (osx) | https://www.mweb.im/
- The Archive (osx) | https://zettelkasten.de/the-archive/
- Geeknote (terminal) | http://www.geeknote.me/
- Bear (osx|ios) | https://bear.app/ 
- MacDown (osx) | https://macdown.uranusjr.com/
- HackMD (web) | https://hackmd.io/
- Markor (Android) | https://play.google.com/store/apps/details?id=net.gsantner.markor
- Notion (desktop, ios/android) | https://www.notion.so/
- VimR (terminal)| https://github.com/qvacua/vimr
- Markdown Mode (emacs) | https://jblevins.org/projects/markdown-mode/



---

Varymade LLC.

Current projects are https://charactergenerator4000.com and https://coder.exchange. Please check them out and let us know your thoughts.
Day 24: Swift macOS password manager for people who hate the cloud
Tags: macos, swift, passwordmanager, cloud
Published: 2019-01-24 22:18:29

---
title: Day 24: Swift macOS password manager for people who hate the cloud
published: true
description: Follow along as I make a 100% cloudless and 100% native password manager for macOS. That's 200% raw password managing power.
tags: macos, swift, password manager, cloud
series: Making a swift MacOS password manager for people who hate the cloud
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q6r73zbfbm3mpfs98bu5.jpg
---

[<- For Day 23 go here](https://dev.to/swlkr/day-23-swift-macos-password-manager-for-people-who-hate-the-cloud-4hn4)

📅 01/24/2019
🚀 [6 days until launch](https://www.producthunt.com/upcoming/all-your-passwords)
🔥 23 day streak
💰 $5.00 price (no more .99, I hate that tactic)
🤑 $0 revenue
📈 0 customers
⌚️ 37 hours spent
💻 102 files changed, 249709 insertions(+), 549 deletions(-)
🏁 Today's goal: **Get this thing archived, validated and generate a .app**

**11:03 AM**
Ok, so here's what's happening.

Product -> Archive -> Validate App -> Upload your app's symbols… -> Next -> Automatically Manage Signing -> 

![](https://thepracticaldev.s3.amazonaws.com/i/qb4691f4oskos5mn3m2z.png)

-> Validate

After all of that, I wind up with this

![](https://thepracticaldev.s3.amazonaws.com/i/ujiewje4oghvji2v58hj.png)

**11:28 AM**
Oh, it turns out even though I'm not distributing this thing in the mac app store, I still needed to make an app on the app store connect website and I needed to make  a new wildcard app ID to get this working. My app archive is validated! Now it's time to figure out how to get it signed so when you open it up, it doesn't tell you it's malware.

![](https://thepracticaldev.s3.amazonaws.com/i/q9e41du97vtpvv7ifl1g.png)

**11:29 AM**
That was some quick notarization action

![](https://thepracticaldev.s3.amazonaws.com/i/d5nahbo34lwsi8dwqjrm.png)

**11:33 AM**
HEY! I successfully extracted a `.app` file from xcode 🎉

![](https://thepracticaldev.s3.amazonaws.com/i/yv677w8bbczmzsnz04pb.png)

That was easier than I made it yesterday, just had to read the docs 🤦‍♂️. I'll pick this up after work.
VS Code misses an important WebStorm feature
Tags: discuss
Published: 2019-01-24 21:33:25

I really love VS Code but I miss one feature from WebStorm:

[Code Inspection](https://www.jetbrains.com/help/webstorm/code-inspection.html)

> The inspections detect not only compiling errors, but also different code inefficiencies. Whenever you have some unreachable code, unused code, non-localized string, unresolved method, memory leaks or even spelling problems – you'll find it very quickly.

Do you have any ideas how I can detect unreachable code, unused code or unresolved methods in VS Code?

Basically, I just know using TSLint or ESLInt using their unused variable rule but this is by far not as powerful. For example, they do not track unused methods.
What Are You Trying to Achieve?
Tags: career, life, selfcare
Published: 2019-01-24 20:54:14

---
title: What Are You Trying to Achieve?
published: true
description: Replace what do you want? with what are you trying to achieve?
tags: #career #life #selfcare
---

Instead of asking 

> What do you want?

Ask

> What are you trying to achieve?

It helps the asking party (could be yourself):

- gain **clarity**
- rephrase their question
- (probably) come up with their own solution

From you, it shows:

- empathy
- care
- support
- trust
- patience

Try it and see people's reaction. 

So, what are you trying to achieve? :)
The simplest Perceptron you'll ever see
Tags: perceptron, machinelearning, javascript
Published: 2019-01-24 20:21:49

---
title: The simplest Perceptron you'll ever see
published: true
description: A Perceptron class written in JavaScript
tags: perceptron, machinelearning, javascript
canonical_url: https://github.com/victorqribeiro/perceptron
---



# Perceptron

The simplest [Perceptron](https://en.wikipedia.org/wiki/Perceptron) you'll ever see.

## How to use

Let's suppose you have the following data set:

| Height (cm) | Weight (kg) | Class (0-1) |
|-------------|-------------|-------------|
| 180         | 80          | 0           |
| 175         | 67          | 0           |
| 100         | 30          | 1           |
| 120         | 32          | 1           |

0 - adult  
1 - child

You need to process the table to this format:

```
const x = [
	[180, 80],
	[175, 67],
	[100, 30],
	[120, 32]
];

const y = [0,0,1,1];
```

Then just create a new Perceptron passing the shape of the data (height and weight), the learning rate and the number of iterations. By default the learning rate is set to 0.01 and the number of iterations is set to 10.

```
const p = new Perceptron( x[0].length );
```

Call the fit function

```
p.fit();
```

And you're all set to make predictions

```
p.predict([178, 70])
```

Super simple.


Take a look at the code [here](https://github.com/victorqribeiro/perceptron)
What's one of the most frustrating moments you've had as a developer?
Tags: discuss, webdev, productivity, career
Published: 2019-01-24 17:58:51

---
title: What's one of the most frustrating moments you've had as a developer?
published: true
description: 
tags: discuss, webdev, productivity, career
---

We've all had those times where we've spent hours toiling over the same code endlessly, trying to track down and debug a seemingly impossible and improbable issue.

What's made you want to pull your hair out, and optionally, what was the resolution? *(and was it more frustrating discovering it?)*
Python SQLite3 programming
Tags: python, beginners
Published: 2019-01-24 17:35:32

---
title: Python SQLite3 programming
published: true
description: 
tags: #python #beginners
---

1 Create Connection
2 SQLite3 Cursor
3 Create Database
4 Create Table
5 Insert in Table
6 Update Table
7 Select statement
8 Fetch all data
9 SQLite3 rowcount
10 List tables
11 Check if table exists or not
12 Drop Table
13 SQLite3 Exceptions
13.1 DatabaseError
13.2 IntegrityError
13.3 ProgrammingError
13.4 OperationalError
13.5 NotSupportedError
14 SQLite3 Executemany (Bulk insert)
15 Close Connection
16 SQLite3 datetime

https://likegeeks.com/python-sqlite3-tutorial/
Hope you like it.
Regards,