teleren/devto huggingface dataset:
4 Bot Programming Games for Sogetti CodeFest 2021
Tags: codefest2021, sogetti, intel, javascript
Published: 2021-07-29 11:21:29

If you know me, you know I love a Coding Competition. And if it's about video games 🎮, well you better believe I am here for it!! To make CodeFest accessible to everyone, I thought I would show you how to get you started with 4 games that I would pick to enter the competition, as well as share advise on how to tackle each of the coding puzzles.

In this video I show you how to start off a game of:

### Tron Battle in JavaScript
I chose this game as I was familiar with the concept. It is a puzzle game in which you 'steer' your laser light to try and trap the other player. To win this game it is suggested to use a flood-fill algorithm, a Voronoï-based method, a pathfinding algorithm or Minimax.

I, this short clip, I show you how to get the game started, and what to focus on in order to get coding.

### Connect Four in JavaScript
I chose Connect Four as a game to help you potentially win CodeFest2021 as I have actually built a game of Connect Four for my own channel in Javascript. Training the game's AI is a completely different challenge however. In this short video I show you how to get started in creating the game and explain that your first move is how to game essentially 'kicks off'

### Ultimate Tic-Tac-Toe in JavaScript
In this Bot Programming game you are asked to play a game of nine tic-tac-toe games, in order to try get three games in a row, to complete an outer game that is being played (very meta!). This bot programming game is great as it requires you to try use algorithms such as Minimax, Alpha-beta, Negamax and Monte Carlo Tree-Search.

### Coders Strike Back in JavaScript
The rules to this game are pretty simple - race against the opponent and win! I show you how to control the racers speed and trajectory to get you started.

Good Luck!!!!

{% youtube TgifbbD_xKg %}

more information here: https://www.codingame.com/hackathon/sogeti-codefest-2021
Introducing the new Object field 🚀
Tags: serverless, javascript, cms, aws
Published: 2021-07-29 11:20:41

⚡️Seamlessly create nested and repeatable data structures with the new Object field.

![Headless CMS - Object Field](https://www.webiny.com/static/673772f4832f06e7ba3fd770d3fde4e5/c1b63/modelObjectField.png)

With the latest [Webiny 5.11.0](https://www.webiny.com/docs/changelog/5.11.0/?utm_source=Webiny-blog&utm_medium=blog-post&utm_campaign=Regular-content&utm_content=introducing-new-object-field&utm_term=W00691) release, we are glad to introduce the new Object field in Headless CMS.  
The nested and repeatable data structures was one of the hot topic discussed in the Webiny community. With the new Object field now, you can create complex data structures with ease. Huge thanks to our community members for their suggestions and contributions.

Let's quickly dive into the highlighting capabilities of the Object field.

### Build nested data structures

The new Object field allows you to build nested data structures. You can create an object and add various existing fields (`ref`, `richText` field, etc.) to it. Along with this, you can also nest objects within other objects.

![Address Model](https://www.webiny.com/static/fa36d25b44d74d7f09f980246cc8234c/58213/addressModel.png) 

### Repeatable structure

The icing on the cake is, the data structure created with Object fields can be repeatable (like an array of nested objects).  
The `Use as a repeatable object` property allows creating the repeatable object. E.g. setting the 'Use as a repeatable object' property to true on the Equipment model will make it multi-valued.

![Repeatable Object](https://www.webiny.com/static/223aeb206c3e3fa75474ff925a75499a/c1b63/useAsRepeatableObject.png)

Below is the model view for the multi-valued Equipment field.

![Multi Value Model](https://www.webiny.com/static/717cb376429ef612a9fe750ec1e5a82a/1cfc2/multiValuedModel.png)

And the preview of the model will look like this:

![Multi Value Model Preview](https://www.webiny.com/static/bfbd1e4afdc9744cd44b93e1b1dbd3d8/e35ec/multiValuedModelPreview.png)

### GraphQL Schema auto-complete support

Object field respects all the rules and behaviors of all the other existing fields (`ref`, `richText` field, etc.). You also get a full GraphQL Schema auto-complete on your nested fields.

Alright, here is the [demo in action](https://www.webiny.com/6d76a5f7c93600ce9ec7043ee7016dca/objectFieldDemo.gif)!

Try the new [Headless CMS - Object field](https://www.webiny.com/serverless-cms?utm_source=Webiny-blog&utm_medium=blog-post&utm_campaign=Regular-content&utm_content=introducing-new-object-field&utm_term=W00693z) and please [let us know](https://www.webiny.com/slack/?utm_source=Webiny-blog&utm_medium=blog-post&utm_campaign=Regular-content&utm_content=introducing-new-object-field&utm_term=W00692) your valuable feedback!
Top 20 UI Resources for App/Web Developers
Tags: android, webdev, design
Published: 2021-07-29 11:20:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hipne6xkbot0ij98o3l.png)
Every time we try to build something cool but we get stuck with the designing part. Finding the colour shades, banners, vector image, illustrator etc are extremely confusing. To solve these issues I have come up with a list of websites where we can find the best designing ideas for your app.


1)  Invision App
        visit : https://www.invisionapp.com/

2)  Uplabs
        visit : https://www.uplabs.com/

3)  Undraw
        visit : https://undraw.co/

4)  Sketch App Sources
        visit : https://www.sketchappsources.com/

5)  Paaatterns
      visit : https://products.ls.graphics/paaatterns/

6)  Drawkit
      visit : https://www.drawkit.io/

7)  ManyPixels
      visit : https://www.manypixels.co/

