teleren/devto huggingface dataset:
Rescue server-side development in Dart (part 2)
Tags: dart, flutter
Published: 2021-01-25 18:02:52

In [prevous article](https://dev.to/mjablecnik/rescue-server-side-development-in-dart-part-1-2lm2) I described a problem with server-side development in Dart and what problems can have some OpenSource projects.

I thought about this and found one solution.
My great inspiration is Godot Game Engine which I watch from their first OpenSource steps and now have over 1500 financial contributors at Patreon.

I want to try something similar and create project where I will be develop and maintain libraries for Server-side development in Dart.

I calculated that when only 300 people contribute 10 USD every month, it can pay one fulltime developer position. 10 USD is not so much money I think. Do you agree? And Dart community is sufficiently large where 300 people we can find.

But I don't know if folks from Dart community really want to have this project and are wiiling to some financial support or not. 

So I created simple [Google Form] (https://docs.google.com/forms/d/e/1FAIpQLSfXBOXeS9VYZ9tb6GFUO1dL4RURWtGETX1ffrbTj5AOW-wEvw/viewform?usp=sf_link) for check if people are willing to support me.

I believe that Dart community is sufficienly big and can support any interesting project. When folks join together their resources we can create something awesome and maybe open some other fulltime positions for better and faster development. 

I calculate that successful OpenSource project should have minimal 3 people for fulltime which can create:

Great documentation
Stable code
Good tests
Pretty web page presentation, examples and tutorials
Quality support on various chat/forum platforms 

And start creating the community around this project.


The framework which I would like to create and maintain for a long time should contain support for:

**Core:**
- Build fullstack web apps (with SSR)
- Develop REST APIs
- Websockets
- Tests


**Main modules:**
- Data access for SQL and noSQL databases  
- Caching for Redis
- Logging
- Open API/Swagger database generation
- Auth and Security


**Other modules:**
- Database ORM
- ElasticSearch
- Messagers (RabbitMQ, NATS, Kafka)
- GraphQL, gRPC



But of cource my contributors can give me their opinions and set a course of the project.

What do you thing about it? 
Create comment, give me like and share this article if it is interesting for you.

Please don't forget to fill my [short survey form] (https://docs.google.com/forms/d/e/1FAIpQLSfXBOXeS9VYZ9tb6GFUO1dL4RURWtGETX1ffrbTj5AOW-wEvw/viewform?usp=sf_link) where I want to gain information if Dart community is interested in about some nice fully maintained server-side framework and is willing to financial contributions.

If I find enough people for support it then I will create project page, buy servers and domains, setup Patreon or some alternative for send donations and create or fork some existing project for continual development.

If you are interested in the results of my survey follow me here due to next article which I will create in the future.
{% user mjablecnik %}
Sass placeholder and its limits
Tags: sass, css
Published: 2021-01-25 17:34:08

From the official [📚 Sass documentation](https://sass-lang.com/documentation/style-rules/placeholder-selectors)

> Sass has a special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it's not included in the CSS output. In fact, any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the CSS, nor is any style rule whose selectors all contain placeholders.

We can write a placeholder for reusable pieces of code prefixed by the `%` keyword:

```scss
// colors.scss

%colors-per-viewport {
  background: red;

  @media (min-width: 768px) {
    background: blue;
  }
}
```

and call the placeholder using the syntax `@extend %[placeholder-name]`

```scss
// component.scss

.colors {
  @extend %colors-per-viewport;
}
```

CSS output:

```css
.colors {
  background: red;
}
@media (min-width: 768px) {
  .colors {
    background: blue;
  }
}
```

As seen above, we could also declare a code snippet with mediaquery inside.

### The small matter

Unfortunately, we cannot call a placeholder declaration **inside** a mediaquery 😩

For instance, if we try to declare two placeholders and call them inside a media query

```scss
%colors-mobile {
  background: yellow;
}

%colors-tablet {
  background: green;
}
```

```scss
.colors-viewport {
  @extend %colors-mobile; // ok!

  @media (min-width: 768px) {
    @extend %colors-tablet; // nope!
  }
}
```

The code above will throw an error 😭

```shell
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
```

So, if we really need to reuse a code snipped inside a mediaquery, we can use a `mixin` declaration.

I know, it is not the correct use of the `mixin` function... but it's a desperate measure! 😅


```scss
@mixin colors-mobile {
  background: yellow;
}

@mixin colors-tablet {
  background: green;
}
```

```scss
.colors-viewport {
  @include colors-mobile; // ok!

  @media (min-width: 768px) {
    @include colors-tablet; // yasss!
  }
}
```

> 📚 More info
>
> - [Sass lang - placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
> - [Sass - mixin or placeholder](https://www.sitepoint.com/sass-mixin-placeholder/)
Shell cheatsheet
Tags: shell, bash
Published: 2021-01-25 17:57:40

Few commands I found very useful during development.

| Command                               | Description                                             |
|---------------------------------------|:--------------------------------------------------------|
| `man ls`                              | show manual for command 'ls'                            |
| `wc <file>`                           | words count                                             |
| `rm <file>`                           | remove/delete file                                      |
| `rm -i <file>`                        | remove/delete file (interactive, ask confirm)           |
| `rmdir <directory>`                   | remove/delete directory                                 |
| `rm -R <directory>`                   | remove/delete directory and subdirectory                |
| `rm -iR <directory>`                  | remove/delete directory (interactive)                   |
| `cp <current location> <destination>` | copy files                                              |
| `chmod -R 755 <folder>`               | add writing permission to folder                        |
| `pwd`                                 | present working directory / print working directory     |
| `cd`                                  | change directory                                        |
| `mkdir`                               | make directory                                          |
| `ls`                                  | list files                                              |
| `ls -l`                               | list files (long form)                                  |
| `ls -lah`                             | list files (long form, all also hidden, human readable) |
| `touch [filename]`                    | create file                                             |
| `chown`                               | change owner                                            |
| `cat <file>`                          | show file                                               |
| `<cmd> > <file>`                      | direct the output of "cmd" into "file"                  |
| `grep -rl "<text>" <dir>`             | search for all files containing `<text>` inside `<dir>`     |
| `ln`                                  | symbolic link                                           |
| `alias`                               | show available alias on shell                           |
| `cd -`                                | go to the previous current directory                    |
| `ctrl` + `r`                          | advanced search (search any word in bash history)       |
Motivational Quotes App in React
Tags: react, motivation, opensource, javascript
Published: 2021-01-25 17:53:01

It is a Motivational Quotes App that fetches quotes using an api 
I learnt about fetching data from an api and how to host a site using netlify.I loved the app one of my favourite quote is,
<strong>"Fate is in your hands and no one elses" -  Byron Pulsifer</stong>

The website is hosted on [https://motivational-quotes-react.netlify.app/](https://motivational-quotes-react.netlify.app/)

You can also find the source code of it on [github/motivational-quotes-react](https://github.com/Sadman-Sakib2234/motivational-quotes-react)

So that is it stay happy, stay safe, stay motivated...
<strong>Good Bye!</strong>
This Week's Interesting Round-Up (1/18/2021 - 1/24/2021) 
Tags: ruby, javascript, rails, react
Published: 2021-01-25 16:21:02

List of blogs, Gems, Libraries, and Packages I found interesting from the past week. Hopefully, you find something interesting also. 😁

## Ruby

- Testing Objects with a Functional Mindset - Good read on taking a functional approach to test things to reduce non-deterministic behavior in your tests. 
[https://thoughtbot.com/blog/functional-viewpoints-on-testing-objectoriented-code](https://thoughtbot.com/blog/functional-viewpoints-on-testing-objectoriented-code)
- A Better React/Rails Architecture - Nice write up from Stichfix about why they are transitioning from a Rails/React monolith to a microservices architecture. 
[https://multithreaded.stitchfix.com/blog/2021/01/06/a-better-react-rails-architecture/](https://multithreaded.stitchfix.com/blog/2021/01/06/a-better-react-rails-architecture/)
- Rails 6.1 adds support for belongs_to to has_many inversing - [https://bigbinary.com/blog/rails-6-1-adds-support-for-belongs_to-to-has_many-inversing](https://bigbinary.com/blog/rails-6-1-adds-support-for-belongs_to-to-has_many-inversing)
- When to use Factory Bot’s traits versus nested factories - Covers when to use traits versus factories to create descriptive tests by being more descriptive on what data you are creating.
[https://www.codewithjason.com/factory-bot-traits-vs-nested-factories/](https://www.codewithjason.com/factory-bot-traits-vs-nested-factories/)
- A Webpacker guide is finally in the official Ruby on Rails guides! - [https://edgeguides.rubyonrails.org/webpacker.html](https://edgeguides.rubyonrails.org/webpacker.html)

## JavaScript

- EStimator.dev: The Modern JavaScript Savings Calculator - Cool little site to tell you how you can further optimize your JS so your site loads faster.
[https://estimator.dev/](https://estimator.dev/)
- 13 JavaScript One-Liners That’ll Make You Look Like a Pro - Forget the whole "Pro" thing, there are a couple of really nice functions you can use or refactor to in your codebase to have more descriptive code.
[https://medium.com/dailyjs/13-javascript-one-liners-thatll-make-you-look-like-a-pro-29a27b6f51cb](https://medium.com/dailyjs/13-javascript-one-liners-thatll-make-you-look-like-a-pro-29a27b6f51cb)
- Focus Rings - A centralized system for displaying and stylizing focus indicators anywhere on a webpage.
[https://github.com/discord/focus-rings](https://github.com/discord/focus-rings)
- GUI tool to generate React-Table code for your projects - This generates a scary blob of code but the tool seems super useful and I am sure it gets less scary ones you put everything in their own component files.
[https://www.akashmittal.com/gui-utility-to-generate-react-table-code/](https://www.akashmittal.com/gui-utility-to-generate-react-table-code/)
- react-freezeframe - "Pause" gifs until they hover over.
[https://github.com/ctrl-freaks/freezeframe.js/tree/master/packages/react-freezeframe](https://github.com/ctrl-freaks/freezeframe.js/tree/master/packages/react-freezeframe)
Nunjucks scoped variable declarations
Tags: twig, nunjucks
Published: 2021-01-25 17:45:07

We have to pay attention where we set Nunjucks variables because they are **scoped**

```twig
{% set animals = ['🐱', '🐶', '🐺'] %}

{% for item in animals %}
  {% set animal = item %}
{% endfor %}

{{ animal }}
{# animal -> ERROR #}
{# animal declared INSIDE the loop is NOT available #}
```

```twig
{% set animals = ['🐱', '🐶', '🐺'] %}

{# note this declaration #}
{% set animal = '' %}

{% for item in animals %}
  {% set animal = item %}
{% endfor %}

{{ animal }}
{# animal declared OUTSIDE the loop is available #}
{# animal -> 🐺 (last array item) #}
```

> 📚 More info
>
> [Twig docs - set variables](https://twig.symfony.com/doc/3.x/tags/set.html)
CRUD Operations in Node.js, Express, and MongoDB | Video Tutorials
Tags: node, javascript, webdev, codenewbie
Published: 2021-01-25 17:39:58

In the following tutorials, you will learn how to create API endpoints to handle the CRUD Operations i.e. `create`, `read`, `update`, and `delete` in node.js.

**Support my content**
1. Subscribe to my YouTube channel [here] (https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=10)
2. Donate to my PayPal [here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url)
3. My Twitter [ @chaoocharles ](https://twitter.com/ChaooCharles)

The following is the table of content:
* [Creating an express server](#1)
* [Connecting to MongoDB server](#2)
* [Mongoose Model](#3)
* [require() vs import statement](#4)
* [Handling POST requests](#5)
* [Testing API endpoints with postman](#6)
* [Joi Data Validation](#7)
* [Handling GET Requests](#8)
* [Handling DELETE requests](#9)
* [Handling PUT Requests](#10)
* [Handling PATCH Requests](#11)

Here is the link to the playlist: [playlist](https://www.youtube.com/playlist?list=PL63c_Ws9ecIQkH5xD6JW4cf2VporjzSRW)

Or you can use the videos below.

##Creating an express server #1 <a name="1"></a>
{% youtube PqBQbyujFI0 %}

##Connecting to MongoDB server #2 <a name="2"></a>
{% youtube fchmYqGqnO4 %}

##Mongoose Model #3 <a name="3"></a>
{% youtube kL_qAZD54ME %}

##require() vs import statement #4 <a name="4"></a>
{% youtube qszYPDFQlKo %}

##Handling POST requests #5 <a name="5"></a> 
{% youtube h28Qrd516-E %}

##Testing API endpoints with postman #6 <a name="6"></a>
{% youtube 05bYR2nYra0 %}

##Joi Data Validation #7 <a name="7"></a>
{% youtube PUUmxLzSv3o %}

##Handling GET Requests #8 <a name="8"></a>
{% youtube soDbPgrnf-M %}

##Handling DELETE Requests #9 <a name="9"></a>
{% youtube 9DCxeadeXH8 %}

##Handling PUT Requests #10 <a name="10"></a>
{% youtube EMNPs0mznwc %}

##Handling PATCH Requests #11 <a name="11"></a>
{% youtube PrOza8Zo6mc %}
How To Format NTFS in Big Sur
Tags: macos, format, bigsur, ntfs
Published: 2021-01-27 18:15:23

---
title: How To Format NTFS in Big Sur
published: true
date: 2021-01-25 17:34:30 UTC
tags: macos,format,bigsur,ntfs
canonical_url: 
---

บังเอิญไล่ไปไล่มาไปเจอ Source Code ของ NTFS ที่ใช้ใน macOS มันมีส่วนของ newfs อยู่เหมือนกับ FAT, exFAT และ APFS แต่คำสั่งหายไปเลยเป็นที่มาบันทึกนี้

จากบทความก่อนหน้าคือการ Read / Write NTFS บน Big Sur

[NTFS Read/Write in Big Sur (Intel and M1 ) — Free](https://medium.com/nectec/ntfs-read-write-in-big-sur-intel-and-m1-free-7097a2cc8233)

แต่มันคาใจว่า mount อ่านเขียนได้แต่ทำไมถึงสร้างไม่ได้ก็ไล่ไปเจอ

[Source Browser](https://opensource.apple.com/source/ntfs/ntfs-105.40.1/)

มาไล่ดูใน macOS ไม่พบคำสั่ง newfs\_ntfs แต่มีคำสั่ง

```
BootCampFormatter
```

และเมื่อลองสั่งดูมันก็คือคำสั่ง newfs\_ntfs นั่นเอง

![](https://cdn-images-1.medium.com/max/1024/1*w044S809cpVU-8NqR1Ve8A.png)

#### วิธี Format เป็น NTFS

ในตัว Disk Utility มันจะไม่ยอมให้ Format เป็น NTFS แต่สามารถสร้างเป็น ExFAT ได้ ซึ่ง ID ของ Partition จะเป็นตัวเดียวกันคือ 07 ดังนั้นตอนแรกก็ให้ fotmat disk เป็น ExFAT ก่อนแล้วค่อยมา format อีกรอบด้วยคำสั่งข้างบน

สมมติของเดิมเป็น FAT

![](https://cdn-images-1.medium.com/max/1024/1*iGpYN8QHtTgQisCI5MPX4g.png)

ก็ให้ Click ขวาเลือกแล้ว Erase

![](https://cdn-images-1.medium.com/max/748/1*H3vxb9_1lYkm7v3tASyFxQ.png)

เลือกเป็น ExFAT

![](https://cdn-images-1.medium.com/max/527/1*V-hY0TobNeofHRuGlfWLVA.png)

![](https://cdn-images-1.medium.com/max/589/1*FO0WEuqxDGMWE0YQZAI7hw.png)

![](https://cdn-images-1.medium.com/max/1024/1*x1gniP1nH2dVIuyef2Kjlw.png)

หลังจากนั้นให้ unmount

![](https://cdn-images-1.medium.com/max/635/1*27EEHuyT5i9RjwrA7KkPbg.png)

เมื่อได้เรียบร้อยก็เปิด terminal ขึ้นมาแล้วพิมพ์คำสั่ง

```
sudo /System/Library/Filesystems/ntfs.fs/Contents/Resources/BootCampFormatter -v NTFS /dev/disk4s1
```

![](https://cdn-images-1.medium.com/max/1024/1*MB2ZIj6ohNznKMaSGehoxA.png)

โดยเปลี่ยนที่อยู่อุปกรณ์ให้ตรงกับ disk ที่จะ format ซึ่งสามารถดูใน Disk Utility ด้านบนก็ได้ของผมจะเป็น /dev/disk4s1 นั่นเอง

เมื่อ format เสร็จแล้วลอง mount ดูครับ

![](https://cdn-images-1.medium.com/max/739/1*Zv-RP5XODj6uV1pSgS0jcQ.png)

![](https://cdn-images-1.medium.com/max/1024/1*_DMNTFMHwqwFF-jlh0B6Dw.png)

ตอนนี้เราก็ได้ NTFS เรียบร้อยถ้าจะ mount แบบ Read / Write ก็ให้อ่านบทความด้านบนนะครับ

แต่ทั้งนี้เพื่อความไม่ลำบากก็สามารถใช้ ExFAT แทนได้ซึ่งเราจะไม่ลำบากและใช้ App Disk Utility ได้เลยแต่ถ้าใครทิ้ง NTFS ไม่ได้และไม่มีเครื่อง Windows สำหรับ Format ก็ใช้วิธีนี้ได้ครับไม่ต้องติดตั้งอะไรเพิ่มแต่ลำบากหน่อย
VS Code Terminal Environment Variables
Tags: vscode, webdev
Published: 2021-01-25 17:28:03

---
title: VS Code Terminal Environment Variables
published: true
date: 2021-01-25 17:25:00 UTC
tags: vscode, webdev
canonical_url: https://hiltonmeyer.com/articles/vs-code-terminal-env.html
---

I enjoy using the VS Code integrated terminal. With the shortcut key `Ctrl+` I can pull it up and hide it. I really like the way you can hide the panels and focus on the code easily. I've been running up against getting alias' working though. I had been putting them in the `~/.bash_profile` file but it wasn't working. I finally decided to dig a bit deeper and found the answer, `~/.bashrc`. This is great because I can now set my environment up and get shortcuts working, this is the example of my current setup:

```
alias develop="cd /c/applications"
alias glog="git log --pretty=oneline --graph --decorate --all"
alias glog_nomerge="git log --no-merges --oneline"
alias gpod="git pull --rebase origin develop"
alias gpush="git push origin develop"

```
Help setting up a production Etherpad service
Tags: help, etherpad, cloud, serverless
Published: 2021-01-25 17:24:00

I'm looking to setup an Etherpad-lite service (likely with a Redis backend)

This is for a webapp that creates lots of Etherpad instances, so I think it would make sense to setup with a cloud/serverless infrastructure (e.g. Cloudfare workers, Lambdastore), so it isn't dependent on my local server and would be production-capable

Is there anybody who would be interested in helping me work through this?  I'd love to live code alongside someone so I could learn how this gets setup.  I'd also be glad to pay for a few hours of someone's time to walk me through this.

Let me know if you're interested!
The awesome `auto` keyword
Tags: cpp, learning, todayilearned, programming
Published: 2021-01-25 17:17:48

> In modern C++, you write `auto auto(auto auto) { auto; }` and the compiler infers the rest

Ok, it's not that easy, but I promise that using `auto` does indeed feel like magic. Let's go with the first article with actual content of the `Learning modern C++` series!

The `auto` keyword is used to let the compiler infer the type of a variable automatically from its initial value instead of having to explicitly declare it. (Bonus: forget about uninitialized variables!) For instance:

```cpp
// Older standards
int i = 0;

// Modern C++
auto i = 0;
```

At first, this may not seem like a huge deal, but let's see another example. If we have a `getMatrix` function that returns a `std::vector<std::vector<int>>` type, we can easily print all its elements with a range-based `for` loop (if you don't know what a range-based `for` loop is, you'll love the next article of this series!). In this example, you'll see how `auto` starts to shine a bit more:

```cpp
// Older standards
std::vector<std::vector<int>> matrix = getMatrix();
for (std::vector<int> row : matrix) {
  for (int element : row) {
    std::cout << element << std::endl;
  }
}

// Modern C++
auto matrix = getMatrix();
for (auto row : matrix) {
  for (auto element : row) {
    std::cout << element << std::endl;
  }
}
```

Hey, isn't that cool? 😎 And it gets even better! What would happen if the `getMatrix` function was changed to return a `std::vector<std::vector<double>>` type instead? With older C++ standards, we would have to adapt our code in order for it to work again, but using the modern C++ `auto` keyword we wouldn't need to touch anything!

Of course, this gets even more meaningful in real-world examples, but I think the ones presented should be enough to at least spark some interest.

`auto` can also be used in function declarations, although I must admit that I haven't committed to it (yet?). The syntax is:

```cpp
// Older standards
int getIntParameter(int parameter) { return parameter; }

// Modern C++
auto getIntParameter(int parameter) -> int { return parameter; }
```

However, it can be very useful when used in conjunction with the `decltype` specifier (which inspects the declared type of a varibale):

```cpp
template <typename T, typename U>
auto sum(T t, U u) -> decltype(t + u) { return t + u; }
```

Note that in the example above we don't know the types `t` and `u`, but we don't even need it! We could call the function like:

```cpp
auto x = sum(1, 1); // (int) 2
auto y = sum(1, 0.14); // (double) 1.14
auto pi = sum(x, y); // (double) 3.14
auto tau = sum(pi, pi); // (double) 6.28
```

And everything will work wonderfully 🎉

That's probably enough for the post, let me know what you think of it on the comments section below! Reacting to and sharing the post is also appreciated 😊 And, as always, thanks for reading!
Initialize package.json with default values
Tags: webdev, codenewbie, beginners, npm
Published: 2021-01-25 17:15:57

```bash
npm init -y
```

Creates a `package.json` file with the following configuration:
```json
{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Building my first Ruby CLI
Published: 2021-01-25 17:07:52

After about two months learning everything I can about ruby I have come to grow a love for it. I love how simple the programing langue is to write out and how easy it to read as I code. I had to build a CLI gem for my final project for phase one at flatiron. I went ahead I decided to build a Star Wars lookup anything you want cli where a user can choose from a list of 6 categorizes and then get back a list of names to choose from within that category. Next it will print out all the info on that name than the user chosen from. Next the user can go back to the start or list out all the names again. I did this by getting data from the SWAPI api.  

One of the hardest challenges that I had to over come was finding a way to not let the user break out of the second loop once they get into listing all the names if they enter in the wrong thing or if the wanted to list all the names again. I over came this with setting a variable to nil and the loop will break once that variable is set to true. I first tried to set it to exit like I did on the first loop but it will cause a edge case where once you type in exit in the second loop you will break into the first loop resting it to ask the user for there input again and not exiting out of the cli. 

This was a really fun project to build out and really helped me learn how to over come some challenges that I had to over come. I'm really exited to work on my next big project on Sinatra which will be in the next two months from now!