teleren/devto huggingface dataset:
Redux setup structure
Tags: react, redux, javascript
Published: 2020-02-09 16:42:58

Hi all,

I have been using redux for a while and one thing I really like about it is that everybody has a different approach to how to use it.

Because of this, I feel that there should be more shared knowledge about how to structure a Redux Store.

On this topic, I have made a medium page to gather all of the different practices used by developers.
You can find it here: https://medium.com/@angeloiacoella3/redux-setup-b5210eb3948b

If you want to add anything to the practices already in the documents, just write down here, or in the medium page comment section.

Thank you so much for your support.
Customizing Qiscus Multichannel Customer Service Chat Widget Position
Tags: multichannel, qiscus, javascript
Published: 2020-02-09 16:17:16

In this part 2 of the series. We'll try to move the position of Qiscus Widget instead of using the default position. It's actually easy to do since we only need to add our own custom CSS for it.

You can customize the widget position by following this steps:
- Installed the widget on your page
- Add this extra CSS lines inside the `<head>...</head>` section of your page
```html
//ADD CSS STYLE TO MODIFY POSITION
<style>
.qismo-extra {
 left: 42px;
 right: auto;
}
.qcw-cs-container, .qcw-container {
 left: 42px;
 right: auto;
 align-items: flex-start;
}
.qcw-cs-wrapper, .qcw-chat-wrapper {
  left: 42px;
  right: auto;
}
.start-new-chat-container {
 left: 42px;
 right: auto;
}
</style>

```
- The default styles looks like this:
![default widget style](https://support.qiscus.com/hc/article_attachments/360045721773/Screen_Shot_2019-08-29_at_4.04.47_PM.png)
- After we add our extra CSS it'll turn out like this:
![Modified widget position](https://support.qiscus.com/hc/article_attachments/360044859594/Screen_Shot_2019-08-29_at_4.04.29_PM.png)

If you're interested in a more detailed explanation, you can check this interactive [screencast](https://scrimba.com/c/cpDkZnhd)
Implementing Multichannel Customer Service Chat Widget
Tags: javascript, chatsdk, qiscus, frontend
Published: 2020-02-09 16:10:33

Hi everyone, in this web series I'll guide you to easily implement a simple Multichannel Customer Service Chat widget powered by [Qiscus](https://www.qiscus.com) and also modified it to suit our requirements.

In this first part, before I can show you how you can implement the widget, you need to follow these steps first.
- Register for Multichannel Chat at [Qiscus](https://www.qiscus.com).
- Sign in to your Multichannel dashboard then navigate to the Integration page. 
- Make sure the `Qiscus Widget` channel is toggled on
- Open your web page's HTML that you want to have a chat widget installed on your favorite editor then copy and paste the code snippet on the page. It'll be something like this
```html
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var s,t; s = document.createElement('script'); s.type = 'text/javascript';
        s.src = 'https://s3-ap-southeast-1.amazonaws.com/qiscus-sdk/public/qismo/qismo-v2.js'; s.async = true;
        s.onload = s.onreadystatechange = function() { new Qismo("your-own-app-id"); }
        t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
    });
</script>
```
- That's it, now you a have a working multichannel cs chat widget.


For more detailed explanation you can check this [documentation](https://documentation.qiscus.com/multichannel-customer-service/getting-started)
What is after being a senior developer?
Tags: discuss, career, help
Published: 2020-02-09 16:05:41

---
title: What is after being a senior developer?
published: true
description: After being a developer for over 14 years feeling like reached a glass ceiling in career. Not sure what's next and need some advice or insights.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mrwinwf57vw4w4u3zbnb.jpg
tags: #discuss #career #help
---

Photo by [Sara Kurfeß](https://unsplash.com/@stereophototyp) on [Unsplash](https://unsplash.com/)

I have been doing web development for the last... around 14 years. Have worked with a variety of technologies, companies, projects. 

Last few years have been feeling that have reached some glass ceiling in being a developer and wanted to give it a go in more leadership position which I had a chance to do. Of course the challenges where different and at some point I have reverted back to being a developer as that is known and comfortable.

However now that I am back in developer shoes realise that I want to have a wider impact than just an individual contributor and to a degree all development works feels very much the same.

What was your path after being senior developer? Tech lead? Development manager? Head of engineering? Tell me about it and how you got there. Also any advice is appreciated.

I love tech, good practices and thing that makes me the happiest is when the teams work well together, achieving goals, shipping features, support and perform well together.

I need to think about some next steps in my career and feeling a little lost.
Google Summer of Code Data Scrapped
Tags: webdev, github, javascript, beginners
Published: 2020-02-09 16:02:53

Recently, I was searching for organizations that take part in the Google Summer Of Code every year. After searching for an hour, I got confused which organization came in which year and what are the possibilities that it will be selected again.

So I thought of getting raw data, so I scrapped the GSOC archive and extracted all the organization that came in 

- [2009](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2009)
- [2010](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2010)
- [2011](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2011)
- [2012](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2012)
- [2013](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2013)
- [2014](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2014)
- [2015](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2015)
- [2016](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2016)
- [2017](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2017)
- [2018](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2018)
- [2019](https://github.com/realabbas/gsoc-dataset/tree/master/gsoc-2019)

![Gsoc](https://dev-to-uploads.s3.amazonaws.com/i/l132cl1fbl7birqd1o3n.png)

Ah! Well, this raw data can be used for plotting a graph or predicting the probability of selection of previous organizations or many other cool kinds of stuff.

If you want to contribute, you can visit the [repo](https://github.com/realabbas/gsoc-dataset) ⛈ 🌩
Two Projects That Helped Me Get My First Dev Job
Tags: react, node, styledcomponents, cssinjs
Published: 2020-02-09 16:00:03

---
title: Two Projects That Helped Me Get My First Dev Job
published: true
description: projects that helped me land my first dev job.
tags: react, node.js, styled-components, cssinjs
---

#RemoteInterns
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cnejou22d4ect7rmzvl4.png)
###Stack:
Frontend: React.js, Redux, & Styled-Components
Backend: MongoDB & Node.js

#TryAdora
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bxnoxl14h2g8apz9m3tc.png)
###Stack:
Frontend: React.js, & Redux
Backend: MongoDB & Node.js

###What I Learned
These projects taught me so much. It was the first time I built full-stack apps on my own. Throughout the projects I learned the importance of reading documentation. For example, when I started on RemoteInterns I had no idea how I was going to scrape sites like Angel.co and LinkedIn. Along the way I faced challenges that I felt were impossible for me a beginner to solve. One particular challenge that gave me immense happiness when I solved was figuring out the search mechanism the site was going to use. Another important thing I learned was that the more you practice the better you get. I know you hear this all the time, but really, practicing and coding everyday really made my React skills improve.

###My Advice
Plan on adding projects to your resume that you know will be out of your comfort zone. This will push you to learn new technologies. Also, don't overlook the documentation. I know it's tempting to browse StackOverflow in hopes of finding the exact answer to your problem, but reading the documentation is not so bad, and is a skill within itself. 

Please feel free to ask any questions. I know the it's a struggle to get that first job so keep on working hard.
Next.js and Styled-Components: style loading issue
Tags: nextjs, react, styledcomponents, cssinjs
Published: 2020-02-09 15:29:49

---
title: Next.js and Styled-Components: style loading issue
published: true
description: Server-side render styles and fix the style loading issue.
tags: Next.js, React, Styled-Components, CSS-in-JS
---


Have you tried using Styled-Components with your Next.js app but can't get the styles to load properly? This is because the server-side rendering does not fetch the styles before rendering the page. The Styled-Components documentation mentions this very briefly and it is easy to miss. What we actually have to do is inject server-side rendered styles to the head so it can render the page and its styles correctly. Next.js has the exact file you'll need to make this possible. Within the [Next.js Github repo](https://github.com/zeit/next.js) you can find [_document.js](https://github.com/zeit/next.js/blob/master/examples/with-styled-components/pages/_document.js). Within your Next.js project inside the pages folder create a file called _document.js and copy and paste all the code from the _document.js from the Next.js Github repo. This should fix your problem. Remember to restart the server to apply all changes.

```
-__tests__
-components
-pages
   -_document.js
   -index.js
-public
```
Show and Hide Element using CSS with/without JavaScript
Tags: css, javascript, webdev, beginners
Published: 2020-02-09 15:05:04

You can control layout by showing and hiding them declaratively in the HTML markup or modifying the objects' CSS properties, sometimes using Javascript.

<h3>The Display Property</h3> 
The display property specifies if and how an element is displayed. 
The display property accepts three possible values;
<ul>
<li>inline: browser displays the item and elements only takes up as much space as necessary.
Examples of inline elements are the span, a and img tags.
</li>
<li>block: stretches out to and as far as it can. Examples of the block elements are li, div, h1 - h6, p, form, header, footer and section tags.</li>
<li>none: browser hides the item.</li>
<li>inherit: inherits property from parent element.</li>
</ul>

<h3>The Visibilty Property</h3>
The Visibility specifies whether or not an element should be visible.
The visibility property accepts four possible values;
<ul>
<li>visible: visible to show elements</li>
<li>hidden: hides elements</li>
<li>collapse: collapses elements where applicable, such as a table row</li>
<li>inherit: inherits the values of the visibility property from the parent</li>
</ul>

I hope this codepen does some justice
{% codepen https://codepen.io/stellahstarr/pen/BaNyGrz %}
Full Tutorial on how to use SASS to improve your CSS
Tags: css, webdev, html, beginners
Published: 2020-02-09 14:29:03

If you use CSS, learning SASS will save heaps of time, code and pain. It's basically CSS with more features and functionality, and while it's been around for a while now, it's good to know and understand it inside and how to take full potential of its abilities.

{% youtube itEFprr8soo%}

SASS is pre-processed CSS with tools like nesting, variables, mixins and more. Writing in SASS and then compiling your code to CSS ends up being the same result (CSS) however the pre-processed SASS has more flexibility.

Nesting means you can do things like:

<pre>
// CSS is manual, and strict
.css { color:red; }
.css .doesnt { color:darkred; }
.css .doesnt .let .you { color:verydarkred; }
.css .doesnt .let .you { color:veryverydarkred; }
.css .doesnt .let .you .nest { color:veryveryverydarkred; }

// SASS lets you do values and nest!
$color:red;
.sass { 
  color:$color;
  .lets { 
    color:darken($color,10%);
    .you { 
      color:darken($color,20%);
      .nest { color:darken($color,40%); 
}}}}
</pre>
*Thanks [@CD](https://dev.to/ceo) for fixing my example :)*

If you want to know more, check out the video which will cover:
* Setting up Sass in Brackets
* Difference between CSS and SASS
* How nesting works
* Using variables
* Applying mixins and extends
* Using the & operator

Check out more about SASS on their website:
https://sass-lang.com/

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [4 Simple CSS Hover Transitions for your Elements Background](https://dev.to/adriantwarog/4-simple-css-hover-transitions-for-your-elements-background-4mlg)
* [How to implement Dark Mode with CSS new media call: prefers-color-scheme](https://dev.to/adriantwarog/how-to-implement-dark-mode-with-css-new-media-call-prefers-color-scheme-3h65)
* [Why you should Whiteboard your Design & Development, UI & UX](https://dev.to/adriantwarog/why-you-should-whiteboard-your-design-development-ui-ux-5g12)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)

### Follow and support me:
[Adrian @ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ)
[Adrian @ Patreon](https://www.patreon.com/adriantwarog)
[Adrian @ Twitter](https://twitter.com/twarogadrian)

PS. Does anyone know how to add colors to 'pre' code on dev.to?
del.icio.us browser bookmarks ALT
Tags: browser, bookmarks
Published: 2020-02-09 14:16:20

del.icio.us browser bookmarks has gone - whats the alt ?

* https://dev.to/mudasobwa/bookmarks-on-devto-8of
* https://dev.to/sgolovine/i-built-a-bookmark-manager-1hin
* https://dev.to/lassiter/ask-dev-to-how-do-you-manage-your-bookmarks-1g4j

refs
* https://www.bookmarks.dev/
* https://pinboard.in/
* https://retaggr.com/

future project
* https://gnumb.com
it seems the SONOS farce has actually raised awareness of the dangers of IOT lockin
Tags: opensource, iot
Published: 2020-02-09 14:14:40

thanks to ! last weeks [SONOS]() [#boycottsonos]() twitter war i stumbled across [zigbee]() the IEEE 802.15.4-based wireless mesh specification 

* https://zigbeealliance.org/about/governing-documents-ipr/

refs
* https://metro.co.uk/2019/12/20/amazon-apple-google-unite-form-smart-home-partnership-11940205/
* https://www.zdnet.com/article/so-long-sonos-meet-the-open-source-audio-system-that-will-never-die/

love the AudioPiLe name buty there is a pre existing audiopile brand
* https://audiopile.ca/

devto refs
* https://dev.to/davidgs/sensing-with-the-things-network-6l1
* https://dev.to/pluralsight/what-s-happening-in-tech-december-20th-3ckm
* https://dev.to/egitsptr/iot-internet-of-things-wireless-communication-options-356o
* https://dev.to/ama/how-i-manage-my-dev-bookmarks-and-save-time-and-nerves-56ae

alt refs
* https://dev.to/starbist/bookmarks-saves-hearts-stars-claps-1n3d

future project
* https://gnuzag.com
Sending cookies with Cross Origin (CORS) request
Tags: javascript, php, xhr, cors
Published: 2020-02-09 14:13:19

---
title: Sending cookies with Cross Origin (CORS) request
published: true
description: This post is all about sending cookies with cross origin resource sharing (cors) requset.
tags: javascript, php, xhr, cors
---

##Implementation:
We need to do two things:

* Include `withCredentials : true` in your Ajax request.

For plain XMLHttpRequest like below:

```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://cross_origin_url', true);
xhr.withCredentials = true;
xhr.send(null);
```

For jQuery:
```javascript

$.ajax({
  url: //cross origin url
  xhrFields: {
        withCredentials: true
   }

})
```

* Secondly, from your server side we need to send a Response header which is: *Access-Control-Allow-Credentials* and set its value to *true*.

> `Access-Control-Allow-Credentials: true`

PHP example:
```php
header('Access-Control-Allow-Credentials: true');
```
In Laravel we can do:
```php
public function index()
{
   return response()->header('Access-Control-Allow-Credentials', true);
}
```


## Security Concerns:

* `DDoS`. If you have  set `Access-Control-Allow-Origin: *`, any person with any domain will be able to send request to your URL.

* If someone can copy the Cookie value from browser ( even if its encrypted ) and send it along with request, it will be a legit request.

> * Consider throttling ( rate limiting ) for such urls in your application. 
> * Perform verification in a middleware for such request to verify its coming from a trusted source.

 
That's it 🙌🏼 Happy Coding 👨🏽‍💻
Is there such a thing as READY for a first job?
Tags: discuss, wecoded, codenewbie, career
Published: 2020-02-09 13:51:56

Good day, it is me again.
The girl that posts random stuff and asks random questions.
I am back to the "your First dev job" 

So, today my question is ...
When did you knoe you were ready for a first job?

I have been applying for web dev/front end jobs in NYC, but only half-hearted, because I don't believe I know enough.

What is enough?
What is ready?
Am I ready?

Wait, what? Do you wanna hire me? Lol ok, now I shall stop.
Answer with whatever you feel like makes any sense.

Love you all ❤️❤️❤️❤️
I designed some Free Bootstrap Themes
Tags: html, css, webdev, design
Published: 2020-02-09 13:50:15

Say hello to [Grayshift](https://grayshift.io/themes/), our very first collection of Bootstrap themes that are built entirely by our team and open-sourced for everyone to use.

For a long time, I've wanted to give back to the community, but never quite found the time or ideal approach until earlier this year.

To start, we're launching with five themes: blog, forum, chat, hosting, and project management.

Our goal was to provide minimalist themes with consistent, flexible, and sustainable markup.

Head to the [Grayshift themes site](https://grayshift.io/themes/) to check them out.

Here is some sneak peeks:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qowtifkk0jcr2h51wytw.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yyl9f8eypezwogtrl2qt.png)

### One more thing...

For all lovers of dark themes: You can enable dark mode straight from your system settings.
[Need Feedback] Words Counter App
Tags: help, javascript
Published: 2020-02-09 13:46:14

Hi!

I am building a simple app that counts words and characters. It is built using vanilla JS.

I need your comments and suggestions for improvement.

You can find it [here](https://bam92.github.io/words-counter/) and the code on [github](https://github.com/Bam92/words-counter)

Thank you!
DEV Questions: Driving faster than the speed of sound in racing games
Tags: design
Published: 2020-02-09 13:41:01

This is the first post of what will hopefully become a series.

I was perusing YouTube this morning, and [found](https://www.youtube.com/watch?v=o9fllBtIEVQ) [five](https://www.youtube.com/watch?v=xwFjFQhRJcw) [videos](https://www.youtube.com/watch?v=dnJJAItC63k) [showcasing] (https://www.youtube.com/watch?v=Pu7DxQShpZs) [what I mean](https://www.youtube.com/watch?v=-osVzGGRDS8) in the Extreme-G series of games. All of these videos feature at least one point in the race where the player is moving at supersonic speeds, at which point the speedometer goes haywire, there is a "sonic boom" of sorts, and the music mostly drops out until back below the speed of sound. How would you implement this in a game? More specifically, what would be needed from the game and its engine to make the transition to supersonic racing semi-realistic?

I can think of 3 things right off the top of my head:

* Ability to interrupt music at any time, perhaps just by playing two tracks and muting one, then switching as needed
* Dynamic volume control, so the transition does not sound abrupt
* Some sort of visual indicator, in the speedometer or otherwise, that your speed has hit a transition point

Anything else I forgot? Your thoughts welcome!
How to spot async trap in tests
Tags: javascript, ember, testing
Published: 2020-02-09 13:40:33

Async is hard. Especially in tests.

Even though the code used in this post is [EmberJS](https://emberjs.com/) specific, the techniques apply to any test code.

## Some definitions

Ember has a very convenient way to make sure all async events will be finished before advancing to the next step. It's called [ember runloop](https://guides.emberjs.com/v3.15.0/applications/run-loop/). So it's simply a matter of putting `await` in front of your manually triggered event.

But for code that lives outside the runloop (animation libraries, 3rd party  scripts, CSS transitions, ...) we have an active waiter [waitUntil()](https://github.com/emberjs/ember-test-helpers/blob/master/API.md#waituntil) that is part of [ember-test-helpers](https://github.com/emberjs/ember-test-helpers). Basically what this does is that it regularly executes given callback function until the callback returns true. Example:

```js
console.log('Starting journey');

waitUntil(() => donkey.areWeThereYet(), {timeout: 10000});

console.log('Finished journey');
```

## The problem

```js
await searchButton.click();
assert.equal(searchButton.isDisabled, true, 'button is disabled after search request execution');

await waitUntil(() => resultsTable.hasSomeData);
assert.equal(searchButton.isDisabled, false, 'button is enabled after search finished');
```

The problem with this innocent looking test code is that inherently has a hidden race condition. The bug is in the first `assert()` call because it can be executed **after** the search has finished.

The easy way to find out such a bug is to apply the following rule:

> Any active waiting _outside_ of the runloop should be moved up to the nearest `await`.

Applying that rule to our code we will get:

```js
await searchButton.click();
await waitUntil(() => resultsTable.hasSomeData);

assert.equal(searchButton.isDisabled, true, 'button is disabled after search request execution');
assert.equal(searchButton.isDisabled, false, 'button is enabled after search finished');
```

And from this one can easily see that there is a bug in my testing logic. Can't assert two opposite values for `searchButton.isDisabled` right after each other.

## Solution

Solution for this depends on your framework, testing framework and application code, but in general, you should be safe if you stick to the following:

> Never put any `assert()` statements between the last `await` and your _active waiter_.