teleren/devto huggingface dataset:
RxSwift and MVVM Journey
Tags: rxswift, mvvm, swift
Published: 2021-03-25 02:07:57

Hello,

Last week, I got an interview with Fave and after a 30 minutes session, they decided to send me an invite to a github project that I need to finish. 

So, the projects require me to build an iOS app using RxSwift and MVVM. The next day, I learn RxSwift with MVVM and learned that it's a beautiful concept. 

Basically MVVM prevents your View Controller to become a MVC(Massive view controller). The concept is you move all the processing of you would do in ViewControllers in ViewModel.

RxSwift is a reactive framework that prevents some problems with current method such as race condition (happens to me while in JomParking). The learning curve is quite steep but I managed to understand it within 2 days. So quite ok for an average developer.

Might use this combo next time I build an iOS app or Android app for that matter.
Front-end partner
Tags: html, css, javascript, vue
Published: 2021-03-25 02:02:48

Hey everyone!
Hope you'll save and well!
I need a partner to learn with front-end, I'm not total beginner, I can make some pages with html and css only, it doesn't matter if biyvor girl! 
Feel free to give it a try if you are not sure! 😁
Have a good day! ❤️
[Invitation] Grow your user base and revenue with AppGallery Connect Academy · Live
Published: 2021-03-25 02:01:40

Dear developer
As a mobile app developer, you must be fully aware of how important app distributions, targeted operations, and monetization are in cultivating a strong user base. But this can be difficult to achieve in practice. That's why HUAWEI AppGallery Connect has decided to host AppGallery Connect Academy · Live. This unique live event focuses on the growth services in AppGallery Connect that can help you acquire new users and grow your business to new levels. This AppGallery Connect Academy · Live is an event that should never be missed by developers who intend to distribute apps on AppGallery.

Live content: This event can give you crucial insights into how to grow your business, by harnessing the global app distribution capabilities on HUAWEI AppGallery, which cover a wide range of device models.

You can also learn from illuminating case studies on how AppGallery Connect's operations and growth services have been a game changer. The following FAQs session will address the most relevant challenges you may face when using the services.

**Time:** March 31st, 2021 11:00-11:45 UTC+2

**Duration:** Around 45 minutes

**Target audience:** Developers who are eager to increase their apps users and revenue.

