teleren/devto huggingface dataset:
Havasuz App
Tags: reactnative, javascript, navigation
Published: 2021-01-22 07:00:22

This is a multivendor App that i developed last week for my chines client. 
In this app i use the following major components
- Components(Text, Image, BG Image, Theme, Scroll View)
- Caracal
- Maps
- Navigations(Stack, Drawer, Tab Navigation, Tab Navigation)
- React Native Paper
- Custom Colors
- Firebase (no sql Database)
- Component bases Buttons, Logos
- Picker (Images Picker, DropDown Picker)
- etc

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z2jsqew0bur8euhjutop.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s7xb6dmywuab6w9vhbc9.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9h2u3kbc9t1qk29znsqe.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3l76s31bmu40dxjvdd8c.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wd26f8plw9eal0vqgel2.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w43dteb7afr8s94t95de.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aspdtdgavd0e0c4rw7dj.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bz49hazm5pc3wpojvwyy.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vo7ampe4hgxrl4b9hn51.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uaa6vp77yu4gmmij79m6.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yadw6c7movjgxguegy7p.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wnvzdppzts0b32fgmufp.png)
Django Rest: use reserved keywords as a field in serializer
Tags: django, python, djangorest
Published: 2021-01-22 06:52:12

Recently We've come across a problem at work, where we had to serialize the request payload that has some clauses like `and`, `in`, `class` etc.

Consider the following request payload that needs to be serialized:

```json
{
	"values": [ "21234" ],
	"and": true,
	"count": 200,
	"year": 2020
}
```

Django-Rest `Serializer` class provides a method `get_fields` that allows us to dynamically modify the fields. So we can use this method to modify the fields as follow:

```python
from rest_framework import serializers

class DemoSerializer(serializers.Serializer):
    values = serializers.ListField(child=serializers.CharField(), allow_empty=True)
    and_ = serializers.BooleanField() # avoid naming conflicts
    count = serializers.IntegerField()
    year = serializers.IntegerField()

    def get_fields(self):
        fields = super().get_fields()
        and_ = fields.pop('and_') # Dynamically modify field
        fields['and'] = and_
        return fields
```

Now, we can use `DemoSerializer` to serialize the `payload`:

```python
import json
from rest_framework.exceptions import ValidationError

payload = """
{
    "values": [ "21234" ],
    "and": true,
    "count": 200,
    "year": 2020
}
"""
serializer = DemoSerializer(data=json.loads(payload))
try:
    serializer.is_valid(raise_exception=True) # Perform validation
except ValidationError as error:
    print(error)
else:
    validated_data = serializer.validated_data 
    print(validated_data)
```

Output:
```shell
OrderedDict([('values', ['21234']), ('count', 200), ('year', 2020), ('and', True)])
```

Hope this helps 😊
Can you provide same code for nodejs and express
Published: 2021-01-22 06:32:50

I have done above code till the server.js file..
but when i run npm start i do not have any notification when i inserted document in my collection. Is there any other code for nodejs??

Actually I am trying to developed website for online food order..
I want this functionality : when ever any user place new order i should receive any notification.. in programing language when any collection in our mongodb modify i should get any alert or notification ,,,How can i achieve this ?? Please any body help me ..
I have used MongoDB , nodejs ,bootstrap and express..
Build A Random Name Generator Using Python
Tags: python, beginners, programming
Published: 2021-01-22 06:31:07

How many times have you found yourself trying to figure out which name you should use because you would not want to publicly use you name in website or app registration? If it's many then you surely should try building an app that can randomly give you different names to use when in need.

This app is written in python,  
# What you will need
* A code Editor (preferred pycharm)
* A environment and you will be good to go
first you will have to import two packages:

Here is the code snippet:

```python
import requests
from random import randint
url = 'https://svnweb.freebsd.org/csrg/share/dict/propernames?revision=61766&view=co'

```
## For the whole code and explanation read the article at my blog page:  
[Random Name Generator](https://larymak.hashnode.dev/build-a-random-name-generator-using-python) 
 
### Follow me
[Twitter](https://twitter.com/larymak1)  
[GitHub](https://github.com/larymak)  
[YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg)  
[More Blog](https://larymak.hashnode.dev/)
Just getting started
Tags: swift, reactnative, javascript, python
Published: 2021-01-22 06:01:12

I’m just getting started as a programmer. I’ve been trying to learn for years but I struggled to wrap my head around the odd formatting of code. 

I recently got really into spreadsheet formulas and saw a guy format his formulas like code, and all of a sudden, everything I had learned about coding “clicked.”

I have some ideas for apps and I’m going to build them now that I understand how this works. I’m now just trying to decide if I’m going to learn Swift (and Xcode), JavaScript, React, or Python. I’m leaning towards React since it seems simplest and fastest to get a functional app up and running without having to spend a ton of time learning Xcode or complicated syntax.
Build A SwiftUI Instagram Clone with Firebase #0 App Overview
Tags: swift, swiftui, ios, career
Published: 2021-01-22 05:37:25

---
title: Build A SwiftUI Instagram Clone with Firebase #0 App Overview
published: true
description: Showcase of an Instagram Clone built using SwiftUI
tags: #swift #swiftUI #ios # career
//cover_image: https://direct_url_to_image.jpg
---

In this series of videos we are going to build a SwiftUI Instagram clone with a firebase.
Here we showcase the app we will build.




{% youtube fgDZIEwqJXw %}
How to load third-party Javascript on demand | Notes
Tags: notes, webdev, javascript, recipe
Published: 2021-01-23 17:16:38

---
title: How to load third-party Javascript on demand | Notes
published: true
date: 2021-01-22 05:35:00 UTC
tags: notes,webdev,javascript,recipe
canonical_url: https://abhi.page/notes/load-third-party-javascript-on-demand/
---

A small script to dynamically (and, asynchronously) load third-party Javascript files on demand.

- It inserts a `<script>` tag in the head to load the script.
- Checks if a `<script>` tag already exists with the same source to avoid duplicate script tags.
  - I use it with a Web Component based library where another component may already have loaded the script.
- Callbacks after successful or failed load.
- **Note:** I also use a _retry_ logic (that removes and re-attaches the script tag) to avoid temporary network failures. I have not included it here for simplicity.

```javascript
/**
 * @param {string} src The URL of the script.
 * @callback onLoadSuccessCallback Callback when script is loaded successfully.
 * @callback onLoadErrorCallback Callback when the script fails to load.
 */
function loadScript(src, onLoadSuccessCallback, onLoadErrorCallback) {
	if (!src) {
		console.error("Error: missing src");
		return;
	}

	// Check if the script is already loaded
	if (document.querySelector('script[src="' + src + '"]')) {
		// Script already loaded...
		console.warn("Script Already Loaded. Skipping: ", src);
		onLoadSuccessCallback();
	} else {
		// Script not already leaded; load script...
		// Create script tag
		const js = document.createElement('script');
		js.src = src;
		js.setAttribute("async", "");

		// Setup success callback
		if (onLoadSuccessCallback) {
			js.onload = onLoadSuccessCallback;
		}

		// Setup error callback
		if (onLoadErrorCallback) {
			js.onerror = onLoadErrorCallback;
		}

		// Add the script tag to <head>
		document.head.appendChild(js);
	}
};
```

Use it like this:
```javascript
loadScript('url/or/path/to/script.js', () => {
	console.log("Script loaded");
	// Do something with the script.
}, () => {
	console.error("Script load failed");
	// Handle error.
});
```

* * *

[**Read on abhi.page**](https://abhi.page/notes/load-third-party-javascript-on-demand/)
How to convert a file to zip format through Terminal In Ubuntu
Tags: ubuntu, tutorial, computerscience, codepen
Published: 2021-01-22 05:26:39

Today I was trying to convert a file to zip format and I was not aware that we can do it easily with the help of `zip` command in Ubuntu.
All you have to do is : 
-> Go to the directory having the file to be converted to zip.
-> Open the terminal from that directory.
-> Type `zip newNameOfZipFile nameOfFileToBeConverted`.
   For eg : if we have a file named `Rainfall.txt`. Go to the folder containing that file and open the terminal. Lets say we need to have the zip file with the name result. So the command to be typed is :
`zip result Rainfall.txt`
-> You can confirm whether its converted to zip by typing the command `ls *.zip`.
kernel café, toward alpha 1
Tags: operations
Published: 2021-01-22 05:22:32

I spent some time today in the data-hall, getting lighting setup, as well as a console. This weekend I aim to get the rack-boards installed on the walls.

Here are the alpha milestones I aim to reach before the service becomes initially shareable:

* **Week 1**: Initial network setup, first node with SSH cert sync 
* **Week 2**: Tinkerbell setup and second node: Honeycomb LX2, installed via Tinkerbell. Trusted testers.
* **Week 3**: Third node: Mac Mini
* **Week 4**: Nodes 4 & 5, Public Kubernetes Cluster
* **Week 5**: Segregate Firewall, resource controls

Beta!

For the SSH cert synchronization setup, I'm considering basing it on:

 * [periblos](https://github.com/kubernetes/test-infra/tree/master/prow/cmd/peribolos) - YAML to GitHub Org sync
 * [sync-ssh-keys](https://github.com/samber/sync-ssh-keys) - GitHub Org to SSH keys

The missing component though is GitHub Org to UNIX users and groups, which should be easy enough to solve.
Leetcode 733. Flood Fill
Tags: javascript, algorithms, leetcode, recursion
Published: 2021-01-22 05:17:36

#Description:
An image is represented by a 2-D array of integers, each integer representing the pixel value of the image (from 0 to 65535).

Given a coordinate (sr, sc) representing the starting pixel (row and column) of the flood fill, and a pixel value newColor, "flood fill" the image.

To perform a "flood fill", consider the starting pixel, plus any pixels connected 4-directionally to the starting pixel of the same color as the starting pixel, plus any pixels connected 4-directionally to those pixels (also with the same color as the starting pixel), and so on. Replace the color of all of the aforementioned pixels with the newColor.

At the end, return the modified image.

#Example 1:
```
Input: 
image = [[1,1,1],[1,1,0],[1,0,1]]
sr = 1, sc = 1, newColor = 2
Output: [[2,2,2],[2,2,0],[2,0,1]]
```

#Solution:

Time Complexity: O(n)
Space Complexity: O(n)

```javascript
// We will find the first cell to paint using the 
// provided coordinates 
// We call our recursive fill function on that cell 
// The fill function will call itself on the cells that are on top, 
// bottom, and to the left and right of the original cell if those
// cells have the same color as the original cell

var floodFill = function(image, sr, sc, newColor) {
    const oldColor = image[sr][sc];
    fill(image, sr, sc, newColor, oldColor);
    return image;
};

function fill(image, sr, sc, newColor, oldColor) {
    if(image[sr][sc]===oldColor) {
        image[sr][sc] = newColor
        //top
        if(sr >= 1) fill(image, sr-1, sc, newColor, oldColor);
        // bottom
        if(sr+1 < image.length) fill(image, sr+1, sc, newColor, oldColor);
        // left
        if(sc >= 1) fill(image, sr, sc-1, newColor, oldColor);
        // right
        if(sc+1 < image[0].length) fill(image, sr, sc+1, newColor, oldColor);
    }
}
```
TIL about UFUNCTION 
Tags: todayilearned, gamedev, unreal, macros
Published: 2021-01-22 05:00:45

2021-01-21

Today's gag: I setup and threw my first grenade in Unity and the moment it landed, the editor crashed.
![Snippet of Unity's crash dialog upon grenade projection](https://dev-to-uploads.s3.amazonaws.com/i/vhw8camwxa82d8j4h9vo.png)<figcaption>perfect timing - kaboom</kaboom>

Today's lesson: So I'm not really learning Unreal right now but an interesting discussion around function-naming (yes hot topic, I know) cropped up. This led me to dig into UMG a little and I noticed this UFUNCTION macro. Unreal is well [documented](https://docs.unrealengine.com/en-US/ProgrammingAndScripting/GameplayArchitecture/Functions/index.html):
> A UFunction is a C++ function that is recognized by the Unreal Engine 4 (UE4) reflection system. Any UObject or Blueprint function library can declare a member function as a UFunction by placing the UFUNCTION macro on the line above the function declaration in the header file. 

Simply put, this macro enables your C++ function to be called from Blueprint, Unreal's visual scripting system. But what does the macro actually do to make this possible?

I found the macro definition in ObjectMacros.h and <drumroll> it does nothing!
```
#define UFUNCTION(...)
```
So yeah the macro is a tag, meant to be parsed by another tool to enable reflection; in C++, it just produces an empty statement.
== VS === in JavaScript
Tags: javascript, codenewbie
Published: 2021-01-22 04:41:21

Facts - 

- String
- Number
- Boolean
- Undefined
- Null

These are called primitive datatype in JavaScript. Except these everything else is an OBJECT.

Class, Function, Array, RegExp all are ObJect.

Objects are passed by reference, whereas primitives are passed by values.

## Examples

1. 'ranveer' === new String('ranveer')     [//false](//false) 
2.  'ranveer' === new String('ranveer).toString()   // true
3.  'ranveer' == new String('ranveer')   // true

We are getting this strange outputs because in javascript

(==) do automatic typecasting,whereas (===) does not.

On line 1, LHS is String and RHS is Object. Hence, its False.

On line 2, LHs is String and RHS is String (we typecaste it toString). Hence, its True.

On line 3, LHS is String and RHS is Object. But (==) is smart kid he performs automatic typecasting. He converted RHS object into string. Hence, its True
CSV Reader Library
Tags: php, csv
Published: 2021-01-22 03:21:50

---
title: CSV Reader Library
published: true
description: I hate parsing CSV files
tags: php, csv
//cover_image: https://direct_url_to_image.jpg
---

I absolutely despise parsing CSV files because you have to know the column indexes for all the fields you want to read, but they could be in a different order for a different file.  This makes it to where you have to sanity check the file first and it's going to be different for every file you want to parse.  I did kinda find a way around it.

```php
$header = array_flip(fgetcsv($fh));
```

This will create an array where the header title is an key to the column index

```php
Array(
    'column1' => 0,
    'column2' => 1,
    'column3' => 2,
    ...
)
```

This is helpful, but you still have to put something like...

```php
while($data = fgetcsv($fh)) {
    $column1 = $data[$header['column1']];
...
}
```

That is nice, but not very simple and a pain to write every time you need to parse a file.  So I did what any natural dev would do and wrote my own library that will do it all for me.

```
composer require godsgood33/csv-reader
```

Then all you have to do is create a reader object and start parsing.

So given the following file:
```
ID | Name   | Phone Number | Email            | State
1  | Ryan   | 123-456-7890 | ryan@example.com | IN
2  | John   | 234-567-8901 | john@example.com | GA
```

```php
$csv = new Reader($file);
do
{
    $name = $csv->Name;
    $phone = $csv->PhoneNumber;
    $email = $csv->Email;
} while($csv->next());
```

The library removes any non-alphanumeric characters [A-Z, a-z, 0-9, _] from the header titles so that they are valid properties (so the space is removed from "Phone Number").  

There are a couple different options you can pass in as an array when you create the object.

```php
[
    'delimiter' => ',' // character that splits the fields
    'enclosure' => '"' // character the encloses a field should it contain the delimiter
    'header' => 0 // default 0-based index for what row the header is on
    'required_headers' => [] // array of headers (post sanitizing) of fields you want to require are present in the file before any parsing can take place
]
```

So if you wanted to require the ID, Name, and Email fields your object instantiation would look like:

```php
$csv = new Reader($file, [
   'required_headers' => [
      'ID','Name','Email'
   ]
]);
```

Other fields would still be available for use, but are optional fields, so you'd want to validate them before using them.  If a column header is not present, it simply returns `NULL`.

This library can also be used for remote files, but currently only supports http(s).  However, it would not be recommended for large remote files.

{% github godsgood33/csv-reader %}
Open source excel grid system with advanced performance for Vue, React, Ember, Angular, Svelte
Tags: showdev, react, vue, excel
Published: 2021-01-22 04:39:14

On regular bases I’m working in development and consulting for project with complex frontend. Most of them require enormous data representation without problems for client, others require complex ui design systems.

In the end revo-grid system was born. I have created data grid system which combines best excel sheet qualities with high performance.

These are key features:

- VNode based DOM almost without rerendering. I do recombination instead;
- Full customization: custom cells, headers, properties, editors;
- Advanced plugin system with most important plugins out of box such as sorting, filtering, exporting to excel, column based on context size;
- Custom sizes for rows and columns;
- Column/Row grouping;
- Freezed columns/rows;
- Integration with all popular frameworks: react, vue, angulat, ember, vanilla;
- Multiple other useful features just to get it in use out of box.

Hope you will enjoy component. Looking for some feedback from you. Any suggestion are welcome. Thank you.
A Better way to write React Components
Tags: javascript, react, codenewbie
Published: 2021-01-22 04:37:32

I just published an article explaining how to write better React components.

[<img src="https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/6655fdbfd45020c0584d90bb617900d1487819a9/better_components.png">](https://www.freecodecamp.org/news/how-to-write-better-react-components/)

----

I have also launched a free [Introduction to React Router](https://yogeshchavan.podia.com/react-router-introduction) course. So don't forget to check that out.

**Subscribe to my [weekly newsletter](https://yogeshchavan.dev/) to join 1000+ other subscribers to get amazing tips, tricks, articles and discount deals directly in your inbox.**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)
Day19:100DaysOfCode
Tags: 100daysofcode, productivity
Published: 2021-01-22 04:18:44

Solved the pizza problem for hashcode(2021) along with my friend

Continued with trees...today it will be finished
leetcode ques on string nd recursion

started with cracking the coding interview book :)

watched some interviews on youtube .
EOD

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Creating Shopify theme from scratch - Part 2
Tags: shopify, liquid, tutorial, themekit
Published: 2021-01-22 03:57:49

# Installing Themekit for **Windows**

------
There are 3 ways to install [Themekit](https://shopify.github.io/themekit)
1. [Chocolatey](https://chocolatey.org/) - Will need to have `.NET Framework 4+ installed`
2. [Manually](https://shopify.github.io/themekit/#manual-installation) - Will need to set `PATH` environment variable
3. [Node Package](https://github.com/Shopify/node-themekit) - might have to set `PATH` environment variable

------
## Installing using Chocolatey

1. Install Chocolatey, if you haven't [Install Chocolatey](https://chocolatey.org/install#install-step2)
2. In the command prompt or powershell `choco install themekit`

------
## Installing manually

1. Download from [Themekit](https://shopify.github.io/themekit/#manual-installation)
2. In your `C:\Program Files` create a folder `Theme Kit`
3. Place the downloaded *theme.exe* into `C:\Program Files\Theme Kit`
4. Add `C:\Program Files\Theme Kit` to your `PATH` environment variable.
 - In *command prompt* run `rundll32.exe sysdm.cpl,EditEnvironmentVariables`
 - Select `Path` and click `Edit`
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ywsouob1ut9bjl1v43v7.png)
 - Click new and type in `C:\Program Files\Theme Kit` and OK and OK
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tm05x5eu5lzx0hgzeo4g.png)

5. Run in *command prompt* `theme` and you should see 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cefgy6dulrfoaqgwfgwb.png)
6. Run in *command prompt* `theme update` to update to the newest version

------
## Installing using npm
1. In your selected directory for creating a theme, in *command prompt* run `npm install @shopify/themekit`
2. In *command prompt* run `theme`
 - **Note**: If you are getting an error that theme command doesn't exist or something like that, it is better off to install manually since you will also need to add to environment variable
3. Run in *command prompt* `theme update` to update to the newest version

------
## Create a new theme
1. In the directory you are going to work in, run in *command prompt* `theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]` 
 - Replace `[your-password]` with the API password from Part 1
 - Replace `[your-store.myshopify.com]` and `[theme name]`

More info on themekit commands can be found on [Themekit's website](https://shopify.github.io/themekit/commands/)

------
## Useful resources for theme development
- [Shopify Documentation](https://shopify.dev/docs/themes)
- [Shopify Liquid Code Examples](https://shopify.github.io/liquid-code-examples/)
- [Shopify Cheat Sheet](https://www.shopify.com/partners/shopify-cheat-sheet)
- [Shopify Theme Scripts](https://github.com/Shopify/theme-scripts#packages)
"Fully understood!"
Published: 2021-01-22 03:56:57

I'd like to introduce quite interesting slang of developer in Japan. It is "完全に理解した" Kanzen-ni, Rikai-shita means "Fully understood!". 

It is used in the scene that is the very beginning of coding.
Very junior programmer say "Fully understood!" when he finished a tutorial. 

Everybody know that he doesn't know anything. But his cognitive bias makes him overconfident. So "Fully understood!" is one of the very humorous slang among Japanese programmer's.

Original tweet is:
https://twitter.com/ito_yusaku/status/1042604780718157824?s=20

> [Engineer's Glossary]

> "I understand it completely (Fully understood!)."
It means that you have completed the tutorial to use the product.

> "I don't know anything."
It means that you have become familiar enough with the product to face its inherent problems.

> "I can do it."
Means that you can build the same product from scratch yourself. It can mean that you can make the same product from scratch, or that you are the developer.

This may be known as "Dunning-Kruger effect".
https://opendevpro.com/blog/2020/04/15/how-to-go-from-junior-to-senior-programmer/
YouTube Video | React hooks 10 - Performance Optimization using useCallback hook
Tags: react, webdev, showdev, youtube
Published: 2021-01-22 03:51:08

In this video we will continue to learn  the useCallback hook. We will learn to optimize the performance of our React application using useCallback hook.

{% youtube FsQo9LSvAng %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.