teleren/devto huggingface dataset:
Is One Source of Truth just a fancy name for Global Variables?
Tags: oop, reactnative, mobx, redux
Published: 2018-11-16 03:43:55

---
title: Is One Source of Truth just a fancy name for Global Variables?
published: true
description: OO programmer trying to understand redux / mobx
tags: #OOP #ReactNative #mobx #redux
---

I've created very large scale and extremely robust applications using object oriented programming. OO is a good way to modularize code and insulate it from other code, so things stay inside their design.

Now I am working on a React Native app, and while the view system is really good, the global state thing puzzles me. 

[Naive] opinions:
- One source of truth philosophy is just global variables.

- The problems that redux and mobx solve are ingenious ways of dealing with the limitations of web development. These problems do not exist in native OO programming and the solutions to them are therefore irrelevant. 

These are statements to discuss - I'd particularly like to hear counterpoints. I want it to make sense! I am happy to change my opinions if more aligned ones come along. As Groucho Marx said "I have my principles, and if you don't like them I have others!"

One source of truth seems to be the discovery, by web programmers, of global variables. Global variables are known to make code error prone, brittle, hard to debug, hard to maintain, and generally make a mess of things. If you want to get fired on your first day of the job as an OO programmer, introduce a bunch of static globals into the code base.

I understand why this happened - web programming has its own set of constraints thanks to a runtime environment that was never designed for apps, yet is used for apps. So these things had to be created to deal with it, and to get anything done. It's an amazingly elaborate and innovative way to get around these constraints.

But now it's creeping back into native development in React Native. The vast majority of problems that are solved by redux and mobx don't exist in native apps. What remains is a global state management system.

In any OO program I've worked on, we could have done that. We could have created a God-State object, and run all state through it.

The reason nobody would ever do that is that it's a very poor design. It won't stand the test of time, it'll be buggy, it'll require every coder to know everything about every corner of the application, and all the other reasons we do not use global variables. 

You do not want one massive, complex object where changes to it could potentially break any part of your app. It's the last thing you want and it's the reason why first modular and later object oriented programming were invented to begin with.
Learning styles and open-sourcing notes
Tags: beginners, javascript, python
Published: 2018-11-16 03:25:18

---
title: Learning styles and open-sourcing notes
published: true
description: I’m open sourcing my notes!
tags: beginner, JavaScript, python
---