Click here to subscribe on **[YouTube](https://m.youtube.com/watch?v=Da2K4otTyec&list=PLy7rmPPfUv3a7hFThXofcMhkjG8VKLiZH&index=21):**

If you have any questions, please leave your reply below the post or send us an email via [agconnect@huawei.com](https://forums.developer.huawei.com/forumPortal/en/topic/0201518690567230063). We'll answer some questions during the FAQs session.
[pt-BR] Por que se tornar um blogger no Dev.to?
Tags: beginners, braziliandevs, writing
Published: 2021-03-25 01:28:36

Olá Devs, tudo beleza?!

Espero que por aí esteja de boa, vim aqui pra me apresentar e falar com vocês sobre como é importante o compartilhamento do conhecimento.

Então, meu nome é Thomas, mas conhecido como "Th" ou "Ribeiro" e atualmente eu sou gestor da informação e desenvolvedor de sistemas.

Tenho uma paixão por dados e por aplicações web, por isso dou muita garra em tecnologias como **Python** e **JavaScript** e seus respectivos frameworks e bibliotecas. 

Eu *codo* há pelo menos 2 anos, e tudo que eu sei, aprendi na internet mesmo, e tive ajuda na minha graduação também, com muita pesquisa e tutoriais.

Escrever posts sobre minha jornada e estudos tem sido desde o começo, uma parte super importante do meu crescimento.

## Motivo de escrever

* Escrever a respeito do que aprendo me ajuda a **fixar o conhecimento**;

* Compartilhar com pessoas que talvez tenham tido alguma dificuldade em entender certos conceitos, que eu também já tenha passado;

* Conhecer novas pessoas, fazer **networking** e novas amizades.

* Mostrar meu conhecimento, minha personalidade e o quanto sou apaixonado sobre pôr a mão no código;

## Por que escolhi o Dev.to?

* Primeiramente, por ser um grande apreciador do conteúdo do Dev.to.

* Por conta da vontade de ver a comunidade brasileira imergir nesse canal. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw6x3fipg9y848mnrpqx.png)

* É notório que a grande maioria do conteúdo do canal é em Inglês. Porém, tudo não passa de dar o primeiro passo, o Dev.To oferece um bom espaço pra todo Desenvolvedor compartilhar suas ideias e trazer conhecimento à tona.

* Escrever é uma grande oportunidade de ajudar outros *Dev's* e curiosos em *Tech*. 

* Dev.to é um método para quem não quer manter blog próprio e é voltado 100% pra desenvolvedores, porém a interdisciplinaridade que ele oferece é muito boa.

* Criar o próprio blog é o ideal para a maioria dos Dev's, mas nem todos, assim como eu, têm tempo de sobra para cuidar de um blog próprio, e creio que disponibilizando no Dev.To a abrangência do post pode ter um alcance melhor de ajudar a comunidade.
5 Must-Have Browser Extensions for Every Web Developer
Tags: webdev, beginners, productivity, programming
Published: 2021-03-25 00:39:28

Since starting my web development journey, I have slowly learned tips and tricks to improve my workflow and productivity. Developer-focused browser extensions are one of those tools that have helped me immensely. 

Here are 5 of my favorites extensions for Chrome and Firefox:

### 1. [Responsive Viewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en)

This extension shows multiple screens in one view that allows developers to test multiple screens while developing responsive websites/applications.

Here's a [Firefox](https://addons.mozilla.org/en-CA/firefox/addon/multi-responsive-viewer/) version.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eal9twj524hbx29unumv.png)

### 2. [Font Picker](https://chrome.google.com/webstore/detail/font-picker/mmjbimgpcbaegjiieojddickpjbdkeej)

A simple extension to identify fonts and their details from any website. Just right-click on any text and grab the font details!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9x2k83i4algfmc6ckny.jpg)

Here's a [Firefox](https://addons.mozilla.org/en-CA/firefox/addon/font-inspect/) alternative.

### 3. [Dimensions](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj)

Perfect extension if you want to measure distances between elements on a website.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oub5fxgdf1dzjf47etxm.jpg)

Here's a [Firefox](https://addons.mozilla.org/en-CA/firefox/addon/dimensions_extension/) version.

### 4. [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg/related?hl=en%20)

One of my favorite extensions! It is a technology profiler that shows you what websites are built with. It uncovers more tons of technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c65cluit85yprpscvlq.jpg)

Here's a [Firefox](https://addons.mozilla.org/en-CA/firefox/addon/wappalyzer/) version.

### 5. [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

A no-brainer if you're working with React. This extension allows you to inspect the React component hierarchies in the Chrome Developer Tools.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvebsega0nxo6s6ayfqk.jpg)

Here's a [Firefox](https://addons.mozilla.org/en-CA/firefox/addon/react-devtools/) version.

Hope you find these tools useful. Happy coding! 👩‍💻🚀👨‍💻
why I chose to study software engineering 
Published: 2021-03-25 00:10:11

YOUR DOING WHAT? DO YOU LIKE IT? WILL YOU LAST TILL OCTOBER? Are all questions I have been asked and honestly at 6pm on a Sunday when trying to find a good submission schedule are questions I have even asked myself. I've came so far from working as a cashier to enrolling in something I know nothing about. I decided to sign up for Flatiron with a friend because lets be honest software engineering sounds scary to someone whos never gotten out of their box of comfort, but all in all I decided to give it a try. I signed up mostly for the experience and to hopefully crawl out of my little dungeon and try in find a path that benefits me! My hopes are to use the skills I've learned for my career path in coding.
Gamedev.js Survey 2021: current state of the HTML5 game development report
Tags: gamedev, survey, report, webmonetization
Published: 2021-03-25 22:23:11

