teleren/devto huggingface dataset:
Why you should use === and not == in JS
Tags: javascript, beginners
Published: 2020-04-09 21:53:40

I'm currently in Flatiron School's Immersive Software Engineering Bootcamp. We began with RUBY where == is totally fine to use in equality statements. We have no switched to JavaScript and with it comes an important difference. In JavaScript the default equality comparison is ===, where as a special equality case (==) can be used where appropriate. 

Here is a [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) to mozilla's explanation on the subject. To highlight their content, here's a summary.

=== is a strict equality comparison while == is an abstract equality comparison. Because == is abstract, you should only use it in special cases WHERE YOU WANT THE DESIRED BEHAVIOR. 3 === '3' will return FALSE as expected but 3 == '3' will return TRUE. For simple comparison this is fine, but as you get deep into your application you may unintentionally create an error when you receive unexpected input, or if you are using a conditional to control your input it might not filter out a case for which you did not account. So in short, it's good practice to stick with the === unless you have a specific reason to use ==.
Ambianic Open Source Ambient Intelligence platform
Tags: ai, ambient, privacy, webrtc
Published: 2020-04-09 23:18:40

Ambianic is an Open Source Ambient Intelligence platform that puts local control and privacy first. It enables users to train and share custom AI models without compromising privacy.

- Turn traditional door locks into smart locks with Face Recognition.
- Alert parents if a crying toddler is left unattended for more than 15 minutes.
- Raise an alert if a baby is seated near a car door without child lock enabled while in motion.
- Prevent accidents by alerting drivers who act sleepy or distracted.
Make sure that a factory floor position is not left unattended for more than 15 minutes.
- Recognize presence of unauthorized people in a restricted access work area.

Visit the docs https://docs.ambianic.ai
#AI is now reading better than humans.  (World Economic Forum)pic.twitter.com/EWnMV4GURY
Published: 2020-04-10 01:24:10

---
title: #AI is now reading better than humans.  (World Economic Forum)pic.twitter.com/EWnMV4GURY
published: true
date: 2020-04-06 23:33:00 UTC
tags: 
canonical_url: 
---

