teleren/devto huggingface dataset:
Dark theme in React-Native, React using useContext hook 
Tags: react, reactnative, css, javascript
Published: 2019-11-18 08:59:54


<h3>Create a separate file and construct object like this</h3>

```js
const mainColors = {
lightTheme: {
//light theme colors 
type : 'light',
fontColor: 'black'
},
darkTheme: {
//dark theme colors
type : 'dark',
fontColor: 'white'
}
//common colors
}

export default mainColors;
```
<h3>Theme Provider Context :</h3>

```js
import React, { createContext, useState, useMemo } from 'react';
import mainColors from '../theme/mainColors';
export const ColorThemeContext = createContext();

function ColorThemeProvider({ children }) {
    const [colors, setColors] = useState(mainColors.lightTheme) //setting light theme as default
  const value = useMemo(
    () => ({
        colors,
        setColors,
    }),
    [colors, setColors],
  );

  return (
    <ColorThemeContext.Provider value={value}>{children}</ColorThemeContext.Provider>
  );
}

export default ColorThemeProvider;
```

<h3>Inside any component that has <b>ColorThemeProvider</b> as its wrapper :</h3>

```js
const {colors, setColors} = useContext(ColorThemeContext); //assume currently lightTheme is applied
...

<Text style={{color : colors.fontColor}} > text </Text>
```

<h3>Changing dark theme :</h3>

```js
const {colors, setColors} = useContext(ColorThemeContext); //assume currently lightTheme is applied
....

function onAction() {
if(colors.type === 'light') {
setColors(mainColors.darkTheme);
} else {
setColors(mainColors.lightTheme);
}
}
```

Hope this helps.

<b>Feedbacks and Suggestions are much appreciated.</b>
Help needed......
Published: 2019-11-18 08:43:24

Hello guys.
Please I am a newbie to coding and I recently ran into an issue when I was working on a project and would love help from anybody.
I am learning on creating an ecommerce site using html and css only for now but each time I try to zoom out or zoom in my browser window, some of my codes/images would fall out of place unlike what I see in other running sites as they do not fall out no matter how far you zoom in or out.
Can this issue be corrected or is there another language to solve this.
Thanks
React Developers - what do you use to make your app SEO friendly?
Tags: discuss, react, seo, javascript
Published: 2019-11-18 08:27:28

SEO for JavaScript Single Page Applications is a hot discussed topic.

