teleren/devto huggingface dataset:
Fast way to calculate rem online
Tags: javascript, react, tool, showdev
Published: 2019-06-06 22:07:41

> Use [JustREM](https://justrem.xyz/)

Let's get the obvious thing out of the way, this isn't super original. Onto the fun stuff!

The goal of this project was to create a site where I can easily convert a `px` value into a `rem` value. I found that other tools online that are meant to do this are slow, clunky, a pain to use, and they load 400 million ads.

## 🎉 Introducing JustREM!!!

JustREM is the tool I wanted to use; 
- It calculates the `rem` as you type it
- You can change what is appended to the value (which is something I needed to do while using a design system)
- You can change the base value
- Loads fast and works faster

### The tech

The website is built using [Nextjs](https://nextjs.org) with styled components using [emotion](https://emotion.sh). Finally, I used [now](https://zeit.co/now) to host the website. If you're interested in the source code, you can find that [here](https://github.com/myweekinjs/justrem). Fair warning, this was a "hack something quickly" project so don't be too critical of the code. 

All in all, the combination of Next, emotion and now makes for a very quick tech stack for any "quick and dirty" projects. 11/10.

---

Thank you for reading my article, it really means a lot! ❤️ Please provide any feedback or comments, I'm always looking to improve and having meaningful discussions. This article was written as part of my [#myweekinjs](http://myweekinjs.com) challenge, I have a few interesting articles there if you are interested in learning that.

### 👋 until next time!
How much technical documentation do you write?
Tags: discuss
Published: 2019-06-06 21:55:58

---
title: How much technical documentation do you write?
published: true
description: A discussion on writing technical documentation.
tags: discuss
---

Technical documentation, written in the right way, can be a very useful tool for:
* Onboarding
* Troubleshooting
* Handing a project off to another team (perhaps an operations team?)
* Figuring out what the heck a piece of code does after coming back to it a year later
* Etc., etc.

How much do you write? What tools do you use? Do you follow a certain template or methodology? Sound off below! 👇
JavaScript and Scope I - Intro
Tags: javascript
Published: 2019-06-06 20:16:37

Scope determines where a variable exists and does not exist in a program.

```js
function bar () {
  var foo = 2;
  console.log(foo); // 2
}

bar();

console.log(foo); // ReferenceError: foo is not defined;
```
<a href="https://jsfiddle.net/tchaffee/L4h60y79/6/" target="_blank">Edit in JSFiddle</a>


Scope also determines which value to use when we have two *different* variables with the same name.

```js
var foo = 1;

function bar () {
  var foo = 2;
  console.log('foo inside bar: ', foo); // 2
}

bar();

console.log('foo outside bar: ', foo) // 1;
```
<a href="https://jsfiddle.net/tchaffee/0oy9jc1n/2/" target="_blank">Edit in JSFiddle</a>

If you run the example above, you will first see '2' logged to the console, and then you will see '1'. The `foo` created inside the `bar` function is a different variable from the `foo` created at the top of the program.

The `foo` variable declared at the top of the program is in the global scope. The `foo` variable declared inside the function is in that function's scope only. We say that the `foo` variable declared inside the function *shadows* the global variable.

What about function parameters? Do they shadow variables from a higher level scope?

```js
var foo = 1;
function bar (foo) {  foo = foo + 2;
  console.log('foo inside bar: ', foo); // logs 7
}

bar(5);

console.log('foo outside bar: ', foo); // logs 1
```
<a href="https://jsfiddle.net/tchaffee/cqt2dxh4/" target="_blank">Edit in JSFiddle</a>

The fact that parameter names act like variables when it comes to scope and shadowing will be important in a future article on scope and closures.

Learn more about scope in [JavaScript and Scope II - Functions](https://blog.toddbiz.com/blog/2019-06-03-javascript-and-scope-ii/)
Getting duplicated objetcs in ArrayList
Tags: help, java, begginers, schoolwork
Published: 2019-06-06 20:10:00

---
title: Getting duplicated objetcs in ArrayList
published: true
description: 
tags: help, java, begginers, schoolwork
---

Greetings community, it turns out that I have a job for the university, it's something very simple but I find it complex to achieve since I do not have much experience with Java.

I have a list of objects in an ArrayList, I can add, delete and do other operations with that list using a "for each" loop. But I do not know how to count the objects on the list that are repeated. I have looked at some articles but they are with lists of integers as an example, where one can create another Array and iterate over both and compare the values of the positions.

How would you proceed with an ArrayList of objects?
React design patterns in SwiftUI
Tags: react, swift, swiftui, showdev
Published: 2019-06-06 19:58:16

---
title: React design patterns in SwiftUI
published: true
description: A React developer tries to teach himself SwiftUI
tags: react, swift, swiftui, showdev
---

__TLDR: I've created a [repository](https://github.com/bmcmahen/react-meets-swiftui) with React patterns implemented in SwiftUI__

Apple has recently released SwiftUI, a declarative UI framework for building native applications on Apple devices. The similarities with React are quite obvious, which makes it relatively easy for any React developers to pick up.

I'm going to be teaching myself SwiftUI over the coming weeks and I'll be recording various common React design patterns implemented in SwiftUI. You can see them on the [react-meets-swiftui](https://github.com/bmcmahen/react-meets-swiftui) GitHub repository. The hope is that these examples will make it easier for experienced React developers to pick up SwiftUI. 

Please keep in mind that I have about 4 years of React experience, and 3 days of Swift experience. But I'll continue to update these examples as I learn more, and hopefully those with more experience will offer their help.
Is Bootstrap Studio A Magical Website Builder Tool?
Tags: bootstrap, bootstrapstudio
Published: 2020-02-01 20:09:24

---
title: Is Bootstrap Studio A Magical Website Builder Tool?
published: true
tags: Bootstrap ,Bootstrap Studio
canonical_url: https://www.positronx.io/is-bootstrap-studio-a-magical-website-builder-tool/
---

The post [Is Bootstrap Studio A Magical Website Builder Tool?](https://www.positronx.io/is-bootstrap-studio-a-magical-website-builder-tool/) appeared first on [positronX.io](https://www.positronx.io).


Today we are going to talk about **Bootstrap Studio** ; It’s a powerful tool which allows you to create the responsive desktop app and prototype using Bootstrap UI design framework.

## Introduction to Bootstrap Studio

The bootstrap studio comes with a lot of built-in ui components, and you have to drag and drop to build a beautiful cross-browser compatible and responsive web sites. This software is built on one of the most popular UI design frameworks, and it gives you neat and clean semantic HTML and CSS code.


[Click here to read more](https://www.positronx.io/is-bootstrap-studio-a-magical-website-builder-tool/)
My Top 10 Programming Proverbs
Tags: webdev, programming
Published: 2019-06-06 19:29:19

---
title: My Top 10 Programming Proverbs
published: true
description: 
tags: webdev, programming
cover_image: https://antjanus.com/wp-content/uploads/2019/06/roman_ruins_ii_by_ant_janos-d7o7i0j.jpg
canonical_url: https://antjanus.com/blog/web-development-tutorials/my-top-10-programming-proverbs/
---

> I cross-posted this post on [my personal blog](https://antjanus.com/blog/web-development-tutorials/my-top-10-programming-proverbs/).

A little while back, I started [a repo](https://github.com/AntJanus/programmers-proverbs) of funny (and insightful!) programming quotes and proverbs. These often take a shape of an existing proverbs (like `Rome wasn't built in a day`) and get translated to be tech-relevant and hopefully give you a good chuckle (like `Facebook wasn't built in a day`). Protip: You can put these into Slack as the loading/intro messages. :) 

Without further ado, here are my favorites to brighten your day:


## When you reach wizened-engineer level, there are at least a hundred wizened engineers above you.

*** 

## A deployed MVP is worth two prototyped.

*** 

## Sleep on a force push.

*** 

## Sometimes you have to cut legacy support to allow the new product to bloom.

*** 

## Good test coverage + automated workflows = quiet cell phones and better sleep.

*** 

## There is no test without first a failure

*** 

## Anger and stubborness make bad allies in code review

*** 

## With commit and deploy access comes great responsibility

*** 

## Don't put all your logic in one method basket

*** 

## A foreach loop avoided is a CPU cycle earned.
Using Firebase and AngularFire2 in an Ionic Real-Time TODO application
Tags: angular, ionic, firebase, todo
Published: 2019-06-06 18:46:23

---
title: Using Firebase and AngularFire2 in an Ionic Real-Time TODO application
published: true
description: Learn how to use Firebase RealTime Database with AngularFire2 by creating an Ionic TODO mobile application.
tags: Angular, Ionic, Firebase, TODO
---
Read at - https://www.javascripttuts.com/using-firebase-and-angularfire2-in-an-ionic-real-time-todo-application/
Adding Twitter Authentication with Firebase in Ionic
Tags: ionic, angular, authentication, firebase
Published: 2019-06-06 18:44:17

---
title: Adding Twitter Authentication with Firebase in Ionic
published: true
description: Learn how to mix the Twitter OAuth System with Firebase in an Ionic mobile application.
tags: Ionic, Angular, Authentication, Firebase
---

View at - https://javascripttuts.com/adding-twitter-authentication-with-firebase-in-ionic/
Angular Material Design Buttons Tutorial with Example
Tags: angular, angular987, angularmaterial, angularbuttons
Published: 2020-02-01 18:32:51

---
title: Angular Material Design Buttons Tutorial with Example
published: true
tags: Angular, Angular 9|8|7 ,Angular Material,angular buttons
canonical_url: https://www.positronx.io/angular-material-design-buttons-tutorial-with-example/
---

The post [Angular Material Design Buttons Tutorial with Example](https://www.positronx.io/angular-material-design-buttons-tutorial-with-example/) appeared first on [positronX.io](https://www.positronx.io).

Today we are going to learn about Angular Material design buttons, buttons referred to an action taken by the users on the web and mobile application. We typically place buttons on web and mobile components like pop-ups, forms, cards, and toolbars.

There are 7 types of buttons mentioned on Angular material design official website. The primary button type is raised button type, provided by Angular material design when we talk about high click-through rate (CTR) then there is no best option available option then the raised button in Material design.

[Click here to read more](https://www.positronx.io/angular-material-design-buttons-tutorial-with-example/)
Learning
Published: 2019-06-06 18:39:35

---
title: Learning
published: true
description: Learning
tags: 
---
I wanted to give an update on my progress. So far, I've been doing a lot of learning. I joined a startup trying to make a unique career website. I can't lay out too many details, but hopefully this idea becomes successful. To that end, I've been learning a lot of web development so I can be useful to the team. I learned about React and Webpack as well as brushed up on my HTML, CSS and JavaScript skills.

On the side, I have also been trying to learn Android development using Android Studio. My teammates for the startup don't think a native app is necessary, but I hope this knowledge can be used for future employment opportunities. I went to an iOS development meetup a month or so ago, and I talked extensively with one of the members who told me that app development is very in-demand. Not only that, but Java is my favorite language and I've always preferred that kind of development over web development. I hope I get enough practice to get those kinds of jobs, but if not, all of this web development will definitely be useful, especially since JavaScript is so similar to Java, which I enjoy.

In my next post, I hope to talk more about my accomplishments with the startup and any Android projects I have started.
React: "I really wish this is how I could write components."
Tags: react, javascript, showdev
Published: 2019-06-06 18:31:40

---
title: React: "I really wish this is how I could write components."
published: true
description: 
tags: react, javascript, showdev
---

{% twitter 1136122559362084864 %}

## Challenge Accepted!

code for `useMatchFetch` down below.

```javascript
import React from "react";
import { useMatchFetch } from "./effects/useMatchFetch";

export const Example = () => {
  const render = useMatchFetch("https://swapi.co/api/people/1/?format=json");

  return render({
    pending: () => <div>Loading</div>,
    error: err => <div>{err.toString()}</div>,
    data: data => <pre>{JSON.stringify(data, null, 2)}</pre>
  });
};
```

## Watch my Live Stream

Want to see my process on how I created this? Watch me on Twitch!

[![Twitch Screenshot](https://thepracticaldev.s3.amazonaws.com/i/pu8qpm0la00td8b1abf4.PNG)](https://www.twitch.tv/videos/435160322)

## `useMatchFetch`

I actually really like this. I think I might end up using this in a few places.

```javascript
import { useState, useEffect } from "react";

const render = data => match =>
  data.pending ? match.pending()
  : data.error ? match.error(data.error)
  : data.data  ? match.data(data.data)
  : null // prettier-ignore

export const useMatchFetch = url => {
  const [data, setData] = useState({ pending: true });

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData({ data, pending: false }))
      .catch(error => setData({ error, pending: false }));
  }, [url]);

  return render(data);
};
```

## End

Follow me on Twitter [@joelnet](https://twitter.com/joelnet)

![Cheers!](https://thepracticaldev.s3.amazonaws.com/i/6jsy3a866frzp3u5oda0.jpg)
How do people know what to write about?
Tags: help, twitter
Published: 2019-06-06 18:25:51

---
title: How do people know what to write about?
published: true
description: How do people decided what to write about in their blogs such as Twitter, Tumblr, Dev.to, and other websites?
tags: help, twitter
---
Personally, I've wanted to write to things like Twitter and Dev.to to talk about things but nothing really ever comes to mind. How do people come up with what they want to write about?

Apologies if this isn't the right place, I haven't used this website in a long while.
Implement PrismJS in GatsbyJS
Tags: javascript, gatsby, react, prismjs
Published: 2019-06-06 18:20:50

I recently implemented [PrismJS](https://prismjs.com/) for code highlighting in [GatsbyJS](https://www.gatsbyjs.org/) . Since there weren’t that many posts to do a quick installation here is how I did it.

## Install PrismJS

First, install PrismJS and it’s Gatsby plugins:
```sh
npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs
```

This will make sure that you have all the plugins needed. Next, go to your `gatsby-config.js` and put the following code after your declaration of `gatsby-transformer-remark` since this is a plugin it has to go in the plugins section like this:

```js
// gatsby-config.js
resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
            {
          resolve: `gatsby-remark-prismjs`,
          options: {
            aliases:{sh: "bash", js:"javascript"},
            showLineNumbers: true,
          }
        }],
      },
```

## Choose a PrismJS Theme

After that you have to include the [PrismJS theme](https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes) you like in your `Gatsby-browser.js`  file and also include the line numbers like that 

```js
// gatsby-browser.js
require("prismjs/themes/prism-tomorrow.css");
require("prismjs/plugins/line-numbers/prism-line-numbers.css");
```

### Optional: Atom Editor Style
Since I didn’t really like the default themes that PrismJS comes with I looked for a one that I liked more. And I found my beloved [Atom Editor](https://atom.io/) Style in the additional themes that are available on [GitHub](https://github.com/PrismJS/prism-themes/). To include it install `prism-themes` with npm.

```sh
npm i prism-themes
```

And include change your `gatsby-browser.js` to this:
```js
// gatsby-browser.js
require("prism-themes/themes/prism-atom-dark.css");
require("prismjs/plugins/line-numbers/prism-line-numbers.css");
```

## Change your CSS
Because of the line numbers, there have to be changes in your CSS. Mine is in `/components/layout.css`. There you have to add the following lines to get everything in order:

```css
.gatsby-highlight {
  background-color: #1d1f21;
  border-radius: 0.3em;
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
}

.gatsby-highlight pre[class*="language-"].line-numbers {
  padding: 0;
  padding-left: 2.8em;
  overflow: initial;
}
```
  
That’s it. You just implemented PrismJS in GatsbyJS to highlight your code blocks with the Atom Editor Style.

PS: I also updated my [GatsbyJS starter](https://github.com/niklasmtj/gatsby-starter-julia) to use PrismJS.

Thank you for reading, 
Niklas

---

This post was first posted on my blog: [niklasmtj.de](https://niklasmtj.de/blog/prismjs-in-gatsbyjs)

Photo by [Émile Perron](https://unsplash.com/@emilep?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com)
Best practices for authentication in an oauth API flow?
Tags: help
Published: 2019-06-06 17:51:02

---
title: Best practices for authentication in an oauth API flow?
published: true
tags: help
---

I'm building an application that users Spotifys API OAuth for Authorisation, the access token that is ultimately recieved by my app from Spotify is stored as a HttpOnly Cookie on the client that requested my application in order to pass to subsequent API requests. 

What are best practices for ensuring authentication when working with APIs in this way? E.g the user is who they say they are on subsequent requests.
Sign In with Apple: Learn About the New Identity Provider
Tags: signinwithapple, apple, authentication, identitymanagement
Published: 2019-06-06 17:07:44

---
title: Sign In with Apple: Learn About the New Identity Provider
published: true
description: Learn about Sign In with Apple, the new identity provider announced at Apple WWDC 2019.
tags: #signinwithapple #apple #authentication #identitymanagement
canonical_url: https://auth0.com/blog/what-is-sign-in-with-apple-a-new-identity-provider/
---

Learn about the "Sign In with Apple" feature announced at Apple WWDC 2019. This authentication option, which Apple has stated will be mandatory for all App Store apps soon, may present some challenges to application developers, but aims to provide a better user experience for those in the Apple ecosystem through enhanced privacy and seamless login across web and native applications.

[Read on 🍎](https://auth0.com/blog/what-is-sign-in-with-apple-a-new-identity-provider/?utm_source=dev&utm_medium=sc&utm_campaign=apple_auth)

![Sign In with Apple: Learn About the New Identity Provider](https://thepracticaldev.s3.amazonaws.com/i/ce5j4dtbvhvav979u9o9.png)
What kind of books, novels or movies inspired you to be a better programmer?
Tags: productivity, discuss, motivation, beginners
Published: 2019-06-06 16:27:41

Personally, my all time favorite movie is *The Matrix*. If you think about it, its entirely based upon virtual reality and programming. The matrix itself is a digital realm and that famous oft repeated phrase from this movie, *"red pill or green pill"* also has a deep connection to programming.

The second best is probably *Iron Man* simply because of the AI/Jarvis/Ultron factor.

When it comes to novels, there is one called *Digital Fortress* by Dan Brown. Its a usual suspense thriller but based on cryptography, I suggest you read it once if you haven't! Other good ones are Artemis Fowl, LOTR and Harry Potter (though all of them aren't exactly about programming!).

What do you watch/read? Please comment.
6 Full-Time React.js Positions in Medellin, Colombia
Tags: react, reactnative, angular, javascript
Published: 2019-06-06 15:47:12

Hi DEV Community - 

I really need some help from the community. I'm the Founder & CTO of PhillyTech, have 20 + years experience working with tech startups and my company is expanding very rapidly. 100% of our focus is working with well funded software / tech companies in the Philly, Northeast, Mid-Atlantic and throughout the US.

I've built a very unique model for my software / tech clients that includes local US based expertise as well as building an engineering team for them in Medellin, Colombia. We have roughly 15 people in the US and 80 in Colombia, South America. 

We're unlike most other development shops as our focus is in Data Science, Big Data as well as App Dev and our clients work directly with our engineers in the same time zone. We're constantly recruiting great talent from all over the world, but many of our best people come from Colombia, South America and neighboring countries in South America.

We offer great salaries, full benefits, an exciting work culture and a lot of upward momentum for our team members...

Because of the great work we've been doing with our clients we've won a few projects and are in need of 6 React.js and Front End focused engineers.

- Two (2), Senior, Lead Front End Engineers with React.js (7-15+)
- Four (4), Mid-Level Front End Engineers with React.js (3-7 years)

Can you take a look at this job below, click on it, and refer it to people you know? 

Also, please connect with me on LinkedIn if you want to network or think I can help you in any way. Thanks for your help!

Michael C. Bertoni - Founder & CTO - PhillyTech
https://www.linkedin.com/in/michaelbertoni33/

Job Overview - Review, Apply, Refer
http://smrtr.io/3bTrC
[Video] Reclaiming the Web with P2P Protocols
Tags: cascadiajs2018, videos, javascript
Published: 2019-06-06 15:34:18

---
title: [Video] Reclaiming the Web with P2P Protocols
published: true
description: Tara Vancil is the co-creator of the Beaker Browser, a browser for exploring and building the peer-to-peer Web. She's part of Blue Link Labs, a team of Web enthusiasts behind the Beaker Browser, the Dat protocol, and hashbase.io. She's dedicated to building the Web of tomorrow as a Web for all.
tags: cascadiajs2018, videos, javascript
cover_image: https://pbs.twimg.com/media/DtM87aIU0AMyD94.jpg:large
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

![Tara Vancil](https://2018.cascadiajs.com/speakers/taravancil.jpg)

[Tara Vancil](https://twitter.com/taravancil) is the co-creator of the Beaker Browser, a browser for exploring and building the peer-to-peer Web. She's part of Blue Link Labs, a team of Web enthusiasts behind the Beaker Browser, the Dat protocol, and hashbase.io. She's dedicated to building the Web of tomorrow as a Web for all.

https://www.youtube.com/watch?v=2Q9TlvqE9_Y