teleren/devto huggingface dataset:
Add Theme UI to your NextJS site
Tags: nextjs, themeui
Published: 2020-08-01 16:58:32

[Theme UI](https://theme-ui.com/) is a React styling library “based on constraint-based design principles”, where we can centralize our design tokens in a regular JavaScript _theme object_ . Although there’s no Theme UI plugin specifically for NextJS like [for Gatsby](https://theme-ui.com/getting-started/gatsby), we can add Theme UI to our NextJS web app/site in three straightforward steps.

**1. Install theme-ui**

```sh
npm i -D theme-ui
# or yarn add theme-ui
```

**2. Create and export the theme object**

```js
// src/utils/theme.js
export default {
  colors: {
    text: "#111",
    background: "#fff",
    primary: "tomato",
    secondary: "#3f3f3f",
    muted: "#e0e0e0",
    highlight: "#9f9f9f",
    gray: "#6c6c6c",
    accent: "#3f3f3f",
  },
  fonts: {
    body: "Comic Sans MS",
  },
};
```

You can use any filename and directory, just make sure you import it correctly in the next step. See more [theming references](https://theme-ui.com/theming) and [demo](https://theme-ui.com/demo) in the Theme UI docs.

**3. Wrap our NextJS app with Theme UI’s ThemeProvider**

We achieve this by making use of NextJS’s custom `App`.

```js
// src/pages/_app.js
import * as React from "react";
import NextApp from "next/app";
import { ThemeProvider } from "theme-ui";
import theme from "../utils/theme"; // theme object from step 2

export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    );
  }
}
```

We also add Theme UI’s `InitializeColorMode` to NextJS’s custom `Document` to prevent flash of colour.

```js
// src/pages/_document.js
import Document, { Main, NextScript } from "next/document";
import { InitializeColorMode } from "theme-ui";

export default class extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    // Replace html lang attribute value with your language.
    return (
      <html lang="en">
        <body>
          <InitializeColorMode />
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}
```

Learn more:
- https://theme-ui.com/api/#initializecolormode
- https://nextjs.org/docs/advanced-features/custom-app
- https://nextjs.org/docs/advanced-features/custom-document

**Does it work?**

We should be able to use the `sx`  property in our components. Remember to use the `@jsx` pragma and import `jsx` in order to use it.

```js
// src/any-component.js
/** @jsx jsx */
import { jsx } from "theme-ui";

export default function SomeComponent() {
  return (
    <>
      <div sx={{ backgroundColor: "primary", color: "#fff", p: 4 }}>
        tomato
      </div>
    </>
  );
}
```

Run `npm run dev` (or `yarn dev`) to check if the theme styles have been applied.

That’s it, we have added Theme UI in our NextJS site!
Netgear EX6150 Setup: New WIFI EXTENDER MYWIFIEXT SETUP
Tags: newextendersetup, mywifiext, netgearextendersetup, mywifiextnet
Published: 2020-08-01 16:50:26

We all use the WIFI at our home these days but can find the signals in cranny areas 
Getting the internet at your home is very easy these days You just need to install the WIFI router. But getting the signals in every area of your home that is something which is not possible Even if you don't own a big house but still the constructed materials can block the signals. That's why we have the WIFI extender these days which will help in Extending your router signals. 
 
Now it will give you more speed and give you good recpetion in your entire house. 
And now, If you also want to boost your wifi range. The best one available in the market is Netgear EX6150. 
 
<strong>Netgear EX6150 NEW EXTENDER SETUP</strong>
 
<a href="https://mywifiexthelp.net/netgear-ex6150-setup/"><strong>Netgear Ex6150 Setup</strong></a> is important to take benefits of the extender and EX 6150 is something which will give you more speed and more Wifi range in every corner of your home. It will creat a super-strong-network which will give you dualbandwidth range and cover upto 2600 Sq feets. EX6150 comes with MU-MIMO technology for the smooth and  flawless stream to multiple connected devices. 
 
<strong>Netgear EX6150 Setup Methods</strong>
 
As you already know about the Netgear Ex6150. There are two different ways to connect your New Extender. 
 
WPS (Wireless Protected Setup); 
 
Manual method. 
 
WPS Method – The Easiest Method for the <a href="https://mywifiexthelp.net/netgear-extender-setup/"><strong>Netgear Extender Setup</strong></a>
- First of all connect your Extender to the power near to your router in the same room. 
- Now wait for solid green light on your extender. 
-  Push the Wps button on your Extender. It will start blinking. 
- Wait for 1 - 2 min and it will turn into solid green or white. 
- Now unplug it from the power and move your extender at 20-25 feets away. 
- You can also visit our websites or type the Ip Address. 
 
Manual Method- A succcesful method to connect Extender. 
- First of all plugin your Extender to the router with the help of ethernet cable. 
- Wait for the power green light on it. 
- Now grab any laptop any ipad. 
 - Look onto the Wifi list on your device where you will see <a href="http://www.netgear.live/netgear-extender-setup/"><strong>New Netgear ext setup</strong></a>.
- Open any browse on it like google chromre, Safri etc and type there the website else type the ip address which is 192.168.1.250 
- You can login to your Netgear account.   
-Your Extender is properly installed now. Now you can move your Extender 
 
Visit <a href="https://mywifiexthelp.net/">mywifiext.net</a> to see the internet connection is working or not 
 
We hope this article will be helpful. If you need any help for the setup you can directly call us and our technician will be happy to help you. You can comment on. Else you can directly call us on 1-866-988-8965.
💲 How much is a website ??
Tags: help, react, webdev
Published: 2020-08-01 16:33:07

> TL;DR I Want to know how to estimate a price for my websites from simple HTML sites to Complex sites (blog, e-commerce, etc...)

[This](https://hossamrabei.netlify.app/) is my first paid website.
It's still finishing it (so be gentle).

---

## What I used to build it
 - For the Front-End I used [React](https://reactjs.org/)
 - For the CMS I used [Contentful](https://www.contentful.com/)
 - For the Hosting I used [Netlify](https://netlify.com/)
 - For the Analytics I used [Google Analytics](https://analytics.google.com/analytics/web/)

# What are the Pages/Features (It's a simple website)
 - The Main Home page (dah)
 - A Gallary with up to 25,000 images (Updateable using Contentful)
 - A 3D CV page with up to 25,000 (minus the above images) (Updateable using Contentful)
 - A Static About page
 - And it's responsive (Like if there is a 2020 web isn't)
 - 404 Page (Work in progress) 

### I will add in the future
 - A detailed page for every image in the gallery (and probably I will host the images separately with [Cloudinary](https://cloudinary.com/))
 - simple profile so users can comment on the images and rate it and like it etc...
 - Blog using [Contentful](https://www.contentful.com/)

---
So how much should this website now and after the new features cost 

And how to estimate my future website or my old personal websites
---
I searched online and found a couple of blog posts **BUT** I think it was super expensive
And I found these websites that ask some questions like how many pages does it have cms or a blog and how is the design, etc... and then give you a price and I liked it but I didn't believe it that I can make websites that value these numbers 
I will be so happy if these numbers were true because I'm 16 and I can have these numbers
I always loved programming not because of the money I can make I didn't even know how much until now I loved it because the creativity and the problem solving and all this fun stuff not money so that is why I'm a little surprised 

---
### Cover credit: Photo by [neonbrand](https://unsplash.com/@neonbrand) on [Unsplash](https://unsplash.com/)

---
### <center> Thanks for reading </center>
10001st prime - Project Euler Soution
Tags: challenge, python, computerscience, algorithms
Published: 2020-08-01 16:11:14

![10001st prime - Project Euler Soution](https://dev-to-uploads.s3.amazonaws.com/i/rvt5qjsns4dokthqhod1.jpg)

### Topic: [10001st prime](https://projecteuler.net/problem=7)

### Problem Statement:

> By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13.

> What is the 10 001st prime number?

You can find the original question here -> [Project Euler](https://projecteuler.net/problem=7)

{% post codeperfectplus/check-for-armstrong-number-1dko %} 

### 10001st prime - Project Euler Solution in Python

```python
import itertools

def is_prime(n):
    for i in range(2, n//2 + 1):
        if n % i == 0:
            return False
        else:
            continue
    return True

p = 0
for x in itertools.count(1):
    if is_prime(x):
        if p == 10001:
            print(x)
            break
        p += 1        
```
Share Your Solutions for [10001st prime](https://projecteuler.net/problem=7)

Checkout the optimized solution in the comment section.
Git Geek - Dashboard  Visualise your stats!
Tags: react, javascript, webdev, showdev
Published: 2020-08-01 16:10:37

```
NAMASTE !!
```
Coding in the times of Corona brought me to the special Readme repository that was introduced a while ago. Here one can easily write a cool bio, and see his/her stats. However, one thing missing there was a catchy visualisation of one's Github statistics.

Seeing the detailed information provided by GitHub API, I thought of playing around it and developing something along the lines of  Github Visual Dashboard.

Check it out: [Git Geek Dashboard](https://gitgeek.netlify.app/)

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

**GIT GEEK dashboard** provides various features with enhanced UI, using Highcharts library. 
1. Your global stats ( Repos, Followers, Following, Gists)
2. Your Profile 
3. Followers' Card
3. Distribution of languages used in your Repos
4. Stars per language stats
5. Popular Repositories - forks status
6. Popular Forks - MOst forked repos stats

To get started, fill in your `username` or any `Github username`. 

You then have access to profiles and stats of any github user, where you learn from the vast pool of contributors' work ( and a comparision once in a while for motivation or self-validation never harms ;-) ). 

Needless to say, if you like the work, be generous enough to give a star and fork to contribute further.

Here's a link for a live demo [Git Geek](https://gitgeek.netlify.app/)

Hope you had a fun time exploring this!
Stay home, stay safe. 
```
Keep calm & keep coding! 
Bella ciao
```
5 most interesting facts about Python Programming
Tags: python, datascience, machinelearning, computerscience
Published: 2020-08-01 16:07:25

Interesting facts about Python Programming
Below are the 5 most interesting facts about Python Programming that you should know –

Python was a hobby project
In December 1989, Python’s creator Guido Van Rossum was looking for a hobby project to keep him occupied in the week around Christmas. He had been thinking of writing a new scripting language that’d be a descendant of ABC and also appeal to Unix/C hackers. He chose to call it Python.

Why it was called Python
The language’s name isn’t about snakes, but about the popular British comedy troupe Monty Python (from the 1970s). Guido himself is a big fan of Monty Python’s Flying Circus. Being in a rather irreverent mood, he named the project ‘Python’. Isn’t it an interesting Python fact?

Big Companies Using Python
Many big names use (or have used) Python for their products/services. Some of these are:
Quora
MIT
Disqus
Hike
Spotify
Udemy
Shutterstock
NASA
Google
Nokia
IBM
Yahoo! Maps
Walt Disney Feature Animation
Facebook
Netflix
Expedia
Reddit

No braces use
Unlike Java and C++, Python does not use braces to delimit code. Indentation is mandatory with Python. If you choose to import it from the future package, it gives you a witty error/<a href=" https://www.pythonslearning.com/2020/08/how-to-use-counter-in-python-3-how-to.html
">counter</a>.

Interesting facts about Python language

how to Functions can return multiple values
In Python, a function can return more than one value as a tuple. Take a look at the following code:
facts about python language

This isn’t possible in a language like Java. There, you can return an array of values instead.
References: https://www.pythonslearning.com/2020/07/17-interesting-facts-about-python.html
2 Stunning Types of Mentoring Relationship You Can Have
Tags: career, codenewbie, javascript, beginners
Published: 2020-08-01 16:01:22

In my post on <strong><a href="https://dev.to/kodegenius/5-surprisingly-effective-ways-to-find-the-right-mentor-5d">5 Surprisingly Effective Ways to Find the Right Mentor</a></strong>... I discussed what you need to do to find the mentor that’s right for you. In this post, I will differentiate between the two types of mentoring relationships you can have.

Digging a little deeper into what it means to be a mentor... let's differentiate between a formal mentor and an informal mentor. 

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

The formal mentor knows about the relationship. This is someone that you've approached and in one way or another have invited them to be your formal mentor. They've agreed to this relationship, and they know what their role is in the relationship. You've also had a conversation about the expectations of the relationship. They know what the expectations are and they agree with those expectations. 

In a formal mentoring program, you'll typically have regularly-scheduled sessions with the mentor. Whether that's every week, every other week or once a month, these are scheduled out for quite a while. Typically, a formal mentoring relationship is a long-term relationship. Let's contrast these with an informal mentor. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0uu9d0gke4yhpagg0os1.jpg)

An informal mentor might not even know that you consider them your mentor. Over the years I've heard someone talk about people who they consider a mentor. They never had a formal mentoring relationship, but they learned things as if that person were mentoring them. In an informal relationship like this, there aren't necessarily regular meetings. 

You can have meetings, you can go to lunch, you can have phone calls, whatever type of meeting you want to have, but they're not scheduled out over the next year. You might not ever talk with or meet your informal mentor. 

You might just read a column they write or listen to them on the radio. Because you don't have a formal relationship set up with them if you have the opportunity to talk with an informal mentor... and ask them for feedback on a certain situation, they don't have any obligation to give you honest feedback. 

There isn't necessarily a relationship of trust built... and they might not have enough information to really give you honest feedback. If you do have a meeting with an informal mentor, there is no obligation on their part to prepare... or even think about the meeting before you sit down with them. 

Finally, you don't need to have a relationship with someone in order for them to be an informal mentor. 

If you have further questions, please drop a message below or DM me on twitter @saheed_olad. I will respond as soon as possible.
Bitbucket Pipeline: Heroku
Published: 2020-08-01 15:50:42

In my little cozy world, for many times just because it's working I keep doing it the lazy way.

When I knew about Heroku and how to deploy a app, I thought that nothing could get better and for a long time I was deploying from my terminal.

Today I tried deploy through Bitbucket Pipelines and as dumb as it seems it took me a while to figure it out how to setup the bitbucket-pipelines.yml file.

```
// get the `HEROKU_API_KEY`
$ heroku auth:token
```

```yml
# https://bitbucket-pipelines.prod.public.atl-paas.net/validator

clone:
 depth: full

pipelines:
 branches:
   master:
     - step:
         name: Deploy
         caches:
           - node
         script:
           - git push -f https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master --no-verify
```

With this, you'll get to `Build succeeded!` in a way that your mom would be very proud (because she doesn't understand a thing but she thinks that only you could have done it).
How Community Builders Can Bring Existing Offline Communities Online
Tags: community, communitymanagement, devrel
Published: 2020-08-01 15:50:25

Venues are closed but minds are wide open 💡

I am Yashraj, I have been building and growing developer communities and programs for over four years now. 

Recently, I was invited to speak at [CMX Connect Mumbai Chapter](https://events.cmxhub.com/events/details/cmx-mumbai-presents-how-to-engage-communities-during-changing-times/#/). Looking at the current scenario, the first topic we discussed was how community builders can bring their existing offline communities online.

Few days before this talk, someone had asked me **"In this increasingly virtual world, are local tech communities still relevant?"**

I think here we have two options:

A. Wait for things to get back to normal.
B. Take this as a challenge and try to reach as near as possible to the offline experience, in an online environment.

In my opinion, option B is worth a try. It is important to realize that our community already existed before COVID-19 happened. People with shared mindset and shared struggles were already connected and this is what built that community. They can still be brought together online as they won't change their preferences over night.

More than the location, there must be reasons why they were part of your local community and absence of offline meetups shouldn't stop them from coming together online.

In this 6-minutes video, I have shared some actionable insights on how offline communities can be brought online:

{% youtube 8g3JA8JrBx0 %}

This is a part of full session I hosted on ["How to Engage Communities During Changing Times"](https://www.youtube.com/watch?v=XEzEn8ifgWY)

If you're a community builder and found this talk helpful, please let me know your views in the comments and if possible, please share with other community professionals in your network :)

https://www.linkedin.com/in/yashrajnayak
🔄 How to get autoreload for webpack config changes too.
Tags: webpack, nodemon, productivity, configuration
Published: 2020-08-01 15:50:24

The webpack-dev-server package provides hot-reload for anything it bundles. But it does not consider the configuration file (usually webpack.config.js).
In this post I am going to show you how to autoreload depending on webpack config file changes by using Nodemon.



## 🤔 Problematic
Every change in webpack configuration requires a manual reboot of the webpack-dev-server (WDS).

---

### 📜 Example code
> [wds-auto-reload](https://github.com/didof/wds-auto-reload)

### 📦 Packages
* [webpack](https://webpack.js.org/)
* [nodemon](https://github.com/remy/nodemon)

## 💡 Solution
The activation of the webpack-dev-server is performed by nodemon. It is instructed to restart the process every time the webpack configuration file changes.

## 🤓 Implementing the Solution

Premise: `webpack.config.js` is located in the root

Create a `nodemon.json` file in the root. Two instructions are sufficient:
1. watch for changes in the `webpack.config.js`.
2. execute the activation of the webpack-dev-server (in development mode).

```json
{
   "watch": ["webpack.config.js"],
   "exec": "webpack-dev-server --mode development"
}
```

Lastly tweak the start script in the `package.json`:

```json
"scripts": {
    "start": "nodemon",
  },
```

## 😎 Checking the Outcome
Try the run `npm start` and keep open the console. Just alter something in `webpack.config.js` - it will reboot by itself.

---

## ❣ More Details [surviveJS](https://survivejs.com/webpack/developing/webpack-dev-server/#making-it-faster-to-develop-configuration)
GLab: A Gitlab CLI tool
Tags: git, showdev, contributorswanted, githunt
Published: 2020-08-01 15:49:58

I wrote Glab, a simple and elegant GitLab CLI tool written in Go (golang) for creating and managing issues, merge requests, and a lot more... Do give it a try. Your feedback is much appreciated.

https://github.com/profclems/glab

https://gitlab.com/profclems/glab

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/opzg82163rplv9uhvu07.png)
Javascript Arrow Function
Tags: javascript
Published: 2020-08-01 15:46:15

The Arrow Function Syntax
From an unnamed function it is a small change to move to an arrow function. All we need to do is go from this format:

```
function ( ...args... ) { ...body... }
```
to this one:
```
( ...args... ) => { ...body... }
```
The example add() function from the previous section can be written as an arrow function as follows:
```
const add = (a, b) => {
    return a + b;
}

console.log('1 + 2 is ' + add(1, 2));
```
If the function body is a single return statement, then the syntax can be further simplified by removing the curly braces and the return keyword:
```
const add = (a, b) => a + b;
```
```
console.log('1 + 2 is ' + add(1, 2));
```
If the function takes no arguments, then you must use an empty argument list, just like you would on a function defined in the old style. Below I have added a second function called func that takes no arguments and returns the string 'foo':

```
const add = (a, b) => a + b;
const func = () => 'foo';
```
```
console.log('1 + 2 is ' + add(1, 2));
console.log(func());
```
Let's run this new version of func.js to confirm the new function works as expected:
```
$ node func.js
1 + 2 is 3
foo
```
Arrow Function Support
Arrow functions have very good support, which includes Node.js and all major web browsers with the only exception of Internet Explorer. See the compatibility matrix for specific details about browser versions.

This means that in most cases you should be able to include arrow functions in your JavaScript code without worries.

Transpiling Fancy JavaScript to Basic JavaScript
If your application needs to work on Internet Explorer or any other non-mainstream legacy browser, you can use arrow functions in your codebase and then transpile the code to the older style using babel.

To see how this would work, you can create a JavaScript package in the directory where you have the func.js file with this command:
```
$ npm init
```
You will have to answer a few questions regarding the package, but for this test it is sufficient to press Enter on all of them to accept the defaults. Then install the three packages needed for babel:
```
$ npm install --save-dev @babel/cli @babel/core @babel/preset-env
```
These three packages respectively implement the CLI, the core compiler/transpiler, and a convenient configuration preset that converts all the new JS constructs back into a safe version of JavaScript that works everywhere.

To convert the func.js file and output the result to the terminal, execute the following command:
```
$ ./node_modules/.bin/babel --presets @babel/preset-env func.js
"use strict";

var add = function add(a, b) {
  return a + b;
};

var func = function func() {
  return "foo";
};

console.log('1 + 2 is ' + add(1, 2));
console.log(func());
```
If you need to support legacy JavaScript platforms, then incorporating babel into your project build should allow you to use not only arrow functions but also many other language features.