teleren/devto huggingface dataset:
MySocialHike: Social Media Metrics on Email
Tags: showdev, vue
Published: 2019-10-07 06:29:46

Hi everyone,
In the last couple of days, I was working on my side project **MySocailHike**

# https://mysocialhike.com

This project basically tracks your social media metrics like Twitter followers, facebook pages like etc. and sends you an email every week with your growth metrics.

For this project, I am using VueJs for frontend and Firebase for the backend. The combination of VueJs and Firebase is really cool with a realtime data updates.

I hope you will like this project. 
I'll keep sharing my experience with VueJS and Firebase in this project.

Thanks
SRP violation in MVC
Tags: srp, solid, mvc, oop
Published: 2019-10-07 06:25:20

---
title: SRP violation in MVC
published: true
description: 
tags: SRP, SOLID, MVC, OOP
---

How does it not concern anyone on how often the Controller in MV(C) violates the SRP in (S)OLID principle. They're often written as a bag of actions/handlers but the more people tried to make it seems like a real functioning object, (with dependency injection etc) the less sense it makes about this wholly accepted concept.
Simple MVC App
Tags: javascript, architecture
Published: 2019-10-07 05:42:23

# Simplest-MVC-App

This is a very simple example of MVC architecture

Basically, MVC architecture involves 3 parts:
1. A Model class which stores and manipulates data
2. A View class which listens to events, displays and generates new data from those events
3. A Controller class that links the Model to the View. This ensures that the model can communicate to the view without directly modifying any object in the view

## How's MVC Connected To This App?

This app uses MVC architecture to display click counting of a button.
The *Model* stores the data which the *controller* collects and gives to the View. 
The view then displays that data and also generates data from click events which is collected by the controller and relayed to the model.

