teleren/devto huggingface dataset:
This week in Flutter #36
Tags: flutter, dar, news
Published: 2022-01-09 16:58:46

A couple of years ago, the Flutter team announced the [Flutter Clock Challenge](https://docs.flutter.dev/clock).
The goal was to **build a clock face UI**, using Flutter for the Lenovo Smart Clock. I had already used Flutter
in production for some months, and I decided to give it a try.

I did not win. Looking at the [clocks submitted by the others](https://www.youtube.com/watch?v=PaPUkxYHDUw) 🎦, it does
**not surprise me**. Some of them are insanely beautiful. Some others are utterly complicated. It is also clear that there were
teams who worked at the challenge. Working only a couple of hours on it, in some spare time, was not enough for me.

This week the Flutter team announced another challenge:
the [Flutter Puzzle Hack](https://medium.com/flutter/announcing-the-flutter-puzzle-hack-ffc74fda6d44).
I am not going to participate this time. There will be even **more competition**, and the time I can spend on it
is not even remotely close to being enough to give me sufficient results.

If you want to participate, don't do it for the prizes. Consider it as an opportunity to learn. Because you
will **learn a lot** by doing something new. Unless you have a team and a lot of time to dedicate to it. Then you should
probably go for the prizes.

<small>- Michele Volpato</small>

## Development 🧑‍💻

### 🔗 [Firebase for your Dart Web API](https://dev.to/infiniteoverflow/firebase-for-your-dart-web-api-43mb)

Do you know that you can connect to a Firebase project from Dart? Not Flutter, just Dart.
Learn more about it in this article, by [Aswin Gopinathan](https://github.com/infiniteoverflow).
In the article, Aswin implements a **web server** using Dart, but you can use the same method to
connect to Firebase via a pure Dart **script**.

### 🔗 [Dart and Functional Programming: applying Haskell concepts with dartz](https://dev.to/juanbelieni/dart-and-functional-programming-applying-haskell-concepts-with-dartz-3d21)

I am a fan of functional programming. The fact that you can, probably, **prove** that your code does
precisely what you want is a big feature. In this new article by [Juan Belieni](https://github.com/juanbelieni),
you'll learn how to apply some constructs belonging to Haskell to Dart,
using the [dartz](https://pub.dev/packages/dartz) package.

### 🔗 [Dart Functors, Applicatives, And Monads In Pictures](https://olexale.medium.com/dart-functors-applicatives-and-monads-in-pictures-ddd8c54bce15)

And on the subject of **functional programming**, here is a translation of
[a popular Haskell article](https://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html)
into Dart. By [Oleksandr Leushchenko](https://olexale.medium.com).

---

[...]

Read the rest on [my website](https://ishouldgotosleep.com/news/this-week-in-flutter-36/).

[Join the Flutter and Dart newsletter](https://ishouldgotosleep.com/subscribe-to-the-newsletter-devto/) and receive it weekly in your inbox.
JavaScript 100 days code challenge 
Published: 2022-01-09 16:52:22

Let's solove 100 code probelms each day to keep consistency.

It's just started 10 days before, I am kee adding solution here 🤟🏻

GitHub Repository 🐥 👇🏻👇🏻👇🏻

https://github.com/amirSohel007/100-code-days

each probelm has multiple solutions. If you have some other solution in your mind then fork the repo and add your solution and raise PR for it

#JS_Lovers ❤️❤️
How to use faker.js after its "endgame"
Tags: javascript, node
Published: 2022-01-09 16:50:08

# Introduction
Today I was trying to use Faker.js for experimenting, but then I saw this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui0x0wntqcqchktwfzhy.jpeg)
And I thought, "Well what happened here? Did it get hacked?", so I looked for ways to use it, but no answer.

So I improvised and thought of ways to use it yourself.

# 1: Use a replacement named Hoaxer.js
I made a replacement named Hoaxer.js to make Faker.js old installation easier. 

Instead of using code like this:
```javascript
    var faker = require('faker');

    var randomName = faker.name.findName(); // Rowan Nikolaus
    var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
    var randomCard = faker.helpers.createCard(); // random contact card containing many properties
```

#### Output:
```
Error: Cannot find module '/home/runner/f4re/node_modules/faker/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (internal/modules/cjs/loader.js:295:19)
    at Function.Module._findPath (internal/modules/cjs/loader.js:508:18)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at /home/runner/f4re/index.js:1:17
    at Script.runInContext (vm.js:130:18)
    at Object.<anonymous> (/run_dir/interp.js:209:20)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
```

You can use it like this so it actually works:
```javascript
    var hoaxer = require('hoaxer');

    var randomName = hoaxer.name.findName(); // Rowan Nikolaus
    var randomEmail = hoaxer.internet.email(); // Kassandra.Haley@erich.biz
    var randomCard = hoaxer.helpers.createCard(); // random contact card containing many properties
```
#### Output:
```
Jeanette Smith III
Doyle.Denesik69@yahoo.com
```
# 2: Use Faker.js version ^5.5.3
Instead of using Hoaxer.js, you can also use Faker.js but with a different version.
First run `npm install faker@5.5.3` and once done,
include it as usual.
```javascript
    var faker = require('faker');

    var randomName = faker.name.findName(); // Rowan Nikolaus
    var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
    var randomCard = faker.helpers.createCard(); // random contact card containing many properties
```
#### Output:
```
Jeanette Smith III
Doyle.Denesik69@yahoo.com
```

# Conclusion
In this article we learned it's still possible to use Faker after the mysterious event happened to it. You can either install Hoaxer or Faker.js version ^5.5.3 to use it. Thank you for your time, and see you another time.
[week1] Days 7 - first week complete
Published: 2022-01-09 16:49:06

Hello, first week successful, the hardest part is done, I managed to work one hour a day on code and make a post on the subject 

Now the objective is to maintain the pace and succeed in better structuring my work with precise objectives from day to day .

## My Learning Goals for today:

Finish Debuging on freecode camp 

## What I Learned:
 was rather simple but enriching, I could see the typical errors that one can meet when one dev and how to treat them, for example the infinite loop, how to identify them and corrected them 

## My Goals for Week 2 :
For week 2 i gonna continue this js course on freecodecamp and in the same time i will learn more on node js and express for my school project and try to document my learning
A Growing Collection of C++ Cheat Sheets
Tags: cpp, beginners, codenewbie
Published: 2022-01-09 16:46:58

Anyone that has ever learned or is currently learning C++ knows the feeling of being overwhelmed by this beast of a programming language that is as complex as it is powerful.

To help learners along their journey I've created a [collection of C++ cheat sheets](https://hackingcpp.com/cpp/cheat_sheets.html) that can be used to get a quick overview of a topic or to recap something one has already learned.

Currently, there are graphical visualizations of the standard library algorithms (including the ones from C++20), interface overview sheets for containers, sequence views, and various others.

Here are a few examples:

![C++ std::vector interface overview cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhs4fphh69638gjk2usi.png)

![Cheat sheet explaining the most common binary representations of numeric values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3pbze8u0gyo6nf3p8on.png)

![C++ lambda expressions overview cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ya4mb5riib7w8255nqz.png)

![C++ standard algorithms quick overview cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alf63mfne8kf9b32k6k9.png)

To see more cheat sheets visit https://hackingcpp.com/cpp/cheat_sheets.html

Follow me on Twitter [@hackingcpp](https://twitter.com/hackingcpp) if you want to get notified of new cheat sheets.
It's never late ..to be Great 
Published: 2022-01-09 16:29:12

Hello to my lovely reader's hope you all are doing well .In this world Everyone wants to be successful in their life and I am sure that you will be successful one day but this doesn't mean that you will be successful without doing any efforts or just sitting/laying down in your bed.. for being successful  you have to do something. So now the Biggest question arrives.. how do I start? am I capable of doing this ? would it be right for me ? Trust me these are just few things which I have wrote, there so many things which you will face. To accomplish your goal you have to face many problems.. so ask yourself "If not now then when ?".."GO LITTLE ROCKSTAR" stop worrying start doing. go ahead , begin research , make roadmaps , collect all the essential and kick it off..
As it is my first blog please forgive me and my grammatical errors and from now onwards I will write technical blogs.

                                                        

THANKS FOR READING #LOVEKK
How to make HTTP requests using "fetch"
Tags: javascript, node, webdev, beginners
Published: 2022-01-09 16:19:39

`Hello 👋`

### Method 1 - **Promise**
```js
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(data => {
    console.log(data)
})
```

### Method 2 - Async
```js
const response = await fetch('https://randomuser.me/api/')
const data = response.json()
console.log(data)
```
**Note: Make sure function is `async` **
***
Thank you for reading

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
Setup a path mapping through ts-config
Tags: typescript, tutorial, webdev, node
Published: 2022-01-09 16:08:22

## Introduction

Today, I want to show you the way to avoid these ugly paths on your typescript projects.

![setup_path_mapping_1.png](https://pohqpfuuxygfxundqkru.supabase.in/storage/v1/object/public/blogs/setup_path_mapping_1.png)

To something more readable, maintainable and fancier:

![setup_path_mapping_2.png](https://pohqpfuuxygfxundqkru.supabase.in/storage/v1/object/public/blogs/setup_path_mapping_2.png)

## Path mapping

On Typescript project, we can use path mapping method through ts-config.json... 

**But, what does it mean “path mapping” on a Typescript project?**

My `ts-config.json` would look like this:

```json
{
  "compilerOptions": {
    "baseUrl": "src", // This must be specified if "paths" is.
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
```

The values inside `paths` property tell the transpiler: for any module import that matches the pattern `"@/components/*"` (`*` i.e. all values), to look in location `"components/*"`.

So now with these instructions in my .tsx file, if I import a new component :

```tsx
import Button from "@/components/Button";
```

When I compile, the transpiler knows where is this component in my project because during the build process the transpiler combines the `baseUrl` with `components/*` :

```bash
<baseUrl>/components/Button
```

You can see the Typescript documentation for information about this: [TypeScript: Documentation - Module Resolution (typescriptlang.org)](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping)

## tsconfig-paths

If for some reason, you are working with node.js or some environment that doesn't use a module bundler like webpack or parcel you will additionally need [tsconfig-paths](https://www.npmjs.com/package/tsconfig-paths) package.

This package will read the `paths` from `tsconfig.json` and convert node's module loading calls into physical file paths that node can load.

To do this, you need to preload `tsconfig-paths/register` in your node command :

```bash
node -r tsconfig-paths/register main.js
```

## Jest

Jest is a little mischievous with paths-mapping of Typescript, you need to specify the module mapping to him. For example in your `jest.config.js`, you can set `moduleNameMapper` property:

```jsx
module.exports = {
		moduleNameMapper: {
	      "^@/(.*)$": "<rootDir>/src/$1"
		},
}
```

## Conclusion

I hope you were enjoyed reading this article. It’s my first time, be indulgent with me please :D Also, I learn English, so don’t hesitate to notify me if I did mistakes.
You can follow me on my [Github](https://github.com/yteruel31) and my [Portfolio](https://yteruel.fr/) (it’s under construction, but soon I will present it through a new article)
Example social network developed with ReactJS, Spring Boot and MongoDB
Tags: javascript, react, tutorial, webdev
Published: 2022-01-09 16:02:56


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2jdkqv5z3ik0daganr8.png)

I have developed a small social network web app for educational purpose and want to share this with the community. This app is built with ReactJS for frontend, Java Spring Boot for backend and MongoDB as the database.

The app tries to mimic a few functions of Twitter, including:

- Create post with text and image
- The number of characters in each post is limited to 200 characters
- Like, comment and re-post a post
- View the number of likes, comments and shares of a post
- Comments are toggle
- The number of character in each comment is limited to 100 characters
- Follow, un-follow someone
- See who are following us and follow them back
- Check who we are following
- View all posts of an individual
- View our own posts
- List all user accounts in the entire social network (due to the number of users are still small, I did not develop search user function)

- Other functions:
  - Due to limited storage space, client app compresses the uploaded image to the maximum of 250px (width or height)
User avatar is created by hashing user id and convert that hash code into a hexagonal image
  - Authentication and authorization use JWT
  - Responsive frontend for desktop and mobile devices

- Technical stack:
  - Frontend: ReactJS, Redux Toolkit, React Router, React Bootstrap
  - Backend: Java Spring Boot
  - Database: MongoDB

Hope you enjoy it and if this project is useful for you , please give me a ⭐ Github star ⭐ for my effort!

**Live Demo:**
https://psn-social-network.herokuapp.com/#/

**Source Code:**
https://github.com/linhtch90/psn-social-network-public-source
React Native Roadmap 2022
Tags: javascript, react, reactnative, mobile
Published: 2022-01-09 15:49:50

Hell everyone, 
If you are interested to learn mobile development using react native then you can watch my upcoming videos on react native.

I am sharing react native roadmap 2022 where I have explained topics that I will cover in my upcoming videos. So please watch the given video and if interested then subscribe my channel. I will cover all the topics from basic to advance. Also we will build different react native project and deploy on google play store..

https://youtu.be/-_3kT_OV6Vs

Link of my youtube channel “JavaScript Centric”-
https://www.youtube.com/c/JavaScriptCentric
AWS SAM app with MongoDB Atlas Data APIs
Tags: atlashackathon, mongodb, aws, beginners
Published: 2022-01-09 15:39:56

This is the implementation of a typical web app backend where the MongoDB Atlas is leveraged to store data.

### Overview of My Submission
The SAM app uses MongoDB Atlas for database choice which contains two collections - `shield_agents` and `shield_locations`. This stores the S.H.I.E.L.D info such as the database of all agents and non classified locations. The operation of `INSERT` and `GET` is integrated with [MongoDB Atlas Data APIs](https://docs.atlas.mongodb.com/api/data-api/) where the API credentials are created and passed into AWS Lambda fns as *environment variables* with CloudFormation Parameters. The APIs from SAM app are exposed with *AWS API Gateway*. Also have the Search enabled with indexes.
![MongoDB dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3axlevwp62zmstyotcua.png)
 
### Submission Category: 
**Choose Your Own Adventure**, the first time I'm using MongoDB and Data APIs so went a step to adapt it into my usual tech-stack (AWS Serverless) with a [AWS SAM application](https://aws.amazon.com/serverless/sam/). 

### Link to Code
{% github https://github.com/zachjonesnoel/shield-database %}

### Screenshots
Creating an agent with `insertOne` API
![Create agent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heyiovnjp0ukn56baitb.png)
Getting one of the created agent with `findOne` API
![Get created agent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hakwunoeo24scwy1x43s.png)
Creating a location with `insertOne` API
![Create location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb3glebxichz1b5gbdgi.png)
Getting one of the created location with `findOne` API
![Get created location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs2azn2r3up797zg9mrt.png)
[MongoDB Atlas Search](https://docs.atlas.mongodb.com/atlas-search/) helps in creating an `index` for a collection and using the index to query and check if the filter pattern matches any record. The matching records also return a match score.
![Atlas Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dec6njkjh7sipk2oozo1.png)
[MongoDB Atlas Charts](https://docs.mongodb.com/charts/) can help you visualize data. 
No of locations - 
![MongoDB Atlas Charts - locations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4z5mengp4nit7naoc4r.png)
Agents with security clearance level- 
![MongoDB Atlas Charts - security level](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pg3arzokkwpukq5r8l6s.png)
 

### Additional Resources / Info
+ [MongoDB Atlas Data API](https://docs.atlas.mongodb.com/api/data-api/)
+ [MongoDB Atlas Search](https://docs.atlas.mongodb.com/atlas-search/)
+ [MongoDB Atlas Charts](https://docs.mongodb.com/charts/)
+ [AWS SAM application](https://aws.amazon.com/serverless/sam/)
Start learning today with me
Tags: beginners, productivity, career, programming
Published: 2022-01-09 15:38:41

I started as an intern.
I learnt a lot during the internship period.
After internship, I continued as contract employee at the same company, where my role changed to testing from development.
I lost the passion for programming for a while.
To motivate myself and to put myself out there I'm gonna start practicing the leetcode problems one by one.
My target to do at least 5 in a week.

This post is for someone who's looking for some motivation to start doing something now.
(It took me a while to think this through and start this)

Hope I do this consistently!

All the best for me and you...
How To Setup Kimai2 TimeTracking Locally Or On Your Server With Docker Compose
Tags: timetracking, software, timemanagement, docker
Published: 2022-02-22 21:36:30

---
title: How To Setup Kimai2 TimeTracking Locally Or On Your Server With Docker Compose
published: true
date: 2022-01-09 15:37:33 UTC
tags: timetracking,software,timemanagement,docker
canonical_url: https://medium.com/geekculture/how-to-setup-kimai2-timetracking-locally-or-on-your-server-with-docker-compose-1287d9bc3722
---

[![](https://cdn-images-1.medium.com/max/1920/1*lAv1Z2Sb2STI-frAPc6Smw.jpeg)](https://medium.com/geekculture/how-to-setup-kimai2-timetracking-locally-or-on-your-server-with-docker-compose-1287d9bc3722?source=rss-1282c85b5cbc------2)

Setup one of the best time-tracking tools locally or on your server using Docker or Docker Swarm Mode in ~5 minutes. All files included!

[Continue reading on Geek Culture »](https://medium.com/geekculture/how-to-setup-kimai2-timetracking-locally-or-on-your-server-with-docker-compose-1287d9bc3722?source=rss-1282c85b5cbc------2)
Thank.Codes - The Online Gratitude Journal
Tags: atlashackathon
Published: 2022-01-09 15:36:41

### Overview of My Submission

Website Link: [Link](https://thank.codes/)
Link to Code: [Github](https://github.com/superzackx/thankcodes)
Submission Category: Choose Your Own Adventure
Atlas Tool Used: Atlas Search


The online gratitude journal is my submission for the MongoDB Atlas Hackathon. I created this project to spread a little joy in the world as the world went into lockdown. Sometimes we need to remember what we have, and we need to be thankful for that. Thank.codes is a place for people to express themselves and their gratitude. 

The website is a place to share your gratitude. You can post a message like "I am thankful for my health." People can also share other's gratitude's as tweets by clicking on the tweet button. You can click on the username to see the user's gratitude journal, which has all the posts by him. I use MongoDB here by comparing the username given in the query to the documents stored in the DB and then displaying ones with same usernames as the one provided. You can also view your own gratitude journal by clicking on the link in the navbar.  

I used NodeJS and Express for the backend of this app. I created an API which talks to my MongoDB database. The DB stores all the new posts created using a Mongoose Schema as a backbone. I use MongoDB's findById to find posts quickly through their Mongo IDs. Each MongoDB document contains three key-value pairs: The ID, The author's username, and the post's content. I make a request to my post route which then talks to MongoDB, storing my posts. I use Auth0 to perform logins and signups. I use MongoDB to filter through posts and find the ones from the user requested. I used Materialize CSS as a framework for making my website aesthetically appealing.  

Front-End:

- EJS
- HTML5/CSS3
- Materialize CSS
- jQuery

Backend:

- NodeJS
- MongoDB Atlas
- Auth0
- ExpressJS

Tools Used:

- MongoDB Atlas
- Visual Studio Code
- Ubuntu 21.04
- Postman
- Repl.it

I plan to start using the Data API, the new feature my MongoDB as it reduces my work and makes it much easier for my application to communicate with the database.

### Link to Code

[Link to Code](https://github.com/superzackx/thankcodes)

### Additional Resources / Info

NodeJS - ExpressJS
Embedded JavaScript(EJS)
MongoDB Atlas find methods and search
RESTful API and CRUD Operations
HTML5/CSS3 with Materialize CSS
Repl.it


## Screenshots/demo video 

![Welcome Page with CTA Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p910c1cto5169z6ag67v.png)

![Login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le8x4xl4btdxl31qlhwx.png)

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbegu79r6j4w4c17fmhi.png)

![Video Link](https://drive.google.com/file/d/1lZk_H0ZDfxP3nKkJXDTcZa2HruRfwbtm/view?usp=sharing)
[Day 6] Why is blockchain so hard?!
Tags: 100daysofcode, blockchain
Published: 2022-01-09 15:32:44

Day 6, my bad for not posting yesterday, I totally forgot to post but I didn't forget to code! Yesterday was a fun day and I am glad I got myself to code on the weekend. Sometimes weekends can be hard for me because I am so distracted by other things. 

All of my code can be found at this Github [Repo](https://github.com/ChaseStruse/VideoGameMarketplace)

## What did I do?

- Continued to modify the structure of the smart contracts
- Wrote tests for Buyer contract
- Fixed issues with failing tests
- Found potential bugs in the way things are setup

## What did I learn?

- Learned how to get multiple return types from a function
- Learned how to return multiple values from a single function
- Learned what 'pure' and 'view' are in solidity

## Any Side Notes?

- Nope just gotta keep the grind going!