teleren/devto huggingface dataset:
How to save your CSS changes directly from the console
Tags: css, frontend, devtools
Published: 2020-03-21 04:07:07

---
title: How to save your CSS changes directly from the console
published: true
description: Tired of switching back & forth between your browser devtools and your code editor, copying & pasting styles? 
tags: CSS, Frontend, Dev Tools
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/k507tad17duhalj8at6w.jpg
---

I'm on a new kick with doing little to no intro to an article, just getting straight to it. I think I'll keep that up...

While this is also possible for Firefox & other browsers, this guide will explain how to save styles directly from the devtools in Chrome.

## (Step 1) Open Devtools > Sources > Filesystem
![Devtools > Sources > Filesystem](https://dev-to-uploads.s3.amazonaws.com/i/2vd62u6vvef6otf16j44.png)
You might wonder how this works with a framework like Angular or Vue since that code goes through a build process. At least with Chrome, this poses absolutely no issue and it's all handled by the source maps. I work mainly in Angular and I use this feature heavily.

## (Step 2) Click on "+ Add folder to workspace"
Click on that little section right beneath the "filesystem" tab that says "+ Add folder to workspace". You'll be prompted to navigate your file system and select the project folder that you're working on. I usually select the entire folder (you can navigate to specific files / folders after it's connected) but you can alternatively connect only the files that you're working on (if you have privacy concerns, for example).

## (Step 3) Proceed as usual, notice the link
![Proceed as usual, notice the link](https://dev-to-uploads.s3.amazonaws.com/i/znaulm720klqksul31bh.jpg)
After you've added your project files to the workspace, you'll notice that a little file icon with a green badge appear next to the source file name in the Elements > Styles tab. 

Now, you can use the inspector to find elements, isolate the relevant styles, apply your changes to see how they look (just like usual) but THEN you can click the link in the inspector and jump directly to the style definition in  your connected workspace.

As far as I know there is not way to directly save a style change from the inspector itself, but not having to hunt down the styles in your editor is really a pretty huge time saver.

Google has a tutorial that walks you through all the benefits of this feature if you want to get more out of it, take a look: https://developers.google.com/web/tools/chrome-devtools/workspaces/

---

**Thanks for reading!** If you're currently making a career transition to web / software development, I write more about that topic here: https://swwwitch.dev
Borrowing brilliance, or one quick way to come up with content ideas
Tags: devrel, content
Published: 2020-03-25 14:54:49

---
title: Borrowing brilliance, or one quick way to come up with content ideas
published: true
date: 2020-03-21 03:38:20 UTC
tags: DevRel, DeveloperRelations, content
canonical_url: https://maxkatz.org/2020/03/20/borrowing-brilliance-or-one-quick-way-to-come-up-with-content-ideas/
---

[Content](https://dev.to/ibmdeveloper/how-content-creates-content-3edj) (articles, blogs, tutorials, videos) is one of the best ways to scale developer relations. Content can be accessed by developers anywhere and anytime. High-quality content can be your evergreen content – that is content that doesn’t go out of date.

One thing that’s not always easy is coming up with content ideas or what to write about. Here is one way to come up with interesting content ideas.

Peak at what other people are publishing (also called [borrowing brilliance](https://www.cnbc.com/id/32900786)). There is probably disproportionately more content written about using various Amazon AWS services than any other cloud provider. You can see what tutorials, articles and how-to’s were published and borrow some ideas.

For example, a lot of content on Serverless is based on using AWS Lambda. Take a tutorial that uses AWS Lambda and write a similar one that solves a similar problem using Azure Functions, IBM Cloud Functions or Google Cloud Functions.

Hope this little tip helps you publish more content.

Extra credit. You can also look at Stack Overflow. Browse a topic and see if there are any questions you can answer. If yes, you can answer that question in a blog post. Then go back to the question and answer it with a reference to your blog.
Day 99 : Say
Tags: hiphop, code, coding, lifelongdev
Published: 2020-03-21 01:36:53

_liner notes_:
- Professional : Had a few meetings. Finished up a personal report thing for work. Planned out some future projects. Pretty productive Friday.

- Personal : Went through a bunch of tracks for tomorrow's radio show. Did a little coding. Caught up on the show "Dispatches from Elsewhere". Pretty interesting so far. I like the "look" of the show.

![Arial view of Thinadhoo, Maldives beach](https://dev-to-uploads.s3.amazonaws.com/i/i3du7jbeuim8xsfg604f.png)

Not much to say. Going to work on the radio show and maybe some little coding.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube aLp7Vy8_SqA %}
Lista de Materiais Gratuitos para aprender PHP MVC 
Tags: php, laravel, beginners, ptbr
Published: 2020-03-21 00:33:54

Para os novatos no mundo da programação web, o padrão **MVC** (Model-View-Controller) pode parecer um pouco complexo a princípio. 

Visando ajudar este problema, estarei disponibilizado uma lista de matérias que facilitaram o entendimento dos conceitos deste padrão utilizando a linguagem de programação mais popular da Web, o PHP.

Por motivos de organização, os conteudos foram divididos em:
- Leituras
- Tutoriais
- Tutoriais em vídeo
- Framework Laravel


# **Leituras**
* [Conceito de MVC e sua funcionalidade usando o PHP](https://www.devmedia.com.br/conceito-de-mvc-e-sua-funcionalidade-usando-o-php/22324)
* [MVC: Uma Estrutura Básica Com PHP Orientado a Objetos](http://blog.ultimatephp.com.br/mvc-php-orientado-a-objetos/)
* [Os 10 melhores frameworks PHP para desenvolvedores web](https://www.hostmidia.com.br/blog/framework-php/)

# **Tutoriais**
* [Construindo um simples framework MVC com PHP](https://medium.com/@jardelgoncalves1996/construindo-um-simples-framework-mvc-com-php-349e9cacbeb1)
* [MVC e PHP - Entendendo o padrão MVC na prática](https://webdevbr.com.br/mvc-e-php-entendendo-o-padrao-na-pratica-criando-um-framework-php)
* [PHP::Construir um sistema de Rotas para MVC – Primeira parte](https://alexandrebbarbosa.wordpress.com/2019/04/17/phpconstruir-um-sistema-de-rotas-para-mvc-primeira-parte/)

# **Tutoriais em vídeo**
* [Série | Criando Site em PHP + MVC + CRUD](https://www.youtube.com/playlist?list=PLgbAYUnxJ2NE6eM2xkOlpqJ5sl37bLyKx)
* [DESCOMPLICANDO MVC COM PHP DO JEITO CERTO | PHP TIPS #007](https://www.youtube.com/watch?v=MfZrnQprZ2U)

# **Framework Laravel**
* [Laravel Framework: introdução](https://www.youtube.com/watch?v=D4NcDvJN4CY)
* [[Laravel 6 Novidades ] - Finalizando com Prática, nosso Primeiro CRUD #laravel #php](https://www.youtube.com/watch?v=sWI0o-KeVmc)
* [Laravel PHP Framework Tutorial - Full Course for Beginners (2019)](https://www.youtube.com/watch?v=ImtZ5yENzgE)
Practicing Well
Tags: practice, learninpublic, professionaldevelopment
Published: 2020-03-21 00:10:41

To get better at something, you have to practice well.

> "Those who developed deep expertise in a challenging domain did hours and hours and hours of Deliberate Practice."
> -Kathy Sierra, [Badass: Making Users Awesome](https://www.amazon.com/gp/product/B01GNR3KDM/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B01GNR3KDM&linkCode=as2&tag=jbranchaud-20&linkId=8d202eaaeb805033c554053dc4b42305)

You have to practice that skill in a way that pushes you out of your comfort zone. If you are always practicing a rote skill that you've already mastered, then there is no progress to be made. It sounds obvious, to me at least, but I still find myself frequently in the trap of practicing poorly. As I tried to learn piano last year, I put in time everyday on scales and songs that I had already figured out. I was getting bored with those and also not getting any better at piano. It was frustrating. But it also felt like I was doing the right things -- putting in time and grinding away. As Sierra points out in her book,

> "The _wrong_ ways to practice make sense."

Whereas,

> "Deliberate Practice is always just beyond our current ability/comfort zone."

Pushing yourself out of your comfort zone is balancing act though. You won't make any progress by attempting to practice something that is too complex. I also found myself in this trap. After I would finish cruising through my scales, I'd stumble my way through large portions of a piece that I didn't have the skill to play well. I should have been focusing on small pieces of it or even working on a slightly easier song.

> Deliberate practice is when you work on a skill that requires 1 to 3 practice sessions to master. If it takes longer than that, then you are working on something that is too complex.
> [-James Clear](https://jamesclear.com/deliberate-practice-strategy)

Find that sweet spot of a practice session putting you out of your comfort zone, but not being unachievable. If you keep stacking these bits of deliberate practice on one another, you will be incrementally stacking the bricks toward becoming an expert.

---

Notes:

The other challenge of steady deliberate practice is having a progression path for that practice. In order to engage with a skill on the edge of your ability consistently, you need to have an idea of where you are headed and you need to have some sense of the incremental steps that will get you there.
Project Aurora Status Update March 21st
Tags: uwp, github, csharp, xaml
Published: 2020-03-20 23:27:13

Progress has slowed considerably, as my other work has become a bit crazy with all these Covid-19 preparations; day job taking up 12 hours a day doesn't leave much room for anything else after being a parent and husband...

It's not too bad though; end of the day my family is safe and well so I can't complain.  Hopefully soon I will see some of that time-to-be-bored I keep seeing plaguing people on the internet!

So, I have fixed the sign in, but I had to drop the GitHubApp auth and go back to standard OAuth.  It's working well and I have left the code base in there so I can change it later on when I have more time.

Further I have repo's listing, and the details are all there behind the scenes ready for a more detailed listing.   Repo's and Accounts have web links to open in browser, which is particularly useful right now.

I have some UI work to do, but as a test bed it is working well with multiple accounts etc, so I am pretty happy with that!

Here's some progress shots:

![Current Git Hub Account sign in screen](https://i.pinimg.com/originals/4f/ed/32/4fed323f465f274cefad18e23a4c2f27.png)

![Multiple OAuth sign in concurrent](https://i.pinimg.com/originals/eb/4c/8e/eb4c8eb542bbc9589c862614dc1a2af2.png)

![Kanban Ink showing behind schedule tasks](https://i.pinimg.com/originals/55/cd/80/55cd80c7c924ff193f951f5343a6d1f2.png)
console.log(9007199254740992 + 1); Surprised by the result?
Tags: javascript, discuss
Published: 2020-03-20 23:11:08

What is the output of the following JavaScript code:

```javascript
console.log(100 + 200);
console.log(9007199254740992 + 1);
```

Try to estimate the answer... and then run the above code in your favorite JavaScript environment.

Are you surprised by the result?! There is a very simple explanation. Can you find it?
How can we help with Folding@Home for folding proteins
Tags: virus
Published: 2020-03-20 23:05:49

---
title: How can we help with Folding@Home for folding proteins
published: true
description: We talk about the Folding@Home project, where it came from and what kind of problems it will cover and how it works.
tags: virus
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bzmqi09e1a6quhhattyz.jpg
---

{% youtube 8eAYFDnurk0 %}

We talk about the Folding@Home project, where it came from and what kind of problems it will cover and how it works.
What I Learned From a Single Lesson using Exercism.io
Tags: codereviews, learning, selftaughtdeveloper, mentor
Published: 2020-03-20 23:03:11

---
title: What I Learned From a Single Lesson using Exercism.io
published: true
description: Talking about the power of code reviews and mentors
tags: code reviews, learning, self-taught developer, mentor
---
{% medium https://medium.com/codeconnective/exercism-io-what-i-learn-from-a-mentor-in-one-lesson-9a56e5a0e042 %}
Augmented Reality 3D Photo Sphere in Xamarin, .NET and ARKit - Explained
Tags: xamarin, arkit, augmentedreality
Published: 2020-03-20 22:18:55

A few people have asked how I achieved the Augmented Reality 3D Photo Sphere effect in Xamarin, .NET and ARKit so I have recorded a short explainer video and code walkthrough. Enjoy! 

{% youtube rYy1khb7zII %}

-- Lee
ทำงานเร็วขึ้นด้วย git alias 
Tags: git, tips
Published: 2020-02-25 14:44:56

---
title: ทำงานเร็วขึ้นด้วย git alias 
published: true
description: ทำงานเร็วขึ้นด้วย git alias 
tags: git, tips
---

ผมยังเห็นน้องๆในที่ทำงานยังใช้ SourceTree สำหรับทำงานกับ git อยู่ 
ในใจรู้สึกอึดอัดมากๆ เพราะผมไม่สามารถใช้เครื่องมือพวกนั้นได้ 
เครื่อง Mac Air มันช้าและ mem น้อยจนเกินกว่าที่รันของพรรค์นั้นไหว

สำหรับผมแล้วรัน git command ใน terminal นี่แหละสะดวกและประหยัดพลังงานที่สุด

แต่การจะต้องพิมพิ์คำสั่งยาวๆมันก็ไม่ไหว มันไม่คูลล์
ผมจะเล่าให้ฟัง ว่าคูลล์ๆเค้าทำยังงัย

ตามปกติ เราทำงานกับ git จะต้องทำตามขั้นตอนประจำ add/commit/push 

```sh 
# เพิ่มไฟล์ทั้งหมดที่มีการเปลี่ยนแปลงลง stage 
$ git add .

# สั่ง commit code และใส่ message ไปด้วย 
$ git commit -m "COMMIT MESSAGES"

# สั่ง push code ขึ้น origin 
$ git push 
```

จะเห้นว่าเราต้องพิมพิ์ซ้ำเยอะ
เราสามารถทำ short cut ได้ 2 วิธี เพื่อลดจำนวนอักษรที่ต้องพิมพิ์

1. สั่ง config ผ่าน git-config 
```sh 
# สร้าง short cut ให้ c = commit 
$ git config --global alias.c commit 

# เวลาใช้งาน ก็ใช้ c แทน commit ไปเลย
$ git c -m "COMMIT MESSAGES"
```

2. แก้ไขไฟล์​ `~/.gitconfig`
```conf
[alias]
  c = commit
```

ซึ่งแบบที่ 1 และ 2 ถือว่ายังไม่ค่อยโอเค เพราะต้องใช้ git ตลอด
แบบที่เวิร์คที่สุดคือ 

3. ทำ shell alias 
โดยใช้ `alias`
```sh 
alias gc='git commit'
```
แบบนี้เวลาใช้งานเราก็แค่รัน `gc -m "COMMIT MESSAGE"`

หรือเข้าไปแก้ไข ~/.bashrc โดยเพิ่ม function แบบนี้เหมาะสำหรับเราจะเพิ่ม logic เทพๆเข้าไป โดยที่เราไม่ต้องใส่ option ที่ต้องใส่ซ้ำๆได้ 
```conf 
function gcm() {
  # ใน bash $1 หมายถึง argument ตัวแรก
  # สำหรับ function นี้เวลาใช้งานคือ
  # $ gcm "COMMIT MESSAGE"
  # จะเห็นว่า $1 = "COMMIT MESSAGE" นั่นเอง
  git commit -m "$1"
}
```

แล้วพบกันใหม่ สวัสดี
Lesson 20 Swift Discussion
Tags: swift
Published: 2020-03-20 22:07:38

<h2>Is building an app easier or harder than you thought when you started the class? Why?</h2>

<p>Building an app is about as difficult as I had imagined. Making an app requires a lot of knowledge of coding that I pretty much expected not to know.</p>

<h2>What was your favorite part of building the final apps?</h2>

<p>My favorite part is just seeing the end result, and having the knowledge of what certain code does.<p>

<h2>What was the most challenging? Why?</h2>

<p>The most challenging part is finding the code to do what I want. Unlike HTML, CSS, etc. there’s not a good resource for code, like MDN. It’s kind of like a trial by fire, but that’s also part of the fun.</p>
Common Voice
Tags: exploration
Published: 2020-03-20 22:07:03

---
title: Common Voice
published: true
description: initiative to help teach machines how real people speak
tags: exploration
---

For some reason clicking by "write a post" wiped my story, so here would be short one instead:
I want to share some interesting places I found here and there, maybe they could be interesting for someone else.

Take a look at "Common Voice". The aim of the project is to build a dataset of voices, you can help donating your sample of voice or validating existing one.

https://voice.mozilla.org/en

To be continued...
Simple Laravel package, creating menus from DB sources. 
Tags: php, laravel, database, webdev
Published: 2020-03-20 22:05:47

By creating any project, we face the problem of creating a menu.

Often, we need a simple menu that can be updated at the DB layer, because of that I created a very simple package for Laravel.

This package is customized for bootstrap 4.*, but you can change the view for  other or custom css libraries.
 

### Install
```
composer require begicf/simple-menu
```
### Register Service Provider
Go in 'config/app.php' file.

Find array **providers** and add this element to register provider:
```
\SimpleMenu\SimpleMenuServiceProvider::class
```

### Migrate 
```
php artisan migrate
```
SQL Menu table

| Name | Type |
| --- | --- |
| id | int |
| parent_id | int |
| title | varchar (255)|
| description | varchar (255)|
| order | int|
| created_at | timestamp|
| update_at | timestamp|


### How to use

Put in view blade template 
```
<x-menu-menu-component />
```

### Publish resources 
```
php artisan vendor:publish --provider="SimpleMenu\SimpleMenuServiceProvider"

 ```
### Example  
 ``` html
<ul class="navbar-nav mr-auto">
  <x-menu-menu-component />
</ul>
 ```
##### Image 1
![Image2](https://raw.githubusercontent.com/begicf/simpleMenu/master/images/img_2.png)

##### Image 2
![Image1](https://raw.githubusercontent.com/begicf/simpleMenu/master/images/img_1.png)
What are the best blogging engines/frameworks for developers in 2020?
Tags: discuss, blogging
Published: 2020-03-20 22:02:26

---
title: What are the best blogging engines/frameworks for developers in 2020?
published: True
description: What are the best blogging engines/frameworks for developers in 2020?
tags: #discuss #blogging
---

Now that I'm stuck home due to the corona virus, I want to pick up blogging again. 

I'm curious what blogging engines/frameworks out there do you consider to be the best. Features like Markdown and syntax highlighting would be great but not mandatory.

In the past I used Ghost, WordPress, and I even built my own blogging engine. I don't want to spend a month creating a new one so I'm looking for a complete solution.

Which blogging platform do you prefer, and why?
Wizar devlog 09 - Reactive transformation
Tags: typescript, gamedev
Published: 2020-03-20 21:59:18

Last week I implemented pure view generation at the end of each step of the SAM loop.
This week I begin to make the view reactive.

For that I needed to implement a transformer which takes an IObservable A and tranform it to an IObservable B.

The transformation it self is reactive and can be used in Autorun or Reaction.

Note that it is also possible to tranform it in non observable object, for example, in a serialization scenario.

Also, it uses internaly a Computed which memoizes the value of the tranformation and optimize the need of computation.

This is the major step to get a reactive view into Ravioli. The other part of the chain being already done with Crafter-React to connect any observable to React.

Here is a small example of the API.

```ts
test("transform to observable object", function() {
  const Model = object({
    name: string(),
    inventory: array(object({id: string(), quantity: number(), isEquiped: boolean()}))
  })
  const model = Model.create({
    name: 'fraktar',
    inventory: [{id: 'sword', quantity: 0, isEquiped: false}]
  })

  let test

  const transformModel = createTransformer((m: typeof Model['Type']) => ({
    name: m.name,
    stuff: m.inventory
      .filter(item => item.isEquiped)
      .map(({id}) => ({name: id}))
  }))

  autorun(() => {
    test = transformModel(model)
  })

  expect(test.name).toEqual('fraktar')
  expect(test.stuff.slice()).toEqual([])

  getContext(toInstance(model)).transaction(() => {
    model.inventory[0].isEquiped = true
  })

  expect(test.name).toEqual('fraktar')
  expect(test.stuff.slice().length).toBe(1)
  expect(test.stuff.slice()).toEqual([{name: 'sword'}])
})
```
Hello. Who can help me?
Tags: javascript, html, css
Published: 2020-03-20 21:57:39

Hello Guys... I hope you are doing well..
I am a Senior Javascript developer and looking for a man who can help me...
I am willing to pay 150$ everymonth... 
Please contact me if you are good at English...
Not Indian or Pakistan Developers...
Only Europe and American developers...
Thanks...
Andre.
Entity Framework and the JSON List
Tags: angular, ef, javascript, typescript
Published: 2020-03-20 21:41:34

A list of items in Javascript/Typescript is simply an array. In chrome debugger with a breakpoint set it looks like this.

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

In Typescript/Javascript
```typescript
let list = ["one","two","three"]
```
But what happens on the ASP.NET Core 3.1 side where binding happens prior to entry into the endpoint?

We want a field with a property which is a List<string> so the run-time model binder will produce an instance of the list.

```csharp
    public List<string> CurrentValues { get; set; }
```
The Asp.NET binder converts the post information into a class instance of which we can easily see and manipulate the fields.

The entry to the endpoint:

```csharp
public IActionResult PutSettings([FromBody] Model.Setting settingModel){
  //do stuff here
  var changes = settingModel.CurrentValues
}
```
Where settingModel contains a property of type List<string>

**EF layer**

The EF layer is a bit more complex because by default the proper way to store a list of anything is in a single table. Lists in SQL are a single table usually. So how do we accomplish this?  Our containing table of "things" must have a property referring to the table of the list each list item with a pointer back to the container... what?

Consider this:
```json

Table Name = Container
ID = Created by DB automatically.
List = StoreOurLists where FK = this ID.

Table Name = StoreOurLists has rows like this:
ID = Created by DB automatically
Value = "one"
FK = Pointer to the container...

```
FK = Foreign Key. Note: in code first; you must manually set up the builder.Entity bindings. A somewhat complex arrangement (for beginners).

In the end; storing documents is far easier than this. Is SQL still reasonable for web based lists and data? I think it's time is fading. There's no denying the ease of use with JSON data transfer.

JWP2020
Functional Programming.
Tags: es6, javascript, react
Published: 2020-03-20 21:26:50

In this article I have covered everything you need to know about functional programming in JavaScript. Understanding the following features of JavaScript takes your JavaScript level to a higher level and it makes your JavaScript code shorter and cleaner. In addition, you will be able to solve complicated problems in a simpler way using this methods.

1. forEach
2. map
3. filter
4. reduce
5. find
6. findIndex
7. some
8. every


https://www.linkedin.com/pulse/functional-programming-asabeneh-yetayeh/