teleren/devto huggingface dataset:
How to publish webpages with github
Tags: github, git, host, wepages
Published: 2020-06-30 22:07:32



There are several ways through which you can deploy your website, Github is one of the easiest and fastest way to deploy your website developed with HTML, CSS and JavaScript. Apart from the fact that Github stores and allows you to share your code with multiple people, it also offers web hosting for your static HTML website. 

It is a great tool which helps to showcase your project live to the whole world, isn’t that amazing! You tend to create awareness about your skills and services by sharing the link on various social media channels, It also open up opportunities that you can ever imagine. So, let’s get started I believe you already have an HTML page on ground.

**STEP 1: Create an account on Github**
Signup for a free account on Github: https://github.com/ Or if you’ve already have an account, login here https://github.com/login

**STEP 2: Create a new repository**
After you’ve successfully login on github, it automatically redirects you to the dashboard. There you will see a green button named “New”. Click on it to create a new repository, Thereafter;
    • Input a repository name, the repository name can be anything. Just take note that the URL of your webpage will depend on what you name the repository, for example;
      let’s assume your username is dammyton and your repository name is dammyton.github.io then automatically your URL will be dammyton.github.io
    • Input the project description (tho it is optional)
    • Lastly click on “Create repository”


**STEP 3: Upload your files**
You can decide to upload it manually on github by clicking on the upload files or you can as well upload your files via the terminal. Open the terminal program on your computer and navigate to the folder where your files are (the files you intend to upload). Then follow this subsequent steps;

```
    • git init
    • git add .
    • git commit -m “first commit”
    • git remote add origin https://github.com/your-username/repository name.git
    • git push -u origin master
```

If you go back to the repository you created earlier you should see your files there.

**STEP 4: Publish the webpages**
Click the *settings* tab in your repository. Scroll down the settings page, you’ll find a section for *github pages*. Where **source** is set to **none**, change it to **master** branch then save. It will automatically display the URL. Yes, your webpage is now live. Congratulations!
What is the Game of Life? 
Tags: cellularautomation, computerscience, algorithms
Published: 2020-06-30 21:54:46

## First you need to know about Cellular Automaton(CA).
A Cellular Automaton (plural - Celluar Automata) is a system of cells with the following characteristics:

1. The cells live on a grid. 

2. Each cell has a state, it is either alive or dead (on or off)

3. Each cell has a neighborhood, typically a cells neighbors are considered to be the cells that are adjacent. 

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

The state of each cell depends on a set of rules and the behaviors of its neighboring cells. Imagine that being similar to filling in squares on a piece of graph paper. Now imagine that there are a set of rules that determine how the pattern changes over time. This is a process that can exhibit behaviors of biological reproduction and evolution. One of the most popular Cellular Automaton was created by John Conway, called the Game of Life which is a 2-D Cellular Automaton invented in late 1960s at the University of Cambridge. 

## What is the Game of Life? 
- A 2D grid of squares on a (possibly infinite) plane.
- Each square can be alive (1) or dead (0)

Each cell has 8 alive or dead neighbors, left, right, top, bottom, and diagonals. These cells become alive or dead by following a set of rules which eventually create a pattern which can be considered a depiction of "generations".

## The Rules:
- If an alive (black) cell has fewer than 2 alive
neighbors, it dies (turns white) -- loneliness
- If an alive cell has more than 3 alive neighbors,
it dies – overcrowding
- If an alive cell has either 2 or 3 alive neighbors,
it goes on living (stays black) -- happiness
- If a dead cell has exactly 3 alive neighbors, it
comes alive -- reproduction. Otherwise it stays
dead.

## How patterns are made:
- The game proceeds in generations, one generation per step
- In each generation, some cells come alive and some die according to the rules stated above. 

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

In the image above Generation 1 on the left changes according to the rules and becomes Generation 2 after one step. This continues over a period of time which results in what looks like a continuous pattern until all the cells die. 


