teleren/devto huggingface dataset:
Getting the Community SegmentedControl to Work on iOS in Expo SDK 37
Tags: reactnative, expo, mobile
Published: 2020-04-28 07:22:13

---
title: Getting the Community SegmentedControl to Work on iOS in Expo SDK 37
published: true
description: A quick-and-dirty solution to fix the iOS error that comes up when you try to use SegmentedControl with Expo SDK 37.
tags: ReactNative, Expo, Mobile
---

I'm a new React Native developer, and it's been challenging understanding the relationship between React.js, React Native, Expo, the native platforms, and community components. 

I wanted to use the React Native Community SegmentedControl in the app I'm building, but I got a mean looking error when I tested on iOS:

`Invariant Violation: requireNativeComponent: "RNCSegmentedControl" was not found in the UI Manager.`

Yikes.

I'm brand new to mobile development, so the [GitHub issue on the SegmentedControl component in Expo](https://github.com/react-native-community/segmented-control/issues/43) was gibberish to me. 

The community SegmentedControl component works fine on Android and Web because it's just a copy of the component built with standard React Native parts. As a quick and dirty solution, we can just import this component directly by its full file path.

```
import SegmentedControl from "@react-native-community/segmented-control/js/SegmentedControl.js";
```
It's not as smooth as its native counterpart, but it'll get the job done.

I hope this helps. Leave a comment if you know a better way to do this!
elmcsspatterns.io
Tags: elm, css, patterns
Published: 2020-04-28 07:09:27

---
title: elmcsspatterns.io
published: true
description: Common CSS patterns done in elm and elm-css
tags: elm, css, patterns
canonical_url: http://codeloveandboards.com/blog/2020/04/27/elmcsspatterns-io/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i1ytua5wknolfq69a8z1.png
---

## The inspiration

A couple of weeks ago, while searching for a convenient CSS pattern that I needed to implement in one of my elm projects, I stumbled upon [csslayout.io] and felt in love with it instantly. His author, [phuocng](https://dev.to/phuocng), has done a fantastic job not only collecting such a massive collection of patterns but making them easy to find and implement.

## The motivation

[csslayout.io] is the kind of resource that I like to keep handy while working on my front-end, as I tend to write my styles without using any CSS framework whatsoever. Moreover, for the last year, I only use [elm-css] to generate the CSS, which feels to me like [Sass] but functional and statically typed, which is just awesome. Unfortunately, there aren't any similar resources for [elm-css] that I'm aware of, so I couldn't resist writing my version, collecting and sharing the common patterns that I often use.

On the other hand, I've been looking for an excuse to play around with [elm-spa] lately, which I think is going to be one of the next big things in the elm ecosystem. If you are not familiar with [elm-spa], it basically consists of an elm library and a JS client, which automagically takes care of generating all the boilerplate regarding elm single-page applications, letting you focus on the fun part. His author, [ryannhg](https://github.com/ryannhg), is doing an excellent job, keep it up!

## The result

So having [csslayout.io] as inspiration, and [elm-css] + [elm-spa] as motivation, I have started working on [elmcsspatterns.io]. It is still an early version, and I will probably change everything now and then, but if you are into **elm** and **elm-css** I hope you find it useful, and if not, I hope it makes you want to try them :)

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


Happy coding!

{% github bigardone/elm-css-patterns %}

[csslayout.io]: https://csslayout.io/
[elm-css]: https://github.com/rtfeldman/elm-css
[Sass]: https://sass-lang.com/
[elm-spa]: https://github.com/ryannhg/elm-spa
[elmcsspatterns.io]: https://elmcsspatterns.io/
ProductHunt First Launch!
Tags: productivity, github, producthunt, management
Published: 2020-04-28 07:03:52

*Disclaimer: There are no ads, no sign-ups, no pop-ups, no watermarks, no installs, no email newsletter, and everything is open-sourced and hosted on my GitHub.*

Hi Everyone,

I just launched my first product on ProductHunt today and I'm really excited to share this news with the Dev community!

In a nutshell -- Prioritize is a tool that helps you create, visualize, and arrange tasks on a drag and drop interface with different priority boards.