8)  Humaaans
      visit : https://www.humaaans.com/

9)  Avataaars
      visit : https://avataaars.com/

10) Freeillustration
      visit : https://freellustrations.com/

15) Freebiesketch
      visit : https://freebiesketch.com/

16) Blush
      visit : https://blush.design/

17) IRA Design
      visit : https://iradesign.io/

18) UI Design Daily
      visit : https://www.uidesigndaily.com/

19) UI Space
      visit : https://uispace.net/

20) Open Doodle
      visit : https://www.opendoodles.com/
Help! How to make masonry layout in react
Tags: help, react, css
Published: 2021-07-29 11:14:29

Hey there, I am making a react photo gallery app in which I am consuming UNSPLASH API, but I am not able to make a masonry layout in my app.

I have found many techniques to make masonry layouts, but none of them satisfy my needs.

**\#1 CSS column layout technique**
![CSS_ERR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u72taya914a30yxx4erk.png)
 
problem :: It is mixing previous and newly added photos, and IDK why?

**\#2 using react-masonry-css**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oifi4jzorrkxlw1wqkvw.png) 
problem :: bottom layout is broken

**\#3 using react-responsive-masonry**
problem :: same as \#2 bottom layout is broken

**\#4 using react-photo-gallery**
problem :: no support for using next/image and blurhash

**\#4 using StackGrid**
problem :: no support for infinite loading and it is too slow
swift developers help 😶 plz
Tags: swift, help, xcode
Published: 2021-07-29 10:56:37

import UIKit

class ItemTableViewCell: UITableViewCell {
    
    @IBOutlet weak var stepperText: UILabel!
    
    @IBOutlet weak var priceLabel: UILabel!
    
    var item : Item! // this is a view controller class that have the item data .. price as a double (var price: Double! )
    
    
    override func awakeFromNib() {
        
        super.awakeFromNib()
        
    }
    
    
    IBAction func stepper(_ sender: UIStepper) {
        
        var item : Item! // I called it again bc it didn’t connect in the stepper func ;-;
        
        stepperText.text = String(Int(sender.value))
        
        priceLabel.text = String(Int(sender.value))
        
        let n = item.price // HERE is the error (Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value)
        
        let nn = Double(Double(stepperText.text! ?? “0”) ?? 0)
        
        priceLabel.text = “\(n! * nn )”
        
        // i made this code to take the item price and when I use the stepper it multiple the step number with the price ;0; help plz
    }
}
Why Ethereum - The World Computer
Tags: blockchain
Published: 2021-07-29 09:44:27