---
title: Gamedev.js Survey 2021: current state of the HTML5 game development report
published: true
date: 2021-03-25 00:00:00 UTC
tags: gamedev, survey, report, webmonetization
canonical_url: https://enclavegames.com/blog/gamedevjs-survey-2021-report/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7b5trd1wxhqsek5vist.png
---

After a whole month of gathering responses, and a week of preparing results, we’re happy to [publish the report](https://gamedevjs.com/survey/2021/) containing answers to 26 questions submitted by 437 developers.

> We at [Enclave Games](https://enclavegames.com/) were wondering what tools and technologies people use to develop web games, how much do they earn, what monetization strategies are they using, etc. There was almost no up-to-date, solid data on the topic, so we decided to ask the community directly and publish the results afterwards.

When we opened it on February 18th, I was worried we won’t get too many submissions - I decided I’ll share the numbers even if we receive 20 of them, and getting 100 would be an achievement. Turns out we got 437 responses, which is incredible - thank you to all who participated, you’re awesome!

![Enclave Games - Gamedev.js Survey 2021 map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ar8ul0tef0hmhvpyv78.png)

Some of the answers to the questions were predictable, some others ended up being quite a surprise, so make sure to [check all of them](https://gamedevjs.com/survey/2021/) along with the short comment below every graph. Overall it feels building web games is going in the right direction. We do have our issues and struggles, but the community is positive about the future.

The survey was conducted with the support from the [Grant for the Web](https://enclavegames.com/blog/awarded-grant-for-the-web/) program, you might’ve noticed **Web Monetization** as one of the options in the question about various ways of getting a revenue. I’m happy to see it’s getting traction, and more developers are exploring Web Monetization API as a viable alternative of earning money.

Prizes we promised (cash and [Coil](https://coil.com/?ref=end3r) memberships) will be sent in the next few days, same goes for offering the downloadable report as a pdf document. It’s the first edition of the survey, but I do hope it will be a yearly thing from now on, so we all can track the trends in HTML5 game development!
A Star Trek Postmortem
Tags: video, postmortem, productivity, critque
Published: 2021-03-26 15:16:27

---
title: A Star Trek Postmortem
published: true
date: 2021-03-25 00:00:00 UTC
tags: video, postmortem, productivity, critque
canonical_url: https://jhall.io/archive/2021/03/25/a-star-trek-postmortem/
---

My wife and I recently started re-watching _Star Trek: The Next Generation_. One episode in particular jumped out at me as demonstrating some _really bad_ engineering management practices. I decided to turn my thoughts into a YouTube video, and a postmortem.

I hope you enjoy. All feedback is welcome!

{% youtube 0F7Vz1fFTTY %}
Git Pull/Push From Another Directory
Tags: git
Published: 2021-06-04 12:13:21

---
title: Git Pull/Push From Another Directory
published: true
date: 2021-03-25 00:00:00 UTC
tags: git
canonical_url: https://tech.serhatteker.com/post/2021-03/git-pull-push-from-another-dir/
---

I wish I knew that earlier, it would save a lot of `cd`:

```bash
$ git -C /dir/you/want/to/pull/push push
# with verbose output
$ git -C /dir/you/want/to/pull/push push -v
```

> **NOTICE:**
>
> **-C** flag needs git > **1.8.5**


It means that with `-C` flag you can specify the directory you want to interact
with. I normally go into the directory than push:

```bash
$ cd /dir/you/want/to/pull/push && git pull # or push
```

Not anymore!


All done.


---

Reference:
- https://stackoverflow.com/a/20115526
How to get the total memory of a system using Node.js?
Tags: node
Published: 2021-03-25 00:00:00

---
  title: How to get the total memory of a system using Node.js?
  published: true
  tags: Nodejs
  date: Thu Mar 25 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-total-memory-space-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-e4c692845ca6180cdc545e1204da7f24.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-total-memory-space-nodejs)
  
To get the total memory space, you can use the `totalmem()` method from the `os` module in Node.js.

```js
/* Get total memory space in Node.js */

// import os module
const os = require("os");

// check the total memory
const totalMemory = os.totalmem();
```

- The method returns the total memory in `bytes` as `integers`.

See the above code live in [repl.it](https://replit.com/@melvin2016/get-total-memory-space-of-system-nodejs#index.js).

You can also get the [free memory available to use](https://melvingeorge.me/blog/get-amount-of-free-memory-os-nodejs) using the `freemem()` method from the os module like this,

```js
const os = require("os");

// check free memory
const freeMemory = os.freemem();
// check the total memory
const totalMemory = os.totalmem();
```

That's all! 😃

### Feel free to share if you found this useful 😃.

---
Using Sass as a tailwindCSS preprocessor
Tags: sass, css, tailwindcss, javascript
Published: 2021-03-24 23:52:57

Today I fiddled around with Tailwind @apply classes. I previously posted about a darkmode in combination with @apply classes and damn it goes well together. But I discovered a problem and got stuck on it for a while. It seems that when you're using tailwind without PostCSS 8, it doesn't compile the nested classes. So I searched for a fix.

It seems that the [TailwindCSS documentation](<https://tailwindcss.com/docs/using-with-preprocessors>) has a page dedicated to this and it solves the problem in an ideal situation. But the codebase I used didn't use Postcss, so I had to find a workaround.

## Ideal solution

the ideal solution is actually very clean and simple, just require the `postcss-import` and `postcss-nesting` packages in the `postcss.config.js` file. like so:

```javascript
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'), // or require('postcss-nesting')
    require('autoprefixer'),
  ]
}
```

Very simple, very nice. But how to fix it when you're not using PostCSS (yet) ?

## Describing the setup

In the project I was working in, we're using a webpack / babel setup with minifyCSS to compile the CSS into the production environment. To change the whole system was probably going to take a while and to be honest I didn't write that code and didn't feel certain that everything was going to work.
I searched around for a bit on the [documentation of PostCSS](<https://github.com/postcss/postcss#usage>) and tought of a fix on how it possibly could work.

## How to fix

I tought of a way to just compile the `tailwind.scss` file into a compiled `tailwind.css` file with of course the compiled nested classes. To do this I basically installed the `postcss-cli` NPM package. and configured the build scripts in `package.json` to compile Tailwind

```json
// package.json
"scripts": {
    "build:tailwind": "postcss ./assets/css/tailwind.scss -o public_html/assets/css/tailwindoutput.css",
    "watch:tailwind": "postcss ./assets/css/tailwind.scss -o public_html/assets/css/tailwindoutput.css --watch"
  },
```

out of the box this does work for the basics, but still the nested classes were not working, so I now could follow [the documentation](<https://github.com/postcss/postcss#usage>) and add the plugins to the `postcss.config.js`

```javascript
//postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nested')
  ]
}
```

Now everything finally worked fine and I could use nested classes!

```scss
/* tailwind.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;

.header {
    @apply text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-50;
    nav {
        @apply hover:text-green-800;
    }
}

```
Using Laravel Valet for local PHP development
Tags: laravel, valet, php
Published: 2021-03-24 23:50:40

This week I've been developing PHP and Twig at my internship at [vBridge](<https://vbridge.eu>), since we're using a big pile of sourcecode, Docker doesn't perform as well. To fix this [Bramus](<https://bram.us>) told me about a tool called Valet. So I went on the search to configure and install Valet.

## Installing Valet

Installing Valet is actually really easy. They have incredible [documentation](<https://laravel.com/docs/master/valet>) (as usual with Laravel).

You can simply install it by using `composer global require laravel/valet` if you've installed [Homebrew](<https://brew.sh/>), PHP and [Composer](<https://getcomposer.org/>), else you should install those first (but also that is very easy). Once that's done, simply run `valet install` and Valet will install and start.

Now that valet is installed and started you'll be able to ping any `.test` domain and it'll answer from `localhost` or `172.0.0.1`.

Valet also starts when you boot your computer and will run as a background process with only 7mb of RAM!

*Also, Valet is MacOS only*

## Valet Link

So installing is easy, so mapping a domain shouldn't be hard right! just cd into the directory you want to run as a site and run `valet link` and the name of the directory will be used as domain. For insance: 

```bash
cd laravelsite
valet link
```

Now when you open your browser and go to `laravelsite.test`. It will magically appear on the screen! awesome right!

You can also name a link by running `valet link <name>`. For instance:

```bash
cd laravelsite
valet link newsite
```

Now it's available at `newsite.test`

It's amazing!

## Valet use

So, imagine that you're developing a website on your local machine with the newest version of PHP, but the server you'll be deploying to uses a much older PHP version. You don't want to put in the work to install a new old version right? Valet got you covered!

Just run `valet use php@version` and valet will use that version. If you don't have the version installed locally, it will install it for you.

But ofcourse, [sphp](<https://github.com/sgotre/sphp-osx>) is a valid choice too.

## Valet Secure

Tired of the stupid browser notification that localhost isn't secured? Me too. Valet also has a nifty solution. Run `valet secure <name>`x and it will install a certificate for you.

It's insane how easy this all is!

## valet-env.php

Ofcourse if you're a somewhat more demanding user. It can be interesting to use and create custom environment variables.

Valet has support for a file called `valet-env.php` and will use it to configure and use environment variables

For instance:

```php
<?php

return [
	'newsite' => [
		'APP_ENV' => 'dev',
	],
];
```

Now when you'll open `newsite.test` in your browser, it'll have the dev environment!

Read the post about environment variable from Bramus [here](<https://www.bram.us/2019/01/17/laravel-valet-environment-variables/>)

Read the [full documentation here](<https://laravel.com/docs/master/valet>)!
Add dark mode to your site with TailwindCSS
Tags: tailwindcss, frontend, javascript, development
Published: 2021-03-24 23:25:38

I've fiddled around with [TailwindCSS](<https://tailwindcss.com/>) for some time now, but never got to the point of adding dark mode. But actually it isn't that hard since v2.0.

## Official dark mode documentation

TailwindCSS docs has it's very own dedicated [documentation on dark mode](<https://tailwindcss.com/docs/dark-mode>). So I used it as a guide to setup my application's dark mode.

## Tailwind config

Tailwind disables dark mode in a basic setup to reduce the size of the css-file. To enable it you just have to add `darkMode: 'media'` or `darkMode: 'class'` in your `tailwind.config.js`. In the minimal config it would look like this:

```javascript
module.exports = {
    purge: [],
    darkMode: 'class', // or 'media'
    theme: {},
    variants: {},
    plugins: []
}
```

## 'media' vs 'class'

Dark mode in tailwind is very easy with `media`. It will take the `prefers-color-scheme` of your OS to determine if you're using dark or light mode. Dark mode `class` will use a manual toggle to determine dark or light mode. With `class` you can add the `class` to your html element. You can simply toggle this with JavaScript.

## How to use dark mode in css

It's as simple as just adding `dark:bg-black` to your html classes.

```html
<body class="bg-white dark:bg-black">
    <h1 class="text-black dark:text-white">
        What color am I?
    </h1>
</body>
```

Tailwind will then automagically determine what classes to use.

Above is ofcourse an easy example, but `dark:` can also be stacked to other variants like `lg:` or `hover:`. So in the example below, the text will be black on smaller screens but white on larger screens.

```html
<h1 class="text-black dark:lg:text-white">
    What color am I?
</h1>
```

## Variants

By default Tailwind dark classes are available on background colors, border colors, text colors and a few more. But you can extend tailwind to your needs by configuring `tailwind.config.js`

```javascript
module.exports = {
    // ...
    variants: {
        extend: {
            textOpacity: ['dark']
        }
    }
}
```

## Conclusion

TailwindCSS dark mode is very easy when combined with `@apply` classes and can be extended to your needs. It's easy to configure and can give an extra functionality to your application.

See an example [here](<https://github.com/ElianVanCutsem/tailwind-dark-mode-example>) or [here](<https://admiring-wescoff-a17fa9.netlify.app/>).