teleren/devto huggingface dataset:
Using a Chromebook For Web Development: Part 2
Tags: chromebook, linux, webdev
Published: 2019-08-07 23:43:58

Early last week, I wrote about my excitement over Google's support for Linux on Chromebooks and my search to find a used Chromebook on the list of supported devices. My promise was to let you all know how this plan of mine has worked out. 
So, I bought an "open box" Lenovo Chromebook from Best Buy, model number ZA270025US, for $150. The charger was missing, otherwise, it would have been $100. I was able to locate it on the list of Crostini-enabled devices [here](https://www.reddit.com/r/Crostini/wiki/getstarted/crostini-enabled-devices). Check. Took it home and enabled Linux in the device settings, as promised...thrilled and check. Started my download in the Linux terminal for Atom, but... errors ensued! Oh, no!

>error processing atom-amd64.deb (--install)
>package architecture (amd64) does not match system (arm64)

No problem. I'll look for a arm64.deb file...
Hours later...I got an arm64 version of VSCode from [Headmelted](https://code.headmelted.com/) to work on my Chromebook.
It turns out that the processor in this Lenovo is an MT8173, also on the list. But the architecture is Arm64. I had no inkling of an idea that I needed to be concerned about the architecture, other than, that it was supported, and it is, but not so many apps are available. Huh. 
For now, I am good. I have a Chromebook that runs Linux and I have a code editor I like. But I'm disappointed that I can't seem to run much else. I have posted an inquiry at r/crostini about what might be doable with this device, so I'll continue to keep you updated. 
If you are looking to find a Chromebook of your own to run Linux, I would say, look for one on the list, *and* make sure apps are readily available; Amd64 and x86-64 seem to be good choices.
Career Karma Roundup #1: Coding Bootcamp Income Share Agreements 101
Tags: career, roundup, codingbootcamp
Published: 2019-08-07 22:13:29

There's a new way to pay for coding bootcamp: **Income Share Agreements**. **[Career Karma](https://careerkarma.com/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)** has all the information you need to determine if an ISA is the best financing option for your break into tech.

- **[Introduction to Income Share Agreements](https://careerkarma.com/blog/income-share-agreements-introduction/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)**

Everything you need to know about this revolutionary new way of financing your education.

- **[Should We Replace Student Loans with ISAs?](https://careerkarma.com/blog/why-we-should-replace-federal-student-loans-with-income-share-agreements-isas/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)**

Are ISAs the solution to the student debt crisis? We consider how ISAs might be the alternative to federal loans we've been waiting for.

- **[ISA Legislation in Congress](https://careerkarma.com/blog/bipartisan-isa-legislation-introduced-in-senate/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)**

Get the details on the bipartisan ISA legislation recently introduced in Congress.

- **[Income Sharing vs. Student Loans: How Do They Compare?](https://careerkarma.com/blog/income-sharing-vs-student-loans/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)**

How are ISAs different from traditional student loans. We consider the potential benefits of ISAs to students over debt financing your education.

- **[Responding to the Critics of Income Share Agreements](https://careerkarma.com/blog/this-is-not-the-world-of-subprime-children/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)**

With the increased interest in ISAs lately, there have been many criticisms of the new financing programs. We take a closer look at these critiques and respond with our take. 

- **[How Do ISAs Work with Coding Bootcamps?](https://careerkarma.com/blog/income-share-agreements/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)**

Here, we discuss how aspiring tech workers can use ISAs to fund their coding bootcamp courses.

***

*As a coding bootcamp grad and CTO of the Y Combinator-backed startup __[Career Karma](https://careerkarma.com/?utm_source=Devto&utm_medium=articleroundup&utm_campaign=august)__, I've been in your shoes, so I’m happy to answer any questions you may have about income sharing or anything re: learning to code! Please let me know your opinions in the comments below!*

![Career Karma logo](https://744025.smushcdn.com/1245953/wp-content/uploads/2019/01/ck_logo.png?lossy=1&strip=1&webp=1 "Career Karma Logo")
[Video] Let’s Talk About Mentoring
Tags: video, mentoring, cascadiajs2018
Published: 2019-08-07 21:21:33

---
title: [Video] Let’s Talk About Mentoring
published: true
description: Throughout my career I've had many mentors who have been critical to my own growth. I'll just say it, you should have a mentor and you should be a mentor. Intrigued to know why? Come to this talk. In this session we'll talk about why you should care about mentoring and how it can help you with your career, how you can find a mentor, the components of a mentor-lationship, what makes a good mentor, and how you can become one.
tags: video, mentoring, cascadiajs2018
---
*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!*

# Glenn Block
![Glenn Block](https://2018.cascadiajs.com/speakers/gblock.jpg)

Throughout my career I've had many mentors who have been critical to my own growth. I'll just say it, you should have a mentor and you should be a mentor. Intrigued to know why? Come to this talk. In this session we'll talk about why you should care about mentoring and how it can help you with your career, how you can find a mentor, the components of a mentor-lationship, what makes a good mentor, and how you can become one.

[Watch the talk on YouTube (24:44)](https://www.youtube.com/watch?v=WsTYfQXF8MA)
Improving Community Support for Liquibase
Tags: sql, liquibase, devops
Published: 2019-08-07 20:21:31

It’s an exciting time for the Liquibase community. The latest release, 3.7, has over 350 commits from the community and from Datical. 
Datical has dedicated several engineers to the Liquibase open source project. 
Most recently, these efforts helped push the [Liquibase 3.7 release](https://www.liquibase.org/2019/07/liquibase-3-7-0-released.html) with several important new features including improved support for PostgreSQL, DB2, MariaDB, MS SqlServer, Ingres, and Firebase, and much more. 

### Liquibase Community Manager

I’m very excited to share that we are looking to hire an [open source community manager](https://www.datical.com/company/careers/?gh_jid=1803669). 
This position will be vital to the community, helping to manage and improve the website and forum. 
They’ll also be responsible for responding to questions and comments as well as connecting with users to help improve everyone’s experience with Liquibase. 
If you’re passionate about building open source communities, [I encourage you to apply!](https://www.datical.com/company/careers/?gh_jid=1803669)

### Strategic Partnerships

In addition to dedicating developers to the project, the Datical team has been investing in strategic partnerships with Cassandra, CockroachDB, Couchbase, and SAP HANA, among others, to increase community contribution. 
Look for more updates in the near future from these partnerships.

We’re committed to increasing our investment in Liquibase by adding to the capabilities, news, documentation and community contribution. 
Look for more news and announcements by following [@Liquibase](https://twitter.com/Liquibase) and [@Datical](https://twitter.com/Datical) on Twitter.
In defense of the humble console.log
Tags: javascript, webdev
Published: 2019-08-07 19:42:34

There is some negative sentiment out there about using `console.log` for debugging. It's true that, in many cases, the browser's debugger is more powerful. However, there are still scenarios where using `console.log` can be very useful.

Recently I was debugging a drag and drop issue. Some of my drop zones were not accepting drag overs or drops. Using breakpoints in the debugger would not really have worked here. I wanted to see debug information as I was dragging something. Imagine hitting a breakpoint on every `dragenter` or `dragover` event. It's not practical. The breakpoint would be triggered every time I move the mouse. I'd have to click the resume button, in which case I'd probably lose my active drag operation, or press the resume hotkey one-handed (remember, I am holding down
the left mouse button with my finger on one hand).

Instead I added some `console.log` statements to print information about the element being dragged over, whether it was a valid drop zone, etc. This produced a lot of log messages, but I still think it's easier than having execution paused every time I move the mouse.

`console.log` can be even more handy when using logpoints in third party code.

## Logpoints: dynamically adding `console.log`s, even in third party code

Logpoints are a relatively new feature in Chrome and Firefox. They work similarly to breakpoints - you add them to a line of code. Except instead of pausing execution, they will simply log out some information. You can put logpoints anywhere, not just your own code. If you can see the code in the Sources panel, you can add a logpoint.

I haven't used logpoints in Firefox yet, but adding them in Chrome is simple. Open the code you want to add a logpoint to, and right-click on the line number. Select "Add logpoint...":

![](https://thepracticaldev.s3.amazonaws.com/i/vjpad3ys6tu3kucsmckh.png)

Then a box will appear where you can type the expression to log. This expression is formatted just like what you would pass to a call to `console.log`. You can log multiple values by separating them with a comma.

![](https://thepracticaldev.s3.amazonaws.com/i/vjpad3ys6tu3kucsmckh.png)

Now, whenever that line of code is hit, the configured log message will be printed out.

## One last note

While `console.log` statements can be very useful with development and debugging, you should take them out before going to production.

Too many log messages can give curious users insight into the inner workings of the application. Errors should be displayed to the user in 
the application's UI, not logged to the console.

An additional consideration: if there are lots of logging statements being executed, this can affect the performance of the application.

## Further reading

- [10 Tips for Javascript Debugging Like a PRO with Console](https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6)
- [Chrome Logpoints](https://developers.google.com/web/updates/2019/01/devtools#logpoints)
- [Firefox Logpoints](https://developer.mozilla.org/en-US/docs/Tools/Debugger/Set_a_logpoint)
Authorization Series — Pt 2: Securing HTTP APIs with RBAC rules
Tags: api, authorization, security
Published: 2019-08-07 18:57:13

---
title: Authorization Series — Pt 2: Securing HTTP APIs with RBAC rules
published: true
description: LLearn how to use Auth0's Role-Based Access Control (RBAC) feature to secure HTTP APIs with ease.
tags: #API #authorization #security 
canonical_url: https://auth0.com/blog/authorization-series-pt-2-securing-http-apis-with-rbac-rules/
---
Editor's Note: This is the second, technical post in a 3-part series on focusing on Authorization. Stay tuned for the last part in this series, focusing on dynamic authorization.

TL;DR: In this article, you will learn how you can leverage Auth0's RBAC (Role-Based Access Control) feature to handle end-user authorization in your APIs. The article will start by proposing a simple scenario where you could use RBAC to secure API endpoints; then, it will show how you can map this scenario in your Auth0 dashboard and how you can implement it on a Node.js and Express API. Although the samples shown here use this specific combination of technologies (Node.js and Express), you will see that the solution is easy to implement and that you can translate it to any other platform you might be using.

Important Note: This article takes advantage of the Groups feature that is currently in beta testing. To get access to this feature, please, follow the instructions on the New Beta Program for Authorization Groups announcement.


[Continue Reading 📖](https://auth0.com/blog/authorization-series-pt-2-securing-http-apis-with-rbac-rules/?utm_source=dev&utm_medium=sc&utm_campaign=authorization_pt2)
"You CAN sit with us"
Tags: react, javascript, node
Published: 2019-08-07 17:55:58

Okay. Maybe I overreacted a tiny bit on the last post. 

Now that I'm on the other side of my first Build-Week at Lambda school, this doesn't feel so bad after all. Our project came together beautifully. As far as my communication crisis? I laugh just thinking about how easily that was overcome. Mostly thanks to my amazing partner who was uninhibited and ready to work! I learned a lot about how project management tools such as **Trello** boards and **Monday.com** can really break a daunting project down into digestible pieces. Our UI came out beautiful and clean. Most importantly, **we passed!**

Overcoming that first (major) obstacle helped me get over my first bout of imposter's syndrome. My partner took on the task of completing our 'About the Team' page. Let me tell you: I was blown away by how my partner portrayed me and my skills/contributions. Reading that bio had to be the point where I realized that I do belong here. Seeing how my natural behavior and instincts (that I took for granted daily) were being perceived by someone I had known barely a month really helped me see my strengths and value to whatever company I will work with as a software engineer in the near future (*hey, Microsoft!*).

Now, I'm bracing myself for the start of something completely new: backend. *Here we go again!*
Typescript hack: Simple utility type for changing type of keys
Tags: typescript, javascript, react, vue
Published: 2019-08-07 17:36:01

---
title: Typescript hack: Simple utility type for changing type of keys
published: true
description: Typescript hacks for everyone!
tags: typescript, javascript, reactjs, vuejs
---

When making all keys optional in Typescript, we gonna use the utility type [Partial](https://netbasal.com/getting-to-know-the-partial-type-in-typescript-ecfcfbc87cb6). But what if we want to change the type of some keys of
given object type?

I created a simple utility type to achieve this goal. First of all, I will show you how to use it and lastly show the codes.

```ts
type User = {
  id: number
  name: string
  age: number
  hobbies: []
}

type OtherUser = ChangeTypeOfKeys<User, 'id' | 'age', string>
```

This is simple utility. First, it accepts the target `object` type. Then the `keys`, its a `union` type, we want to change and lastly pass the new type. The created type of `OtherUser` will have a shape like this:

```ts
type OtherUser = {
 id: string
 name: string
 age: string
 hobbies: []
}
```

Sweet! We just changed the type of keys from `number` to `string`. The codes for this utility type:

```ts
/**
 * Change the type of Keys of T from NewType
 */
export type ChangeTypeOfKeys<
  T extends object,
  Keys extends keyof T,
  NewType
> = {
  // Loop to every key. We gonna check if the key
  // is assignable to Keys. If yes, change the type.
  // Else, retain the type.
  [key in keyof T]: key extends Keys ? NewType : T[key]
}
```

Thats all! If you think this is helpful. Like and share!
What is the last open-source project that you found?
Tags: opensource, project, thread, discuss
Published: 2019-08-07 17:33:11

---
title: What is the last open-source project that you found?
published: true
description: What is the last open-source project that you found?
tags: opensource, project, thread, discussion
---

Open-Source is awesome, so let's talk about them: What is the last one that you found and blow your mind? Something that someone/some team spent a lot of hours (or just a few) and delivered an amazing product?

Links are appreciated :)
Android: Button with Both Image and Text
Tags: android
Published: 2019-08-07 16:57:17

Let's say you want a button to show an image with accompanying text. Do you then add two views, align them together and have two click listeners?


No there is an easier way.

```
<?xml version="1.0" encoding="utf-8"?>
<Button 
android:text="Start" 
android:drawableTop="@drawable/start_wrap" 
android:drawableTint="@android:color/white" 
android:drawablePadding="10dp" 
android:background="@android:color/transparent" 
android:textColor="@android:color/white"/>
```

Add a drawable to the button like this. And if you want to change the size, I like to create a drawable wrapper which is responsible for sizing. Like this:
```
<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
  <item 
  android:drawable="@drawable/baseline_camera_enhance_24" 
  android:width="40dp" 
  android:height="40dp" 
  /> 
</layer-list > 
```
## That is all, simple and easy
What parsers and 2 year olds have in common. 🚼
Tags: explainlikeimfive, discuss, computerscience, beginners
Published: 2019-08-07 16:53:34

Im on the platform again waiting for a train, so in the mean time before I can't move my hands due to getting pretty personal with some strangers, let's talk parsers.

### What is a parser?
Imagine you are 2 years old again, you may have asked questions to grown-ups from time to time, between you and said grownup, your parents may have needed to step in to translate your unintelligible and very cute pseudo words into language that said grown-up can understand. Your parent just parsed something admittedly simple into something way more complex.

### Are we 2 year olds talking to computers?
Most definitely, the computer doesn't understand your B, C, D, Java or JavaScript, we need a way to parse this stuff. There are 2 main ways to do this, parse through compiling and parse through interpreted.

### What is compiled?
As a 2 year old, you grab some crayons and attempt to write some words on the nearest furniture you can find, that resulting scribble is understood by your parents who then explain thier interpretation of your scribble to another grownup. There is still interpreted behaviour going on but it's parsed from hard evidence, eg the scibble on the sofa, but it remains there until somebody cleans it off and you scribble again.

### What is interpreted?
As a 2 year old who has now had thier crayons confiscated 😈🖍️, your only option is to babble. This is on the fly and means that your parents must parse your language as it happens.

### What is a language actually.
A language is your 2 year old self's now formalized vocabulary, as you grow, you learn new words that enable new features in your life. You start to confirm to a specification, in my case it would have been English. You have a primary way to express yourself, you may prefer scribbles or bables. Although most children can do both, C++ has an interpreter, JavaScript has a compiler, bit still it's rare that a 2 year old is gifted enough to do both well.

### Fast forward.
You are sort of all grown up, having known you would always write code (let me know in the comments!). You want to write a DSL, "a what?" A domain specific language, "ohh.. a what?". scss it's a micro language that handles things for a particular ecosystem, jsx and tsx are great examples too. How does anyone make a language like this and make it understandable? Simply put, grammer describes a language, for example a line terminator is `;`, a code block could be tab indented `\t`. There are a few systems that allow us to describe grammer. I'm on the train now, times up, so let's get into that next in the series, and why am I talking about it too.
new Video(); Upload de imagens com a FETCH API do JavaScript!
Tags: javascript, fetch, upload
Published: 2019-08-07 16:40:53



[![Upload de imagens com a FETCH API do JavaScript!](https://thepracticaldev.s3.amazonaws.com/i/8ho4joppox3h0frsocr1.jpg)](https://www.youtube.com/watch?v=5RUgDRZjmjA)


Você conhecem a FETCH API? 
Nesse vídeo eu vou mostrar como fazer upload de imagem usando a FETCH API e vou usar a API do IMGUR como exemplo.
Aqui você vai aprender também como enviar headers usando a FETCH API.


[➜ Participe da nossa lista de desenvolvedores](https://emersonbroga.com/e/participe/)
[➜ Aprenda ES6](https://amzn.to/2J4XnLg)
[➜ Veja as dicas no instagram](https://www.instagram.com/emersonbrogadev/)
[➜ Assita nosso canal no Youtube](https://www.youtube.com/c/emersonbroga/)
[➜ Curta nossa página no facebook](https://www.facebook.com/emersonbrogadev/)
[➜ Não perca as atualizações no twitter](https://www.twitter.com/emersonbrogadev/)

=)
My first component in Angular - Box
Tags: angular, cssinjs, emotionjs
Published: 2019-08-07 16:38:36

---
title: My first component in Angular - Box
published: true
description: 
tags: angular, cssinjs, emotionjs
---

<b>You can grab the code here</b> [https://stackblitz.com/edit/flexboxcssinjs](https://stackblitz.com/edit/flexboxcssinjs)

## Box
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model

![](https://thepracticaldev.s3.amazonaws.com/i/ak08y8j1p19rcbvva5rw.png)

In every design system that I made, Box component is the first component that I developed.

>We uses Angular and emotionJS (CSS-in-JS) for code example.

### Box component code (snippet version)

![](https://thepracticaldev.s3.amazonaws.com/i/nvw3iz8drgic1y6wr9d9.png)

The Box component can be implemented as simple as this:

~~~html
<Box p="20px 20px" ml="10px" mr="10px" w="200px" h="auto">
 Content
</Box>
~~~

>Please note that we are not using <b>brackets [rule]="value"</b> as we are expecting literal string.

And we can extend the Box to create other component e.g Flexbox

![](https://thepracticaldev.s3.amazonaws.com/i/en5z0jos367oi7epb4ru.png)

By using Flexbox component, creating a flexbox is not an issue anymore

~~~html
<Flexbox w="100vw" justifyContent="space-between">
  <Box w="50px" h="50px" bgColor="rebeccapurple">
  </Box>
  <Box w="50px" h="50px" bgColor="rebeccapurple">
  </Box>
  <Box w="50px" h="50px" bgColor="rebeccapurple">
  </Box>
</Flexbox>
~~~

We can also do a checking on the value and helps developer to identify the typo (me myself is not kind of person who remember all the rule values)

Here is an example how to add simple validation on values. 

![](https://thepracticaldev.s3.amazonaws.com/i/0ck1at4pyfn2igj2mb1k.png)

In above example we check the value of justifyContent and only if its a valid value, the justifyContent rule added into style. 

>Box component can be Base component to other components e.g. Semantic Components like <b>section</b>, <b>header</b>, <b>article</b>, <b>nav</b> and many more...

### Semantic components

~~~javascript
class SectionComponent extends BoxComponent {}
class HeaderComponent extends BoxComponent {}
class ArticleComponent extends BoxComponent {}
class NavComponent extends BoxComponent {}
~~~

## Summary

Abstracting the Box component as a Base component will make our life easier because all the components of HTML can be considered as a boxes. Like Box component, all the HTML elements (boxes) is consists of:

- <b>Content</b> The content of the box, where text and images appear
- <b>Padding</b> Clears an area around the content. The padding is transparent
- <b>Border</b> A border that goes around the padding and content
- <b>Margin</b> Clears an area outside the border. The margin is transparent

By extending the Box component, all mentioned above have been covered.