You might have heard of Bitcoin which is the hottest cryptocurrency on the block, but certainly not the only cryptocurrency. People are getting all gaga about it. The most exciting thing of bitcoin is not the bitcoin itself but the technology behind it called blockchain.

Blockchain allows you to have consensus on something in a decentralized way without trusting anyone. This has a lot of implications such as that anything that required a trusted intermediary to verify things is not required anymore. This opens a whole new set of applications that we might not have thought of before.

In this post I'm going to briefly describe what Ethereum is and provide links to other resources where you can go to understand it better and start developing applications using it.

**What**
Ethereum is what I consider the next step in the direction of decentralization as it provides a complete turing machine on top of blockchain. I think of Ethereum as one big giant computer made of all the nodes in the network and controlled by no one yet it provides a deterministic way of doing things. It's what some consider as Web 3.0, including me (at least from conceptual perspective).

You can imagine an Uber like ethereum application which is not controlled by anyone but the underlying technology of ethereum would allow all the drivers and passengers to agree on that which driver will pick which passenger, how much the driver is paid, what ratings the passenger gave, payments etc. Every device using that app will be doing some processing to make this happen hence contributing to the running of the Uber like decentralized app.

It is still an emerging and infant technology but this gives us the opportunity to shape the future.

**Why**
Before every how, there is the why.

In our current world of applications like Facebook, Google etc. value is created by data (e.g. earning ad revenue from user data). In this process the company profits but the actual users who create the value don't. In this decentralized world the value will be shared by all the users at varying degrees. Other advantages are transparency, no censorship, privacy etc.
Quickstart with Nodemailer
Tags: node, tutorial, javascript
Published: 2021-07-19 03:04:16


In this page you're going to learn how to create a Node.js function to send an email using Nodemailer.
Start by opening your terminal and use the following command to install Nodemailer:
```
$ npm install nodemailer
```
Require Nodemailer at the top of your file:
``` javascript
const nodemailer = require("nodemailer");
```
Now you're going to create a main function to send our Nodemailer emails. Our function needs an email account to send from, if you don't already have an email address to use with Nodemailer, you can create an SMTP service test account from ethereal.mail. 
``` javascript
let testAccount = await nodemailer.createTestAccount()
```
Nodemailer's main transport for sending emails is an SMTP transporter because almost every email delivery provider supports SMTP. SMTP is also the protocol used to send emails between different hosts, so it is universally available.If you already have an email account simply substitute your email account information in the SMTP transporter:
``` javascript
let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,//uses port 465 if secure is true.
    secure: false,
    auth: { user: testAccount.user, pass: testAccount.password },
  });
```
Now you can use the transporter to send your email. Add your recipients, choose your subject line, and add your email in both html and plain text for best results.
``` javascript 
  let email = await transporter.sendMail({
    from: '"Example User" <testAccount.user>', // sender address
    to: "them@example.com, recipient@example.com", // list of recipients
    subject: "Hello World!", // Subject line
    text: "My first Nodemailer email!", // plain text body
    html: "<b>My first Nodemailer email!</b>", // html body
  });
```
Your main function should now look like this:
``` javascript
const main = () => {
let testAccount = await nodemailer.createTestAccount()

let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,//uses port 465 if secure is true.
    secure: false,
    auth: { user: testAccount.user, pass: testAccount.password },
  });
let email = await transporter.sendMail({
    from: '"Example User" <you@example.com>', // sender address
    to: "them@example.com, recipient@example.com", // list of recipients
    subject: "Hello World!", // Subject line
    text: "My first Nodemailer email!", // plain text body
    html: "<b>My first Nodemailer email!</b>", // html body
  });
  console.log("Email: "+email.messageId+" was sent.") //This prints to the console that the email has been sent.
}
```
And that's it! You now have a function to send emails using Nodemailer.
React JS Context Api
Tags: react, javascript, html, node
Published: 2021-07-29 10:12:28