[https://www.producthunt.com/posts/prioritize](https://www.producthunt.com/posts/prioritize)

I'd love to hear your feedback!

Cheers,
Songtham
Perfomance testing - Introducción
Tags: testing, qa, devops, performance
Published: 2020-04-28 07:03:25

Les comparto mi lista de reproducción explicando a nivel teorico de que se trata las técnicas de performance testing y como aplicarlas en sus proyectos

[Lista reproducción youtube](https://www.youtube.com/playlist?list=PL2gu2Qe_CGFkZi0hTHWqq5J00T4gHRsZN)


Gracias
Encryption and Decryption Example in Laravel
Tags: laravel, Encryption, Decryption
Published: 2020-04-28 06:53:18

Hello Artisan

In this tutorial we will learn about laravel built in encryption. Do you know what is encryption? Encryption is a system where we convert a plain text to a message using some algorithms so that any third party user cannot read the information. 
https://www.tutspack.com/blog/encryption-and-decryption-example-in-laravel
Open-source JavaScript Data Structures & Algorithms
Tags: javascript, opensource, datastructures, algorithms
Published: 2020-04-28 06:40:25

---
title: Open-source JavaScript Data Structures & Algorithms
published: true
description: Data Structures using JavaScript with Unit Tests & CI 
cover-image: https://dev-to-uploads.s3.amazonaws.com/i/egtnbyuwvwn3k515cxvo.jpeg
tags: javascript, open-source, data-structures, algorithms
---

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

<figcaption>Repo having 99% coverage, 350+ unit tests </figcaption>


*If you are too excited, here you have it [Problem Solving using JavaScript](https://github.com/knaxus/problem-solving-javascript)! Do star/share the repo if you like it.*

### Back in time

*__I always wanted to implement the most commonly used Data Structures__* 

Although I am very active on **[GitHub](https://github.com/ashokdey)**, with JavaScript as my primary language, I was having no intentions to implement the Data Structures using JavaScript. **C++** was my first preference.

But due to my busy work schedule, I was not able to do it for a long time. (**I am working as a Fullstack JavaScript Engineer since 2017**, for more, you can peep into my **[LinkedIn](https://linkedin.com/in/ashokdey)** profile)

### Today, Problem Solving using JavaScript

I started solving interview questions in JavaScript and initiated a repo back in December 2018, fast forward August 2019, the thought of having a Data Structure repo pop up in my mind again. This time without thinking any further, I started implementing the common Data Structures using JavaScript.

#### List of Data Structures

This repo has the implementation of the following:

- Linked Lists (SLL, DLL)
- Stack & Queue
- Bloom Filter & Set
- Binary Tree, Binary Search Tree & Suffix Tree
- Heaps 

You can find a long list here: [Table of Contents](https://github.com/knaxus/problem-solving-javascript/blob/master/TOC.md)

### What are the perks

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

<figcaption>Travis CI running the tests</figcaption>


The repo hash the following:

- Most commonly used/asked Data Structures
- Commonly asked interview questions with solutions
- Unit Tests for every Data Structures and Problem Solutions
- CI integration with Travis CI
- _**Actively Maintained**_
- Open for anyone willing to contribute
- Human-friendly PR resolution 

### Future

I would like people who are interested should come forward and contribute to this repo. 

This repo is very helpful for beginners to learn a lot of stuff like: 

- Learning about Data Structures
- Learning about open source contributions 
- Learn about the importance of Testing
- Learn best practices and tools like ESLint, Prettier

#### Thank You
What’s New in the Node.js 10
Tags: node, javascript, api
Published: 2020-04-28 06:29:19

Node.js 10.0.0 has been discharged, and can become the platform’s LTS line in October 2018, because the LTS line will be supported for 3 years.

Version 10.0.0 add supports for the OpenSSL 1.1.0 security toolkit however focuses in the main on progressive enhancements. Also, while Node.js 10.0.0 ships with NPM 5.7, the 10.x line are going to be upgraded to NPM Version six later which can provide performance, stability, and security enhancements.

New Features in Node.js 10:

N-API (Node.js API), that moves from beta to a stable version, and provides a stable module API independent of changes within the V8 JavaScript engine underlying Node.js. The API helps module maintainers and production deployments, creating upgrades easier.
JavaScript language enhancements, together with prototype.toString(), that currently returns precise slices of ASCII text file, and mitigations for side-channel vulnerabilities to forestall data leaks.
Error-handling enhancements, with adoption of error codes to ease constant error-checking.
Performance boosts via V8, together with the async generator and array.
Increased visibility into code performance problems via trace events, with the 10.0.0 release.
An API within the 10.0.0 unleash permits user code to modify and disable trace events on demand at runtime, for improved flexibility in identification problems in applications.
Later versions of the Node.js 10.x line area unit expected to offer:

HTTP/2, a higher-performing successor to hypertext transfer protocol (http).
Better support of ECMAScript (ES) six modules. Node.js has had its own module system, however ECMAScript six offers a homogenous module system. The setup is to produce a browser-compatible ECMAScript six implementation that coexists with the present Node.js modules.
The following options area unit expected to arrive in Node.js 11.x:

Better diagnostic capabilities that is turning into additional necessary space as Node.js is progressively utilized in production applications.
Use of JavaScript guarantees within the Node.js core, providing a better fit developers UN agency wish to use promise-type APIs.
Support for additional build/automation infrastructure, with extra support for tools and scripts. Support for newer operating systems would be another whereas older OSes would be born.
Other efforts within the Node.js project, indirectly tied to the Node.js 10.x or Node.js 11.x unleash lines, include:

Continuous improvement on security sorting for third-party NPM modules.
Functional testing for third-party modules, to confirm that dependencies are maintained in better way.
 

If you are looking for upgrade with latest versions or looking forward to launch your product with MEAN stack technology you can contact us at inquiry@vibidsoft.com or for more information check out nodejs development services from Vibidsoft.
Placeholder title
Tags: twiliohackathon
Published: 2020-04-28 05:55:22

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built
#### Category Submission: 


## Demo Link
 

## Link to Code


## How I built it (what's the stack? did I run into issues or discover something new along the way?)


## Additional Resources/Info
CSS Bar Chart
Tags: css, chart, barchart, html
Published: 2020-04-28 05:55:06

A while back I had a project involving the creation of a *lightweight chart library*. In my research I tried out several approaches from JS with canvas to simple HTML & CSS.

In the end I created a commercial [charts library JavaScript](https://1.envato.market/c/361744/275988/4415?subId1=devto&subId2=cssbarchart&u=https://codecanyon.net/item/infographic-charts-and-graphics-html-tags-library/6351274) using JS & canvas, but I kept my intermediary attempts.

# How to Make a Bar Chart Using Only HTML and CSS #

The most interesting solution to creating a lightweight bar chart was to use a plain old HTML `table` element that contained the data for the bar chart and transform that using only CSS to turn it into a bar chart.

![CSS Bar Chart](https://dev-to-uploads.s3.amazonaws.com/i/oyi8270x79snjjy7q7ou.jpg)

Basically I took the HTML code for the table that looked like this:

<div class="highlight"><pre class="highlight html"><code>&lt;table class="graph"&gt;
	&lt;caption&gt;Describe this Data&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th scope="col"&gt;Item&lt;/th&gt;
			&lt;th scope="col"&gt;Percent&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;&lt;tbody class="horizontal"&gt;
		&lt;tr style="height:85%"&gt;
			&lt;th scope="row"&gt;Your Blog&lt;/th&gt;
			&lt;td&gt;&lt;span&gt;85%&lt;/span&gt;&lt;/td&gt;
		&lt;/tr&gt;
...
</code></pre></div>

<iframe height="300" style="width: 100%;" scrolling="no" title="Bar Chart HTML Only (table version alternative)" src="https://codepen.io/inegoita/embed/YMrJGY?height=300&theme-id=16997&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/inegoita/pen/YMrJGY'>Bar Chart HTML Only (table version alternative)</a> by Ion Emil Negoita
  (<a href='https://codepen.io/inegoita'>@inegoita</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

# In Conclusion #

If you want to read more about 3 other methods for this, check out this detailed article on how to make a [CSS bar chart](http://www.coding-dude.com/wp/html5/bar-chart-html/) using only HTML & CSS.
Empty functions.config() in Firebase Functions
Tags: firebase, angular, npm
Published: 2020-04-28 05:26:44

---
title: Empty functions.config() in Firebase Functions
published: true
date: 2020-04-28 5:23:18 UTC
tags: firebase, angular, npm
canonical_url: https://www.gilcreque.blog/2020/04/28/empty-functionsconfig-in.html
---

After upgrading `firebase-admin`, `firebase-functions`, and `typescript` and making some changes in my cloud functions to accomodate stricter types in `express`, I had one last nagging problem. When running `firebase serve` the functions would not load properly because `functions.config()` was returning an empty object. This was confusing because we make sure to create the `.runtimeconfig.json` file whenever we run `npm start` (which creates the file and then runs `firebase serve`). After several hours of digging around trying to figure out why this was happening I gave up for the day … or so I thought. I came back to this problem after laying in bed and came across [a comment left 6 hours ago](https://github.com/firebase/firebase-functions/issues/437#issuecomment-620278306) that got me pointed in the right direction. After running `npm list -depth=0` to see what the actual version of `firebase-tools` I was using (`@7.16.2`). I upgraded my Angular app and my Firebase functions app.

> `npm install --save-dev firebase-tools@latest`

This brought `firebase-tools` to version `@8.2.0` and everything started working again.🍾 🎉
Surviving as a Black Female Ambivert in Tech...
Tags: discuss, codequality, codenewbie, career
Published: 2020-04-28 05:19:12

Note, I’m writing this on my phone so forgive punctuation errors.

I joined a small team where I faced issues I wasn’t prepared for, but had always been there, throughout my career. Let me know if you relate.

- I’m automatic perception is i am unknowledgeable. I have to be the best in order for that stereotype to dissipate and that takes an unusual amount of energy, not just technically, but soulfully. 

- My accomplishments are typically overlooked ( I read an article on the importance of touting your own horn, which seems valid... which I don't do well) and not rewarded in meaningful ways like a pay increase. I worked for a company where I trained someone well and found out they were making a lot more money then me, doing the same job. 🤪

- Other females get intimidated and territorial, this leads to sabotage.  🐍

- You have to be jolly, you can’t just sit and do your work or else you’ll be labeled unpleasant even if you’re polite to everyone. You have to put on an act in order to fit in. That’s mostly everywhere, but it’s on steroids with us. You have to make the environment comfortable for everyone else, not yourself. 👩🏾‍💻

- You’re isolated because tech spaces aren’t diverse. 🤷🏾‍♀️

- Typically I see male gender bias. I also see males yell at you and are condescending and think it’s ok.  I’ve seen it way too many times in corporate spaces. It’s a sign of ineffective leadership, work on communication instead of yelling. 🤬

- People gasp if you have expensive technology like them. They are deeply flabbergasted by how you’re able to afford it. 🧐 

- Some people are just flat out prejudice and don’t do much to hide it and your co-workers are fending for themselves. Class consciousness anyone? 😕

Hopefully  I’m not suffering from hysteria. 😏
LWC migration cheatsheet
Tags: womenintech, productivity, webdev
Published: 2020-04-28 04:55:09

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66pbfqtzdse3zreevdoi.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nzsa06mvrw99gm2tuyte.jpg)
Day 4 of #100DaysOfCode: Scroll event handling and localStorage for React component
Tags: 100daysofcode, javascript, react, localstorage
Published: 2020-04-28 04:27:33

## Introduction
Today I just want to add common operations in the React component. What I want to do today is to practice the local storage and the windows event. 
## Register a scroll event
* We can register the windows event in **useEffect** hooks.
```javascript
const Content = () => {
  const [style, setStyle] = useState('sidebar1')
  React.useEffect( ()=>{
    window.addEventListener('scroll', handleScroll);
    }, []);
  
  const handleScroll = e => {
    const winScroll =
    document.body.scrollTop || document.documentElement.scrollTop
    if(winScroll < 100) {
        setStyle('sidebar1')
    } else {
        setStyle('sidebar1 sidebar2')
    }
  }
  
    return (
      <Fragment>
        ...
      </Fragment>
    )
}
```

## Local storage
* Local storage is one of new features of HTML 5. Users can store data in the browser until delete the local storage manually up to 5 MB. One of the differences between cookie and local storage is that the local storage won't be sent to server-side. 
* The format of key and value are string
```javascript
const Content = () => {
  const [num, setNum] = useState(0)
  const add = e => {
    setNum(num + 1)
    localStorage.setItem('num', num + 1)
  }
  const remove = e => {
    if (num > 0) {
      setNum(num - 1)
      localStorage.setItem('num', num - 1)
    }
  }
  React.useEffect( ()=>{
    var localNum = localStorage.getItem('num')
    if (localNum !== null) {
      setNum(localNum)
    }else{
      setNum(0)
    }  
  }, []);
    return (
      <Fragment>
        <div className={style}>
          ({num}) Menu
         </div>
        <Menu add={add} remove={remove}/>
      </Fragment>
    )
}
```
That's it!

## Implementations

{% codepen https://codepen.io/JenHsuan/pen/Baopror %}  

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
What’s your alternative solution? Challenge #28
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-04-28 03:52:17

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that will receive two arrays and will return an array with elements that are in the first array  but not in the second

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge26

var ar1 = [1, 2, 3, 10, 5, 3, 14];
var ar2 = [-1, 4, 5, 6, 14];

var ar = mergeLeft(ar1, ar2);
println(ar);

function mergeLeft(ar1, ar2)
{
    var ar = [];
    
    for(let el of ar1)
    {
        if (!ar2.includes(el))
        {
            ar.push(el);
        }
    }

    return ar;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.