Here's the app on codepen
{% codepen https://codepen.io/vicradon/pen/LYYYoZX %}

## The Top Points
1. The model stores data and has methods for altering data
2. The view displays data and has event listeners which generate data
3. The controller connects the model to the view. It's the channel which the model uses to send data to the view. It's also the channel in which the view sends new data to the model.
Finally started Dev.to on my local
Tags: devto, development, local, hacktoberfest
Published: 2019-10-07 05:11:54

---
title: Finally started Dev.to on my local
published: true
description: My note for starting dev.to on my MacBookPro
tags: dev.to, development, local, hacktoberfest
---

My background: working with Java, NodeJS and Frontend for some years and has no Rails experiences

# Here are my summaries:

- I have to go with https://docs.dev.to/installation/mac/ , would prefer docker but my current project is using Docker version 17 which through error on the line

```
FROM node:8.15.1-alpine AS alpine-ruby-node
```

- It took me an hour to figure out the Postgres role issue with my current OS username.

Here is how to solve:

https://www.codementor.io/engineerapart/getting-started-with-postgresql-on-mac-osx-are8jcopb#3-configuring-postgres

Login into postgres:

```
psql --user postgres --password
```
To list users:

```
postgres=# \du
```

To add a user:

```
postgres=# CREATE ROLE my_current_OS_user WITH LOGIN PASSWORD 'Pa$$w0rd'; 
```

And grant createDB privilege:

```
ALTER ROLE my_current_OS_user CREATEDB
```

- Register Github Oauth

HomePage URL: `http://localhost:3000`

Authorization callback URL: `http://localhost:3000/users/auth/github/callback`
Shout-out chat bot in Python [Live Coding Recap]
Tags: python, twitch, streaming, beginners
Published: 2019-10-07 04:31:11


## Streamed: 10/5 on Twitch

**🚨 Streamer tool alert!** During this live coding session, we wrote a simple shout-out bot that greets fellow Twitch team members when they enter chat. 

It's quick, easy to deploy, and written completely in Python.

⭐ **Star** ⇒ [Project Repository]((http://bit.ly/twitchsob)
💜 **Follow** ⇒ on [Twitch](http://bit.ly/nb9kTwitch) and [GitHub](https://github.com/NinjaBunny9000)
🔴 **Watch** ⇒ Twitch VODs (replays) [part 1](https://www.twitch.tv/videos/490837741) and [part 2](https://www.twitch.tv/videos/490903678)


**Topic(s):** Creating a single-purpose bot for shouting out Twitch team members in chat
**Language(s):** [Python](http://bit.ly/nb9kPython), Javascript
**Tech, Lib(s):** [VSCode](http://bit.ly/vscodenb9k), [Elgato Stream Deck](https://amzn.to/2nwRpuF) (affiliate link), [TwitchIO](https://github.com/TwitchIO/TwitchIO), websockets (SocketIO)

## During the stream we...
✔ walked through the basics of creating a bot with [TwitchIO](https://github.com/TwitchIO/TwitchIO) python library
✔ commented out the overall flow/features we want (in psuedo)
✔ answered viewer questions - lots of good questions this stream! OMG! <3
✔ swapped out psuedo for real code, answering questions from viewers along the way
✔ tested the bot - some typos and silly errors! :grimacing:
✔ GOT IT WORKING! So we worked on documentation for the README.md
✔ pushed to [repo](https://github.com/NinjaBunny9000/TwitchTeamShoutoutBot) once documentation was sorted
✔ made plans for future features (tts shoutouts, start/stop monitoring, etc)
A brief history of Microsoft
Tags: windows, microsoft
Published: 2019-10-07 03:37:59

---
title: A brief history of Microsoft
published: true
description: I will go through a brief history of Microsoft describing where it came from and how it has evolved to today.
tags: windows, Microsoft
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0jy9gt2l6jhkti3e1o9s.jpg
---

{% youtube uRPnYqjHhxc %}

I will go through a brief history of Microsoft describing where it came from and how it has evolved to today.
Faking a computer glitch w/Python & OBS [Live Coding Recap]
Tags: python, javascript, beginners, twitch
Published: 2019-10-07 03:30:26


## Streamed: 10/3 on Twitch

This was SUCH a fun stream! We designed and tested a dramatic *fake* hack/glitch that happens whenever another channel raids us during streams. Such a blast when it all came together at the end!!

⭐ **Star** ⇒ [Project Repository](http://bit.ly/twitchsob)
💜 **Follow** ⇒ on [Twitch](http://bit.ly/nb9kTwitch) and [GitHub](https://github.com/NinjaBunny9000)
🔴 **Watch** ⇒ [Twitch VOD (replay)](https://www.twitch.tv/videos/489922105)

**Topic(s):** Raid Reaction Production Design and Stream Documentation
**Language(s):** [Python](http://bit.ly/nb9kPython), Javascript
**Tech, Lib(s):** [VSCode](http://bit.ly/vscodenb9k), [OBS Studio](https://obsproject.com), [Elgato Stream Deck](https://amzn.to/2nwRpuF) (affiliate link), websockets ([SocketIO](https://flask-socketio.readthedocs.io/en/latest/)), [Flask](https://palletsprojects.com/p/flask/)

## During the stream we...
✔ reviewed some code and helped out viewers with midterm assignments
✔ used websockets to receive RAID events from Streamlabs
✔ got the Flask-served browser page playing a raid alert song
✔ designed a separate scene in OBS to transition to during raids
✔ purchased a glitch transition to "fake" a computer glitch
✔ learned how to override default transitions in OBS
✔ put together a sequence of events that play out during the RAID in OBS
✔ tested the RAID during an actual RAID! <3
How to useCallback()
Tags: react, hooks, performance, cache
Published: 2019-10-06 19:38:08

`React.useCallback()` is a hook that takes a function and a list of dependencies as arguments. If none of the passed dependencies changes, the hook returns memoized, or a cached version of the callback. If at least one of the dependencies changes, it returns a newly created callback.

```javascript
React.useCallback(fn, deps)
```

## Problem

When you are passing a callback to child components, every time the parent component re-renders, it creates a new declared function. And when a child component receives new props, even it has an equality check, it re-renders as well.
Just to remind you, in JavaScript `() => {} === () => {}` or `{} === {}` returns `false`.

**A quick tip:** to check if a component creates new callbacks or other values, you can create a `new Set()` and add values on every render. A `Set()` will add only the unique values:

```jsx
const store = new Set();

function Parent() {
  const someFn = () => {};
  
  store.add(someFn);
  console.log(store);
  
  return(
    <Child callback={someFn} />
  );
}

function Child({ callback }) { ... };
```

In the example above, on every Parent render, you should get a console log of the `Set()` with added functions.
And for each newly created function, JavaScript must allocate some memory. Which is not an issue in the small project, but if you have a massive list to loop and pass the callbacks, this would be the case where you should think about using a `React.useCallback()`.

## Solution

To escape creating new functions every time, we can wrap a function inside `useCallback()` hook and add a list of dependencies. If one of the dependencies in the list changes, the callback will be recreated.

```jsx
function Parent() {
  const memoizedCallback = React.useCallback(() => {}, []);
 
  return(
    <MemoizedChild callback={memoizedCallback} />
  );
}

const MemoizedChild = React.memo(({ callback }) => { ... });
```

In this example, we have a memoized child component. That means, that component checks current and new props, and if they differ, the component re-renders.
But that is not enough if we do not memoize a callback, because a new callback will be created after the parent component re-renders.
By wrapping a function with `React.useCallback(() => {}, [])` and specifying empty dependency list `[]`, component caches function and makes sure it will not be created on the following renders. Which means we will always pass the same function to the child component, and it never re-renders unnecessarily again.
As a rule of thumb you should always specify dependencies, that are used in the callback, for example:
```jsx
React.useCallback(() => {
  setPrice(amount, quantity)
}, [amount, quantity]);
```

## Conclusion

To sum up, `useCallback()` should be used when passing callbacks from the parent component to the child, especially when the child components are optimized for performance. Are memoized or dependant on the equality check, like `shouldComponentUpdate()`. And make sure always to add a list of dependencies, when the function should be recreated.
How to add security headers in response of the react js app
Tags: react, security
Published: 2019-10-07 03:01:09

Hi,

I have a react js application. I want to add some security headers in every response that's being returned from the app. Could you please suggest how to implement this !

NOTE : I am not trying to call any api with headers in request. I want my react app to respond with some security headers in the response

I have asked the same question in [Stackoverflow](https://stackoverflow.com/questions/58233324/how-to-add-http-headers-in-react-js-apps-response) but no luck in getting the answer. 

Can somebody help me to achieve this !

I'm pretty new to react js development.
外部キー制約を付与したデータにより Herokuで db:fixtures:load が落ちてしまう
Tags: heroku, rails, postgres
Published: 2019-10-07 07:29:06

---
title: 外部キー制約を付与したデータにより Herokuで db:fixtures:load が落ちてしまう
published: true
date: 2019-10-07 02:35:07 UTC
tags: Heroku,Ruby on Rails,PostgreSQL
canonical_url: https://kimihito.hatenablog.com/entry/2019/10/07/113507
---

## TL;DR

`ENV['FIXTURES'] = 'hoge,fuga,bar'` と並び順を指定してから投入しているが、あまり良いやり方ではなさそうなので、なにか良い方法があれば教えてください 🙏

## 遭遇した問題

今作っているアプリケーションをHerokuで開発している。 Review Appsで動作を確認したいので、 `db:fixtures:load` を読みだしたところ下記のようなエラーが出た。

```
ActiveRecord::InvalidForeignKey: PG::ForeignKeyViolation: ERROR: insert or update on table "hoge" violates foreign key constraint "fk\_rails\_xxxxx"
```

[Rails](http://d.hatena.ne.jp/keyword/Rails) のバージョンは 5.2.3 。

## 原因

テーブル fuga が [hoge](http://d.hatena.ne.jp/keyword/hoge) に対して外部キー制約を持っていたが、 [hoge](http://d.hatena.ne.jp/keyword/hoge) より先に fuga のデータを作ろうとしてしまいエラーになっているようだった。

[Use `SET CONSTRAINTS` for `disable_referential_integrity` without superuser privileges (take 2)](https://github.com/rails/rails/pull/27636) が[Revertされており](https://github.com/rails/rails/commit/2812694aa65e4d0591e0ea6c5f7d8c97927be7dc)、現状解決策はなさそう？

## やったこと

[この辺を見て](https://github.com/rails/rails/blob/b9ca94caea2ca6a6cc09abaffaad67b447134079/activerecord/lib/active_record/railties/databases.rake#L210-L215)、`ENV['FIXTURES'] = 'hoge,fuga,bar'` と投入順を指定することで対処した。ただこれだと `fixtures/*.yml` の増減に引っ張られてしまうので、微妙だと思っている。

なにか他に良い方法があれば教えて下さい 🙏

## 参考

[Heroku CI with rails fixtures - Stack Overflow](https://stackoverflow.com/questions/43709491/heroku-ci-with-rails-fixtures)
Opensourced my Firefox BookMarks
Tags: learn, python, beginners
Published: 2019-10-07 02:26:10

---
title: Opensourced my Firefox BookMarks
published: true
description: 
tags: learn,python,beginners
---

I recently opensourced my firefox bookmarks that i bookmarked when I learning programming or discovered something new.

I hope you guys can find it useful

[Link to Project](https://github.com/mraza007/useful-bookmarks)
[Hosted on Netlify](https://kind-babbage-78b799.netlify.com/)
Map Reduce in D
Tags: dlang, tutorial, reduce, fold
Published: 2019-10-07 02:23:20

I didn't want to confuse function mapping and dictionaries, so I decided to include reduce.

`map` is a range (list) based function which applies an operation to each element and their result is a range which lazily applies the operation.

I haven't been referencing how other languages apply a solution, but as this started with Python and their list comprehension is an interesting approach to this.

https://www.pythonforbeginners.com/basics/list-comprehensions-in-python

```python
new_range  = [i + i for i in range(5)   if i % 2 == 0]
```

```dlang
import std.range;
auto new_range = iota(5)
                 .filter!(i => i % 2 == 0)
                 .map!(i => i + i);
```

Putting aside the strange name `iota` the structure is similar. Personally I'd argue D is more clear about the operation order.


```dlang
import std.range;
auto new_range = iota(5)
                 .map!(i => i + i)
                 .filter!(i => i % 2 == 0);
```

In the first situation filtering came before the operation, filtering after has no value since two odds make an even. In Python order of operation is a spiral like C function pointers.

***

`reduce` is an operation on a range which produces a single result.

```dlang
import std.algorithm;
import std.range;

assert(
       iota(5).fold!((a, b) => a + b)
       == 1 + 2 + 3 + 4);
```

I realize my example uses `fold` rather than `reduce`. This has many more names, but I chose fold in the example as this provides better argument order in chained expressions.
Flexbox30: Learn Flexbox with 30 Tidbits
Tags: css, webdev, beginners, tutorial
Published: 2019-10-07 02:23:14

Learn Flexbox in 30 days with 30 code tidbits ✨

## Topics

1. Introduction
1. Flex Container & Flex Items
1. Immediate Child Only
1. Flexbox Axes
1. Flexbox Module
1. Parent Properties
1. Display
1. block vs inline
1. flex-direction
1. flex-wrap
1. flex-flow
1. justify-content [row]
1. space-around vs space-evenly
1. justify-content [column]
1. align-items [row]
1. baseline
1. align-items [column]
1. align-content
1. Child Properties
1. order
1. flex-grow
1. flex-grow calculation
1. flex-shrink
1. flex-shrink calculation
1. flex-basis
1. flex-basis vs widths
1. flex
1. align-self
1. Flexbox Properties
1. Flexbox Cheatsheet

![A summary of all 30 flexbox code tidbits](https://thepracticaldev.s3.amazonaws.com/i/prq36s69xfan04a3ah28.png)

🎉 So excited to finally release the entire series. I've been posting these as daily tidbits on my social media. You can now binge and download all 30 tidbits all at once!

**Available FREE:**
- [Read Online](https://www.samanthaming.com/flexbox30/)
- [Read on GitHub](https://github.com/samanthaming/Flexbox30)

---

Say Hello! [Instagram](https://www.instagram.com/samanthaming/) | [Twitter](https://twitter.com/samantha_ming) | [Blog](https://www.samanthaming.com/blog) | [SamanthaMing.com](https://www.samanthaming.com/)
These queens love JSON
Tags: ruby, rails
Published: 2019-10-07 02:17:02

<h1><center>Rails + React + Redux - Pt 7</center></h1>
*********************************************************

While I plan to revisit the previous posts' gists for refactoring- I'll move ahead in the project. I can now seed the database and view the data in cleaned JSON thanks to [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc). I can also start setting up some structure on the front end.

*********************************************************
<h1><center> Let's get started! </center></h1>
*********************************************************

I call the scraping and association methods in db/seeds.rb and run the following commands to get the data.

$ rails db:create && rails db:migrate && rails db:seed 

Then voila! start your engines! We have data to see at localhost:3000/api/v1/

$ rails s 

... is all you need to ensure everything is working to this point. The queens, seasons, and episodes paths will all show their nested associations.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/26yqd9myto5ei6f4jvah.png)

With the backend serving the JSON, a proxy needs to be set inside package.json from within the frontend directory. This will allow for communication between the React and Rails aspects of the project.

I decided to use the api/v1 convention with future versioning in mind. When I run foreman to start both the React and Rails servers, it will serve the Rails server on the 5000 port and the React server on the 5100 port. 

{% gist https://gist.github.com/JaredHarbison/e60a73ccab39c457c3496f22dfeb2bdd %}

In the next post I will start the foundation for [React](https://reactjs.org/), [Redux](https://redux.js.org), and [Thunk](https://www.npmjs.com/package/redux-thunk) on the front end. 

*********************************************************
<h1><center> That's all folks! </center></h1>
Workshops at ARTIFACT
Tags: events, eventsinyourcity, artifactconf
Published: 2019-10-07 00:18:36

---
title: Workshops at ARTIFACT
published: true
description: Summary of the workshop day at the ARTIFACT conference. Presentations, speakers, and notes.
tags: events,eventsinyourcity,artifactconf
canonical_url: https://alvaromontoro.com/blog/67849/workshops-at-artifactconf
cover_image: https://thepracticaldev.s3.amazonaws.com/i/n35uyqpukgn3v1qqwr3h.jpeg
series: artifactconf 2019
---

After two intensive days of presentations, there was a day of workshops. With two options to pick from:

- Designer + Developer Collaboration Workflow, with **[Brad Frost](https://twitter.com/brad_frost)** and **[Dan Mall](https://twitter.com/danmall)**; or
- Design for Developers, with **[Sarah Drasner](https://twitter.com/sarah_edo)**.

Both of them looked really interesting. As a developer liking design, the "Design for Developers" one looked really tempting... but my company was paying for the workshop -lucky me-, and they considered that "Designer + Developer Collaboration" would be more interesting for my role.

## The Workshop

So, off I went to meet Brad and Dan in their workshop... and I must admit, it was an enlightening and entertaining activity.

<figure>
![Brad Frost and Dan Mall at their workshop](https://thepracticaldev.s3.amazonaws.com/i/r4vpilc2is1lryrwqqkc.jpeg)
<figcaption>
Brad Frost and Dan Mall presenting during the workshop (photo by <a href="https://twitter.com/jaxatto">jaxatto</a>)
</figcaption>
</figure>

I don't want to get much into detail of the content in itself (it's their workshop and part of their job, don't want to mess with it). But the day followed this general schedule

1. Presentations
2. Small exercice
3. [Motivational video](https://www.youtube.com/watch?v=ZXsQAXx_ao0) 😉
4. "Theory" section
5. Lunch break
6. Work with partners + "Tutorials"
7. Demos
8. Closing statements and farewells

We worked in pairs of developer-designer, in a small project to put into practice what we had just learned. We created the mini-site "Silly News" with the top daily news. It was fun.

It was also a stimulating experience considering that it is not how we work daily, cooperating in a more active and interactive way with the designer.

## Takeaways

**[Jax](https://twitter.com/jaxatto)** summarizes on her tweet: 

{% twitter 1179436838827765761 %}

The main takeaways of the workshop were:

- Stop thinking in terms of "Developers vs Designers".
- Deliver low fidelity first and fast iterate.
- Communicate: a conversation goes "further" than documentation.
- Designer support your developer (and viceversa).
- Start development since day one.
- Start flexible like clay, and solidify like glass as the project evolves.

## Conclusion

This session marked the end of ARTIFACT 2019. A three-day event with many interesting presentations that lived up to the all-star lineup, and two enriching workshops.

I had a blast during these three days, and can't wait to be part of a conference like this again.
Use a Script to Call It a Day
Tags: script, bash, osascript, productivity
Published: 2023-01-24 15:45:28

---
title: Use a Script to Call It a Day
published: true
date: 2019-10-07 00:00:00 UTC
tags: script, bash, osascript, productivity
canonical_url: https://www.rocky.dev/blog/use-a-script-to-call-it-a-day
---

One of the cons of working from home is deciding when enough is enough. It's all too easy to get sucked into a problem, lose track of time, and let hours slip away.

You bring yourself to close your text editor only to get tempted by unread Slack messages. After too long, you close Slack and find unread emails in your inbox. And on it goes.

This script is a simple solution, it closes all work-related applications at once,

```bash
pgrep com.docker.hyperkit && docker-compose down
osascript -e 'quit app "Docker"'
osascript -e 'quit app "Slack"'
osascript -e 'quit app "Google Chrome"'
osascript -e 'quit app "iTerm"'
```

You can alias it in `~/.zshrc` or `~/.bash_profile` with ```bash
alias down="~/dev/down.sh"` so, at the end of the day, you decide once that you're done and run `down`. The next morning, run `up` and you're ready to go,

`open -a Docker
open -a Slack
open -a "Google Chrome"
osascript -e 'tell application "Google Chrome"
  activate
  open location "https://console.aws.amazon.com"
end tell'
```

If you've created similar scripts, let me know what else you have in yours!
Practical uses for React hooks: simplifying your forms (tutorial)
Tags: react, beginners, javascript, codenewbie
Published: 2019-10-06 23:25:12

Forms are notoriously tedious to create, manage, and validate.

With old school React, you'd have to create classes, and it was challenging to re-use stateful logic.

Thankfully, with custom React hooks, you can reuse all your logic and reduce the amount of lines of code by ~50%!

Here's a straightforward example of how to do form validation with custom hooks!

Please consider subscribing by clicking here if you found this information useful!
[YouTube - Matt Upham](https://www.youtube.com/mattupham?sub_confirmation=1)
{% youtube SXIfnNvYrZE %}
[React Hooks Tutorial (Custom Hooks) | Form Validation made easy](https://youtu.be/SXIfnNvYrZE)

React Hooks are a much more concise way of handling stateful logic, and once you'll learn them, you'll be hooked 😜

If you found this video useful, please consider subscribing to my YouTube Channel! I talk about software & tech, life in Silicon Valley, and self-improvement!

**Subscribe Here**
[YouTube - Matt Upham](https://www.youtube.com/mattupham?sub_confirmation=1)

Thanks for reading!