##Get Pumped Guys !!! 
Today we'd be going through **reactjs Context Api**..along with the other things related to it.
Quickly lets jump right in!

Absolutely , we must have heard of Api's , and if you haven't?
This stands for...
Application Programming Interface which basically contains large amount of data you'd wanna use in your application..
Moreover Api's are formatted differently as the Github Api is different from dribbble's Api..

Now the Context Api in reactjs serves the same purpose only that the data in your api are exclusively for your application..



**HOW TO START ?**
there are 4 basic steps you need to know.

*  1. create a types.js file and this file serves as an abstraction layer where we dispatch certain actions to the reducer.

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

* 2. import react createContext() and initialize it as shown in the image below

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

* 3. Main State.
Here is where the data's in the Api fall in, and preferably they are stored in a state and equally dispatching certain actions from the state to the reducer.

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

* 4. Reducer
Here , you write the code relating to the action you passed from the state..

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u7gxz5gwntq6g56nx2y.png)


then BOOM!!!!..... Its All working.

Thats it Guys ....
You now have a Full Reactjs Context Api working.
let me know what you think about this article..
follow on instagram @[devsinstitute](https://instagram.com/devsinstitute) for more
#techforeveryone.
Gitlab in Laradock
Tags: docker, gitlab, devops
Published: 2021-07-29 10:09:38

It's been a while since the last time I used Laradock, because my current projects development still quite simple that it's only need Laragon. There is a one thing that I want to try in Laradock that still made me curious. It's simulating CI/CD in Laradock environment using `Gitlab`, `Jenkins`, and `Sonarqube`, or maybe even more. I know this is possible to try, so I started by using the Gitlab first here.

## Running Gitlab Service in Laradock

As usual, open your console and go to laradock directory. The command is:

```
docker-compose up -d gitlab
```

> The Gitlab service takes 2.6GB memory usage approximately (See the `docker stats` below). So make sure you have enough memory allocation space for this or the service will not up and running.

The gitlab service depends on `postgres` and `redis`, so don't freak out if these images is being pulled before gitlab.

When all image pulled and container created as well, checking it using  `docker-compose ps` should have return good result like this:

```
       Name                      Command                  State                                     Ports
---------------------------------------------------------------------------------------------------------------------------------------
laradock_gitlab_1     /assets/wrapper                  Up (healthy)   0.0.0.0:2289->22/tcp, 0.0.0.0:9898->443/tcp, 0.0.0.0:8989->80/tcp
laradock_postgres_1   docker-entrypoint.sh postgres    Up             0.0.0.0:5432->5432/tcp
laradock_redis_1      docker-entrypoint.sh redis ...   Up             0.0.0.0:6379->6379/tcp
```

Also when we check it using `docker stats`, we could see that gitlab service takes huge memory usage:
```
CONTAINER ID   NAME                  CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O   PIDS
76576e8b87d5   laradock_gitlab_1     4.12%     2.603GiB / 6.043GiB   43.07%    6.78MB / 84.3MB   0B / 0B     314 
8bb28fc3473f   laradock_redis_1      1.68%     11.93MiB / 6.043GiB   0.19%     82MB / 3.36MB     0B / 0B     5   
0af95b272813   laradock_postgres_1   0.39%     86.07MiB / 6.043GiB   1.39%     2.35MB / 3.42MB   0B / 0B     16
```

## Accessing the Gitlab web

Open your browser and go to [http://localhost:8989](http://localhost:8989), you should see a gitlab login page:

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

You can start to register as a user at `http://localhost:8989/users/sign_up`. After submit the register form, the account will be in pending status and the root admin need to approve the user.

## Login as Gitlab Admin

The default username is `root` and the password is `laradock`. Try to login as the admin in the main login page. After successfully logged, you can approve the previous pending status user at `http://localhost:8989/admin/users`.

## Pushing a project to the Gitlab

> In progress

__________________
Build a WhatsApp clone with Meteor and Ionic — Meteor Platform version
Tags: whatsappclone, meteor, ionic
Published: 2021-07-29 10:08:30

> This article was published on Friday, October 16, 2015 by [Uri Goldshtein](https://twitter.com/UriGoldshtein) @ [The Guild Blog](https://the-guild.dev/)

> For the newer, Angular 2 version post,
> [click here](https://blog.meteor.com/build-a-whatsapp-clone-with-ionic-2-angular-2-and-meteor-17aa24433cd8#.2synviq0s)…

Now that Angular is a
[first class citizen in Meteor](https://blog.meteor.com/official-angular-support-with-angular-meteor-1-0-0-784f0cd7094a#.smxto0ghf),
you can use all of its vast libraries, giving you full access to the Angular ecosystem.

Also,
[Ionic recently added official support for Meteor's packaging system](https://github.com/driftyco/ionic/pull/3133),
and now their package is available on [Atmosphere](https://atmospherejs.com/driftyco/ionic).

In this tutorial, we will build a WhatsApp clone using Meteor, Angular, and the Ionic Framework for
CSS and mobile components. I've also released a
[clone of this tutorial on the Ionic Blog](http://blog.ionic.io/ionic-and-meteor) that uses the
Ionic CLI instead of the Meteor build system.

It's a good resource for people who want to use Meteor for their backend and Meteor's client side
libraries in a separate front end application, also a good migration strategy.

If you are using Blaze, you can still use Ionic's CSS libraries or the
[Meteoric package](https://atmospherejs.com/meteoric/ionic).

Contents:

*   **Installing the platform and creating a base app**
*   **WhatsApp views with static data**
*   **Create the server and share data with the client**
*   **Chat view and send messages**
*   **Users and (SMS) authentication**
*   **Create and remove chats**
*   **Privacy and publish/subscribe**
*   **Step 8 — User profile picture**
*   **Send image messages**

[Start here](https://angular-meteor.com/tutorials/whatsapp2-tutorial).
Build a WhatsApp Clone with Ionic 2, Angular 2, and Meteor
Tags: whatsappclone, angular, meteorionic
Published: 2021-07-29 10:07:58

> This article was published on Wednesday, November 30, 2016 by [Uri Goldshtein](https://twitter.com/UriGoldshtein) @ [The Guild Blog](https://the-guild.dev/)

*A version of this post was originally published on the
[Ionic Blog](http://blog.ionic.io/build-a-whatsapp-clone-with-ionic-2-angular-2-and-meteor).*

Now, a year has passed and a lot has happened: Angular 2.0 is now stable, including astonishing
amount of new features for the platform. Ionic 2.0 entered RC stage and is very close to being
final. Finally, Meteor [reached version 1.4.2](http://info.meteor.com/blog/announcing-meteor-1.4.2),
with many improvements the community asked for (fast build times, full npm and yarn support, Node
4.6.1 and MongoDB 3 by default, etc...).

## New Ionic / Meteor WhatsApp Tutorials

Today, I'm happy to announce we are releasing two new versions of the Ionic/Meteor Whatsapp
tutorial, this time with Angular 2.0 and Ionic 2.0, one using the **Ionic CLI** and one using the
**Meteor CLI.**

In these tutorials, we'll create a full WhatsApp clone using Angular 2 and Ionic 2. We'll use
Meteor's realtime collections for the chat and Meteor's simple Authentication packages for SMS-based
authentication.

It's great to see the power of these two solutions working together, keeping the platforms
up-to-date with the latest improvements in the Javascript ecosystem!

[Start here](https://angular-meteor.com/tutorials/whatsapp2/meteor/1.0.0/setup).

## Angular2-Meteor

By the way, if you noticed that the [Angular-Meteor.com](https://angular-meteor.com) website is much
faster, it's because we've completely re-written it using Angular 2 and universal rendering to
generate it as a static website. On top of that, more features are coming to Angular2-Meteor very
soon, including lazy loading of modules and support for the AOT compiler.

If you're thinking about migrating from Blaze to Angular2, or using them side by side, check out our
[migration tutorial here](https://angular-meteor.com/tutorials/migration/angular2/introduction).