In June, I decided to sell my stake in the coffee shop I owned to pursue something else. One of our shops was in the [Little Rock Tech Park](https://www.lrtpa.com/) and I got to know some of the entrepreneurs and tech folks in the building. Over the year working at that location I decided tech was an intriguing next step for me. So I quit(!) and started learning to code. 
Over the next several weeks I also got a job at one of the tech companies in the building, just doing anything and everything they needed. (I’m still there actually! [Vocool](vocool.co) is a great place to work!)

One of my coworkers is a really talented Software Engineer and in addition to him answering my endless silly questions about how things work, we also talk a lot about learning styles. Because when you begin learning to code there are so many routes you can take. You can go to a university or take a MOOC, you can go the [freecodecamp](freecodecamp.org) route or try another online service, you can enroll in a boot camp, or even just watch YouTube videos! Point being, there are several ways to learn, but at the end of the day you may need some help figuring out how you **actually learn**. I know it took me a few classes before I found my sweet-spot. And honestly one day things did start making more sense. 

I am an immersive learner. I don’t just take the class, do my homework and move on. I surround myself with as many sources of information as possible even though I don’t understand. For example, I said “kubernetes” out loud before I had ever heard anyone else say it, that was pretty funny. 

Here’s the deal. I love to take notes, a lot of notes, and I’ve always been a bit of a stickler about formatting them. So now that I understand how markdown works (go me!), I’m going to take my notes with it and then post them for all to see. I’ve started a [GitHub repo](https://github.com/pickleat/notes) with mine and I’m going to go back and format my notes from my first few classes and post any future classes there as well. A great reference place for me and who knows maybe someone else will find them useful.

So how do you learn best? Is there any particular practice you find useful to retain information?
Indonesian Startup - CIAYO Corp
Tags: ciayo, ciayocorp, ciayocomics
Published: 2018-11-16 02:40:34

---
title: Indonesian Startup - CIAYO Corp
published: true
description: A holding company of CIAYO Comics, CIAYO Games, CIAYO Stream, Chips & Co & CIAYO Blog.
tags: ciayo, ciayocorp, ciayocomics
---

![CIAYO Corp](https://thepracticaldev.s3.amazonaws.com/i/3r0cno04j2fh4yhvgbc5.jpg)

In this era of ever-changing technological advances, one who maneuvers in it quickly is the one who will thrive.

The rise of digital-driven marketing and development endeavors brings new perspective towards the business landscape, even the creative industry is now changing. It changes for the better.

As a company, we want to make sure your business has a partner that knows the playing field, be it through advertising, social media, development, branding, and digital activation strategies, all done through relevant channels that grabs your target market to the core. We want to make sure that they you will be remembered in a striking way, without compromise. Through the youthful minds of our professionals and practitioners, we want to give a fresh outlook on every solution we give.

We put digital first.
We are [CIAYO Corp](https://facebook.com/ciayocorp)

The known company's products are:
- [CIAYO Comics](https://www.ciayo.com)
- [CIAYO Games](https://games.ciayo.com)
- [CIAYO Blog](https://blog.ciayo.com)
- [CIAYO Stream](https://stream.ciayo.com)
- [CHIPS & Co](https://chips.ciayo.com)
- [CIAYO Comics Rewards](https://rewards.ciayo.com)

We are currently hiring possible frontend developers:
![Javascript Developer](https://thepracticaldev.s3.amazonaws.com/i/lpf1xg0jlw9pjb2iakxc.png)

![Web Designer](https://thepracticaldev.s3.amazonaws.com/i/dwj2fdoc2cyob37c8mmu.png)

![React Developer](https://thepracticaldev.s3.amazonaws.com/i/zsnk5c77xo1e7h9xjooj.png)

Send the CV and portfolios to join@ciayo.com
Fill in the subject with: *Frontend Developer*
What is Headless WordPress
Tags: headlesswordpress, wordpress, cms
Published: 2018-11-16 02:15:56

---
title: What is Headless WordPress
published: true
description: 
tags: Headless WordPress, WordPress, CMS
---
When first learning website development I was introduced to WordPress and was intrigued by the simplicity of creating highly functional websites that look great in a matter of hours.  Now most of us here on Dev won't consider WordPress development as true "website Development." But I'm here to say that you can use WordPress in all kinds of new ways.

##Headless WordPress
Headless WordPress is a way you can use the back-end database 
of WordPress without the client end or front facing WordPress. Site editors will still use the WordPress editor and Dashboard to create pages, posts, etc. 

##REST API
connect via WordPress REST API for external outputs. Headless WordPress gives you the power of a CMS without all the additional scripts, files. This allows you to make lightweight, high performance pages.

Headless WordPress allows us developers to use newer technology such as React, Angular or Vue for the front end.  The REST API will allow WordPress to send and receive JSON objects via a unique REST API URL.


##The Down Side
One of the disadvantages of using headless WordPress is that plugins that do something on the front end such as Gravity Forms or WooCommerce won't work as usual. So you'll need another way to use these on the front-end of the site. 

Headless WordPress is a viable option going forward to build future-proof your application with the ability to use newer tech.  Also the benefits of the increase speed, quality and performance of the site make headless WordPress a definite win for more complex UI/UX.
Changelog: Add GitLab link to your profile
Tags: changelog, meta
Published: 2018-11-16 01:42:56

---
title: Changelog: Add GitLab link to your profile
published: true
description: You can now add GitLab link to your DEV profile!
tags: changelog,meta
---
You can now put a link to GitLab profile on your DEV profile!

![GitLab link on profile](https://thepracticaldev.s3.amazonaws.com/i/f3a808x10yrozfp7g6p0.png)

Please visit [your settings](https://dev.to/settings/profile) to add the URL.
Journey to a Full Stack Developer - ep. 2
Tags: codingbootcamp, fullstack, lifejourney, socketio
Published: 2018-11-16 01:31:55

---
title: Journey to a Full Stack Developer - ep. 2
published: true
description: Socket.io
tags: coding-boot-camp, full-stack, life-journey, socket.io
---

This week, we learned about how to make an application that talks in real time. The technology used here is called socket.io. It is widely used by Facebook, Instagram, Youtube, Google Docs. All these websites (or applications) have real time updates that pop up. This may seem as if it is built in but actually, there are some coding and a package that have to be installed in order to make it function this way.

Socket.io has to be run on your the server (back end). Socket.io does not interact directly to your database, such as Mongo or mySQL, it is rather a way to pass and render data to the front-end. As such all your ajax calls are still required.

To set up to use socket.io, in your js server file, make sure you have:
```javascript
const express = require("express");
const app = express();
//http package lets you run server without Express, socket.io requires more control that is provided with this package
const server = require("http").createServer(app);
const io = require("socket.io")(server);


require("./sockets/todolist-sockets")(io);
```
As you can see, all we added is 2 lines to set it up. In socket.io, we have two main commands:

1. Emit - this is just a notice that tells the server there is new data, along with the new data
2. On - this is basically an event listener that listens for the specific "Emit", then performs a script, it will often be to render the new data to the user.

Next week we will cover the code fully so you can implement it in your app. As always, please let me know any comments I will be glad to discuss with you.
Similarities of Sequelize.js and Mongoose.js
Tags: mern, orm, sequelizejs, mongoosejs
Published: 2018-11-16 01:07:21

---
title: Similarities of Sequelize.js and Mongoose.js
published: true
description: Summarizing the many similarities of sequelize and mongoose as an ORM
tags: MERN, ORM, Sequelize.js, Mongoose.js
---

Choosing the right ORM to play nice with your database is important. It can save you tons of effort when trying to persist your data correctly and efficiently. With the emergence of NoSql databases like MongoDB, popular ORMs like Mongoose helps bridge the gap between your frontend and backend data while traditional relational databases like MySql make great use of Sequelize.

Although MySql and MongoDB are very different databases, the ORMs that support them by creating, finding, updating and deleting data are very similar if not the same.

Here are some ways they look the very similar.

For finding or selecting data, Mongoose and Sequelize both use `.find()` functions. To return everything in the table Mongoose uses `.find({})` while Sequelize uses `.findAll({})`. To find by the primary key or the id, Mongoose uses `.findById()` and Sequelize uses `.findByPk()`.


For creating documents or rows, Mongoose and Sequelize both uses the same `.create()` function to either generate new documents or add new rows to the table. Both have functions to send multiple inserts into their respective databases via `.bulkWrite()` for Mongoose and `.bulkCreate()` for Sequelize. Mongoose also have addition ways to create collections via `.createCollection()`.


To update data, both ORMs provide a `.update()` function with a slight difference where Sequelize declares it's own `.upsert()` (insert instead if can't find anything to update) function while in Mongoose, an option can be specified on `.update()`. Mongoose in turn also have several variety of update functions like `.updateMany()` and `.updateOne()`.

And finally, to delete things, Sequelize offer the mighty `.destroy()` function while Mongoose uses `.delete()`(originally also `.destroy()`). Mongoose can also `.deleteOne()` and `.deleteMany()`.
What Is Dependency Injection?
Tags: oop, dependencyinjection, softwaredesign, cleancode
Published: 2020-09-01 11:14:32

---
title: What Is Dependency Injection?
published: true
date: 2018-11-16 00:00:00 UTC
tags: 
canonical_url: https://ellehallal.dev/blog/2018/12/2018-12-30-what-is-dependency-injection/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/938doolmcwac3qmv8izj.png
tags: #oop, #dependencyinjection, #softwaredesign, #cleancode
---
<center><h3>Originally posted at <a href="https://ellehallal.dev" target="_blank">ellehallal.dev</a>👩🏽‍💻</h3></center>

---
This is a quick blog on how I've used dependency injection to improve the design of my [JavaScript Tic Tac Toe game](https://github.com/ellehallal/js-tic-tac-toe/).

In the example below, when the `Game` class is initialised, instances of the `Board` and `Player` classes are also created.

```ruby
class Game {
  constructor() {
    this.board = new Board();
    this.player1 = new HumanPlayer();
    this.player2 = new HumanPlayer();
  }
}
```

If we wanted to add a new type of player (`ComputerPlayer`) as an option in our game, the above code would make it difficult to do so. This is because the player types are "hardcoded" in the `Game`'s constructor. This is where dependency injection comes in.

* * *

## What Is It?

> In software engineering, dependency injection is a technique whereby one object (or static method) supplies the dependencies of another object. 
— Wikipedia

* * *

Let's apply this to our example. Instead of "hard coding" the classes to be initialised inside of `Game`'s constructor, we can pass them in.

```ruby
class Game {
  constructor(board, player1, player2) {
    this.board = board;
    this.player1 = player1;
    this.player2 = player2;
  }
}

```

When we initialise a new instance of `Game`, we can pass in our arguments.

```ruby

const board = new Board(['o', 'x', 'x', 'x', 'o', 'o', 'o', 'x', 'x'])
const humanPlayer = new HumanPlayer();
const computerPlayer = new ComputerPlayer();
const game = new Game(board, humanPlayer, computerPlayer)
```

As a result, this improves the flexibility of which dependents we can use with `Game`. For example, now we can initialise the class with two human players, or two computer players, or one of each!

* * *

- [JavaScript Tic Tac Toe Repo on Github](https://github.com/ellehallal/js-tic-tac-toe)
- [Tic Tac Toe on Heroku](http://this-tic-tac-toe.herokuapp.com/)
TIL: Stylesheets do not only block rendering but also JavaScript execution
Tags: javascript, css
Published: 2018-11-18 20:07:33

---
title: TIL: Stylesheets do not only block rendering but also JavaScript execution
published: true
tags: javascript, css
canonical_url: https://www.stefanjudis.com/today-i-learned/stylesheets-do-not-only-block-rendering-but-also-javascript-execution/
---

Today I learned that when you have the following snippet...

```html
<link rel="stylesheet" href="app.css" />

<script>
  var script = document.createElement('script');
  script.src = "analytics.js";
  document.getElementsByTagName('head')[0].appendChild(script);
</script>
```

... the inline JavaScript code snippet won't be executed before the stylesheet is loaded. When you think about that, this makes a lot of sense because it may be that the JavaScript will access elements and any style-related values. I never thought about it, though.

All kudos to [Harry Roberts](https://twitter.com/csswizardry) who described this behavior in [an excellent article](https://csswizardry.com/2018/11/css-and-network-performance/#dont-place-link-relstylesheet--before-async-snippets). Thanks Harry!
Cheaper, Smaller Raspberry Pi 3 Announced
Tags: raspberrypi, hardware, smarthome, news
Published: 2018-11-15 23:15:56

## Announcement from [Raspberry Pi blog](https://www.raspberrypi.org/blog/new-product-raspberry-pi-3-model-a/)

> TL;DR: you can now get the 1.4GHz clock speed, 5GHz wireless networking and improved thermals of Raspberry Pi 3B+ in a smaller form factor, and at the smaller price of $25. Meet the Raspberry Pi 3 Model A+.

{% youtube _9ksicvynAE %}
What is Object?
Published: 2018-11-15 21:27:30

---
title: What is Object?
published: true
description: understanding of an object
tags: 
---

While learning JavaScript, an object is something you will encounter the most and in the beginning. When we first learn about object, it seems to be really simple and easy. The object is undoubtedly easy to use in the begining, but as you learn more and more about object it is not that simple. In simple definition, an object is a data with key and value pair. 

Object Example:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/51omyjriepp6lhxq4pp7.PNG)

Example Outcome:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/mgapmjb4vtejt706sn2o.PNG)

From looking at this example, object can be thought of as a compile of datas on a set object. That is also true, objects can be used to set datas and point out a information of a object. This would be one of the many ways to point out key or values of an object.

Object point out example:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/jxr9czmf0ignn3r443of.PNG)

Example Outcome:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/y73rv1vpib7jpkrqv3rd.PNG)

In this example, we are pointing out each key and values by using Object.keys() and Object.values(). These methods separate each key and values as an array. With the help of forloop, we could display each of the key and values separately. 

But as we learn more about objects, we can see it is not just a simple key-value pair datas. Objects can be used for OOP(Object Oriented Programming). As we know, everything(most, might not be all, not sure) in the world is an object. Objects have properties that we would not be thinking of it simultaneously, but we would be aware of. For example, we have a can, to us this is just an object to contain other objects for many purpose, but if we think about it deeply, it can have many properties that describes this object. How solid is the can? What material is the can made of? what color is the can? what does it represent? Those are few of the many properties a single can has! With these properties, we are able to create a real object virtually. I will be talking more about OOP and will have more examples in next blog!
Game Off 2018 (6)
Tags: lua, gamedev, gameoff2018, pixelart
Published: 2018-11-15 21:05:15

---
title: Game Off 2018 (6)
published: true
description: The hybrid mecanics!
tags: lua, gamedev, gameoff2018, pixelart
---

Hello!
This is new devlog! \o/
So this last days I've add the hybrid mecanics and correct some bugs I havn't see before.

This is a long gif to see that!
![World](https://thepracticaldev.s3.amazonaws.com/i/nehu85p9wweu2755v3tp.gif)

And today I've made the annoncement of my big project! It's a advent callendar on PICO-8! If you want to see more, ajust visit [here](https://pico8-advent.tumblr.com/post/180041304556/welcome).

Thanks for your comment and have a nice day!
webdriverIO tips: finding your errors when using waitUntil
Tags: javascript, webdriverio, webdev, testing
Published: 2018-11-15 19:59:55

---
title: webdriverIO tips: finding your errors when using waitUntil
published: true
description: If you're loading a page and want to make sure that some elements are showing up before advancing, you'd be inclined to use `browser.waitUntil()`. While it does do the job, it holds onto the errors until the test times out.
tags: javascript, webdriverio, webdev, testing
canonical_url: https://www.intricatecloud.io/2018/11/webdriverio-tips-finding-your-errors-when-using-waituntil/
---

If you're loading a page and want to make sure that some elements are showing up before advancing, you'd be inclined to use `browser.waitUntil()`. While it does do the job, it holds onto the errors until the test times out.

In this example, I'd like to use `waitUntil` to check that multiple elements are visible
```
browser.waitUntil(function() {
  return doesNotExist.$$('#elem-1').isVisible() 
    && browser.$$('#elem-2').isVisible()
})
```
Here's what I see when I run this inside a test:
```
☁  wdio-tips  wdio

F

0 passing (15.30s)
1 failing

1) a testsuite1 runs:
Failed: Promise was rejected with the following reason: doesNotExist is not defined
running firefox
error properties: Object({ details: undefined, type: 'WaitUntilTimeoutError', shotTaken: true })
Error: Promise was rejected with the following reason: doesNotExist is not defined
    at waitUntil(<Function>) - index.js:312:3
```
The key thing to notice here is the test time of 15.3 seconds before it gave up with an error. `waitUntil` runs your function on an interval (default 500ms) for a total 10s timeout period. So that means that the function has run 20 times during those 10 seconds, but you only see the error message at the very end once it times out. 

The annoying part about this is the amount of time it takes to get the feedback, but once you see the error message, you can fix it and double check the rest of it for syntax errors so that you don't spend all your time waiting 10s for that feedback. I think this is just the catch with using `browser.waitUntil` using their synchronous API.

---
Last week, I started working on integrating a test suite previously built using Nightwatch, and making it work with webdriverIO. While I love all of webdriverIO’s features like synchronous code when using their test runner and a REPL, there were a few things that I’d like to share which were a little hard to find in the docs or on a quick search.

In case you missed it... Each day this week, I've been posting one thing I've learned while setting up webdriverIO. Check out my previous posts here:

- [Using $$.(selector) vs browser.elements(selector)](https://www.intricatecloud.io/2018/11/webdriverio-tips-using-selector-vs-browser-elementsselector/)
- [Using browser.debug() to help debug your tests](https://www.intricatecloud.io/2018/11/webdriverio-tips-using-browser-debug-to-help-debug-your-tests/)
- [Get text from a list of items](https://www.intricatecloud.io/2018/11/webdriverio-tips-get-text-from-a-list-of-items/)