Various patterns emerge as steps increase, the most popular patterns are gliders and spaceships. Once the cells are placed in the starting position, the rules determine everything that happens later. In most cases, it is impossible to look at a starting position (or pattern) and see what will happen in the future. The only way to find out is to follow the rules of the game.
WILT Series Devtools: Balsamiq
Published: 2020-06-30 21:48:47

Hello **Dev** community,

I have learned a lot from following people who share their knowledge.Its time for me to return the favor.

I am **Ravi Yenugu** solo full stack developer working on mostly Java based web applications.

I have decided to start a Series of *What i learned today- WILT* 

I am kicking off with [Balsamiq](https://balsamiq.com/) a tool for wireframing. I am new to this concept and thought the tool is pretty intuitive and fun to work with.

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys (from wiki)

After using Balsamiq (cloud version) i am very pleased by the value it adds to my work. i.e. clarifies a lot of UI and also business logic along the way.
Information Error: Duplication Overload!?
Tags: beginners, leadership, productivity
Published: 2020-06-30 21:32:53

**Edit:** Discuss your most used resources/authors in the comments below!

**TLDR; Thank you to anyone who has ever answered online questions or made online tutorials.**

***Information.*** Perhaps one of the most notable characteristics of our time is the sheer amount of information available at our finger tips. Now, of course someone can (and will) play Devil's advocate and exacerbate all of the "disservices" being done with that amount of information.

**Well, I'm only here to talk about the *good*.**

**Thought Experiment Time:** close your eye's and.... 
 Just kidding don't do that. If you've already done it then it's too late, otherwise, keep reading.

Imagine yourself back in your Intro to Computer Science, Intro to Engineering, or whatever Intro course may have been your first; a time where terms such as `Object Oriented Programming`, `Higher Order Functions`, `Tree Searches` may have had little meaning to such an innocent mind. If you are still at this point, bless your soul. If not, perhaps these memories have been repressed due the severe, irreversible, damage it may have caused otherwise, but try to remember.

Still in the shoes, of your younger, irreproachable, self. Do you remember the hundreds if not thousands of articles, blog posts, video tutorials, etc. All tailored to your specific topic and each one slightly different than the last. We all learn in different ways so, if one author didn't get through to you then perhaps the next one made it **click**! 

That is really what this post is about, it is a *thank you*. To all of the developers, educators, and anyone else out there that has used their time to answer a question or post a tutorial.

## We appreciate you!
Day 165: Back in the Day
Tags: hiphop, code, coding, lifelongdev
Published: 2020-06-30 21:22:18

_liner notes_:
- Professional : Had a team retrospective and met our new team member. Had another couple of meetings. Spent the rest of the day finishing up the Web Component I've been working on. Got the features I discussed with the team working and finished all the tests. Got all 10 tests passing and 100% code coverage. Felt good. Going to get it pushed to the team's repo tomorrow. Need to check on some things because I changed the original name of the Web Component.

- Personal : Last night, I hooked up my new side project's dashboard to the Firebase Firestore database. Right now, a user can enter in their email address and when they submit, it checks with the database to see if it is in the approved list. If not, display an error, if so it will go through the Firebase Email Link Authentication. What's cool is that I was able to get the database client into the Svelte store so I can call it from different components. Looking to do the same with the auth client. Also did a little quick and dirty prototype of the idea I had for my van's framing. Seems to work okay.

![Riverbank with mangroves in Indian River, Dominica](https://dev-to-uploads.s3.amazonaws.com/i/dupegabdbsy8muhqiz26.png)

Going to get the Firebase Email Link Authentication working. I'm pretty sure I've done it on a previous project back in the day. Work on that for the rest of the night and call it early so I can get up early tomorrow. That's it.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube n1nTuUFGc9g %}
Post Bootcamp Life
Tags: career, bootcamp, reactnative
Published: 2020-06-30 21:09:49


<span>Photo by <a href="https://unsplash.com/@thomasbennie?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Thomas Bennie</a> on <a href="https://unsplash.com/t/experimental?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

I graduated from Flatiron's coding bootcamp 2 months ago. 

It has flown by, and I have been learning a lot since it ended.

It can be daunting to figure out what your next steps are once your bootcamp ends. 

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

<span>Photo by <a href="https://unsplash.com/@maxon?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Max Ostrozhinskiy</a> on <a href="https://unsplash.com/s/photos/steps?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

I knew algorithms were an essential part of the interview process, so Leetcode was a must.

I also knew that being a beginner meant I could not take time off of coding or I would become rusty and forget a lot of what I had learned.

Finally, I knew it looked good to have learned more languages and frameworks after the bootcamp ended.

So, how would I figure out what to prioritize? 

Not two weeks after my bootcamp ended, I met a founder of a company who was working on an application very similar to what I had in mind for my own company in the future.

I worked with him for a few weeks and in that time I learned the MERN stack, the plan was I would build his full website.

I really enjoy the MERN stack, and had I not met that founder I may not have learned MERN. 

We decided to part ways and I was back on my own. 

I decided Python is the industry standard for algorithms so that is what I would learn.

So I started watching tutorials and learning Python basics.

I really really really liked Ruby so Python was a nice language to dive into.

While studying Python...

I had a company reach out to me for an interview, the recruiter told me to learn Java. I then learned about Java and the differences between Java and C#.

I got an offer but they are in a hiring freeze.

I applied to another company for a frontend role. They asked me to learn React-native and build a screen for them to measure my aptitude.

Everyone's post bootcamp journey will look different. What I work on may not interest you and vice versa. What I have learned from this experience, is to always keep learning, and be open-minded. I am willing to learn just about any coding language. 

There is no recipe for success after a Bootcamp, but what I can say is do not stop, do not stop learning, applying and coding.

Goodluck grads!
I have released a Demo of "Citadel Stormer 2", a 2D action platformer that I have been working on
Tags: gamemaker, indiedev, platformer
Published: 2020-06-30 20:43:49

Hi! I'd like to present my upcoming 2D platformer **"Citadel Stormer 2"**. It's inspired by classic shooters like Megaman and Contra that I played while growing up. 

I'm pretty happy with the way it's coming along. I am a novice when it comes to programming (even though I have been dabbling with Game development for the last couple of years). But through youtube tutorials, advice from experienced programmers and some experimentation I was able to create the game's basic mechanics and foundation. I'm still fine tuning things but I believe I have a working game on my hands. :)

As far as the game's story is concerned, I haven't fleshed it out, but I've decided it's going to be about an evil AI and killer robots. 

Here are some GIFs showing what the game looks like:

[Gameplay GIF 1](https://i.imgur.com/qmQIvYD.gif)

[Gameplay GIF 2](https://i.imgur.com/VgvLoTA.gif)

[Gameplay GIF 3](https://i.imgur.com/LKXXvkG.gif)


Current game features:

- Simple straightforward old-school 2D platformer action.
- Fight using 3 different guns with varying attack damage. (More guns will be added!)
- Avoid hazards - instadeath spikes, electric bolts etc.
- Fight a variety of robot enemies.
- Game save and load.

If you're interested, you can download the demo at these locations:

ITCH.IO: https://pixeltroid.itch.io/citadel-stormer-2

GAMEJOLT: https://gamejolt.com/games/citadelstormer2/508978

The Demo contains the first level in it's entirety. Please note that the game is still in development. If you can, please check out the Demo and post your feedback if you have any! 

Thank you!
100 Days of SwiftUI — Day 30
Tags: 100daysofswiftui
Published: 2020-06-30 20:11:37

---
title: 100 Days of SwiftUI — Day 30
published: true
date: 2020-06-30 20:10:24 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-30/
---

Aaaaaand I'm done with [Day 30](https://www.hackingwithswift.com/100/swiftui/30). After having learned about UITextChecker and Lists yesterday, I put them to use today.

I also learned how to use `onCommit` with [`Textfield`](https://developer.apple.com/documentation/swiftui/textfield) and [`onAppear`](https://developer.apple.com/documentation/swiftui/view/onappear(perform:)), which seems to be `viewDidAppear` in UIKit-land. I'm still quite impressed, how easily I can build a UI and I like, how easily I can react when the user enters text in a Textfield, for example.

But trailing closures still confuse me, as I use AutoComplete in Xcode pretty heavily — I'm lazy — and every single time, I have to delete some code before adding the trailing closure. That annoys me. Can I turn this off, somehow?

Until tomorrow! 👋

<!--kg-card-end: markdown-->
Quick CSS Transition Explainer
Tags: css, beginners, webdev
Published: 2020-06-30 19:34:59

CSS transitions are easy to use and really add that final touch of polish to a UI. I love transitions and they make a site look more professional when used correctly. They were a little confusing at first for me, so I decided to whip up a quick CodePen showing how transitions are written.

Transitions are used to smoothly transition from one style to another. Here's an example using a button with hover and active states.

{% codepen https://codepen.io/austincrim/pen/rNxYMxa %}

Thanks for reading!
My custom CSS Hacks
Tags: css, favorite, webdev
Published: 2020-06-30 19:34:45

After many years of experience with UI and web design i have collected a small but nice list of my favoite CSS hacks that I use on pretty much every project, app or website.

I hope you can learn from this and use it in turn for your projects too.

Add your favorite CSS hacks in the comments below!

1. Custom Grid
```CSS
.grid {
    position: relative;
    margin: auto;
    width: 1200px;
}
@media(max-width: 1200px) {
.grid {
width: 95%;
}
}
```
This allows you to set a custom grid to work inside and you can edit this grid for different device screen widths.

2. Design a custom close icon

```CSS
.close {
    position: absolute;
    padding: 5px;
    font-style: normal;
    font-weight: 600;
    transform: scale(1.4);
    cursor: pointer;
    width: 20px;
    height: 20px;
    transition: all 0.3s;
    z-index: 900;
}
.close::before {
    position: absolute;
    top: 4px;
    left: 12px;
    transform: rotate(-43deg);
    content: '|';
}
.close::after {
    position: absolute;
    top: 4px;
    left: 14px;
    content: '|';
    transform: rotate(43deg);
}
```
I design a custom icon element and wherever i need to use it in my html i simply add this line:

```HTML
<i class="close"></i>
```

3. CSS Vars

Some CSS can be long and hard to remmeber so i just store it inside a CSS variable and that's it.

```CSS
:root {
--gradient: linear-gradient(324deg, rgba(119,0,255,1) 0%, rgba(41,4,255,1) 100%);
}
```
I can then simply call it in my css like this:
```CSS
.box { background: var(--gradient) }
```

4. Make everything border-box
```CSS
* {
box-sizing: border-box
}
```

this way all my elements will be uniform in dimensions and i don't have to worry about padding and borders and whatnot messing up with my widths and heights.

5. Get a quick spacer element
Sometimes i need to add a quick spacer between elements

```CSS
.spacer { height: 60px }
```
And i call it in my html:

```HTML
<div class="spacer"></div>
```
6. Custom Scrollbars
```CSS
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
} 
::-webkit-scrollbar-track {
    background: #eee; 
    border-radius: 50px;
}
::-webkit-scrollbar-thumb {
    background: green;
    border-radius: 50px;
}
```
That one customizes scrollbars, pretty cool.

7. Custom Highlighter
```CSS
::selection {
    background: red;
    color: white;
}
```

8. Remove dependency on !important
To remove dependencies on !important for cnflicting styles i simply make every selector very specific like:
```CSS
.app .container .box h1 { color: green; }
```
Instead of setting styles like 
```CSS
.app h1 {color:green;}
```
Then if i need a more abstract style definition
i use:

```CSS
.app h1 { color:green }
.app .container .box h1.title {color:red}
```

Hope you enjoyed these!

You can add yours in the comments below, i'd love to hear from your!
How to Clone a GitHub Repository for Beginners
Tags: codenewbie, github, git, webdev
Published: 2020-06-30 19:32:54

Clone a GitHub repository from scratch. This process is manual to make sure you know how to start using Github. In this case, you will learn how to copy and clone your project to your own personal Github account, and you will learn how to open your code inside of XCODE. 

Please leave a comment below and let me know if you have any questions or concerns and I will be more than happy to help you.
Como personalizar uma Tag Fixa usando kendo multiselect e AngularJS.
Tags: angular, kendo, multiselect, frontend
Published: 2020-06-30 19:28:28

Resolvi fazer esse post por 3 motivos:
1. Não achei bastante conteúdo em português.
2. Quero ajudar a comunidade DEV.
3. Aprender a fazer publicação.

Eu tinha uma tarefa para ser feita na empresa que eu trabalho, onde precisava fazer um Multi Select com uma Tag fixa. Contendo o nome do primeiro item selecionado e mais a quantidade de itens selecionados.

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

Só que o problema era que a versão do Kendo era antiga e não tinha muitos recursos, então procurei algumas soluções para fazer esse Multi Select. 

```
  <select id="idCombo"
          kendo-multi-select
          k-ng-model="valoresSelecionados"
          k-options="kendoOptions">
  </select>
```

Para controlar o nome fixo no input, eu precisei colocar como atributo no Options do Kendo, ou seja, primeiramente o campo `tagMode` deve ser 'single'. Depois eu precisei fazer um template pra ficar do jeito que queria, aparecendo o nome no campo. Exemplo do atributo options passado pro kendo, pode variar de acordo da estrutura do projeto.

```
options = {
            dataTextField: 'nome', //campo que vai aparecer na combo
            autoClose: true, //fechar toda vez que selecionar 
            tagMode: 'single', //Deixa uma tag fixa
            tagTemplate: '<span> {{ nome }} + {{ valoresSelecionados.length }} </span>', 
        };
```
Para fazer com que o nome do campo ficasse dinâmico, eu criei um observador `$watch` do AngularJS. Então toda vez que o meu array `$scope.valoresSelecionados` tivesse alguma modificação é executado um função anônima que coloca o primeiro nome no `$scope`. Saiba mais sobre isso nesse link. https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

 ```
$scope.$watch('valoresSelecionados', function () {
                if ($scope.valoresSelecionados.length > 0) {
                    $scope.nome = $scope.valoresSelecionados[0].nome);
            });
```

Espero ter ajudado em algo, esse foi meu primeiro post aqui no DEV e pretendo postar mais sugestões.
 
Qual quer duvida ou sugestão pode comentar que vou ficar feliz! 

Vlw!
Best Online DataScience Courses
Published: 2020-06-30 19:27:34

#Best Online Data Science complete course track to start your journey as a Data Scientist in 2020 :

##Python: 
https://www.datacamp.com/tracks/data-scientist-with-python?tap_a=5644-dce66f&tap_s=841152-474aa4

https://www.datacamp.com/tracks/machine-learning-scientist-with-python?tap_a=5644-dce66f&tap_s=841152-474aa4

##R Programming Language: 
https://www.datacamp.com/tracks/data-scientist-with-r?tap_a=5644-dce66f&tap_s=841152-474aa4

https://www.datacamp.com/tracks/machine-learning-scientist-with-r?tap_a=5644-dce66f&tap_s=841152-474aa4

<b>#datascience #datacamp #artificialintelligence #machinelearning #R #python #selftaught #bestcourses</b>
Print page with JS
Tags: javascript, html
Published: 2020-06-30 19:14:44

Hey Devs, I'm here today to show you something amazing. How to print the page with JS. 

  Let's suppose you're have a form to fulfill a document and you need to print it. For this we're going to use a simple js function.
 
For this example, I'm going to use a button calling the function.
```html
<button onclick="imprimir">Imprimir</button>				
```
 Then, add the following script
```js
	function imprimir(){
		window.print();
	}
```