[# **AI**](https://twitter.com/hashtag/AI?src=hash) is now reading better than humans. (World Economic Forum) [pic.twitter.com/EWnMV4GURY](https://pic.twitter.com/EWnMV4GURY)
React Native Firebase Analytics
Tags: reactnative, react, tutorial, beginners
Published: 2020-04-10 10:08:48

React Native Firebase Analytics connects our mobile application to <strong>Google Analytics through Firebase</strong>. It's a great way to get real-time tracking on what's happening inside our application to capture how it is being used and if there are any bugs.

In this part, we use the [@react-native-firebase](https://rnfirebase.io/) package to get our analytics up and running for both iOS and Android in React Native. We cover a few topics including:
* Installing @react-native-firebase/anlaytics
* Setting it up for Android and iOS
* Accessing Firebase Analytics Console to see real-time statistics
* Accessing Google Analytics through Firebase for more statistics
* Creating custom event logging using commands like logEvent
* Setting tracking on userID with the analytics functions
* Capturing more detailed properties against users for later use

This video is a series about learning to use Firebase with React Native. In order to do this step, you will need to have completed the previous video found here:
<strong>[Youtube: React Native Firebase Installation](https://youtu.be/LYi1gwPWDto)</strong>

For those who already have react native firebase installed, the analytics package can be added quite quickly by only running three simple commands:

```bash
# Install & setup the app module
yarn add @react-native-firebase/app

# Install the analytics module
yarn add @react-native-firebase/analytics

# If you're developing your app using iOS, run this command
cd ios/ && pod install
```

Here is a preview of what you will end up seeing in Firebase Analytics:

![React Native Firebase Analytics by Adrian Twarog](https://adriantwarog.com/wp-content/uploads/2020/04/react-native-firebase-analytics-adrian-twarog-2.jpg)

This video can also be found on Youtube:
https://youtu.be/gH6oKPtJYJ4

The series will be a playlist you can find here:
https://www.youtube.com/playlist?list=PLsprmdocuVe9SvIQveOWqMvxHdkXjcRO_

Be aware that the project itself has undergone a major upgrade. The new version can be found here:
https://rnfirebase.io/

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Open Source: to publish or not to publish my android app?
Tags: opensource, android, java
Published: 2020-04-10 10:58:17

Dear friends,

some time ago I developed an android app based on a cloud service on my hosting where I store private information about the user (like email, drugs, name, weight...).

The app has few active users so far, I'm not updating it anymore because I lost my interest in my baby (yes, seeing it didn't flight made me loosing interest in develop) but it's really well done and well structure I would said.

The problem is that **I'm not a professional dev and I know quite for sure it has important security falls all around the code** (both in the app and in the server).

I was thinking of making it available on GitHub the source code of the Android version (the server version would be extremely dangerous I guess) but this would reveal how the server side works (more or less) and reveal eventually security falls...

I guess this would make a bit of advertisement on my app (I *guess* it's the only type of app going open source), but I'm quite worried actually on how it could go.

In the worse of cases I would need to shut down the service and set offline the app once forever, but it's a kind of my baby and to know it is still available makes me a kind of "satisfied" about my "baby".

What would you do guys? I know you will scream for "make it open source as soon as possible!", but I'm concerned about the points I wrote.

Thank you for arriving till this point reading :)
15 Must-Have Elements for Your TYPO3 Landing Website
Published: 2020-04-10 13:24:41

A landing page provides your site’s visitors with a crucial first impression. That impression could be the difference between making a connection or creati
ng a disconnect. Therefore, every detail matters in order to keep a user’s interest.

Are you excited to create new or improving your existing TYPO3 landing page?
What elements should your TYPO3 landing page include? What essential notes and design practices that will influence visitors to convert?

Here are 15 essentials for an ideal TYPO3 landing page:
Headline
Animation
Clear information demonstration
C2A
Clean Content sections
Concise Text
Appealing color schemes
Statistical evidence (Counters)
Certification/achievement Icons
Testimonials
Privacy policy
Contact Form
Clear Navigation
Social media links
Sufficient white space

Check out the article with live examples and demonstrations for each aspect - https://t3terminal.com/blog/15-must-have-elements-for-your-typo3-landing-website/.
A Use Case for CSS Parent Selectors
Tags: css, html
Published: 2020-04-10 15:58:42

At some point, Chris Coyier suggested people write blog posts presenting why they might need parent selectors. Here's mine.

I've got some form that looks like this: 

```html
<form>
    <fieldset>
        <label for="category_1">Category 1</label>
        <input type="checkbox" id="category_1" name="category_1"><span></span><br><br>
    </fieldset>
    <fieldset>
        <label for="category_2">Category 2</label>
        <input type="checkbox" id="category_2" name="category_2"><span></span><br><br>
    </fieldset>
    <fieldset>
        <label for="category_3">Category 3</label>
        <input type="checkbox" id="category_3" name="category_3"><span></span><br><br>
    </fieldset>
    <input type="submit" value="Show results">
</form>    
```

It allows people to select some grouping of filters: category 1, category 2, and category 3. When they hit `Show results`, they get some results back based on these filters. 

I want to give a visual cue for which filters they've used. Maybe something like a background color on each associated `fieldset` that contains checked checkboxes. That feels somewhat straightforward. 

But right now if I want to style the `fieldset` based on its child, I have to use JavaScript to maybe listen for a `change` or `click` event, find the correct `fieldset`, and update its styles through JS. 

Alternatively, I could set up a pseudo-element to do the job. But wait! `input` elements *can't have pseudo-elements*. So now I have to add an empty `span` as a sibling and style its pseudo-elements. The markup changes to this: 

```html
<form>
    <fieldset>
        <label for="category_1">Category 1</label>
        <input type="checkbox" id="category_1" name="category_1"><span></span><br><br>
    </fieldset>
    <fieldset>
        <label for="category_2">Category 2</label>
        <input type="checkbox" id="category_2" name="category_2"><span></span><br><br>
    </fieldset>
    <fieldset>
        <label for="category_3">Category 3</label>
        <input type="checkbox" id="category_3" name="category_3"><span></span><br><br>
    </fieldset>
    <input type="submit" value="Show results">
</form>    
```

And then I write these styles:

```css
fieldset {
    position: relative;
}

input:checked + span:before {
  content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: green;
}
```

It's workable. It's only a little extra code. But it would be really slick if I could write some CSS that looked like: 

```css
input:checked PARENT_SELECTOR_SYMBOL_HERE fieldset {
    background-color: green
}
```

Here's a [codepen](https://codepen.io/ogdenstudios/pen/jObEqpZ) with the sample code so you can play around with it and see what I mean
Material Table Explained
Tags: angular, material
Published: 2020-04-10 20:30:33

A minimal example to get you up and running fast...

```html
<table mat-table [dataSource]="collection">
   <ng-container matColumnDef="setting">
      <th mat-header-cell *matHeaderCellDef>Setting</th>
      <td mat-cell *matCellDef="let setting">
         {{ setting.id }}
      </td>
   </ng-container>
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
```

**The dataSource**

The mat-table directive allows us to set a datasource...

```html
<table mat-table [dataSource]="collection">
``` 
which is an Array of something in our Typescript file for this page.

**Column Definitions**

The Material Table focuses on a columnar first concept using ng-containers.

```html
 <ng-container matColumnDef="setting">
      <th mat-header-cell *matHeaderCellDef>Setting</th>
      <td mat-cell *matCellDef="let setting">
         {{ setting.propName }}
      </td>
   </ng-container>
```
 The ng-container uses the "matColumnDef" directive (a column definition) with the name of 'setting'. This column of the table will have a header with the value "Setting" shown. Each row of data will show the value of setting.propName.
 
At render time, each material column definition is called with each item within the dataSource. But nothing will show unless the next two items are defined.  
 
**Table Rows**

The column definitions only took care of the TH and the TD for each column header. Now we have to define how to render each row.  The all important displayedColumns is used as a mat-header-row and a mat-row. I'm not fully aware of why we need two TR items.

```html 
   
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   
```
Here we see each TR pointing to displayedColumns which is an array of the names we assigned to each columndef we want to show.

**Injecting Content Renderers**

Can we swap in other custom controls? Yes..
If we substitute a custom component as in "app-setting" below, the content of the TD will pass a setting value to the app-setting html element via the [setting] property it contains.

```html
<table mat-table [dataSource]="collection">
 <ng-container matColumnDef="setting">
      <th mat-header-cell *matHeaderCellDef>Setting</th>
      <td mat-cell *matCellDef="let setting">
         <app-setting [setting]="setting"></app-setting>
      </td>
   </ng-container>
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
```
The material table's 1st column will look like this when we name the columndef "Setting" and have only one value in:


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

We've injected our own rendering logic for each row of the Table.

Next up: Render HTML elements which are editable on each row of a Material Table. 

JWP2020
Attempts to build a mobile celebration app - Twilio x DEV community hackathon: Part 1
Tags: twiliohackathon, reactnative, noobs, learning
Published: 2020-04-10 20:15:21

---
title: Attempts to build a mobile celebration app - Twilio x DEV community hackathon: Part 1
published: true
description: My friend and I were looking for an excuse to finally delve into experimenting with mobile app development and this was(and is) the perfect opportunity
tags: #twiliohackathon #reactnative #noobs #learning
---
<H1>Our Backgrounds</H1>

I am a Software Developer mostly working on web technologies while my hackathon partner (Mike) is an Automation Developer working on automating testing processes and procedures. Neither one of us have very much experience developing mobile apps and after talking to a few mobile app developers, we decided to give a shot at trying to create one using React Native. 

<H1>Our (Initial) Idea </H1>
Now that we're heading into week 4 of social isolation/physical distancing/quarantine here in Vancouver, we're starting to go a little stir crazy, and are looking for ways to keep in-touch with our friends and family. Mike is very much an extroverted social butterfly and told me about how difficult and a <em>little</em> unexciting birthday celebrations have been over video calls. So we are hoping to jazz them up a little by building an app using Twilio's API and making them a little more fun and interactive. 

<H1> Next Steps </H1>
We don't have any solid ideas at the moment, aside from wanting to make celebrations more fun though, so we're going to be spending our time looking into Twilio's APIs to see what we can incorporate into our app. Also, as mentioned before, neither one of us have very much experience developing mobile apps, so we're going to be spending some time working through some tutorials and setting up our dev environments. 

Stay tuned for more updates!
FCC | Intermediate Algorithm Scripting | Drop It
Tags: replit, node
Published: 2020-04-11 03:18:27

---
title: FCC | Intermediate Algorithm Scripting | Drop It
published: true
tags: replit, nodejs
---

Free Code Camp 
Intermediate Algorithm Scripting
Drop it.
/*Intermediate Algorithm Scripting: Drop it
Given the array arr, iterate through and remove each element starting from the first element (the 0 index) until the function func returns true when the iterated element is passed through it.

Then return the rest of the array once the condition is satisfied, otherwise, arr should be returned as an empty array.*/
function dropElements(arr, func) {
for(let i =0; i < arr.length, i < 5;  i++){
 if(func(arr[0]) || !arr){ 
 continue;
 }else {
  arr.shift();
}
 }
 return arr;
 
}
dropElements([1, 2, 3, 7, 4], function(n) {return n < 3; });
/*dropElements([1, 2, 3, 4], function(n) {return n >= 3;}) should return [3, 4].
Passed
dropElements([0, 1, 0, 1], function(n) {return n === 1;}) should return [1, 0, 1].
Passed
dropElements([1, 2, 3], function(n) {return n > 0;}) should return [1, 2, 3].
Passed
dropElements([1, 2, 3, 4], function(n) {return n > 5;}) should return [].
Passed
dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;}) should return [7, 4].
Passed
dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;}) should return [3, 9, 2].*/

/*https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it*/
{% replit @oscarhernandez6/FCC-intermediate-Algorithm-Drop-It %}
Laravel Sanctum - Hitting all the rough edges
Tags: laravel, authentication, security
Published: 2020-04-11 05:59:46

In this video I'm going to use Laravel Sanctum to authenticate requests to an API using session-based and token-based authentication. While doing so, I'm going to show you all the possible errors that you might get and how to fix them.

{% youtube Kd3hcrxtTHA %}
ed is the standard text editor.
Tags: ed, sh, gnu, linux
Published: 2020-04-11 08:30:10

ed (pronounced "e" "d" -- not "ed" as in Ed, Edd n Eddy) is a line-oriented text editor. ed was originally written by Ken Thompson for use in  various UNIX systems. Don't let the man(1) page lie to you: ed is _not_ superseded by full-screen editors such as GNU Emacs or GNU Moe. If you tend to shy away from user interfaces, clinging to your sh(1) prompt to get work done, ed may be another valuable rendezvous for your time out of the meatspace -- after all Vi does mean "visual" editor.

ed doesn't do much without being asked to. What ed does do is:

1. Append text to a buffer.
2. Print text from a buffer.
3. Replace lines in a buffer.
4. Deleted line from a buffer.
5. Read files.
6. Write files.
7. Put/yank text.
8. Execute shell commands.

That's almost it.

What I'll show you are the bare essentials to using ed. We're going to write a hello world program in ed using the C programming language.

We'll begin by entering a shell prompt, sh(1) will do. Follow along with me in my terminal.

![using ed](https://e3.evanjon.es/5cb99583-7922-49d5-77d5-0dabb0ff103a.png
)

Sure beats the hell out of using punch cards.
How to capture a certain column value based on the first and last occurrence of a different column value using pyspark?
Published: 2020-04-11 08:50:14

                       
DateTime             uid       SensorId  code      LEN    value
|2020-02-23 11:42:34|38       |0000126D|35         |02     |24        
|2020-02-24 11:47:34|38       |0000126D|35         |02     |24         
|2020-02-24 11:48:34|38       |0000126D|35         |02     |23         
|2020-02-24 11:49:34|38       |0000126D|35         |02     |23         
|2020-02-24 11:50:34|38       |0000126D|35         |02     |22         
|2020-02-25 11:52:34|38       |0000126D|35         |02     |22         
|2020-02-25 11:12:35|38       |0000126D|35         |02     |21         
|2020-02-26 11:34:35|38       |0000126D|35         |02     |21         
|2020-02-27 11:12:35|38       |0000126D|35         |02     |2A         
|2020-02-28 11:43:35|38       |0000126D|35         |02     |2A         
|2020-03-01 11:23:35|38       |0000126D|35         |02     |24         
|2020-03-02 11:10:35|38       |0000126D|35         |02     |23         
|2020-03-03 11:07:35|38       |0000126D|35         |02     |22         
|2020-03-04 11:31:35|38       |0000126D|35         |02     |21         
|2020-03-05 11:07:35|38       |0000126D|35         |02     |2A         
|2020-03-06 11:17:35|38       |0000126D|35         |02     |2A         

I want to capture the datetime value for first occurrence(ex:date1) of '24' and the last occurrence(ex:date2) of '2A' and create a new dataframe with column:sensor id,cycle count and timediff(date2-date1).

Here, from 24 to 2A is a range of cycle.Like here we have two cycles:1st cycle starts on 2020-02-23 11:42:34,ends on 2020-02-28 11:43:35 and the other cycle is from 2020-03-01 11:23:35 to 2020-03-06 11:17:35

How can I do that in an efficient way having 1000K records. I have used loop which is taking much times.
React + Redux ? Selectors inbound
Tags: react, redux, webdev, javascript
Published: 2020-04-11 22:36:42

I don't like diluting quality content, so I will be brief and link to a great article on the benefits of adding selectors to a react/redux application and how to do so.

<b><u>Selectors:</u></b>
- act as a single-source-of-truth when mapping to your mapStateToProps() (very useful if being referenced in many components)
- handle the logic for determining what state data you want, making your components less complex
- can increase performance by only performing computation if the state arguments it is passed have changed since last time

[Redux Selectors: A Quick Tutorial](https://daveceddia.com/redux-selectors/)

*Note - Only worry about this if you are already proficient with React and Redux*
Build a react native online store with GraphQL using Apollo 3
Tags: react, reactnative, graphql, javascript
Published: 2020-04-12 08:51:25

---
title: Build a react native online store with GraphQL using Apollo 3
published: true
description: A free series of videos on how to build a react native app using react native and apollo 3
tags: react, reactnative, graphql, javascript
---

Hello guys.

![final result](https://raw.githubusercontent.com/bithoven-dev/ReactNativeApolloOnlineStore/master/.github/images/result.jpg)

I started publishing some videos on my youtube channel about building a react native online store using apollo client 3.

You can find a demo of what we are gonna build:

[https://youtu.be/aniRucwxghw](https://youtu.be/aniRucwxghw)

Also u can find the full source code in here:

[https://github.com/bithoven-dev/ReactNativeApolloOnlineStore](https://github.com/bithoven-dev/ReactNativeApolloOnlineStore)

For now I published 5 of 9 videos, you can find the playlist in here:

[https://www.youtube.com/watch?v=aniRucwxghw&list=PLXHfL3ggytsjxNE4pEkudCi9cDa1LdaH1](https://www.youtube.com/watch?v=aniRucwxghw&list=PLXHfL3ggytsjxNE4pEkudCi9cDa1LdaH1)

I hope u enjoy ❤️