teleren/devto huggingface dataset:
How We Use Redux & Redux-Observable with Vue
Tags: javascript, webdev, vue, showdev
Published: 2018-11-15 18:46:48

---
title: How We Use Redux & Redux-Observable with Vue
published: true
tags: javascript, webdev, vue, showdev
canonical_url: https://snipcart.com/blog/redux-vue
---

![How We Use Redux & Redux-Observable with Vue (v3.0 journal)](https://snipcart.com/media/203945/redux-vuejs-example-1.jpg)

We often claim caution when it comes to [refactoring a tech stack](https://snipcart.com/blog/startup-tech-stack).

But there always comes a time when it *needs* to get done.

When that happens, you want to pick the right tools:

Unless you’ve got stupid amounts of VC money, you can’t afford a complete refactoring every quarter. 

For our own shopping cart v3.0 rewrite, we picked [Vue.js](https://snipcart.com/blog/progressive-migration-backbone-vuejs-refactoring) and Redux.

Weird mix you say? Not quite! In this post, I’ll show you how and why we strapped Vue.js on top of [Redux](https://redux.js.org/).

More specifically, I’ll cover:

- What are Redux & redux-observable
- Why we chose Redux (over Vuex)
- How we leveraged redux-observable
- How we plugged Vue.js to a reactive store

I’m thrilled to finally share some of our work on this newest version of Snipcart with you guys! 

Let’s start with a bit of context.

## What is that cart v3.0 you’re talking about?

In the last few months, the whole team at Snipcart has been hard at work crafting a new version of our shopping cart for developers.

> [*Read our docs*](https://docs.snipcart.com/getting-started/installation) *to understand how our HTLM/JS-powered cart works.*

The first thing we had to settle on was the goals this revamped cart had to achieve:

- Offer next level checkout & cart template customization.
- Let developers use any stack—it’s been Snipcart’s promise [from the start](https://snipcart.com/blog/first-blog-post-the-pledge).
- Create the most kickass e-commerce development UX on the market.

These pushed us to carefully select our new tech stack.
  

→ Read the full post [here](https://snipcart.com/blog/redux-vue)
What does a mathematician say to a developer?
Tags: introductions
Published: 2018-11-14 22:53:25

---
title: What does a mathematician say to a developer?
published: true
description: First short post about who I am und my first half year as a software
tags: introductions
---

I have been lurking on this website for quite some time. Then, I thought it is time to participate in all this and introduce myself: 

My name is Victor and on this day I have been doing the job as a developer for exactly half a year. Before, I was a student of mathematics. Therefore, I had to learn coding in a professional environment. (Yeah, research can also be professional, but refactoring and tests were a rarity!)

It turns out that I find a lot of fun in what software developers do. They do not only find solutions but they also do it together. And everyday there is so much more to learn! This is when we come back to the starting question:

_What does a mathematician say to a developer?_

In my case, it is mostly: Questions. Questions to my colleagues and supervisors. Questions about coding style, questions about agile (or not so agile) software development. And that is what this site is about, right? Asking questions to get smarter together!

Do you stumble upon mathematics from time to time?
Favorite UI kit for prototyping?
Tags: prototype, design, discuss
Published: 2018-11-14 21:29:38

---
title: Favorite UI kit for prototyping?
published: true
description: We all have a favorite UI kit for quickly getting a prototype
tags: prototype, design, discuss
---

Hey everyone!

I build a lot of prototypes for my own projects and for clients, as a freelancer. Because there often isn't a budget for design, I am forced to use UI/UX kits to build these prototypes. Unfortunately, design is by far my weakest skill so I use a lot of prefab stuff, and I "borrow" a lot from other websites. However, I haven't found a real UI kit that makes prototyping easy and fun.

Which UI/UX framework or kit do you love using, and why?

Thanks!
What is industry experience?
Tags: discuss, help
Published: 2018-11-14 21:28:35

---
title: What is industry experience?
published: true
description: 
tags: discuss, help
cover_image: https://s16315.pcdn.co/wp-content/uploads/2015/12/mobile-experience.jpg
---
This question was prompted by this tweet below

{% twitter 1060949109266374657 %}

Ok this question comes at time where I honestly believe I have some 'experience'.

I've been programming since 2014 which gives me about 3 to 4 years with both android and web development. I've never had a programming job but have had freelance gigs on a couple of sites and I taught java at a local high school on contract.

I believe I have experience...but what type if not for industry?
3rd question, how do devs like me get experience that we can prefix with 'industry'?
What is Constructor in Javascript
Tags: javascript, oop
Published: 2018-11-05 06:15:44

---
title: What is Constructor in Javascript
published: true
description: 
tags: Javascript, OOP
---

In JS world there is a term called the constructor, people like me who have C#/Java background has a lot of confusion when it implements this in a real application. So I have done a small research and came with the following understanding 

![Alt text of image](https://theleaguelady.com/wp-content/uploads/2018/07/dont-believe-everything-you-read.jpg)


```javascript
function jsObject(name){ this.name = name };
// call function
let obj = jsObject("myName");
obj.name;

// VM603:1 Uncaught TypeError: Cannot read property 'name' of undefined
// at <anonymous>:1:3

```
Les't fix this 

```javascript
function jsObject(name){ 
   var myObj = {};
   myObj.name = name;
   return myObj;
};

// call function
let obj = jsObject("myName");
obj.name;

// --> myname

```
works fine, so that is, NO javascript give some cool feature 
 

```javascript

// call function
let obj =  new jsObject("myName");
obj.name;
// --> myname

```

what happened, yes javascript gives some cool stuff to developers.it adds following line at runtime when it is called with new.


```javascript

function jsObject(name){ 
   // var this = {};-> add at run time 
   this.name = name;
   // return this; -> add at run time 
};

```

Now I know constructor function, but feel free to add your comments
[Update v1] Filler game by Robin
Tags: react, game, inspiration, algorhythm
Published: 2018-11-14 21:22:29

Earlier this week I posted about how I got inspired to build this game with react:
{% link darksmile92/how-a-physical-game-table-inspired-my-next-project-6p7 %}

Today I checked in an update.
The new features now include:
- 2 Player mode (switching turn by turn)
- New game button
- Showing statistics (how many % of 50% to win)
- New logo / favicon
- Option: show owner on cell
- Option: show number of cells acquired by color in button suggestion

Here is a [Demo](https://darksmile92.github.io/filler-game-react/) hosted on GitHub:
![Screenshot of demo](https://thepracticaldev.s3.amazonaws.com/i/xlthgcsm5avap7hr3vb8.png)


#### Next up
- Implement CPU opponent
- Implement different solving strategies


{% github DarkSmile92/filler-game-react %}
Why I wear purple lipstick and code skirts
Tags: code, fashion, lipstick
Published: 2018-11-14 21:04:11

---
title: Why I wear purple lipstick and code skirts
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xclz659s8i2b3x5ygwvj.jpg
published: true
description: Using fashion to make programming more inclusive.
tags: code, fashion, lipstick
---

It started when I found a dress with the source code to Doom printed on it. I had to have that dress. I bought it and delighted in answering questions about the dress and the code. Piece by piece I built a wardrobe of code dresses, skirts, leggings, shoes, and t-shirts.

I use fashion to broadcast loudly that I am a woman in tech.

## Using my wardrobe to signal to others

I use this wardrobe to normalize that a woman doesn't have to be in jeans and a black t-shirt to write and understand code. I wear code dresses and skirts when I present to show that it is okay to like dresses and code.  I wear bright lipstick and eyeliner to say that makeup is allowed and it also makes my eyes and lips more visible to those in the back or attending remotely.

I make a point to wear some sort of code related item anytime I attend conferences and Meetups so I can be easily spotted. I answer questions about my earrings and purse every other week. I want people to realize they should not have to be "one of the boys" to be successful in tech, they should be able to be themselves.

## Using my wardrobe as armor for myself

My style has been described as 
> Kicking in the door to announce I'm here and asking "Does anyone have a problem with that?"

and

> Making space for me at the table.

I was often the only woman in a room full of men.  I got used to stares and subtle jabs of "Do you really belong here?"  

I started to wear brightly colored lipstick so people would look me in the face when I was talking.  It also had the benefit of everyone in the office knowing who I was.

When I wore code t-shirts I changed their stares from me being the only woman in the room to "What code is that?".

Fashion gives me the strength to be myself and thrive in tech.
JavaScript `this`: 3 Reasons Why You Find It Hard to Grasp
Tags: javascript, thisrocks, beginners, oop
Published: 2018-11-14 20:26:58

---
title: JavaScript `this`: 3 Reasons Why You Find It Hard to Grasp
published: true
tags: #javascript, #thisrocks, #beginners, #oop
canonical_url: http://jslearner.com/why-javascript-this-is-hard.html
---
![What is this?](https://thepracticaldev.s3.amazonaws.com/i/io6voc0lc4pbvcbtzryl.jpg)

If you are struggling with JavaScript `this`, it's NOT YOUR FAULT! The truth is, it can be a tricky subject. It trips up a lot of people, not just you.

If you're learning JavaScript as your first language, fear not. I've tried to assume as little as possible. You can also get in touch if there is something you believe should be changed or explained in more detail.

If you're coming from another language, you should know that JavaScript `this` has its own way of acting. It is simply not the same as what you're used to. Don't worry, soon you'll have a full grasp of how `this` works.

It's crucial that you have the right mind frame when learning JavaScript `this`. For this reason, I decided to start with the reasons why you might struggle with `this`. Here we go...
##1 - You must first grasp a couple of other JavaScript concepts

You have to know certain JavaScript concepts before you can grasp `this`. Especially when it gets weird - 'coz it does get weird. That's why you'll first learn the basics of JavaScript objects.

As you progress, you'll discover a lot of cool stuff that will help you have a deep grasp of `this`. You will then become a better, more confident developer. You will have skills that will serve you way beyond using `this`.

##2 - You can't know what `this` is just by looking at the code where it's created

This is a big one. When you come across `this` in code, you can only figure out part of what `this` is supposed to be. Why? Because where `this` is created has almost no bearing on what it represents when the code is run. So, don't beat yourself up!

##3 - You are too hard on yourself

Look, being a self-taught developer is no easy task. You should pat yourself on the back for having the courage to even attempt such a feat. With nothing but your sheer guts, you're learning one of the most valuable skills of the modern age. Think about it - if it were easy, everyone would be doing it.

Some JavaScript concepts are tricky. After all, the language was created in just a week! Yet, we have to leave with all the design decisions, good and bad. The point is, be patient with yourself.

It's like riding a bicycle - you'll fall and get bruised a few times. But, once you've got it, you have it for the rest of your life. You will be a proud master of a skill that will have a direct impact on your career.

So, take your time. Take a break after each section. Reward yourself for each bit of progress you make, no matter how tiny it may seem. With that in mind, let's start grasping `this` by looking at [JavaScript objects](http://jslearner.com/javascript-this-objects.html)...
But first let me take a look to the documentation
Tags: pyopengl, documentation, productivity
Published: 2018-11-14 20:19:23

---
title: But first let me take a look to the documentation
published: true
description: An horror story about how to (not) waste 2 weeks of work. 
tags: #pyopengl, #documentation, #productivity
cover_image: https://www.catster.com/wp-content/uploads/2016/03/cat-reads-book.jpg
---
This is an horror story about how to (not) waste 2 weeks of work. 

First lemme give you a little bit of context.

I was working on a project where the client asked to create a report that contains images of a certain process. My tech lead asked me to take charge of generating the images, at that time I chose pyopengl (because python was already being used as a programming language in the project) to implement the generation of images in 2D and 3D, mainly because there were already calculated values ​​for the orthogonal camera in Threejs that I would then use in the pyopengl camera.

The process of capturing the images was as follows, first a pygame window is created and then it is drawn on that window to then make a screeshot of it.

So far so good, on my local computer worked well but to try on the server the thing did not work (as I suspected because the server does not have a graphical interface that allows you to create a window to make a capture of that window and save it).

The nightmare starts from here, we looked for a graphics library that allows headless rendering or offscreen rendering for about 2 weeks. First we tried (me and Daniel, the intern that is collaborating in the project) the open3d python package which was a complete disaster because it does not allow to set the camera normally like any graphics library (or maybe it was my fault and I did not find the way), we needed a camera that allows to set the lookup vector, the position vector and the up vector of the camera.

Then, I do not know why, I decided to read the pyopengl documentation and said that it allows headless rendering using the osmesa library (it was not quite explicit though), wait what, it was a facepalm moment combined with a blow mind moment.

After reading that I think it took an hour for Daniel and me to implement and adapt that idea to our code.

So I'll leave with this: *Read the documentation of the technology you are already using.*
You're using an EditorConfig right?
Tags: csharp, coding, formatting, programming
Published: 2018-11-14 19:07:12

---
title: You're using an EditorConfig right?
published: true
description: It's simple to start using an EditorConfig today!
tags: #csharp, #coding, #formatting, #programming
---

For the most part I code in two different language. C# and go. While I like them both for different reasons the one thing I miss from go is the auto formatting. I know arguments exist for both sides but I find a code base that follows the same rules throughout to be much easier to read. When it happens automatically then I don't have to worry about it and I can focus on coding.

Without an auto-formatter keeping everyone on the same page isn't easy. Maybe you think a one line if statement should have brackets (it should). If someone creates a pull request without brackets then it's going to have to be changed.

If only there was some way we could manage this... OH WAIT! [EditorConfig](https://editorconfig.org/)!

Using an EditorConfig file is so easy! Once setup, Visual Studio will make suggestions right in the file with those squiggles we all love so much. It won't stop the compiler but I don't know a programmer that can ignore those red lines. Also, you can make it as strict as you want. There's a ton of flexibility.

# Get it going

There a couple simple ways to set it up. The fastest is just copying someone else's. It's a great starting point, if you can live with their choices. Like this one [from Roslyn](https://github.com/dotnet/roslyn/blob/master/.editorconfig). But, it's a little strict too on the variable names for my taste.

The Intellicode plugin from Microsoft will automatically create one right from your code. It tries to determine your style. From there you can tweak what it got wrong or what you want to change going forward.

![Adding EditorConfig from Intellicode ](https://i.imgur.com/XhuPZ8k.png)

However, if your code base is all over the place then that's not the best option.

# Tweaking

Anyway, if you want to adjust the file it's quite easy. The [documentation is really good](https://docs.microsoft.com/en-us/visualstudio/ide/create-portable-custom-editor-options?view=vs-2017), as long as you land on the [right page](https://docs.microsoft.com/en-us/visualstudio/ide/editorconfig-code-style-settings-reference?view=vs-2017).

Like I said you can make it as strict as you want. The file allows you to configure how it shows up in Visual Studio. You can set it to show as a warning, error, or suggestion. Pretty handy for those rules that should **never** be broken. It's also very granular and it seems like there's a setting for everything!

I want to remind you that it won't stop an especially stubborn person from compiling. But I think it's enough for most, that are acting on good faith. I've found it especially handy at reminding people of our formatting.

I hope you can see how useful this tool is at keeping a code base formatted. It's really easy to setup and Visual Studio will use it automatically. Making it a no brainer!
Holographic Effect on Web
Tags: deviceorientation, holographiceffect, css
Published: 2018-11-14 18:59:19

---
title: Holographic Effect on Web
published: true
description: Be mesmerised or confused by my attempt on creating a holographic effect
tags: 
- deviceOrientation
- holographic effect
- CSS
---
# [Demo](https://linxea.github.io/holographic-effect/)

## HOLOGRAPHIC EFFECT IS AWESOME,
so I'm going to make my own version of holographic effect today.

{% youtube Ep6tvUKQ9MQ %}

Demo Code below, open in [mobile browser](https://linxea.github.io/holographic-effect/) to see my little achievement.
{% codepen https://codepen.io/toomuchome/pen/VVpOOB %}

## css
Google and colour-pick a random holographic picture to get the lovely colours for our `linear-gradient`. Set `background-size` to `200%` so we can move the colours around later on.
``` css
#holographic {
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(
        to right,
        rgb(194, 255, 182),
        rgb(255, 163, 182),
        rgb(221, 169, 255),
        rgb(162, 209, 255)
    );
    background-size: 200%;
}
```

## [Detecting Device Orientation](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)
I use `alpha` and set the maximum `background-position` to be `100%` so that the `linear-gradient` will not repeat from the start. Everyone should play with device orientation events, they're freaking fun.

``` js
window.addEventListener("deviceorientation", handleOrientation, true);
      function handleOrientation(event) {
        const z = event.alpha; // rotation degrees from 0 to 360

        const holographicElement = document.getElementById("holographic");
        holographicElement.style.backgroundPosition =
          Math.min(Math.abs(z), 100) + "%";
}
```

## Feedback
It kinnnndda works, I think we can find better calculation to make it smoother and less buggy. But for now, within the time limit I set for myself, I'm prettty satisfied with the slight holographic effect achieved by rigorously rotating or moving my phone. :> 



YES I MADE A VIDEO WITHIN 2 FREAKING HOURS. GIVE ME A CLAP.
[FOLLOW ME](https://twitter.com/linxea_) AND SUBSCRIBE TO MY [YOUTUBE CHANNEL](https://www.youtube.com/channel/UCA6sSSOlSJiQY2o10QF5KQw?view_as=subscriber). 
CLICK HERE AND CLICK THERE AND CLICK EVERYWHERE.
How Do You Drive Attention and Traffic?
Tags: discuss
Published: 2018-11-14 18:54:53

---
title: How Do You Drive Attention and Traffic?
published: true
description: Getting people to care about your products/services
tags: #discuss    
---

I was looking back through my comments on several threads and found that, above all else, I complain about exposure. Like a lot. Seeing as I find this annoying about me, I have decided simply to come out and ask the community so that I can stop vaguely dancing around it in comments to other people's stuff.

So, how is it that you more experienced folks get attention to your products/services? I will admit 100% that I am ***not*** business savvy in any way, shape, or form. But I would like to be. Being an entrepreneur has always interested me but I find I am much better and making things that selling them. I think most developers have this problem. So how do you guys either get traffic to or generate hype about, your software projects or businesses? Whether you build websites, apps, management software, dev tools, whatever. What is it that has worked for you in the past to generate traffic and hype, and what hasn't worked?