teleren/devto huggingface dataset:
Learning NextJs - Day 3
Tags: react, nextjs
Published: 2019-06-20 23:56:28

---
title: Learning NextJs - Day 3
published: true
description: 
tags: react, nextjs
series: Learning NextJs
canonical_url: https://blog.eperedo.com/2019/06/20/learning-next-day-three/
---

Since Next can render your React component in the server all components have an special lifecycle event called **getInitialProps**.

This function accept asyncronous code so you can easily fetch data from a remote resource, like an http request.

Let's extend our Home page to fetch a list of users from the [jsonplaceholder](https://jsonplaceholder.typicode.com/users) API.

The component will receive a **users** prop with an array of objects, every object with the user information. You can use the map method to iterate over the users and display the name of each one.

```jsx
function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Home;
```

Now you need to pass the users prop and in this moment the **getInitialProps** enter to the stage.

```jsx
function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

async function getInitialProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  return { users };
}

Home.getInitialProps = getInitialProps;

export default Home;
```

You must return a javascript plain object and next will inject as props to the component. This method is only allowed to use in **pages** components, not a regular ones. If you try this it is going to throw an error.

```bash
ReferenceError: fetch is not defined
```

And this is because the **getInitialProps** is executed on the server, and node does not have a native **fetch** method like the browser have. One alternative is using a library like axios, supertest, superagent, etc. But in this case I am going to use [node-fetch](https://www.npmjs.com/package/node-fetch), because I do not want to change the above code.

```bash
npm install node-fetch
```

And now you need to add one line of code to the component importing node-fetch

```
import fetch from 'node-fetch';
```

And if you open your browser at http://localhost:3000 you will see a list of users loaded from an external API over http.
Add Ads in your App in a Snap!
Tags: flutter
Published: 2019-06-29 15:57:21

---
title: Add Ads in your App in a Snap!
published: true
tags: flutter
canonical_url: https://medium.com/@greg.perry/add-ads-in-your-app-in-a-snap-a980d2050ef9
---

[![](https://cdn-images-1.medium.com/max/974/1*vTqIo6fnRD_WKey9bqEp3w.png)](https://medium.com/@greg.perry/add-ads-in-your-app-in-a-snap-a980d2050ef9?source=rss-64fbd8c9e171------2)

The Dart Package, Ads. Revisited and Revised.

[Continue reading on Medium »](https://medium.com/@greg.perry/add-ads-in-your-app-in-a-snap-a980d2050ef9?source=rss-64fbd8c9e171------2)
Finding a Job
Tags: discuss, remote, whoishiring
Published: 2019-06-21 18:38:38

---
title: Finding a Job
published: true
description: starting a job search, would love to learn how others found their first dev job. 
tags: discuss, remote, whoishiring
---

I lucked into my first development job, I had just left my previous job in coffee without any specific goals in mind, reached out to some acquaintances for some mentoring and they eventually hired me to work in their startup. I didn’t start in development but I’ve slowly moved over. Circumstances are leading me to look for another job, but I’m not sure where to start. I’d consider this my first real software job hunt.

I’d love to read other people’s stories of how they got their first job in software! Maybe there will be some wisdom for people like me. 

Questions:
How did you find your first dev job? 
Was/Is it remote, on-site, something else? 
What was your experience/qualifications before you got the job? 
Did you actually meet all the listed requirements before you applied? 

Tell your story! I’d love to read it!
Migrating to Serum, an Elixir blog engine
Tags: elixir, serum, blogging
Published: 2019-06-21 18:24:08

---
title: Migrating to Serum, an Elixir blog engine
published: true
description: Serum, an Elixir-based blog engine
tags: elixir, serum, blogging
canonical_url: https://wevtimoteo.github.io/posts/2019-04-22-migrating-to-serum-blog-engine.html
---

Some years ago I've been involving myself into learning more about [Elixir](https://elixir-lang.org) programing language and I've decided to use more tools in the same ecosystem, starting by my own blog engine.

I've started this blog using [Jekyll](https://jekyllrb.com) which is built using my favorite programing language: [Ruby](https://www.ruby-lang.org).

Then I started exploring some Data Science content, which most of its tools are written using [Python](https://www.python.org) (a cool language but not included in my favorite list 😜), so I've found [Pelican](https://blog.getpelican.com)!

Pelican has nice documentation and a [a lot of themes](https://github.com/getpelican/pelican-themes), must-have features for developers such as code syntax highlighting and modular plugin system (with its own [plugins repo](https://github.com/getpelican/pelican-plugins)).

So backing to Elixir, I've found this [Awesome Elixir list](https://github.com/h4cc/awesome-elixir#static-page-generation), containing [Serum](https://dalgona.github.io/Serum). Checking other tools, I've decided to give it a try, you're reading a blog post written using it :)

## Can we compare each one?

All of them are categorized as a Static Site Generator. Jekyll and Pelican have a lot more features than Serum, no doubt about it.

I've picked Serum as my blog engine to follow its evolution and I plan to contribute to developing some [Plugins](https://dalgona.github.io/Serum/docs/plugin.html) for it.

If you want to take a look at some other engines, check this [Awesome Static Generators list](https://github.com/myles/awesome-static-generators#blogs).

Serum is well-documented and to start a new blog using it is simple:

```
$ mix archive.install hex serum_new
$ mix serum.new /path/to/project
$ cd /path/to/project
$ mix do deps.get, deps.compile
```

That is it! Check [Getting Started](https://dalgona.github.io/Serum/getting-started.html) in Serum docs for more details.

I plan to write some blog posts explaining how parsing templates differ in each language and provide some RSS feed URL for future posts :)
CSS-Only Multi-Color Backgrounds
Tags: css, ui, ux, design
Published: 2019-06-21 18:21:51

---
title: CSS-Only Multi-Color Backgrounds
published: true
description: 
tags: css, ui, ux, design
---

![](https://thepracticaldev.s3.amazonaws.com/i/ai2glijs8rlsowkmjusu.png)
The Metro design UI brought by Microsoft with Windows 8 may not have been largely received with a positive response (mostly because of the major UI overhaul from Windows 7), but it opened the doors to a new era of User Interface. Other than introducing a beautiful implementation of flat design, thin typography, and expansive images, it brought what I believe was lacking in the traditional Skeuomorph design: **colorfulness**.

iOS and Android then updated their design standards with iOS 7 and Material design respectively. Both iOS and Material designs also went for flat designs and thin typography: Helvetica Neue (later San Francisco) and Roboto respectively. And both, in their design overhauls, _introduced_ colors and gradients like they were unheard of.

So now that we've established that vibrant colors play a major role in all modern designs today, let's check out a different implementation to the traditional use of CSS background gradients.

In this implementation, we rely on the color-stops parameter in the `linear-gradient()` (or `radial-gradient`) property. These stops decide where you want to start a particular color. The boilerplate for the property we'll be using is:
```
background: linear-gradient(<angle>, color1 color1-stop-at, color2 color2-start-at);
```

The simple logic here is that we stop the first color at an **_x%_** and start the second color at **_x%_** or **_<x%_**. This removes the "gradient" from the linear-gradient and defines a clear edge between both colors giving the background a **multi-colored-material** effect.

In Action:
```
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
```
gets us:
![](https://thepracticaldev.s3.amazonaws.com/i/j0s3otw4cxdlc5ghmxtr.png)

Looks beautiful, doesn't it? Add some text on it and it looks like a nice highlighted element. The above example has some extra CSS style thrown in (like `border-radius` and `box-shadow`).

Essentially, the background property can **_hold_** two contents one over the other: 2 gradients, 2 images or you can mix-and-match any of those.
To use more than 2 colors (because why not), put the powerful `rgba()` to use and use 2 gradient parameters.
Here's an example with the background property holding an image and masking some portion of the image with a gradient of orange and transparent.
####**Use a dominant color from the image or a completely contrast color for the rich look.**

Like this:
![](https://thepracticaldev.s3.amazonaws.com/i/mmvxkl3ef4ps9jqx8c2l.png)
Sample code for such a banner would be:
```
background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('planets.jpg');
```

Here's a codepen with some examples (including the use of radial-gradient).
{% codepen https://codepen.io/kedar/pen/MpXgoR %}
What less common VS Code extensions and settings do you use?
Tags: discuss, vscode
Published: 2019-06-21 18:09:42

I just started using VS Code again after being away for a bit with Spacemacs. I'm not sure if I'm going to stay put here, but I'm curious if there's something I'm missing that would make me love it more.

Also, I've thought about writing a "My editor journey" post, do people read those? Would people be interested in reading mine?
Easily Merge Multiple Java --classpath Arguments
Tags: java, bash, jshell, scripting
Published: 2019-06-21 18:08:21

I always confuse myself as to whether the correct flags for `java` and the `jshell` are `-cp` or `--classpath` or `--class-path` or something else, so instead of trying to _remember_ something like a normal human, I instead spent a few hours pulling this script together.

It automatically detects any variation of `cp`, `classpath`, and `class-path` flags in a series of command-line arguments, and concatenates all of the correct arguments to give you a nice, clean `classpath`. I hope it's useful!

{% gist https://gist.github.com/awwsmm/361bef23c6102acd1f9cc63b58468b60 %}
Global use for React components
Tags: react, javascript, beginners
Published: 2019-06-21 17:55:02


The goal for this project is to create a React setup where components which are used more than once are structured in the following way.

```javascript
// Components
import Layout from "./Layout";
import Card from "./Card";
import Text from "./Text";
import Button from "./Button";

const Structure = () => {
  return (
    <Layout __type="container">
      <Card __type="primary">
        <Text __type="h1" primary>
          Global use for React components
        </Text>
        <Button __type="default">Next →</Button>
      </Card>
    </Layout>
  );
};

export default Structure;
```

## How to structure your code this way?

In this example I created a component with the name `Card`. This component will receive a property with the name `__type`. This `__type` selects the right component in the `cards object` and returns the associated `Card` component for this type.

```javascript
// Cards
import DefaultCard from "./DefaultCard";
import SecondaryCard from "./SecondaryCard";
import UserCard from "./UserCard";

const cards = {
  default: DefaultCard,
  secondary: SecondaryCard,
  user: UserCard
};

const Card = ({ __type, ...props }) => {
  const Comp = cards[__type];
  if (typeof cards[__type] === "undefined") {
    return null;
  }
  return Comp && <Comp {...props} />;
};

export default Card;
```

## What did I accomplish by using this setup?

![](https://thepracticaldev.s3.amazonaws.com/i/udtu01efwj0fl51fbwek.jpg)

* Every project uses the same code structure. This way every developer in the team knows about what type of component you are talking about during a conversation. 
* New members of the team can easily understand the code structure of the project.
* Visually you will understand the code in a component faster because the logic for every group of components is nested one level deeper in your application (check the above image).
Why Are Some Problems More Satisfying to Solve Than Others?
Tags: discuss
Published: 2019-06-21 17:40:24

---
title: Why Are Some Problems More Satisfying to Solve Than Others?
published: true
tags: discuss
---

My manager and I were having a discussion about this yesterday and I wanted to bring it up to a larger sounding board to see what more developers have to say about it:

Do you find algorithms and puzzling problem solving in code to be far more interesting and satisfying to solve than strange and ambiguous issues with code that "should work" but doesn't? (Example: Project sends true response to SOAP message from local Development environment, but once you move it to the Test server it returns an ambiguous error message)


We ended up solving the issue with the SOAP request by the way - 8 hours in we realized we were missing the server's IP in our Salesforce network whitelist.
Androidの端末がサポートするOpenGL ESのバージョンの調べ方
Tags: android
Published: 2019-06-21 17:23:00

---
title: Androidの端末がサポートするOpenGL ESのバージョンの調べ方
published: true
tags: Android
date: 20190621T17:23Z
canonical_url: https://qiita.com/shiena/items/21166331cd805ac5d3b7
---
AndroidManifest.xmlの`android:glEsVersion`によると次にように定義されている。

> アプリに必要な OpenGL ES のバージョン。上位 16 ビットはメジャー番号、下位 16 ビットはマイナー番号を表します。 たとえば、OpenGL ES バージョン 2.0 を指定するには、値に "0x00020000" を設定します。また、OpenGL ES 3.2 を指定する場合は、値に "0x00030002" を設定します。

この値はbuild.propの`ro.opengles.version`で調べられる。

```
adb shell getprop ro.opengles.version
```

この値は10進数なので16進数に変換すると分かりやすい。

|OpenGL ESのバージョン|android:glEsVersion|ro.opengles.version|
|---|---|---|
| OpenGL ES 1.0 | 0x00010000 |  65536 |
| OpenGL ES 1.1 | 0x00010001 |  65537 |
| OpenGL ES 2.0 | 0x00020000 | 131072 |
| OpenGL ES 3.0 | 0x00030000 | 196608 |
| OpenGL ES 3.1 | 0x00030001 | 196609 |
| OpenGL ES 3.2 | 0x00030002 | 196610 |


## 参考

* [&lt;uses-feature&gt;  |  Android Developers](https://developer.android.com/guide/topics/manifest/uses-feature-element#glEsVersion)
* [Experiment OpenGL to OpenGL ES](https://www.facebook.com/notes/remix-os-fans-indonesia/experiment-opengl-to-opengl-es/318468448503127)
A short-list with documentation generators in 2019
Tags: discuss, appseed
Published: 2019-06-21 17:21:58

---
title: A short-list with documentation generators in 2019
published: true
description: Compare the top documentation tools used in production 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eayyym4fjuft16ssyc1x.jpg
tags: discuss, appseed
---
Hello Coders, 

At some point, in order to improve our skills, we read the documentation provided by the underline technology. In this article, I am trying to curate a list of the best tools used to generate docs, in 2019, starting with the ones used by me in various projects, in the last 3/4 years.

Because I'm not a documentation tools guru and the list will be a short one, feel free to add your preferred documentation tool and explain why you are choosing it over others. 

---

> Here is my list:

- 👉 [Docusaurus](https://docusaurus.io/) - live sample [here](https://docs.appseed.us/) and [here](https://github.com/app-generator/docusaurus-soft-design) 
- 👉 [MkDocs](https://www.mkdocs.org/) - a really nice tool
- 👉 [Sphinx](http://www.sphinx-doc.org/en/master/index.html) - written in Python, with native search (no Algolia dependency)  
- 👉 [Antd Docs](https://www.gatsbyjs.org/starters/jannikbuschke/gatsby-antd-docs/) - powered by `GatsbyJS`
- 👉 [Vuepress](https://vuepress.vuejs.org/) - Vue.js based tool. 
- 👉 [KB4IT](https://github.com/t00m/KB4IT) - KB4IT is a static website generator based on `AsciiDoctor`


**The list will be updated with the tools mentioned in the comments**

---

## [Docusaurus Soft Design](https://github.com/app-generator/docusaurus-soft-design) `Template`

Open-Source Docusaurus Starter styled with [Soft UI Design](https://bit.ly/soft-design-system), an open-source design from `Creative-Tim` - Actively supported by [AppSeed](https://appseed.us/).

> Features

- 🚀 `Blazing Fast` - [SEE Demo](https://docusaurus-soft-design.onrender.com/)
- ✅ `Up-to-date dependencies` 
- ✅ **Docusaurus v2**
- ✅ Modern UI: **[Soft UI Design](https://bit.ly/soft-design-system)**, `Dark-Mode`
- ✅ `Versioned Content`
- ✅ `MIT License`, Free **Support**  
- ℹ️ `SSR` (coming soon)
- ℹ️ `404 Events Reporting` EmailJS (coming soon)

![Docusaurus Soft UI Design - Open-source DOCS Starter.](https://user-images.githubusercontent.com/51070104/221350480-512c0088-84dd-49ac-a277-c09d0449054a.jpg)

---

> **Thanks for reading!** For more resources, feel free to access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products
Cómo Registrarse en el Muñón
Tags: buidlhonduras, muñon, tutorial
Published: 2019-06-21 17:12:45

---
title: Cómo Registrarse en el Muñón
published: true
description: Tutorial que explica como registrarse al Hackathon Muñón que se llevará a cabo en Honduras
tags: buidlhonduras, muñon, tutorial
cover_image: https://cdn-images-1.medium.com/max/1200/1*YL_uM8hNQEXv5SQPO4ZfOA.jpeg
---

El hackathon Muñón es un evento descentralizado donde los participantes pueden programar en el proyecto en cualquier tecnología que más les interese, ya sea un proyecto nuevo o no. Puedes ver el siguiente video de como registrarse al hackathon.

{% youtube 1Y7mw0bxTTk %}


## Registro 

### Pasos

#### 1. Instala Metamask
Puedes descargar metamask en [metamask.io](metamask.io), lee el tutorial de metamask acá: [tutorial de Metamask](https://medium.com/affogato-network/tutorial-de-metamask-a98d9aed7659)


#### 2. Consigue Ether: 
Puedes comprar usando tu tarjeta de credito en [Abra](https://www.abra.com/), [Uphold](https://uphold.com/) o [Binance](https://www.binance.com/en/creditcard). Si solo tienes efectivo, puedes mandar un correo a ceegarner@hotmail.com o ahmed.hn.43@gmail.com para ayudarte a cambiarlo.

#### 3. Entra al sitio de registro https://dapp.munonhack.com/
![](https://thepracticaldev.s3.amazonaws.com/i/1q27c3t5bz070lsf9dvd.png)

#### 4. Presiona el botón de menu y selecciona Join

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

#### 5. Selecciona la ciudad donde deseas participar
Ten en cuenta que solo hay cupo para 15 participantes en cada ciudad.

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

#### 6. Confirma la transacción en Metamask
El precio de inscripción es 0.03 ETH independientemente del precio del mercado así que te recomendamos inscribirte rápido. Todo el dinero de la inscripción va para el Pot del premio.

![](https://thepracticaldev.s3.amazonaws.com/i/nh1n5sk68t5hcz2ez6t9.PNG)

#### Felicidades! Oficialmente estas registrado en el Hackathon Muñón!
JavaScript and Scope V - let and const
Tags: javascript
Published: 2019-06-21 16:23:49

In [JavaScript and Scope IV - Blocks](https://blog.toddbiz.com/blog/2019-06-07-javascript-and-scope-iv/) we showed that blocks on their own do not create a new scope when using the `var` keyword. Wouldn't it be nice if there were a way to create the `toto` variable inside a block so that it would have its own scope, unlike below?

```js
var toto = 'wants';

{
  var toto = 'a puppy';
}

console.log(toto); // logs 'a puppy'
```

ES6 allows block level scope with the `let` keyword when declaring variables.

```js
var toto = 'wants';

{
  let toto = 'a puppy';
}

console.log(toto); // logs 'wants'
```
<div class="jsfiddle-link">
  <a href="https://jsfiddle.net/tchaffee/db423zut/" target="_blank">Edit in JSFiddle</a>
</div>

In the code above, the `toto` variable inside the block no longer pollutes the value of the global variable because they are now two different variables even if they have the same name.

We can also fix the `for` loop example from the previous article.

```
var buzz = 3;

for (let buzz = 1; buzz < 10; buzz++) {
  if (buzz === 9) { 
    console.log('for loop buzz:', buzz); // logs 9
  }
}

console.log('global scope buzz:', buzz); // now logs 3
```
<div class="jsfiddle-link">
  <a href="https://jsfiddle.net/tchaffee/qr7x2fuk/" target="_blank">Edit in JSFiddle</a>
</div>

And we can also fix the `if` statement code. This time we use the `const` key word so the value cannot be changed.

```js
var cute = 'not';

if (true) {
  const cute = 'cat';
}

console.log(cute); // logs 'not'
```
<div class="jsfiddle-link">
  <a href="https://jsfiddle.net/tchaffee/yjwt75v4/" target="_blank">Edit in JSFiddle</a>
</div>

As you can see from the examples above, both `let` and `const` will give you block level scope when you need it. In fact, it's one of the reasons to prefer using `let` and `const` instead of `var`. Variables should have as limited scope as possible to avoid the types of unexpected side effects we saw in the previous article.