teleren/devto huggingface dataset:
Friday Blast #55
Tags: fridayblast, links, post
Published: 2019-01-20 14:43:37

---
title: Friday Blast #55
published: true
tags: friday_blast,links,post
canonical_url: https://horia141.com/friday-blast-55.html
series: "Friday Blast"
---

[Thank you for your help, NoSQL, but we’ve got it from here (2018)](http://blog.memsql.com/nosql/) - More and more companies are realising that SQL can handle very large scales very well and that losing ACID, Schemas, SQL etc. isn’t a price worth paying in most situations for the slight benefits a NoSQL solution offers. A nice quote “It’s not clear why schema was lost as part of the NoSQL movement.” - I’ve often wondered why myself.

[Why we moved from MongoDB to PostgreSQL (2018)](https://dzone.com/articles/why-we-moved-from-nosql-mongodb-to-postgresql) - same vein as the previous one, though some of the reasoning about migrations is going to affect them.

[Goodbye microservices: from 100s of problem children to 1 superstar (2018)](https://segment.com/blog/goodbye-microservices/) - How Segment moved their data distribution service from one microservice per destination to a single monolith for all. Though the engineering reasoning is solid, and it _does seem_ the split into microservices was ill-thought to begin with. I’d read this as a cautionary tale for thinking really hard if the things you’re splitting into services are really that independent. Technically, every function call could go to another service, but that’d be insane.

[YAML: probably not so great after all (2016)](https://arp242.net/weblog/yaml_probably_not_so_great_after_all.html) - apparently YAML is very big - bigger than XML even. I _had_ no idea. Ditto for the other complexities of representing objects. It’s strange that after 70+ years of computing, there’s still no universal way of representing configuration which is easy for humans to read, easy and unambiguous for computers to parse and emit and is well integrated with the programming languages of the day.

[Simplifying media innovation at Neflix with Archer (2018)](https://medium.com/netflix-techblog/simplifying-media-innovation-at-netflix-with-archer-3f8cbb0e2bcb) - in which Netflix details their Archer system. This is a tailor made big data platform for analyzing and processing videos. It’s meant to make things easy and all sorts of media processing is built in. You get a MapReduce-like interface where video frames and even scenes are already split for you. There’s a bunch more details, but I think it’s a wonderful example of how building a tool like this can enable many other teams to do things they couldn’t have before, because of the complexities involved.
React Native Show Border Around Image Component Android
Tags: react, reactnative, android, javascript
Published: 2018-10-19 05:18:08

---
title: React Native Show Border Around Image Component Android
published: true
description: React Native Show Border Around Image Component Android
tags: #react #reactnative #android #javascript
---

Post Link : <a href="https://www.skptricks.com/2018/10/react-native-show-border-around-image-component-android.html" >React Native Show Border Around Image Component Android</a>

This post explains how to add rectangular border around the image component in react native application. This is pretty simple, you need to use borderWidth and borderColor properties of css stylesheet design.

Set Border In React Native component :
Using below CSS properties you can set border width and color in react native component.
borderWidth : This will set border width.
borderColor  : This will set border color.

<a href="https://www.skptricks.com/2018/10/react-native-show-border-around-image-component-android.html" >React Native Show Border Around Image Component Android</a>

<img src="https://1.bp.blogspot.com/-o5ysfJQJgqE/W8lky1Q8RfI/AAAAAAAACCY/9vv1QMBmlAML-6Llavna2hujgYNZqyVqgCLcBGAs/s640/bor.png" />

<a href="https://www.skptricks.com/2018/10/react-native-show-border-around-image-component-android.html" > Continue Reading...</a>
Keeping TreeView state with component in Go
Tags: go, webassembly, webdev, devlog
Published: 2018-10-19 04:38:06

---
title: Keeping TreeView state with component in Go
published: true
description: Revisited my treeview UI prototype and re-architected the TreeView component to keep the state in Go.
tags: Go, webassembly, webdev, devlog
---
I came back to the tree view prototype re-implemented in my Go UI framework. It really doesn't behave any differently, but I spent all evening reimplementing it to handle a more React-like data model, where we store authoritative state of the tree in Go with the component, load and save there, and then push that state to the jQuery component.

I wasted a ton of time just trying to find a way to reset the data in [jsTree](https://www.jstree.com/). I kept trying to recreate the element and then re-run the initialization JavaScript that had the data to load. It really didn't like this, but I didn't think of another way until later when I put the jsTree element outside the component, then removed the template and just directly started setting up and using the jsTree API from the Go component. 

Then I had to hook up any change that happens in jsTree to reproduce that change in the data model in the Go component, saving, and re-rendering the component, which now just calls some JS to set and refresh jsTree. 

Lastly I got localStorage persistence working so it's roughly where it was before, but now I have control over the nodes in Go and can store any extra data on them there instead of hacking jsTree to keep extra data on the nodes. 

{% youtube fxIebLEQGgk %}
Object Oriented Ruby
Tags: ruby, objectorientedruby, codingmoms
Published: 2018-10-19 03:53:48

---
title: Object Oriented Ruby
published: true
description: Finally Understanding Reader/Writer
tags: ruby, object-oriented ruby, coding moms
---
The introduction of object orientation in Ruby seems to be well-timed and intuitive within this course. The ways that we learned to build methods before are now making sense in the context of a class. Before learning about object orientation, I kept wondering where all these methods were going to be used, how they tied together, and what was their ultimate purpose. Now that object orientation has become the name of the game, it’s clear that we use these methods to bring objects to life.

One of the most recent ‘Aha!” moments that I’ve had was related to the reader and writer methods that are involved in building a class. When OO was first introduced, and the process of defining the #name= and #name methods was being taught, I felt like I was mechanically typing the same thing over and over without comprehending what was happening. Why did we need two different methods to represent the same variable? And what does that = sign do? I didn’t get it.

Then, somewhere along the way, I realized that when we call name= (or any variable=) in our program, we are setting that variable equal to a value for a particular instance of a class. We are writing that variable’s value. We also need an additional method to recognize that value and allow it to be referenced and operated on with all the capabilities that the class has to offer, hence the necessity for the reader method that includes the @variable, the instance variable. The instance variable is recognized throughout the scope of the class.

I finally wrapped my mind around this concept when along came attr_accessor to replace these two methods! Well, not always, but in many cases. Writing out the reader and writer methods is the foundation, and using attr_accessor is the next level of abstraction that streamlines our code and makes our lives easier. I get it!

Thank you for reading : )
React: Controlling Rendering Through Keys
Tags: react, javascript, frontend
Published: 2018-10-19 03:41:52

*Note:* This should be used sparingly as it can cause performance hits.

`key`, the property we throw some value into to suppress warnings. This property is used by React to determine when a component is deleted, updated, or created. We generally don't interact much with the `key` prop--except in loops.

My team recently ran into an issue lately--how do we rerender all child components when a state has changed? The simplest approach... you guessed it, `key`!

Let's take a look.

```js
class Parent extends Component {
  state = {
    key: true,
    count: 0
  };

  handleChildUnmount = () => {
    this.setState(prevProps => ({ count: prevProps.count + 1 }));
  };

  toggleKey = () => {
    this.setState(prevProps => ({ key: !prevProps.key }));
  };

  render() {
    const { key, count } = this.state;

    return (
      <div>
        <button onClick={this.toggleKey}>Toggle Child Key</button>
        <Child key={key} count={count} onUnmount={this.handleChildUnmount} />
      </div>
    );
  }
}

class Child extends Component {
  componentWillUnmount() {
    this.props.onUnmount();
  }

  render() {
    return <div>Total Renders: {this.props.count}</div>;
  }
}

```
[![Edit react-scroll-to](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/48zl4zoyv0)


In this example we are toggling the `key` prop of our Child component between *true* and *false*. We then keep track every time the Child unmounts through a callback to increment the Parent's state. When we toggle the `key` prop, we will see the counter increment each time. This is, because React uses the key to determine if a component has changed. Since we are changing the key each time React will see our component has updates, and rerender the Child component.

This is the easiest way to cause a rerender of a child component (and all children of the child), and shows the power of understanding the`key` prop!

*Note:* Even if a child component returns *false* in a `shouldComponentUpdate`, changing the key prop will cause it to rerender anyway (Try it in the CodeSandbox above!).

*Practical Usage:* [reactjs.org - you-probably-dont-need-derived-state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key)
How to be an awesome open source maintainer?
Tags: discuss, hacktoberfest, opensource
Published: 2018-10-19 01:08:31

---
title: How to be an awesome open source maintainer?
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ouy1haslpyk33sqk96qd.jpg
tags: #discuss, #hacktoberfest, #opensource 
---

So, I open source pretty much all the personal code I write, but I've never looked for contributors for my projects before.

I decided that, since I have a lot on my plate right now, opening up [Learn Code from Us](https://learncodefrom.us/) to contributors seemed like a good idea.

But then I realized -- I have no idea how to be a good open source maintainer!

So, what are your tips for being an awesome one?

Also, if you would like to contribute [here](https://github.com/aspittel/learn-code-from-us) is the repo, there are a few issues open and most are beginner friendly!

{% github aspittel/learn-code-from-us %}
Git Prompt in Bash
Tags: git, bash, awk, prompt
Published: 2018-10-19 00:34:33

---
title: Git Prompt in Bash
published: true
description: Create a simple git prompt in Bash
tags: git, bash, awk, prompt
---

## All in one picture
![Screenshot of use](https://thepracticaldev.s3.amazonaws.com/i/lm7u82xwzedxk2jay1mr.png)

## Source code

```
# ~/.bashrc

__git_status() {
    STATUS=$(git status 2>/dev/null |
    awk '
    /^On branch / {printf($3)}
    /^You are currently rebasing/ {printf("rebasing %s", $6)}
    /^Initial commit/ {printf(" (init)")}
    /^Untracked files/ {printf("|+")}
    /^Changes not staged / {printf("|?")}
    /^Changes to be committed/ {printf("|*")}
    /^Your branch is ahead of/ {printf("|^")}
    ')
    if [ -n "$STATUS" ]; then
        echo -ne " [$STATUS]"
    fi
}

PS1='\[\033[07;33;01m\]\n\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]$(__git_status)\$ '
```

That's all folks!
Explain React storybook like I'm five
Tags: explainlikeimfive, discuss, react, javascript
Published: 2018-10-18 22:21:31

---
title: Explain React storybook like I'm five
published: true
description: React storybook
tags: explainlikeimfive, discuss, react, JavaScript
---
I heard about react storybook and skimmed through the docs but I don't seem to understand what it is or what it helps us achieve in react.
Keybase, crypto made simple
Tags: security, crypto, community
Published: 2018-10-18 21:18:28

---
title: Keybase, crypto made simple
published: true
description: Keybase, crypto made simple
tags: security, crypto, community
cover_image: https://domenicoluciani.com/assets/images/covers/crypto.png
---

For years cryptography was considered like a witchcraft, until now! Let’s see how Keybase made it.

From ancient times humankind ever wanted to communicate secrets or sensitive informations with each others, we invented a lot of method to do that, today we will see 2 of them: ...[continue to read it](https://domenicoluciani.com/2018/10/02/keybase-crypto-made-simple.html)!
Hacktoberfest: NOS for OSS projects
Tags: hacktoberfest, opensource, beginnerfriendly
Published: 2018-10-18 20:52:55

---
title: Hacktoberfest: NOS for OSS projects
published: true
description: Goodwork need help in translation
tags: hacktoberfest,opensource,beginner-friendly
cover_image: https://images.unsplash.com/photo-1503221507150-dcb5a13416ca?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e2f066c8543d078fc0f6936ac0bd700d&auto=format&fit=crop&w=1950&q=80
---

[Hacktoberfest](hacktoberfest.digitalocean.com) is a golden opportunity for new developers to get into open source world. Through hacktoberfest many people get introduce to OSS projects and make their first contribution. Hacktoberfest give oss projects new boost during this time. Just like my oss project [Goodwork](https://github.com/iluminar/goodwork) got some healthy acceleration during this time. But most importantly got help in an area which is not possible without community contribution. Localization for software is one tough task and thanks to hacktoberfest Goodwork is now available in 11 language. Translation and documentation is perfect for new comers to learn about contributing on a oss project.

If you're late to the hacktoberfest party there are still a lot of [issue](https://github.com/search?q=label:hacktoberfest+state:open+type:issue) to get started. Goodwork itself has several [issue](https://github.com/iluminar/goodwork/issues?q=is%3Aissue+is%3Aopen+label%3Ahacktoberfest) tagged with #hacktoberfest and some are translation related. We need translation for Mandarin, Japanese and other languages.

[Issue List](https://github.com/iluminar/goodwork/issues?q=is%3Aissue+is%3Aopen+label%3Ahacktoberfest)

{% github iluminar/goodwork %}

Photo Credit: Oscar Sutton on Unsplash
Top Takeaways from AngularMix 2018
Tags: angular, angularmix, javascript, frontend
Published: 2018-10-18 19:21:39

---
title: Top Takeaways from AngularMix 2018
published: true
description: Auth0's Kim Maida and Sam Julien spoke at AngularMix 2018 in Orlando, Florida. Learn what's new in the Angular ecosystem and what's coming soon.
tags: #angular #angularmix #javascript #frontend
canonical_url: https://auth0.com/blog/top-takeaways-from-angularmix-2018/
---

In this post, we take a look at the high points of AngularMix 2018, including what’s new in Angular, the amazing Angular Console, and new tools and support for AngularJS migrations.

Hello, fellow Angular Enthusiasts! I’ve just gotten back from sunny Florida, where both Kim Maida, Community & Technical Content Manager at Auth0, and myself spoke at AngularMix 2018...

[Read on 🅰️🎡](https://auth0.com/blog/top-takeaways-from-angularmix-2018/?utm_source=dev&utm_medium=sc&utm_campaign=angularmix18_recap)

![Top Takeaways from AngularMix 2018](https://thepracticaldev.s3.amazonaws.com/i/n9k6ig7czlvz0tplqsh4.png)
Ruby 2.5.3 Released
Tags: ruby, rails, discuss
Published: 2018-10-18 17:47:18

So, Ruby 2.5.3 is out!

It seems to have only some bug fixes. What are you thoughts? Have some of you updated yet?

Source: https://www.ruby-lang.org/en/news/2018/10/18/ruby-2-5-3-released/
Buscayasminas – Minesweeper game in JavaScript (August 2006)
Tags: game, minesweeper, gamedev, javascript
Published: 2018-10-18 17:25:25

---
title: Buscayasminas – Minesweeper game in JavaScript (August 2006)
published: true
tags: game,minesweeper,gamedev,javascript
canonical_url: 
---

“Buscayasminas” is an open source Minesweeper game (configurable) totally written in DHTML (HTML, CSS and JavaScript).

![Screenshot](http://www.dhtmlgames.com/buscayasminas/buscayasminas.gif)

It is my sixth DHTML game and was made in mid 2006.

Players can configure the game with some options. You can change the number of mines, board size and set a time limit (in seconds) or disable it.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: [http://buscayasminas.tuxfamily.org/buscayasminas\_english/](http://buscayasminas.tuxfamily.org/buscayasminas_english/)

Play online in English (mirror): [http://www.dhtmlgames.com/buscayasminas/buscayasminas\_english/](http://www.dhtmlgames.com/buscayasminas/buscayasminas_english/)

Play online in Spanish: [http://buscayasminas.tuxfamily.org/buscayasminas\_spanish/](http://buscayasminas.tuxfamily.org/buscayasminas_spanish/)

Play online in Spanish (mirror): [http://www.dhtmlgames.com/buscayasminas/buscayasminas\_spanish/](http://www.dhtmlgames.com/buscayasminas/buscayasminas_spanish/)

Official web site: [http://buscayasminas.tuxfamily.org/](http://buscayasminas.tuxfamily.org/) (mirror at [http://www.dhtmlgames.com/buscayasminas/](http://www.dhtmlgames.com/buscayasminas/)).

The repository can be found on GitHub: [https://github.com/jalbam/buscayasminas](https://github.com/jalbam/buscayasminas)
What is Data Binding?
Tags: javascript, webdev, beginners, data
Published: 2018-10-18 13:48:56

---
title: What is Data Binding?
published: true
description: How you handle your data binding determines how well your website will work.
tags: #javascript, #webdev, #beginners, #data
---

It's time for another one of those concepts that's actually pretty simple but people make it more complicated! Data binding is an important part of any web development project. It's so important in fact, that it's responsible for everything from the content you see on your screen to the updates made in your database. That's why it's time to learn exactly what data binding is.

Data binding makes the link between the user and the data source, which is usually a database. When you submit a form on a website, the data binding is what sends your information to database. For example, when you need to reset your password on a site, you submit a form with your email address. That does some kind of call to the database to get your user info and then you are taken to a page with another form for you to enter your new password which will update the database.

It looks something like this:

![data binding](https://flippedcoding.com/wp-content/uploads/2018/10/data-bind.jpg)

That's really all data binding is. It connects the front-end of your website to the back-end server. There are some huge advantages to using data binding. It possible for real time updates to pages based on how users interact with them. Another great thing about data binding is that it reduces the amount of code you have to write by getting rid of the need to find elements and manually get their values.

You'll probably see a boost in performance too. That's because your code is streamlined to use information in the database. You won't need to make as many database calls which saves you a crap ton of time.

One last thing I want to mention is that data binding doesn't have to involve a database. Your data source could also be an array or a collection depending on what framework you are using.

Hopefully this has helped you make more sense of what data binding is and how it works. Do you have any stories about data binding or any questions? I'd love to hear from you in the comments.

<hr>

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
[Video] The State of the JavaScript with Addy Osmani
Tags: webdev, javascript
Published: 2018-10-18 16:24:03

---
title: [Video] The State of the JavaScript with Addy Osmani
published: true
description: In this video I chat with Addy Osmani about the state of JavaScript and how developers can measure, optimize, and monitor it.
tags: webdev, javascript
---

In this video I chat with @addyosmani (Engineering Manager on the Google Chrome team) about the state of JavaScript and the resources for developers to measure, optimize, and monitor it.
{% youtube i5R7giitymk %}
Should I learn Angular Js or Angular 6?
Tags: angular, javascript, help, learning
Published: 2018-10-18 15:37:19

---
title: Should I learn Angular Js or Angular 6?
published: true
description: 
tags: angular, javascript, help, learning
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mkov447zn355xqu40km8.jpg
---
I saw a lot of job ads that require Angular, but it didn't say which version of Angular. Should I learn the newest Anglar 6 or Angular JS?