teleren/devto huggingface dataset:
Build a real-time todos app with Auth and DB in minutes⏰
Tags: javascript, graphql, react, serverless
Published: 2022-08-08 09:48:00

Check out this video to see how I built a todos app using React [rocketgraph](https://rocketgraph.io) with authentication, PostgresDB and GraphQL API. Check out the docs on [Github](https://github.com/RocketsGraphQL/rgraph)

{% youtube K5TGDapSnQw %}

Think of Rocketgraph as a complete backend.

The grand vision is to integrate authentication to as many databases as possible and to isolate the key components of back-end systems and to package it into a single service.


![Look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew8e1xxeuiz0igalplp3.png)

Rocketgraph comes with:

1. Authentication: email/password, social login. Magic link and MFA coming soon.

2. GraphQL API: A [Hasura console](https://hasura.io/) is provided that GraphQL(ises) Postgres database. So there is no vendor lock-in like Firebase. You can move away when you want to.

3. Postgres DB: An 8GB postgres DB is provided to you pre-configured

4. Serverless functions: Whatever extra functionality you want for your app can be coded here. You just need to connect your Github repo and we compile every push to master as an AWS Lambda function.

5. [SDKs](https://github.com/RocketsGraphQL/rgraph/tree/master/example-setups) to get you started. Plus lots of examples and starter kits.

Plus it's [open-source](https://github.com/RocketsGraphQL/rgraph).

I will soon be integrating AWS Appsync + Cognito (configuring and maintaining AWS is super hard. We do it for you) Soon be support for Stripe Payments. If you have a product in the DB, you can connect your stripe and payments and invoices will be taken care of.

So as you can see I am trying to build an all in one back-end service to resolve some of the most common pain points in configuring and managing the most used systems in the world (AWS, Stripe, GraphQL etc) 


![Inside look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v74cnawfum94mvwocq73.gif)
Interesting Things in Tech (2022w31)
Published: 2022-08-08 09:48:00

It takes quite a lot of time to watch what is happening in the tech sphere. So I thought it would be interesting to share what we found interesting.

Here is what I found interesting last week. If you have found interesting things that I didn't put here, please add them in the comments.
<br>
## 1. Funny

Think about this next time you do infinite scrolling:

{% embed https://twitter.com/steeevg/status/1554130332420476929 %}
<br>
## 2. Articles

### 2.1. Tips for creating buttons

{% embed https://twitter.com/smashingmag/status/1554443986974253057 %}

### 2.2. Thoughts on microservices and monoliths

An interesting read about why starting directly with microservices may not be a good idea.

{% embed https://dev.to/semaphore/when-microservices-are-a-bad-idea-2p7h %}
<br>
## 3. Security

### 3.1. A reminder to take care about our credentials when coding

{% embed https://twitter.com/TheHackersNews/status/1554108071492079616 %}
<br>
## 4. Dev tooling

### 4.1. GitLab will archive inactive repositories

GitLab will archive inactive making them slower to access. It made a lot of noise earlier when they announced they would be deleted.

{% embed https://twitter.com/gitlab/status/1555325376687226883 %}

And a discussion thread here:

(The title has not been update yet to reflect the change that projects will not be deleted but archived.)

{% embed https://dev.to/ben/gitlab-will-be-deleting-dormant-projects-53jm %}

### 4.2. A new version of VSCode is here

{% embed https://twitter.com/code/status/1555252452722675712 %}

And it has a new interesting experimental feature:

(The title has not been updated to reflect the change yet.)

{% embed https://twitter.com/stefanjudis/status/1555466217774882818 %}

### 4.3. StackBlitz announced collections

{% embed https://twitter.com/stackblitz/status/1555238114574082048 %}

It may become a good place to find tips, like with [this collection](https://stackblitz.com/@waterplea/collections/angular-tips-and-tricks).
<br>
## 5. Misc

### 5.1. A framework for engineering managers

An interesting read even for people who are not managers.

I found it interesting to see where I think I am on this graph and what I can do to do better. And there is example graphs for different roles.

{% embed https://twitter.com/changelog/status/1553019018298138625 %}

### 5.2. A survey about CSS nesting

{% embed https://twitter.com/ChromiumDev/status/1552034604550279168 %}
How Factorial Works In Code & Real Life Example
Tags: factorial, maths, javascript, programming
Published: 2022-08-08 09:26:44


**Factorial are the product of an integer and all the integers below it**
eg: 2! = 2 * 1 = 2

Simple isnt it!

Now lets see how it work in our Javascript
Take a look at code below

```
//we created a function
function factorial(num) { 

  // initializing  
  var factorial = 1;

//using for loop we multiplied until num 
  for (var i = 1; i <= num; i++) {  
    // multiply each number between 1 and num  
    // factorial = 1 * 1 = 1
    // factorial = 1 * 2 = 2
    // factorial = 2 * 3 = 6
    // factorial = 6 * 4 = 24
    // ...
    factorial = factorial * i;
  }

 console.log(factorial);

}

// keep this function call here 
factorial(4);
```
output:
```
4*3*2*1 = 24
```
`24`

Got it! Right
BUT you might wonder what is practical use of it ..like in real life ..mmmmm good question

In real life we use it to find the no of outcomes ..like probability

Lets take an example:
do you love ice cream? i love a lot so we will use ice cream example..

Suppose you want 3 flavor scoop of ice cream on your cone
you choosed:

1. Chocolate
2. Strawberry
3. Vanilla

sounds sweets

Now which topping to put first or second or last on cone.....?

how many combination it will give **so we use factorial**

_3 flavor so 3! > 3*2*1 = 6 combination_
ie:

_1. Chocolate-Strawberry-Vanilla_
_2. Chocolate-Vanilla-Strawberry_
_3. Strawberry-Vanilla-Chocolate_ 
_4. Strawberry-Chocolate-Vanilla_
_5. Vanilla-Strawberry-Chocolate_
_6. Vanilla-Chocolate-Strawberry_

ahhh what a taste... now i am enjoying my ice cream 
hope you have found this taste too :)
Commiting Like a Pro in NodeJs: The hooks
Tags: agile, webdev, programming, productivity
Published: 2022-08-08 09:25:45

## What & Why Git hooks?

Git hooks are scripts that Git executes locally before or after events such as commit, push, and receive.

These hooks are completely programmable trough bash scripting. Examples of what can be done:

* pre-commit: Enforce project coding standards.
* pre-push: Run tests.

This allows us to make sure we are committing the correct things at the correct time. Not breaking our code just because of the mental load of doing things as a manual process that can be forgotten.

## How to Start

### Add Husky

[Husky](https://typicode.github.io/husky/#/) is a tool that allows Git hooks using JavaScript configured using individual files for hooks in a `.husky/` directory.

The fastest way to install husky is by using `husky-init`, a one-time command to quickly initialize a project with husky:

```sh
npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm
```

It will set up husky, modify package.json and create a sample pre-commit hook that you can edit. By default, it will run test when you commit.

To add another hook, use `husky add`.

If you are not comfortable using  `husky-init` you can find other options [here](https://typicode.github.io/husky/#/?id=manual).

### Add lint-staged

Husky is very useful, but it will run natively to git and not focus the commands in our bash scripts for all the files, not only the ones we want to commit.

[Lint Staged](https://github.com/okonet/lint-staged) appear to resolve this problem. It allows you to run the process against staged git files that match a pattern.

[![asciicast](https://asciinema.org/a/199934.svg)](https://asciinema.org/a/199934)

Install `lint-staged` by adding it to your local project.

```sh
npm install lint-staged --save-dev
yarn add lint-staged -D 
```

In your package.json add it as a script(`"lint-staged": "lint-staged",`) and refer it through a `pre-commit` hook. If using Husky, this can be found in `.husky/pre-commit` with the next content:

```sh
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged
```

There are multiple ways to [configure lint-staged](https://github.com/okonet/lint-staged#configuration). One of them is having a `lint-staged.config.js` file in your project root folder. In this file, you can express what process you want to run for what types of files. For example:

```js
module.exports = {
  '*.{ts,tsx}': [() => 'yarn tsc:check', 'yarn format', 'yarn lint:fix', 'yarn test', 'git add .'],
};
```

The previous snipped runs the compiler check, formatting, linting and test before adding the fixed staged files to the current commit.

## Conclusion

With this two tools, we will now be pushing code that will pass similar checks than our CI/CD system.
Django cookiecutter
Tags: productivity, opensource, django
Published: 2022-08-08 09:22:00

Do you know, how to set up your production-ready Django project with all [twelve-factor app](https://12factor.net/) standards within minutes? if your answer is no then use [Django-Cookiecutter](https://cookiecutter-django.readthedocs.io/en/latest/index.html)


![cookiecutter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e0a1no40dx0au9skz18.png)

A command-line utility that creates projects from **cookiecutters**
(project templates), e.g. creating a Python package project from a Python package project template.

There are all types of cookie-cutters just search it on GitHub. Your life will be easier  

Cookiecutter Django is a project template for jump-starting production-ready Django projects. The template offers several generation options

<a href="https://github.com/cookiecutter/cookiecutter-django"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/cookiecutter/cookiecutter-django.png" width="460px"></a>  

Note:- It’s only for a senior developer 😏
VS Code Extensions For Laravel Developers
Tags: laravel, php, vscode
Published: 2022-08-08 09:21:23

Hello friends,
Welcome to my first post, writing code itself isn't a big task nowadays, It all, takes our efforts to build logic, Writing syntax's are easy than we think. Because we have tools like VS Code to write them.
So, I'll share some Vs Code extensions that a Laravel developer can use to improve code writing speed and also it helps in many ways as like in improving productivity.


![Thumbnail image of VS Code extensions for laravel developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrsci8773gjb79vbh4y0.png)

## Laravel Blade Snippet
First extension is Laravel blade snippet that provides blade snippets while you are building any kind of application. Then you can use this extensions with this extension we easily can use Emmet to write blade faster.

## Laravel Snippets
I'll recommend this extension because this is the extension which helps a lot. Because it provides syntax's in various ways. For example: While we are writing route and then the extension helps to create a full function of route having controller and all those things.

## Laravel goto View
One of my favourite extension because whenever I do use view in my controller file or may be in some other files, and On the same time if I want to change something in my view file. Then I just have to do hover on the view and I can jump on the view file easily. That's awesome isn't.

These are some extension that I remember and you can use, If you do use Laravel framework. I hope this will help you to write better code and will improve your code writing speed. Thanks,
Gurpreet kait here...☺

I have already put this whole article on my Blog, You can check it there also --- [VS Code Extensions For Laravel Developers](https://larachamp.com/vs-code-extensions-for-laravel-developers/)
Formula 1 App developed with Xamarin
Tags: xamarin, xamarinforms, ergast, opensource
Published: 2022-08-08 09:04:18

**Formula 1 App** is a simple app developed with **Xamarin** to display information about drivers, teams, circuits and seasons from 1950 to the current season. The app is developed in **Xamarin Shell** and **Ergast API**. In the Schedule screen, you can see the current season calendar and information about circuits and results for the finished races. In the Drivers and Teams screens, you can see current standings and information about them. In the History screen, you can select a season and see the schedule, driver and team standings for that season. The app is available in both **light** and **dark mode**.

![Light Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkfwfs5mnuvs0j1gghy4.png)

![Dark Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk2uwod853etjy3cedu3.png)

You can find the full code [here](https://github.com/gheorghedarle/Xamarin-Formula1).
If you like this repository you can support me on [buymeacoffee](https://www.buymeacoffee.com/gheorghedarle).
How to automatically create UI components that match your code library
Tags: webdev, design, devops, productivity
Published: 2022-08-08 08:53:00

No more trying to match designs to UI components - just production-ready code. \o/ 

<u>**Here's how**</u>
1. Go to Figma and [install the Anima plugin](https://www.figma.com/community/plugin/857346721138427857/Anima---Export-Figma-to-HTML%2C-React-%26-Vue-code)
2. Work with live UI Components that update automatically.
3. Sync and share with the team.

Designers will be using live UI components in Figma that match the same open-source React libraries that you're already using in production, so you can:

- **Skip the grunt work** of searching open source libraries for components that are “close enough,” then editing props to match the design.
- Access a component library made with **React components from three of the popular libraries: MUI, Bootstrap, and Ant Design.**




<u>Additional resources:</u>
- [Install the Anima plugin for Figma](https://www.figma.com/community/plugin/857346721138427857/Export-to-React%2C-HTML-%26-Vue-code-with-Anima).
- [Using UI Components with Anima and Figma](https://www.animaapp.com/blog/product-updates/react-component-library-in-figma/)
- [Why design-to-code](https://www.animaapp.com/features/code)
hardWareHouse Inventory Management Application
Tags: redishackathon, react, flask, webdev
Published: 2022-08-08 08:49:00

### Overview of My Submission

**Inspiration behind the idea:** While having a discussion with one of my friends, she stated a problem that she faces daily in her shop. She needed an app to manage her inventory which is easy to use and can be scalable as per the demand. She didn't want to use MS-Excel because she wanted her data to persist and available whenever she needed. So I thought to build a model Inventory Management App using Redis Database that can solve her problems of scalability, data persistence and availability.

hardWareHouse is a hypothetical model shop that could be used to showcase the features of Redis Database. It uses Redis as its primary database, Flask as the backend that connects with Redis, and React as the frontend that renders the data on the browser.

Link to the repository: [hardWareHouse Inventory Management App](https://github.com/pranavarora1895/hardWareHouseInventory)

License: [MIT](https://github.com/pranavarora1895/hardWareHouseInventory/blob/main/LICENSE)

### Submission Category: 

Wacky Wildcards

### Video Explainer of My Project

{% embed https://www.youtube.com/watch?v=ahwKhVpx3OQ %}

### Language Used
Python

### Link to Code

{% embed https://github.com/pranavarora1895/hardWareHouseInventory %}

### Additional Resources / Info

| ![architecture](https://user-images.githubusercontent.com/48170643/183287691-e1d6f7c1-59b4-4dfc-a289-a8804d98410f.png) |
|:--:|

| ![appPage](https://user-images.githubusercontent.com/48170643/183287720-2631aeeb-e3f8-40a5-aeea-bb0b41feba84.JPG) |
|:--:|
| *hardWareHouse Inventory Dashboard* |

| ![newProduct](https://user-images.githubusercontent.com/48170643/183287718-b986896f-8bd0-4c2b-a24a-92250b6561b4.JPG) |
|:--:|
| *Way to Add a new Product* |

| ![editProduct](https://user-images.githubusercontent.com/48170643/183287721-af856e0a-9e44-4cbf-81ba-9448d1048621.JPG) |
|:--:|
| *Way to Update any Product* |

| ![searchProduct](https://user-images.githubusercontent.com/48170643/183287779-cf23fc53-c7ed-46d2-a47c-360715bddbdb.JPG) |
|:--:|
| *Search a Product and the table will render accordingly* |

#### :hourglass_flowing_sand: *Time taken to build this app:* [![wakatime](https://wakatime.com/badge/user/e72a1859-4793-4da2-b36b-49c7378256a0/project/e60d1b21-00c0-4f29-bfba-5f5175700f5a.svg)](https://wakatime.com/@pranavarora1895/projects/jzwipwmfui?start=2022-08-02&end=2022-08-09)

### Collaborators

- myself: [dev.to/pranavarora1895](https://dev.to/pranavarora1895)

- - - 


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Keep posted on our events!
Published: 2022-08-08 13:00:16

---
title: Keep posted on our events!
published: true
date: 2022-08-08 08:34:47 UTC
tags: 
canonical_url: https://dataroots.io/research/contributions/keep-popsted-on-our-events
---

Just a short FYI :)

As of now we will be listing all our upcoming events over at [dataroots.io/events](https://dataroots.io/events/).

We already have a calendar leading up to end of next year and we will be publishing these events soon at our events page. Keep posted 🙌
#1 Interviews - Design & Dev with Aditya Patel
Tags: design, programming, webdev, career
Published: 2022-08-08 08:25:41

I recently started doing interviews for my YT channel with famous people from many different communities. As I have already talked to people from Vue, Nuxt, Headless Commerce, Jamstack and many more, I decided that it would be beneficial for my viewers to get to know them better.

From the beginning, I knew that I would love to have someone special as my first guest. As we had really good relationship, I selected Aditya as my first guest to be interviewed.

## The actual interview

Aditya Patel is Director of Product at Hotwax Commerce and core team member of StoreFrontUI, an open source UI framework for eCommerce PWAs. He is passionate about design and enjoys filmmaking in his free time, a skill that he leverages when making content for open source apps he builds in Ionic.

I am really happy to call myself Aditya's pal as we have done several projects together. In this interview, Aditya shares hes knowledge about designing a new product from scratch, lowering the barrier between design and development teams, and many more. Check it out below.

{% youtube HX0aYbUQj00 %}

## Other projects

With Aditya, we now have a year long relationship based on working together on several interesting projects.

The main one was about the Vue.js based UI Components Library for E-Commerce -> Storefront UI. After I joined Vue Storefront, I immediately started working in this project and talked to Aditya who was and still is a really active contributor.

We decided to start recording video tutorials together that you can check out here:

https://www.youtube.com/playlist?list=PLpQiZSIKSZHz5STRqOkVTwkb0Wm-L7nNp

We really enjoyed it and decided to take it even further with our interviews (the similar topic that I am doing right now)

https://www.youtube.com/playlist?list=PLpQiZSIKSZHz7QecpDTIeVP9cvjd4jLYb

Apart from that, we also created a lot of developer content, community initiatives and many more.

## What is to come

In the upcoming weeks, we will be producing a lot of content together that we have prepared for the past few weeks. 

We cant wait to share it with you!
为你的应用添加明暗主题
Tags: theme, css
Published: 2022-08-08 08:12:00

在我们开发的 React、Vue 等现代应用中，经常可以看到明暗主题切换功能（如下图），它是如何实现的呢？市面有很多种实现方案，接下来让我们逐个绍并分析它们的优劣。
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpm3n8b4feqyu03cmpjq.gif)
 
### 方案一：CSS 变量
### 方案二：CSS in JS
### 方案三：Less/Sass 变量 + 两份主题 css 构建产物
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2022-08-08 08:00:06

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258ef9deee.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What did the proud React component say to its child?

___A:___ I've got to give you props
 -->
How to send json data from go to dart
Tags: go, dart, flutter
Published: 2022-08-08 07:55:32

```
package main

import "C"
import "fmt"

type userStruct struct {
	name string
	age  int
}

//export GetData
func GetData() userStruct {
	fmt.Println("hi from go")
	user := userStruct{name: "RK", age: 22}
	return user
}
```

how can I call the GetData function in dart? since we can't use go structs in c-shared libraries. My goal is to send data of any kind like bytes, maps, structs etc.. from go to dart. Is it possible to do this?
👨‍💻 Best keyboard for programming in 2022 — Will change your mind. 👨‍💻
Tags: javascript, webdev, beginners, programming
Published: 2022-08-08 07:54:00

Some links may be affiliate links.

As developers we don’t need many tools to work, many would say that we just need a laptop or computer, and even though that’s true, there’s a difference between having the minimum required to work to have the tools that you need to work comfortably, productive and healthy.

Today we are going to discuss keyboards that you would love as a developer. The list I present is in no particular order, and I’m giving you my personal opinion on the keyboards and some facts.

What are the best keyboards for programming? The one that works best for you!

With that said, let’s jump right into the list.

## 8 Best keyboards for programming in 2022(updated)

### 1. SteelSeries HP Gaming Keyboard ###

  A gaming keypad is a small, auxiliary keyboard designed only for gaming. It this the priority of every gamer or programmer to buy it.

It has a limited number of the original keys from a standard keyboard, and they are arranged in a more ergonomic fashion to facilitate quick and efficient gaming key presses.
The commonly used keys for gaming on a computer are the 'W', 'A', 'S', 'D', and the keys close and adjacent to these keys.
This keyboard has 2 USB ports that connect two devices at a time.

This item is SteelSeries HP Omen X7Z97AA#ACJ Gaming Keyboard (Black). Zebronics Zeb-Transformer Gaming Keyboard and Mouse Combo (USB, Braided Cable). These are the best mechanical keyboard for coding in India.


### 2. Apple Magic Keyboard ###
### 3. HyperX Alloy FPS Pro Gaming Keyboard ###
### 4. Das Keyboard 4 ###
### 5. Kinesis Freestyle Edge ###
### 6. Microsoft Sculpt Keyboard ###
### 7. CORSAIR K70 Gaming Keyboard ###
### 8. Logitech MX Keys ###


[Click Here to get best keyboards for programming](https://cmsinstallation.blogspot.com/2021/04/best-keyboards-for-programming-in-2021.html?)