teleren/devto huggingface dataset:
Unity 106: Platforms and Builds
Tags: csharp, gamedev, unity3d, dotnet
Published: 2020-12-14 17:21:06

Now its time to build your game. To start building, you need to open up the build settings window. On the Unity main menu, choose File -> Build Settings. Select the Add Open Scenes button to add the scene that's open. You need to add all the other scenes you use in your game by dragging and dropping them.

![unity build settings dialogue](https://dev-to-uploads.s3.amazonaws.com/i/4pjxqj291buukh3nqhot.png)

#Switching Platforms 
By default, you'll see that the Platform is set to PC, Mac & Linux Standalone on the left. You can change the Target Platform by selecting the the platform you want to build for, then select Switch Platform at the bottom.

#Building
When ready, select the Build and Run button. Save the executable application anywhere you want it. The build process will start and the game will run in fullscreen when the build is done. To exit fullscreen, press Alt+Enter on windows, or cmd + f on Mac.

You can get more information about [supported platforms](https://docs.unity3d.com/Manual/PlatformSpecific.html) at the Unity documentation.

Please check our full video covering this topic in our video beginner series for Unity.
{% youtube XQSOePLj5fI %} 

This concludes our Unity 101 series.
Cool CSS Hover Animation 🤩
Tags: css, html
Published: 2020-12-14 17:04:40

_Today we're going to create this cool quick animation using CSS._

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8zw2nw0lgj7cyxw4fuoc.gif)

So, without wasting any more time let's get started. Firstly, lets knock off some starter code. The following code just removes some default settings and centers the contents of the body.
```css
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: darkslateblue;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
```
Next, lets complete the markup. So, all we have is an image and a title both wrapped in a container. _(Big thanks to `Michal Mrozek` for this wonderful image)_
```html
<div class="container">
	<img src="https://images.unsplash.com/photo-1557912407-eb2900cf49e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
	<div class="title">Butterfly</div>
</div>
```
Next, we just style the `container` class. This is just to center the image and the title and place them columnwise. Also, we add `cursor: pointer` on hover.
```css
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
```
Next, we style the image to give it that small round shape. And specifically note these two styles that make it look good `filter: grayscale(); transition: filter 0.4s ease-in-out` 
```css
.container img {
	filter: grayscale();
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 6px solid whitesmoke;
	box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
	margin-bottom: 1rem;
	transition: filter 0.4s ease-in-out;
} 
```
Now, when the container class is hovered we simply remove that filter from the image.
```css
.container:hover img {
	filter: none;
}
```
Next we give some basic styles to the `title` class. _(The font used is from Google Fonts)_
```css
.title {
	font-family: "Dancing Script", cursive;
	font-size: 3rem;
	color: whitesmoke;
	position: relative;
}
```
Next, we use a pseudo element to create the underline. We initially set the `width` to `0%` and `left` to `50%`.
```css
.title::after {
	position: absolute;
	content: "";
	width: 0%;
	height: 4px;
	background-color: whitesmoke;
	left: 50%;
	bottom: -10px;
	transition: all 0.4s ease-in-out;
}
```
Now, when the `container` class is hovered we modify the `width` and `left` properties of the pseudo element.
```css
.container:hover .title::after {
	width: 100%;
	left: 0;
}
```
Drum Rolls 🎉🎉 Its Done! Let me know your feedback.
You can view the full code [here](https://codepen.io/ssmkhrj/pen/MWjpWKp?editors=1100).
Error can someone help with it?
Published: 2020-12-14 16:51:27

What is the error below:  error: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object HTMLButtonElement]') contains HTML space characters, which are not valid in tokens.
    at buttonColorReset (file:///C:/Users/jasurbek.sadiev/Desktop/My%20projects/My%20first%20project/script.js:137:37)
    at buttonColorChange (file:///C:/Users/jasurbek.sadiev/Desktop/My%20projects/My%20first%20project/script.js:116:13)
    at HTMLSelectElement.onchange (file:///C:/Users/jasurbek.sadiev/Desktop/My%20projects/My%20first%20project/index.html:58:92   
I upload a photo where you can see real problem. Please I need your help? 
Link for the photo: (https://dev-to-uploads.s3.amazonaws.com/i/scbtqxvjmu9olavkws80.jpg)
Why I Want to Become a Developer 
Published: 2020-12-14 16:42:48

I would like to say that my interest in programming began in college. I was introduced to the many different languages of programming in a web design course where I learned to uses HTML and CSS, and Object-Oriented Programming where I learned the concepts of abstraction, encapsulation, inheritance, and Polymorphism

With Web Design, I was filled with immediate gratification. You would write a paragraph in HTML, change the background color using CSS,  and like magic it appeared on the screen.  I couldn't say the same for Object-Oriented Programming.  the course was a whole new world for me, it consisted of building many parts for a desired function.  It wasn't as visually striking as web design and that took some to get used to.

The reason I enjoyed both these classes was because of that feeling you get the moment you made the code to work, it is nothing short of enchanting,  and satisfying at the same time. The reason I kept learning these languages long after college was because, besides a  grade, I had something tangible,  something I created from lines of code that without a text editor would just be syntax. My passion for coding and technology comes from the simple pleaser of finding how to stop your loop from looping to infinity and beyond, or changing how we collaborate by creating web applications like Google Docs. These are the many different reasons why I want to become a software developer.
UI Dev Newsletter #35
Tags: html, css, javascript, webdev
Published: 2020-12-14 16:31:00

- [HTTP Archive's annual state of the web report](https://bit.ly/37gnECg)
The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts.


- [2020 End-of-Year Thoughts Archives](https://bit.ly/2Wd1L0j)
Web builders answer the same question: What is one thing you learned about building websites this year?


- [What you might not know about sizing in CSS](https://bit.ly/3meH52x)
Tomas Pustelnik shares his findings of sizing and layout models and how to handle possible issues.


- [Alt vs Figcaption](https://bit.ly/37gibv4)
Elaina Natario writes how alt attribute and figcaption tag are interpreted by assistive technologies.


- [A Utility Class for Covering Elements](https://bit.ly/38hgIUX)
Michelle Barker explores different ways how to make utility class for completely covering one element with another.


- [How To Design A Simple UI When You Have A Complex Solution](https://bit.ly/3mbLT8U)
Suzanne Scacca shares some tips for designing a simple UI regardless of your solution’s complexity.


- [How to cope with legacy code and technical debt](https://bit.ly/3amjH11)
Ivo Lukač writes in-depth post explaining what legacy code and technical debt are and how to deal with it.


- [EStimator](https://bit.ly/3afxTc5)
Find out how much turning on modern JS could save.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Web Dev Beginner? Here’s how to setup your next HTML/CSS project in seconds. 🔥
Tags: html, css, codenewbie, webdev
Published: 2020-12-14 16:25:03

## The problem (before)

I remember when I started learning web development a few years ago how tough and annoying it was to setup a new project for my basic HTML/CSS project.

> It’s so simple, why do I have to keep learning it?

## The solution! 🎉

Back then, a tool like [Create HTML Boilerplate](https://github.com/braydentw/create-html-boilerplate) would’ve defiantly helped. 👍 

What is `Create HTML Boilerplate`? It’s a super easy-to-use [CLI (Command Line Interface)](https://en.m.wikipedia.org/wiki/Command-line_interface) for generating the base of your vanilla HTML/CSS project *in just seconds*.

## Cool! How can I do that?

Start by opening a new project in your preferred text editor and type the following command into your terminal:

*You can replace `myapp` with the name of your project.*

```sh
npx create-html-boilerplate myapp
```

Lastly enter into your project folder by doing one last command:

```sh
cd myapp
```

Now you should be good to go and ready to code away! 😎

---

If you find this open-source project useful, please give it a ⭐️ [on Github](https://github.com/braydentw/create-html-boilerplate). I *really* appreciate it. 😊

If you need help/have any questions, feel free to [email me](mailto:brayden45.dev@gmail.com) or put them in the comments. ⬇️ 

Have a great week! 👋
CodeTrophs ( Open Source Project )

Tags: opensource, github, machinelearning, webdev
Published: 2020-12-14 10:48:39

Does the idea of open source excite you but not sure where to begin or which project to choose? Often feel confused and uncomfortable while using GitHub, and can’t think of any available alternative? Well, you have arrived at the correct place "CodeTrophs" is an open source platform targeted solely for beginners to help them contribute to real life projects, from developing new ideas and approaches, to exploring the world of open sourcing. The platform also caters to the need of students who want to dive into the world of research. We are working on an interactive AI based platform that bridges the gap between professors from top universities and the potential candidates for their field of research by categorising each and every research paper of the professor. Moreover, improving the interview skills of a fellow coder is a must which we again aim at building in the following times using the world of machine learning.

Discord  : https://discord.com/invite/HYPt5RX
Telegram : https://t.me/codetrophs
Github : https://github.com/CodeTrophs
LinkedIn : https://www.linkedin.com/company/codetrophs/
Slack : https://join.slack.com/t/codetrophs/shared_invite/zt-jxiadt9c-4vIl~bWsIeECQEiHZ9d9yw
Use an array as an iterable
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-12-14 16:20:40

```js
const arr = [1, 2];

console.log(arr.next()); // Error

const iterable = arr.values();
console.log(iterable.next()); // { value: 1, done: false }
console.log(iterable.next()); // { value: 2, done: false }
console.log(iterable.next()); // { value: undefined, done: true }
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Connecting a Project to GitHub From the Command Line
Tags: github, bash, git
Published: 2020-12-14 16:18:41

[GitHub](github.com) is a great tool to be used when programming, as it helps store your code over the internet. It makes your project more organized, easier to develop, and allows you to collaborate with friends or other developers. In addition, GitHub works smashingly with Visual Studio Code.

If you’re still not recognizing a need for GitHub, do not worry – you will soon.

In this short tutorial, I’m going to show you how to connect your project with GitHub from the command line.

#Connecting to GitHub

First, navigate to your project in your computer’s terminal and run:

```
git init
```

That will initialize your project with Git. Next, run:

```
git add .
```

That command will add all of your files to the git repository that we initialized in step 1. After, run:

```
git commit -m "Initial Commit"
```

This commits all your files to your repository. Next, we need to set up a GitHub repository. To do this, go to (github.com)[github.com] and either sign in or create an account. After that, create a new repository by clicking the “new” button on the sidebar on the left side of the screen.

Next, give your repository a name, select if you want it to be public or private, and then click create at the bottom of the screen.

Now, copy the repository link from the top of the page.

Then, go back to your terminal. After, run the following command:

```
git branch -M master
```

This creates a master branch for your repository. Finally, run:

```
git remote origin add <repository link>
```

Make sure to replace `<repository link>` with your GitHub repository link from above. The last thing we to do is to push all our files to GitHub! Do that with the following snippet:

```
git push -u origin main
```

Congrats! Now we’ve pushed our project to GitHub, and you should be able to see it if you reload your GitHub repository’s page.

#Making Changes

However, let’s say you continue to edit your code. How can we update your GitHub repository? It can be updated with this series of commands:

```
git add .
git commit -m "Your Commit Message Here"
git push -u origin main
```

If you're interested make sure to follow me or check out my [Github profile](https://github.com/the-javascript-ninja)!
Major Benefits of Microsoft Dynamic 365
Tags: devops, mscreate, machinelearning, startup
Published: 2020-12-14 16:18:27

From initial contact to post-sale support, [Microsoft dynamic 365](https://www.bacancytechnology.com/hire-microsoft-dynamics-365-developer) gives you a clear view of all your contacts sales and marketing tools because MS Dynamis 365 combines robust servicing.
 
#Overview of Microsoft Dynamic 365: 
 
**Product:** Dynamics 365
**Vendor:** Microsoft
**Founded:** 2001
**Headquarters:** Redmond, WA
**Ownership:** Public
**Customers:** 40,000+
**Deployment Model:** Cloud, On-Premise
**Free Trial:** Yes
 
*Let's move on to the Major Benefits of MS Dynamic 365,*
 
**Easily Use**
 
Based on Microsoft's new app market, AppSource the Dynamic 365 is, so the apps that you and your company need you can find and search easily. To use and understand this makes the solutions easy. For an app that can help you, you can effortlessly search when your needs change. 
 
**Flexibility**
 
Having a subscription model and monthly operational cost is far more flexible than capital costs having. Only buy what you need, so it has the potential to be cheaper. To manage your own servers and data, Dynamic 365 eliminates the need also which can lead to significant savings. 
 
**Simplicity**
 
By role based on purchase subscription Dynamic 365 is. To work, they do you have to subscribe to people only and covering all roles, not buy a single license. 
 
**Secure**
 
For apps and data, Dynamic 365 is a cloud-based solution that access controls and robust security features that including the physical datacentre, service hosting platform, network connectivity, and use and administration access build into the cloud services. 
 
**Intelligent**
 
With built-in predictive analytics to Real-Time insights, Dynamic 365 gives you access. Azure Machine learning and power BI Cortana Intelligence are all embedded natively, so to prescriptive advice, predictive insights, and actionable next steps, you have access. 
 
**Agility**
 
The way you manage daily situations and data Dynamic 365 will transform. Between critical business platforms, you can make dissolve barriers and make your data start working together. Microsoft Common Data Model is Core to this concept, which is a shared business database. To connects all processes and data together, and it is the glue, so to silos of information, you can say goodbye. 
 
**In an entirely new way, you can understand your customers**
 
You can get the complete picture of the customers because Dynamic 365 brings any kind of customer data together. With real-time updates to truly understand the customer journey, you can use pre-built KPIs. Track customer relationships' health; you get the ability to measure quickly and personalize the customer experience. 
 
##Conclusion :
 
To streamline businesses, enhance business productivity, and improve customer relations, MS Dynamic 365 provides the potential exceptional while reducing costs.
A reusable dark mode with Reactjs and pure CSS
Tags: react, css, tutorial
Published: 2020-12-14 16:08:41

we are going to make a dark mode with a smooth effect.

## Main idea

The idea is; we are going to have a state

```js
const [theme, setTheme] = useState(true);
```

and a variable named which is going to have the color of the theme

```js
const color = theme ? "White" : "Dark";
```

we are going to put the color variable in the CSS classes that need to know in which mode is the application

```jsx
className={"SomeClass-${color}"}
```

Then we create a class for each color with this line at the beginning `transition: all 0.25s linear;`

```css
.SomeClass-White {
	transition: all 0.25s linear;
	background-color: white;
}
.SomeClass-Dark {
	transition: all 0.25s linear;
	background-color: black;
}
```

## Tutorial

First of all, we have to create a react app, for practical purposes we are going to use the command:

`npx create-react-app darkmode`

in the src folder, we just need the App.js, App.css, index.css, and index.js files, the other ones you can delete or just omit.

in App.js we have this code

```js
import React, { useState } from "react";
import "./App.css";

function App() {
	const [theme, setTheme] = useState(true);
	const color = theme ? "White" : "Dark";

	if (theme) {
		document.body.classList.remove("DarkMode");
		document.body.classList.add("WhiteMode");
	} else {
		document.body.classList.remove("WhiteMode");
		document.body.classList.add("DarkMode");
	}

	return (
		<div>
			<h1 className={`App-h1-${color}`}>Dark mode</h1>

			<button onClick={() => setTheme(!theme)}>Change theme</button>
		</div>
	);
}

export default App;
```

We have a state named theme, and a variable named color which has the word White or Dark; That variable we are going to use in each class that needs to know the state of the application

the conditional `if` is used to change the body class.

Now we add this code to index.css (classes for the body tag)

```css
.DarkMode {
	transition: all 0.25s linear;
	background-color: black;
}
.WhiteMode {
	transition: all 0.25s linear;
	background-color: white;
}
```

Then we add this code to App.css

```css
.App-h1-White {
	transition: all 0.25s linear;
	color: black;
}
.App-h1-Dark {
	transition: all 0.25s linear;
	color: white;
}
```

Here we can see the different classes for dark mode and white mode, the line of code that makes the smooth animations is `transition: all 0.25s linear;`

And that's it, now to have the theme state accessible to all your components you can pass it as a prop or create a context.

You can see a website that uses this strategy for dark mode [website](https://rogeliosamuel621.netlify.app)
and the code of this website is here [Github repo](https://github.com/rogeliosamuel621/portfolio)

If you'd like you can follow me on [Twitter](https://twitter.com/rogeliosamuel21) or see my
[Github](https://github.com/rogeliosamuel621)
Why is RPA important?
Published: 2020-12-14 15:48:07

In this guide, we'll explain what [Robotic Process Automation](https://fastpathautomation.com/) signifies and its significance in an ever-evolving business landscape.
With analyst firms forecasting that about half of the work could be automated, businesses like health care, retail, education, banking, and insurance don’t want to be left behind. It is predicted that automation technologies like RPA may have a financial effect of about $6.7 trillion by 2025. 

Here are 4 tips on why [RPA](https://fastpathautomation.com/) is important for your business:

Helps enterprises with their digital transformation process: With RPA, enterprises can take their digital capabilities to another level, reaching new heights they never envisioned before. RPA is an essential element in digital transformation, going beyond automating tedious, repetitive tasks and bringing about standardization throughout the enterprise. With RPA, enterprises focusing more on customer-centric tasks raiding their digital footprint in company operations. 

Helps enterprises prepare for a data-driven market: With companies transitioning to a data-driven market, Big Data is something that can't be ignored. High-volume of information is a challenge for many companies. Exchange of information in a seamless fashion, streamlining processes, and using data the perfect way can be useful for improving the overall customer experience. Data together with automation capabilities is a disruptive approach that could quickly digitize processes and deliver considerable value to the business and its clients. 

Unlocks the power of intelligence: Have you as a company adopted AI/ML technologies? Have you ever gone beyond RPA? Originally, companies that implement RPA, start by automating rule-based tasks and slowly move onto tasks that require a combination of NLP and predictive models, focusing on intelligence and judgment for decision-making. It is reported that many businesses are seeking to embrace AI/ML capacities in their business processes. 

Introduces digital workforce in your business: With RPA comes the introduction of virtual or digital employees. The electronic employees emulate human actions and perform repetitive, time-consuming procedures like internal reporting, e-invoicing, and employee onboarding among several others. Creating and managing an electronic workforce demands a clear automation routine and a change of the employee mindset. 

Conclusion

It's projected that the international Robotic Process Automation market is forecast to reach 3.11 billion dollars by 2025. Since RPA makes greater inroads into our lives, early adopters and innovators are switching from conventional RPA into AI. RPA is more than simply automating boring, dull tasks; it is also about collecting data, analyzing reports, and delivering substantial value enterprise-wide.