Even though Google [claims](https://developers.google.com/search/docs/guides/javascript-seo-basics) to be able to properly index JavaScript SPAs, the other search engines barely do.

There seems to be 3 general approaches for solving it: 
- **doing Server Side Rendering (SSR)**, on your own or with a dedicated framework
- **making your website/app static** (if possible)
- **serving a pre-rendered version** of your app to the crawlers, again: on your own or using a service for it


Which method do you use and advocate for? What problems do you see with the other solutions?
VSCode plugins
Tags: vscode, typescript, flutter, angular
Published: 2019-11-18 08:17:52

## 🚀 __Keep it simple, always__.


### Extensions for web developments

* __[TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)__ for code checkup and best practices.

* __[Prettier](https://github.com/prettier/prettier-vscode)__ for beautify code style (indent and more).

* __[Debugger for Chrome](https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code)__ for debug code in chrome from VSCode IDE.

* __[Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)__ for _better_ communication between html and ts.

### Extensions for better organization

* __[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)__, this is _my favorite extension_, add style to your comments.


### Extensions for Mobile development (Flutter)

* __[Flutter](https://flutter.dev/docs/development/tools/vs-code)__ for running, debugging and develop flutter app.
* __[Dart](https://dartcode.org/)__ for dart-lang autocompletion and more.

__⚠️ I install extension only when I need it.__
Vue Router: Route Resolvers
Tags: vue
Published: 2019-11-18 08:07:23

##What is a Router Resolver?
In the most simplest of terms, I’d say a Router Resolver allows you to get data before navigating to the new route.

###What’s the use case?
One way to deal with getting and displaying data from an API is to route a user to a component, and then in that component’s created hook call a method in a service to get the necessary data. While getting the data, perhaps the component can show a loading indicator.

But, in cases where you want the API data to be fetched before the component is initialised, this strategy fails and this is where Route Resolvers are used.

###How to implement?
Vue Router provides beforeEnter hook to take action before a route is resolved, we can use this hook as a point to bind our route resolver.

![](https://miro.medium.com/max/1112/0*EEWSXQyIZnNul5Xy.png)

The resolver function is going to do the API calling stuff to resolve and set data in the destination route’s meta key.
Route’s Meta is an object that contains additional information related to a route. We will utilise this object to store our data.

![](https://miro.medium.com/max/2140/0*7ACgR5aRUeUkuNN0.png)

In the above code, getList is a function that returns Promise<List> and we await for the data to be resolved before we call next() to resume the routing.
Now, in the component we can consume the data by reading it from the route’s meta.

![](https://miro.medium.com/max/1144/0*RF9CmDx8LdbLStkC.png)

So, this is how we can create and use Route Resolvers in Vue.Js.

***

##Connect with me

LinkedIn: https://www.linkedin.com/in/imanubhardwaj/
Medium: https://medium.com/@immanubhardwaj
Github: http://github.com/imanubhardwaj/
YPSKA #7 Static site generators
Tags: staticsitegeneration, serversidegeneration, jamstack
Published: 2019-11-18 08:05:04

Following up on yesterday's post about the [JAM Stack](https://dev.to/hfahlstedt/ypska-6-jam-stack-o6f), today I'm talking about static site generators. I've already mentioned one of these generators, [Next.js](https://dev.to/hfahlstedt/ypska-5-next-js-1d04).

Static site generators takes some definitions of a site and renders it into a static site that doesn't have any dynamic parts, i.e it is not dependent of a ASP.NET, node etc back ends. It could be run just out of basically any storage. 

A common scenario for this is a blog. You add posts in, for instance, a GitHub-repo, and then run the generator to add links etc to the newly created page. 

You usually crate new pages/blog posts using Markdown, a simplified mark up language to describe text layout (I'll probably do a post about that).

There's a great site listing all kinds of different [static site generators](https://www.staticgen.com/).

Why don't you try out a site generator in your next project?
Nestjs Typeorm Graphql Dataloader tutorial with Typescript
Tags: graphql, typescript
Published: 2019-11-18 08:02:41

Before we deep dive into integrating all three into a single project. And to take advantage of GraphQL query language, and Typeorm relational database with PostgreSQL (PSQL) or MySQL or any other DB. Let’s understand the individual pieces separately.

I assume that you have basic knowledge of ORMs, Express, Node, Graphql, NestJs. In case you are missing not, here is the brief introduction

GraphQL:-

GraphQL is a query language for the API. When a request (query in GraphQL world) triggers, It decides the data flows over the network.

Graphql trigger requests using a smart single endpoint unlike in traditional REST API. Where an endpoint is triggered according to the data and resource.

NestJS:-
NestJs is a framework used to serve our server needs. It uses Express and Fastify under the hood and has robust support for TypeScript. Which is designed and employed to make the backend structured that is in easy to maintain modules.

TypeORM:-
TypeORM is an Object Relational Mapping Tool that can be used with DataBase like Postgres, SQL, Mongo-DB. It supports multiple databases in the application and writing code in the modern JavaScript for our DataBase needs.

Lets us start building a basic author-books-genres program using TypeORM, NestJS, Graphql, RestAPI, Dataloader

You can see the <a href="https://codersera.com/blog/nestjs-typeorm-graphql-dataloader-tutorial-with-typescript/">complete program</a>
Why Choose Dev?
Tags: whychoose
Published: 2019-11-18 07:56:40

Hello I'm Ibrahim From TGD Dev

Today I would like to discuss Why dev is a great platform for all developers. Let's get started. (Why Choose? - An Official Dev Series! Episode 1)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2xu18yyrq7twic2bfdbw.png)

First Of all it's a easy to grow platform.
Dev is a very easy platform to build your brand on!

You just need a couple sentences and you might get featured! 

It's happened to me in just 1 minute! 

Second Dev Has all types of content for developers! 

Like if your stuck on JavaScript Dev can help you! Want Help With Creating. A website? Dev has it! Afraid of Wix.com? Well somehow...
Dev has it?

Amazing as it is stuff like Pokemon videogames is not on Dev since its built for well developers. Not for non-developers. U can still try if U are a  non-developer but it's not built for it.


3rd Dev Has Cool Features like adding a video body images cover images Cool themes including dark mode!
Amazing right?

Fourth A Chat? Twitter has a chat feature but your favourite stars don't reply unlike Dev Your stars Might Actually Reply Since Dev has less users You have a higher chance to meet your stars!

Yes Dev is not like other social medias like Twitter Facebook Instagram. It's a social media for Developers! 

Fourth Its very friendly! Everyone here is very very friendly!

Hopefully This Episode Of Why Choose? Helped all the new comers feel welcome to Dev and I hope U enjoy this post.

Sincerely Ibrahim From TGD Dev™

- Why Choose?
PHP Class autoloader
Tags: automation, webdev, php
Published: 2019-12-05 12:54:09

---
title: PHP Class autoloader
published: true
date: 2019-11-18 07:32:36 UTC
tags: automation,web-development,php
canonical_url: https://medium.com/@keramotul.islam/php-class-autoloader-a44509c4d4b
---

![php classes autoload](https://cdn-images-1.medium.com/max/900/1*66xL-qTIMxlM6Oe1WgbhWQ.jpeg)

When I first heard about PHP class autoloader, I thought “I might be a huge mechanism”.   
But in reality, class autoload is a very simple thing and it’s just a function.

Earlier we used ``__autoload()`` function but now it is deprecated on PHP 7.2. So we’ll use ``spl_autoload_register()``

``` php
function my_autoloader($class) {
    include 'classes/' . strtolower( $class ) . '.php';
}

spl_autoload_register('my_autoloader');
```

It will load all the classes from the project. But what if, we want to load specific classes, which are in the /classes folder?   
“We need to use ``namespace`` for those classes.”

``` php
function my_autoloader($class) { 
    if ( false === strpos( $class, __NAMESPACE__ ) ) { 
        return; 
    }

    $class_name = preg_replace( '/^' . __NAMESPACE__ . '\\\/', '', $class );

    require_once __DIR__ . '/classes/' . strtolower( $class_name ) . '.php';
} 
spl_autoload_register(__NAMESPACE__.'\my_autoloader');
```

[**Source Code**](https://gist.github.com/AbmSourav/94b0ae6806a77e0add03dcf70071c3b7)
Git cheatsheet
Published: 2019-11-18 07:40:28


Add all files to be saved
```
git add .
```

Save changes offline
```
git commit -m "Changed something comment"
```

Push changes to online server
```
git push
```

Undo local changes and save them if you want to revert again
```
git stash

# delete stash
git stash drop
```

Apply new gitignore
```
# "cache/" is the file or folder you want to remove tracking
git rm -r --cached cache/
git add .
git commit -m ".gitignore is now working"
```

Remove remote origin to reupload files to source control provider
```
git remote remove origin
```

Upload repo to source control provider
```
git remote add origin https://username@your.bitbucket.domain:7999/yourproject/repo.git 
git push -u origin master
```

Merge branches
```
# list local branches
git branch

# create a new branch
git checkout -b new_branch

# switch to a branch
git checkout branch_name

# merge the new branch to master branch
git checkout master
git merge --squash new_branch
git commit -m "new_branch and master branch merged"
```

Delete a branch
```
# delete a local branch
git branch -d branch_name

# force delete a local branch
git branch -D branch_name

# delete a branch on github/bitbucket
git push remote_name --delete branch_name
```


Use git to maintain website in server
http://toroid.org/git-website-howto
Share Multiple Photos, PDF for React Native
Tags: reactnative, share, multiplephoto, photoshare
Published: 2019-11-18 07:36:16

Hi every body. You are searching a module to share multiple photos, you can use my module. Check it in Github, also npms.
* Github: https://github.com/codebetterme/react-native-share
* Npms: https://www.npmjs.com/package/react-native-files-share
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/crtgk8p7vbgmq09x88c7.png)
SQL vs NoSQL
Tags: sql
Published: 2019-11-18 07:09:40

As a recent convert to the tech field, I really only have had exposure to SQL, or Structured Query Language. SQL is a language used to communicate with a database through a variety of statements that are used to perform tasks such as retrieving, updating, and deleting data. As I began branching out from the languages that I have a firm grasp on, I was quick to encounter systems classified as NoSQL, or 'not only sql', such as MongoDB, CouchDB, and Cassandra. Being a forever student, i quickly dug into as many documents as I could to discover the difference between the SQL systems that I was familiar with and their NoSQL counterparts.

Firstly, knowing what a NoSQL database is would be important. A NoSQL database is an approach to database design that lends a more flexible schema for data storage and retrieval. NoSQL encompasses structured, semi-structured, unstructured, and polymorphic data and is designed to iterate more quickly though data, as it is not built upon the concept of tables and does not use SQL to manipulate data. Instead, NoSQL databases are either document based, key-value pairs, graph databases, or wide-column stories. These simpler designs means more scalability and ease when using larger sets of frequently evolving, disparate points of data. An example of such a data-set would be anything related to the ever shifting realm of economics. 

So when should you use SQL, and when should you use NoSQL? SQL is the best fit for a complex, query intensive environment, as the queries in NoSQL are not as powerful as SQL query language. An unstructured, simpler database would be better if you need to store large amounts of unstructured data, when using cloud computing and storage, when a hybrid data environment makes more sense, and when you need to develop at a more rapid pace. When performance, availability, and scalability matter, it's best to work with NoSQL.


REFERENCES

https://www.couchbase.com/resources/why-nosql

https://www.ibm.com/cloud/learn/nosql-databases

https://www.thegeekstuff.com/2014/01/sql-vs-nosql-db/
Give Privilege to Your Loved Ones Via Arlo Account Setup
Published: 2019-11-18 06:54:00

Arlo is the topmost security camera to secure the suspected area in a smart manner. Also, this security system provides you tremendous security features. So you can get access to your Arlo account from anywhere. With this, you can give the privilege to your loved ones via the Arlo account setup. If you want to know what steps you need to perform for the Arlo account setup. Then you can take aid from the support executives of this security camera. And they are certified via Netgear. Also, they have got certification from the Netgear because of their relevant services. They help to the Arlo users to use the Arlo camera without getting any technical issue.     

Steps to add the friend to the Arlo account:

●	Sign in the Arlo account.
●	Tap or click on the settings options.
●	Then, inside the account settings, you need to tap on the friend’s options.
●	Also, click on the Add and enter the first name, email address, and last name of the person that you need to add as friends.
●	Tap or hit on the camera that you need the friend to be enabled to get access. 
●	Hit or tap the administrative rights which you need to assign to your friend. 
●	At last, you need to hit on the send invite option.  

If, you also want to get more information about the Arlo security camera setup. Then you can take complete information from the experts. They will let you know about the setup steps. So stay with the assistance team.
lambda-wasmtime - Running WebAssembly on AWS Lambda
Tags: aws, lambda, webassembly, runtime
Published: 2019-11-18 05:55:16

With [`lambda-wasmtime`](https://github.com/chiefbiiko/lambda-wasmtime) we have a [`wasmtime`](https://wasmtime.dev/)-powered custom AWS Lambda runtime for running WebAssembly, including futuristic stuff like [WASI (WebAssembly System Interface)](https://wasi.dev/) and [WAIT (WebAssembly Interface Types)](https://github.com/WebAssembly/interface-types/blob/master/proposals/interface-types/Explainer.md).

To run in the AWS Lambda execution environment we need to build a WebAssembly module that exports a function capable of accepting and returning `JSON` strings. The remainder of this post demonstrates just that.

## Building a WebAssembly Lambda

**Make** sure to have [`cargo-wasi`](https://github.com/bytecodealliance/cargo-wasi) installed: `cargo install cargo-wasi`

**Setup** a new project: `cargo new <project_name> --lib`

**Craft** `Cargo.toml`:

+ specify the crate type as `cdylib` to make this a `C`-ish shared library

+ include a recent `wasm-bindgen` (tested with `0.2.54`)

``` toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.54"
```

**Define** a handler in `src/lib.rs` and `#[wasm_bindgen]` it:

``` rust
use wasm_bindgen::prelude::wasm_bindgen;

#[wasm_bindgen]
pub fn handler(event: &str, context: &str) -> String {
    // lambda-wasmtime passes the event and context as JSON
    // context looks like: { function_arn, deadline_ms, request_id, trace_id }
    event.to_string()
}
```

Note that you can name your handler whatever you want. The `lambda-wasmtime` runtime determines the actual handler name from the environment variable `_HANDLER` which is user-defined in AWS Lambda.

**Build** the `.wasm` binary: `cargo wasi build --release`

> For now, when using wasm-bindgen `--release` mode is required to build binaries with interface types ~strings

**Zipup** a lambda bundle: `zip -j <project>/lambda.zip <project>/target/wasm32-wasi/release/<project_name>.wasm`

**Deploy** the lambda bundle on AWS with the `lambda-wasmtime` runtime layer - get its latest release from [here](https://github.com/chiefbiiko/lambda-wasmtime/releases/latest)

If your handler performs non-trivial computations you probably need to provision the lambda with extra memory. Also note that currently all of this is in MVP state and experimental.
The fastest way to create web components with react
Tags: react, nautil
Published: 2019-11-18 05:29:20

---
title: The fastest way to create web components with react
published: true
description: The article gives a way to create web component with react quickly. It introduces the nautil-cli tool to step up a nautil project quickly and build a web component with react source code conveniently.
tags: react, nautil
---

Web Components is a web standard which can be run in different browsers directly. However, it is not easy to create a web component by using native javascript. Although we have polymer, we would like to build web components with react much more.  React is so awesome that we use it anywhere now, even in embedded devices. After read the react official blog, I found it not easy to create a web component with react. So I want to provide a way to help developers to build more conveniently.

[Nautil](https://github.com/tangshuang/nautil) is a js framework written by me, it is built on react, so is completely compatible with react components. We will use [nautil-cli](https://github.com/tangshuang/nautil-cli) which is the CLI tool of nautil to create a react web component. 

Now, let's do it!

## Generate

It is very easy to generate an empty project, by using:

```
mkdir nautil-app && cd nautil-app
npx nautil-cli init
```

After a while, the project files are generated by nautil-cli. The directory structure is easy to understand.

![Nautil project files](https://thepracticaldev.s3.amazonaws.com/i/r5p3ucaemmffb2q6lwah.png)

Because we are going to write a web component only, so let us delete the no use files and modify `package.json` to keep web component scripts only.

![](https://thepracticaldev.s3.amazonaws.com/i/2wb5ek168oq3joxrichs.png)

## Coding

All are ready! Now let's coding.

Open the `src/app/app.jsx` and copy your original react component's code here. Because nautil is compatible with react, so you do not need to worry.

Open the `src/web-component/index.js` to change the name of your web component. And change the invoking in `index.html`.

## Preview

To preview the effect, run the following CLI command:

```
npm run dev:webc
```

And open your browser to view.

## Build

To bundle, run:

```
npm run build:webc
```

And your will get the bundle files in `dist/web-component` directory.

## End

This is how to create a web component with react by using Nautil-CLI tool. Isn't it easy?

Maybe you want to know why, or be interested in the implement of nautil. Then you can look into the source code on github with the preious given link. If you want to know more, join me on [github](https://github.com/tangshuang).
Xbox Scarlett Is Looking good! PS5 V Xbox Scarlett
Tags: xbox
Published: 2019-11-18 05:21:53

So Today we will be discussing the Xbox scarlett.

In recent news Xbox Scarlett Will be competing with The Play Station 5.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/puf45wwb7713uagru2b8.jpeg)
Image source: The Gamer From YouTube

The specs so far that we now

That it is
Using a custom-designed processor from AMD making use of Zen 2 and Navi architecture, Xbox Project Scarlett will be 4x more powerful than the Xbox One X. It'll be possible of running games at 120Hz frame rates, at potential 8K resolutions, while also showcasing fancy real-time ray-tracing tech. It's the works.

An SSD will come as standard, as with the PS5, which will give it the option of using its storage system as virtual RAM, as well as lifting load time performance by a factor of 40x. That'll let developers stream in far more detailed worlds around a player. In terms of 'standard' RAM, the console will pack in a meaty GDDR6.

Specs Source: TechRadar

And it's controller is well Pretty Amazing! In fact

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y3drjxgykrhbzxcm54og.jpeg)

Image source:Express.co.uk



It's price well 400-500 US Dollars.

And it can support your Xbox one controllers so you don't need to buy another controller for friends!

So far it's pretty great!

This is a console to look forward to!

Sincerely Ibrahim From TGD Dev™