teleren/devto huggingface dataset:
The interview of fifa game development
Published: 2019-11-06 08:31:54

The world's attention is focused on whether the next step of AI can push the fifa series to the leading trend of sport game again. Two of the fifa developers are entrusted with the task of reshaping the vitality of the FIFA 20: Tian hatatau and Yoshida. Tian hatatao is making fifa mobile, and Yoshida Zhishu continues to take the lead in making fifa 20 after successfully remaking fifa 18. Since he took over the project from Nomura zheyo a few years ago, he has tried his best to inform fans of the latest progress of the project. These means include: active time reports, chapter demo, and even making follow-up patches based on player feedback. His project has a very long production cycle, which also caused many people's doubts. Although it's only three years since fifa soccer was renamed fifa mobile, players have been waiting for nearly 10 years, and even some fans have grown from children to adults. "We can't assume that everyone is looking forward to the fifa series," he said. "This is the status quo of the fifa. We should try our best to express the content of the [fifa mobile hack](https://fifamcheat.top/) and its excellent aspects." Not only that, Tian said, but they also need to work together to show "a new type of experience and a series of growth." Both players and producers have great expectations for this work, because this series has brought historical changes to the development of the game. As the Western game market has put more and more bets on RPGs such as wizard 3 and radiation 4, Tian hatata also knows that the task ahead is very difficult. He also tries to improve the way of thinking of employees to ensure that they are ready to meet the challenge.
#1: My Journey into Software Engineering
Published: 2019-11-06 07:47:06

---
title:#1: My Journey into Software Engineering
published: true
description: 
tags:
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hhqsba27pej4fs79lmip.jpg 
---

<em>I'm about to kickoff a series documenting my journey as I progress into the world of software engineering.</em>

<h2><b>How It All Starts</b></h2>

<p>As the breeze of creativity blows by, and the chants of the victorious beats deeply into my eardrum, I sat quietly under a fruitful mango tree with my headsets in full stereo thinking about what life has in store for me.</p>

<p>I was 16, clueless, broke, but at the same time, hungry for success. I didn’t know exactly what I was going to do with my life but one thing I knew for sure was that I could think out great ideas, which I so much believe- I still do- was worth billions of dollars.</p> 

<p>I had just returned from a tech conference, and I was privileged to hear from a lot of experienced, distinguished speakers share their thoughts and ideas on the importance and value of technology, and how young folks like me can tap into this multi billion dollar industry. I was really fascinated by the things I saw and heard, but at the same time, I was a little bit ashamed of myself. I was in my second year in the university and to make matters worse, I was a computer science major. I was so ashamed of myself because I felt I was supposed to have a glimpse of some of the topics discussed by the speakers. I was particularly frustrated with myself when one of the speakers told us that college students in the US were already working for big firms while some of them were starting off million dollar tech companies.</p> 

<p>Prior to that event, I’d never heard or seen anything like software programming-I didn’t even know what it meant to program a computer. I thought computers were all about the hardware,and the Microsoft Office packages, maybe because I was made to believe so while I was undergoing a 2 months computer training at an ICT training center during summer breaks. I was in Junior Secondary School at the time. It dawned on me that I could end up unemployed upon graduation just like every other graduate in Nigeria if I didn’t take deliberate actions about my condition as soon as I can. I made a firm decision right there that I will build my capabilities and grow my skills in order to be employable upon graduation. That event was a life changer for me- it kicked off my journey into software engineering.</p>

<center><span>&#8230;</span></center>

<p>This episode of my journey into software engineering will continue next week. Until then, go forth and be awesome!</p>
Nice imports with Next.js
Tags: webdev, javascript, nextjs
Published: 2019-11-06 08:40:50

---
title: Nice imports with Next.js
published: true
date: 2019-11-06 08:00:00 UTC
tags: webdev, javascript, nextjs
canonical_url: https://remysharp.com/2019/11/04/nice-imports-with-nextjs
---

During my React based development, I'll find myself importing a module `from '../../../components/Widget'` and that `../../../` is anyone's guess if it's right first time or not.

Except I discovered that Next.js (which is what I do most of my React dev with) ships with a trick up its sleeve.

## Alias

Next.js uses a preconfigured webpack under the hood that you don't need to mess with.

There's a helpful webpack plugin that let's you alias paths, so I could alias `~` to the root of my project, letting my imports look like this:

```
import Widget from '~/components/Widget'

```

Much cleaner. Knowing which plugin this is and how to configure it will be time and energy wasted. Which is why it was nice to find that Next.js silently shipped with it by default.

## In the wild

If you're familiar with Next.js already, you might have used the alias already without knowing.

```
import Head from `next/head`

```

The above code is actually using the alias feature. Under the hood Next is [aliasing a number](https://github.com/zeit/next.js/blob/f632567bcf6652333ab57e7c13adeabe15bf1074/packages/next/build/webpack-config.ts#L159) of their modules to the distribution builds:

```
alias: {
  // These aliases make sure the wrapper module is not included in the bundles
  // Which makes bundles slightly smaller, but also skips parsing a module that we know will result in this alias
  'next/head': 'next/dist/next-server/lib/head.js',
  'next/router': 'next/dist/client/router.js',
  'next/config': 'next/dist/next-server/lib/runtime-config.js',
  'next/dynamic': 'next/dist/next-server/lib/dynamic.js',

```

This means it's (relatively) straight forward to add our own custom alias path.

## Customising the alias

Add the `next.config.js` file to your project then it needs to add to the `webpack.config.resolve.alias` object:

```
const path = require('path');
const webpack = require('webpack');

module.exports = {
  webpack: config => {
    config.resolve.alias['~'] = path.resolve(__dirname);
    return config;
  }
};

```

That's it. Now I can import `from '~/components/Widget'` and all is well.

## Bonus: VS Code support

I'm a VS Code user (so if you're using another editor, please comment below to share how this is done). This means I can alt+click on imported packages and the source will be loaded.

VS Code needs to understand where how I've configured my alias. This is matter of adding a `jsconfig.json` file to my project's root:

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

```

Now everything works and I don't have to type so many period characters 🎉

_Originally published on [Remy Sharp's b:log](https://remysharp.com/2019/11/04/nice-imports-with-nextjs)_
Testing GraphQL Schema Without Data
Tags: beginners, graphql, todayilearned
Published: 2019-11-06 07:28:21

"Cannot" is not in my vocabulary. So when I couldn't get GraphQL to work the way the tutorial I was following promised it would, I got a little bit... obsessed.

So it's not much of a surprise that now, just a couple of months since the end of the bootcamp, I find myself in a hands-on two-day GraphQL workshop.

Apart from the expected, what I learned today was:
* that nobody else in the room had attempted using GraphQL with both Apollo and Prisma. (So maybe I should cut myself some slack there.)

* that you can and should put comments in your schema.graphql file. (Something for another post.) And finally,

* that there's a way (not mentioned in the [GraphQL spec](https://graphql.github.io/graphql-spec/draft/)*) to test the schema without creating a dedicated `.json` file or fetching actual data from anywhere else.

Here's how:

Set up your `index.js` to require `apollo-server` only**, and write your schema directly below. In the picture below, we were working on a simple schema for coffee orders at a cafe:
![Screenshot showing const { ApolloServer, gql } = require("apollo-server")](https://thepracticaldev.s3.amazonaws.com/i/zspew9oo2w0ww89tagk8.PNG "Require Apollo-Server Example")

Then, below your schema and resolvers, set up the server to use mock data for all your types:
![Screenshot showing const server = new ApolloServer({ typeDefs, resolvers, mocks: true });](https://thepracticaldev.s3.amazonaws.com/i/m6cp3l46h273x8zgo84w.PNG "New Apollo-Server Using Mocks Example")

If you run `npm start` now, you should be able to test your schema locally in the [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/), with dummy variables substituted for actual data.

In the below example, I ran the `allFoodItems` query asking for `name` (specified as the scalar type String in the schema) and `price` (scalar type Float), and got a valid response (textual data for `name` and a signed double-precision fractional value for `price`):
![Screenshot of the GraphQL Playground Query Response](https://thepracticaldev.s3.amazonaws.com/i/9c2wj2xpzx3msb8pfcgw.PNG)

And if you do have some of the data already available, you can avoid it being overwritten with mock values by adding `mockEntireSchema: false` to the `server`:
![Screenshot showing const server = new ApolloServer({ typeDefs, resolvers, mocks: true, mockEntireSchema: false });](https://thepracticaldev.s3.amazonaws.com/i/5d6ew3ce0vu4ah0wcymp.PNG)

-------------------------------------
*I'd know. I always read the docs.

**I'm assuming that you're familiar with Node.js and have installed the necessary packages (`apollo-server`, `graphql`, and `nodemon`) already.
Day 10 - Digging Deeper into CSS - Floats 
Tags: html, css, codenewbie
Published: 2019-11-06 03:09:14

Today is Floats and even though I know the basics, I wanted to understand it better.

I started digging into A List Apart [article](https://alistapart.com/article/css-floats-101/) and wanted to write down my understanding of what I read. 

To understand Floats is to understand the normal flow of element and how the <code>float</code> property changes the behavior of that element.

For example we have block level elements such as <code>div</code> and <code>p</code>. They always take the full width of the page. Once you apply the <code>float</code> property, they start behaving like inline elements such as <code>a</code> and <code>img</code>. Quick reminder, inline elements only takes as much space as their content. 

**Quick Note About Floats**
Once you use the <code>float</code> property, it's almost like using the universal selector. This property will be applied to the rest of the elements. This means that other elements will be out of their normal flow as well whether you applied the <code>float</code> property to them.

The solution is to clear the float and you do so with the <code>clear</code> property. There are five available values: <code>left</code>, <code>right</code>, <code>both</code>, <code>inherit</code> and <code>none</code>.

See a good explanation and example [here](https://alistapart.com/article/css-floats-101/)

**Placement of your Floated Elements in HTML**

One of the new things I learned was how the placement of your floated element in HTML can contribute to the float not working property and setting it out of the container you put it.

If the floated elements is set before the non floated element, you run the risk of having the floated element get out of the container. 

This happens because of something called collapsing which essentially means that since the floated element is not in the normal, the parent element (the container) is behaving as if the element is not there.

One solution to this is to add an inline CSS in the HTML to clear the float. That adds extra markup in the page and that is not the ideal fix.

Another solution is to add an overflow to the parent element (the container) and set it to <code>overflow:hidden</code>. As this property was not meant for this purpose, there are risks such as scrollbars and hidden items. You can find more about it [here] (http://www.mezzoblue.com/archives/2005/03/03/clearance/) and [here](https://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)

Last solution is to use the pseudo selector <code>::after</code> with the parent container and adding the <code>clear</code> property there.

I starting to enjoy writing these, I learn so much better when I try to think of a way to explain what I just read or watched.

The streak continues...
Find my dev.io Heart (Challenge)
Tags: post, heart, crawl, scrape
Published: 2019-11-06 06:37:45

---
title: Find my dev.io Heart (Challenge)
published: true
description: 
tags: post, heart, crawl, scrape
---

I have been happily browsing around in dev.to hittin' the heart on posts I couldn't finish or found *really* cool, when truly I should've been using the reading list button instead!

Silly me. Now my half-read posts and personal favourites are gone forever.. right?

Here comes the challenge, how can I find/scrape a list of posts that I've hearted? (or even unicorn-ed), so I can finish reading them!

Thanks!

:-)
Building with Node.js; A First Take.
Tags: node, express, nodewithexpress
Published: 2019-11-06 06:05:39

---
title: Building with Node.js; A First Take.
published: true
description: As I begin to work into the full js-stack world I want to share my first experiences with a powerful JS backend framework.
tags: #node, #express, #nodeWithExpress
---

###Node

Well first and foremost I must preface this post with a disclaimer: I have a lot more to learn about Node.js and Express.js and just JS. 

####It's Just A Bunch of JS.
Anyway, as I've been working through some basics of setting up a server with Node I've come to realize that it is very much a child of its foreparent JavaScript. I have a lot to learn about JS let me tell you but at the outset I feel like I'm writing JavaScript...Oh wait... I am. So there's that. At the outset of this journey I'm finally realizing that is is just a huge library built on top of JavaScript and. 

####It Comes With Capacity
So-far everything I've needed has been available with [express.js](http://expressjs.com/). I imagine there are tons of other libraries/frameworks/packages that are all as if not more powerful that express.js. Gotta get crackin.

####Syncs Well With VS Code
Im using VS Code and I am always blown away with the amount of user generated linters and other fun and powerful packages have been built for Node.

####Express Is Stupid Simple In A Good Way
Accessing request parameters is as straightforward as it comes. Because the server stores data in JSON format there is no need to convert data after or before each request. This I hear also reduces processing time making for quicker web-apps. 

####Tried And True
Node.js use is growing and for a good reason. It's very powerful, built on a language most people are familiar with, and straightforward. 

Thanks for Reading, Till next time!
Something Juicier
Plus500 Review
Tags: plus500review, plus500
Published: 2019-11-06 05:57:53

<a href="https://www.fxaltas.com/plus500-review/">Plus500</a> is one of the secure and safe traders to trade different CFDs. Security and safety is the crucial aspect for trading purpose, and Plus500 aims to provide it. You can refer to Plus500 reviews to get the whole idea.
Prevent watermark tampering in Word Documents using C#
Tags: csharp, dotnet, webdev
Published: 2019-11-06 05:57:07

Watermarking is a famous way of adding labels to the documents that may indicate the state of the document such as draft, confidential, etc. It can be used to add a company’s logo behind the text of the document to avoid the ownership dispute. In some cases, people add watermarks to the documents to protect the content. But, are you sure that the content is protected and no one can remove those watermarks? There is no guarantee because various third-party tools are available that can wipe out the watermarks from the documents.

In such scenarios, you need some way to lock the watermarks to restrict the editing. In this article, I’ll show you how to **protect** your **Word** documents and prevent the editing of the watermarks programmatically in **C#** using **[GroupDocs.Watermark for .NET](https://products.groupdocs.com/watermark/net)** which is a document watermarking API.

### Locking Watermark in Word Document

The above-mentioned API provides [**5** variants](https://apireference.groupdocs.com/net/watermark/groupdocs.watermark.options.wordprocessing/wordprocessinglocktype) of locking Word document when adding watermark.

#### **Allowing Revisions Only**

In this case, the user will only be able to add revision marks to the Word document. The content of the document as well as the watermark will be read-only.

#### **Allowing Comments Only**

If this type of restriction is applied then the user will only be able to modify the comments in the document.

#### **Allowing Form Fields Only**

With this option, the document is split into one-page sections and a locked section with the watermark is added between each two adjacent document sections.

#### **Read Only with Editable Content**

In this case, the document is marked as read-only but all the content except the watermark is marked as editable.

#### **Completely Read Only**

In this case, the entire document is marked as read-only and nothing can be edited.

### Source Code

The following code sample shows how to impose the above-mentioned restrictions on a Word document when adding the watermark.
```csharp
WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
using (Watermarker watermarker = new Watermarker("document.docx", loadOptions))
{
    TextWatermark watermark = new TextWatermark("Watermark text", new Font("Arial", 19));
    watermark.ForegroundColor = Color.Red;
 
    WordProcessingWatermarkPagesOptions options = new WordProcessingWatermarkPagesOptions();
    options.IsLocked = true;
    options.LockType = WordProcessingLockType.AllowOnlyComments;
    /* 
    options.LockType = WordProcessingLockType.AllowOnlyRevisions;
    options.LockType = WordProcessingLockType.AllowOnlyFormFields;
    options.LockType = WordProcessingLockType.ReadOnlyWithEditableContent;
    options.LockType = WordProcessingLockType.ReadOnly; 
    */
 
    // To protect with password
    //options.Password = "7654321";
 
    watermarker.Add(watermark, options);
    watermarker.Save("document_watermarked.docx");
}
```

Cheers!
Guess Game in Python
Published: 2019-11-06 05:51:58

Hey Guys, So are you ready for your first python project? Then let’s get on with it, I would recommend you to code along. This game will help you clear out your basics such as Input-Output, Random module, Loops, if… else.

First import random module.

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

Next we will use randint function from Random module for generating a random number between 1 to 100.

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

Now, Let’s take input from user. Input is in the form of string so we will convert it to int using int().

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1bsqog13p3tkh41n7774.PNG)

Let’s use while loop to compare the value of user and computer again and again until they are equal. Do not forget to add colon(:) at the end. You can also use for loop and give limited number of chances to User.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/23yp3uwcku7j8izesn7f.PNG)

Now, we will use if … elif programming constructs to match the numbers. We will use 4 statement to check the number is high, a little high, low or a little low. Take a difference of 10(i.e. if difference is greater then 10 then print go high or go low else print go little high or go little low ) to make game a little easy. Don’t forget to take input again if value doesn’t match.

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

Great work! You have created your first project.You can get the entire code here. You can even add more to it such as add a for loop instead of while loop for 10 inputs. Give a Scorecard at the end of game. If User Guesses the Number in first attempt then he gets 100 points, if in 3rd attempt he/she gets 70 points, if in 6th he/she gets 40 points and so on. . .


You can create the same project in different languages too. Do try it out if you are interested in other languages.

Note: Do not forget colon (:) after for, while or if else statement. Take care of indentation too.
Deploy a Censorship Resistant Website for FREE 🔓🌎
Tags: devops, tutorial, blockchain, beginners
Published: 2019-11-06 05:19:01

>Internet censorship is the control or suppression of what can be accessed, published, or viewed on the Internet.

I believe in a free and open internet and to help keep it that we're going to learn how to deploy a censorship resistant static website in just a few minutes with a few free tools.

To achieve censorship resistance we're going to use IPFS ([Interplanetary File System](https://docs.ipfs.io/introduction/overview/)) a distributed system for storing and accessing files, websites, and data.

You can run your own IPFS node to increase the strength of the network and store your own files but for this tutorial we're going to use a free service to manage our content and more importantly manage our pinned content. 

IPFS nodes treat the data they store like a cache, meaning that there is no guarantee that the data will continue to be stored. Pinning tells an IPFS server that the data is important and mustn’t be thrown away.

I'm a fan of using [https://pinata.cloud](https://pinata.cloud), once you've made an account, select upload and you'll be presented with something like below. 

![pinata.cloud upload interface](https://i.imgur.com/M8x1IfM.png)

Notice "Upload Directory" is selected and "Preserve directory name" is not checked. Select the directory of your site contents and upload them. Once uploaded, select "Pin Explorer" from the nav menu.

![pinata.cloud pins interface](https://thepracticaldev.s3.amazonaws.com/i/lo82jw65992sefz1hb59.png)

Using the hash provided by IPFS, we now have the address of our deployed directory. In the case of the screenshot above my content is stored at hash `QmdFWa8PEruGXistCu8MFRwb2bncH2xAYx34nYqEBaxaVk`. Using a public IPFS gateway we can see the content at the hash address. Here is a list of [public gateways](https://ipfs.github.io/public-gateway-checker/) and their status'.

https://ipfs.io/ipfs/QmdFWa8PEruGXistCu8MFRwb2bncH2xAYx34nYqEBaxaVk/

![Screenshot of website hosted on ipfs](https://i.imgur.com/ypB4R5Y.png)

It may take a few minutes for the data to propagate through the network but you now have a censorship resistant website! 

---
Enjoyed the post? Let me know! 💛🦄🔖