teleren/devto huggingface dataset:
CSS properties
Tags: beginners, webdev, css
Published: 2019-12-21 06:21:13

CSS properties are used to apply the desired effects on HTML elements.
These properties are named in such a way that you will understand what is going to happen on the HTML elements.
The properties like font-size, color indicate that the font-size and color changes according to the desired changes.Since CSS contains alot of properties that can be used for styling purposes and discussing all of them here is impossible. So, I am going to discuss here only those properties which are used mostly.
The properties that we will discuss here:

font-size

font-family

background-color

color

text-decoration

display

margin

padding

border

width

FONT-SIZE:

This property is used to change the font size of the HTML element.

    p{
        font-size:30px;
    }

FONT-FAMILY:

The font-family property is used to give styling of the text.It uses specification of values and these values are seperated by commas.The first value will be the desired value, but if that is not available, the browser can use another in the list.

    font-family:Helvitiva, sans-serif;

Background-color:

This property is used to set the background color of the HTML element.

    p{
        background-color:green;
    }

COLOR:

This property is used to set the color of the text.

    p{
        color:blue;
    }

Text-decoration:

This property sets the decoration of the text and it takes values like underline,wavy,overline,inherit.

    p{
        text-decoration : underline;

    }

Display:

This property is used to change the way, HTML elemnet appears on the webpage.
It takes values like block, inline-block, inline etc.

    span{
        display:block;
    }

Margin:

This property is used to give a space between parent element and a child element.
    p{
        margin: 10px;
    }
Actually, margin  is a short form of margin-top,margin-right,margin-bottom and margin-left.

Padding:

This property is used to give space within an element.

    p{
        padding:20px;
    }

Border:

This property is used to give the border around an element.
It is a short form of border-width, border-style and border-color.

    h2{
        border:2px dotted red;
    }

Width:

This property describes how wide the element should be.

    div{
        width:200px;
    }
Advent of Code 2019 Solution Megathread - Day 21: Springdroid Adventure
Tags: adventofcode, challenge, adventofcode2019, spoilers
Published: 2019-12-21 05:58:13

---
title: Advent of Code 2019 Solution Megathread - Day 21: Springdroid Adventure
published: True
description: Bouncing right along.
tags: adventofcode,challenge, adventofcode2019, spoilers
series: Advent of Code 2019 Solutions
cover_image: https://i.imgur.com/YQTHDsh.png
---
Do you know what's better than one kind of interpreter? _Two_ kinds of interpreter

### [Day 21 - The Problem](https://adventofcode.com/2019/day/21)
Well, with our curiosity satisfied, we set off from Pluto. Unfortunately, we've gotten careless and have sustained hull damage. Luckily, we have a hull surveying Springdroid to help us out.

Not so luckily, this springdroid doesn't accept IntCode. It accepts a totally _different_ kind of code based around booleans and registers. For Part 1 we need to use our handy IntCode compiler to accept this code and interpret the results.

Part 2 will have to wait, since I can't afford another night with not enough sleep.

### Ongoing Meta

#### Dev.to List of Leaderboards

* `120635-5c140b9a` - provided by [Linda Thompson](https://dev.to/lindakatcodes) 

 If you were part of [Ryan Palo](https://dev.to/rpalo)'s leaderboard last year, you're still a member of that! 

If you want me to add your leaderboard code to this page, reply to one of these posts and/or send me a DM containing your  code and any theming or notes you’d like me to add. (You can find your private leaderboard code on your "[Private Leaderboard](https://adventofcode.com/2019/leaderboard/private)" page.)

I'll edit in any leaderboards that people want to post, along with any description for the kinds of people you want to have on it. (My leaderboard is being used as my office's leaderboard.) And if I get something wrong, please call me out or message me and I’ll fix it ASAP.

There's no limit to the number of leaderboards you can join, so there's no problem belonging to a "Beginner" *and* a language specific one if you want.
Refactoring my Rails Project
Tags: refactorit, rails, codenewbie, wecoded
Published: 2019-12-21 05:45:58


Choosing a bedtime story can be a nightmare if you care about diversity. My project, [Fierce Stories](http://fierce-stories.herokuapp.com/), allows parents and caregivers to customize bedtime stories to include diverse set of characters and subjects. 

The project was created in five days, on my week 5 of coding. It looks like this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2heeq32epkvsps9g0n25.gif)

To be honest, that week was my first time with HTML and CSS. It's a huge mess — you can see it in my [stylesheet](https://github.com/sylwiavargas/Fierce-Stories/blob/master/app/assets/stylesheets/application.css). I just tried to survive while keeping up with the pace of a bootcamp. I always wanted to come back to it but so far, it never happened.

Now that I am a Software Engineering Coach and my students are themselves struggling with the project week, I decided to refactor my code as well. I'll start tomorrow. Here's my quick overview of stuff I want to correct.

##Code:
- follow [Sandi Metz's rules](https://thoughtbot.com/blog/sandi-metz-rules-for-developers);
- stick to MVC;
- add nested form in the character creation form;
- add guard clauses;
- fix the CSS (both stylesheets and inline);
- introduce semantic html;
- improve the url game:
  - slugs for titles of the stories;
  - new name for the story_book route;
- add profile page;

##UX/UI:
- all the links should be links and buttons should be buttons;
- error handling should be clearer;
- what the hell is up with the fonts?
- colors palette;
- increase accessibility (e.g. option to modify space between lines or font size);
- FB and Twitter should open in a different window;
- the stories should be visible even for the non-logged-out users;
- in the mad-lib, the first letter of a sentence should be capitalized;
- add 404 page;
- adding a gender should not stop/erase the whole form:
  - could we save the data into a cookie?
  - perhaps it could be find or create by?

##Next steps:
- make the page responsive;
- redo CSS in SASS;
- redo front-end in Reach;

If you're curious about the project, you can visit its [page](http://fierce-stories.herokuapp.com/) or the [repo](https://github.com/sylwiavargas/Fierce-Stories/). If you'd like to provide me with feedback on either, I would love that!
Using Cucumber Hooks in Angular
Tags: angular, cucumber, gherkin, protractor
Published: 2019-12-21 05:16:17

I've been using Cucumber and Protractor to write e2e tests for my Angular applications for a few months now. I recently learned about Cucumber's event hooks from someone using Cucumber for their Java integration testing, and I thought they'd help me clean up my tests and add some new functionality beyond what I was already doing with the `Background` step. I didn't have much luck finding documentation on using Cucumber with Javascript or Typescript, so I tried following the Java documentation until I found something that worked. Hours later I noticed that at the top of the Cucumber documentation there was an option to display the documentation for Java, Ruby, Kotlin, or Javascript, but given how difficult it was to find that Javascript documentation, I wanted to document it for myself.

I created a file called `hooks.ts`, but this code could be added to any of your e2e files. Then I just had to pull in the `Before` and `After` hooks.

```typescript
const { Before, After } = require('cucumber');

Before( function(scenario) {
    //do something before every scenario
});

After( function(scenario) {
    //do something after every scenario
});
```
You don't need any additional imports or code, everything will work as soon as these hooks are added to your project.  From there it's very easy to set up hooks for specific tags.

```typescript
const { Before, After } = require('cucumber');

Before( '@example', function(scenario){
    //do something before every @example scenario
});

After( '@example', function(scenario){
    //do something after every @example scenario
});
```

This allow for better control over the state of your application, and more consistent e2e testing. [Cucumber](cucumber.io/docs/cucumber/api#hooks) has even more examples of what you can do with hooks to improve your e2e testing.
Career Update: Back to Engineering!
Tags: career, opensource, news, cloud
Published: 2019-12-21 04:54:07

---
title: Career Update: Back to Engineering!
published: true
description: Last week I took a vacation after wrapping up developer advocacy work at DataStax. It's been an awesome journey, but now, I've changed roles and ...
tags: career, opensource, news, cloud
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cr1gjxgjcpjtxjes2mn1.JPG
---



Since the inception of my software engineering career, decades ago, I have enjoyed creating resilient software systems and building efficient engineering teams. I found that one of the most important aspects affecting the success of any project is how close engineering teams align with user and community needs. This is one of the reasons it’s crucial for engineering to understand users.
 
During the past year and a half I've been deeply focused on distributed systems and advocacy around Apache Cassandra at DataStax. I chose to work at the company for their commitment to building extremely scalable and performant products. Another reason was my respect for people who work at the company, many of whom are active contributors and committers to Apache Cassandra, Spark and other important open-source projects. DataStax maintains deep experience in the area of distributed databases and I am happy to have been able to contribute to improving products and educational materials around Apache Cassandra. Having gotten to work with many engineering teams within DataStax I am excited about our future efforts!

✨ I'm stoked to announce ✨ - this week I have officially joined the DataStax Apollo engineering team as a Principal Solutions Architect. It wasn’t an easy decision to move from developer advocacy back to engineering because of the great advocates team. I am absolutely thrilled to work together with the Cloud Platform, Services, and Operations teams and contribute to engineering practices across the company. I will always be advocating for the community and in my new position I will be able to contribute directly to solving challenging distributed systems problems with a brilliant team.

📘 More about my team - [DataStax Apollo](https://www.datastax.com/constellation/datastax-apollo)! 

📝 If you are interested in collaborating with my team or would be interested in joining, we are hiring engineers! Reach out to me all the regular avenues, [@Adron on Twitter](https://twitter.com/Adron), [LinkedIn](https://www.linkedin.com/in/adron/), or [message me](https://compositecode.blog/contact/).

My Blog! I have a personal blog at [https://compositecode.blog/](https://compositecode.blog/) that you can also subscribe to where I post additional collected material, thoughts, music, meetups, conferences, videos (like [Twitch](https://twitch.tv/adronhall/)), open source projects, database work, data science, and much more.
Microsoft Azure fundamentals
Tags: azure
Published: 2019-12-21 04:49:25

Before going on topic Azure fundamental, we need to understand about cloud computing, to start an application over the network we set up a machine with required hardware and software which is called servers/data centers. To set up a server, we pay a massive amount while we don't need all server resources at all times. Suppose we found an option pay as you go for hardware and software then what option you will choose, a heavy investment or pay as you go service. Definitely, I will choose to pay as you go service instead of maintaining CPUs, Storage, Networking, and Required S/w for an application. In pay as you go service, you rent them for the time that you need them. The cloud provider takes care of maintaining the underlying infrastructure for you. 

Finally, Cloud computing is the delivery of computing services over the Internet using a pay-as-you-go pricing model. Put another way, it's a way to rent computing power and storage from someone else's data center.

<b>Microsoft Azure</b>
There are many providers of cloud computing like AWS by Amazon, Azure by Microsoft, IBM, and Google cloud platform by Google, in this tutorial we will learn about the services of Microsoft Azure cloud computing platform.
Azure is Microsoft's cloud computing platform. Azure is here to help you tackle your toughest business challenges. You bring your requirements, creativity, and favorite software development tools. We bring a massive global infrastructure that's always available for you to build your applications on.

<b>What can I do on Azure?</b>
Azure provides over 100 services that enable you to do everything from running your existing applications on virtual machines to exploring new software paradigms such as intelligent bots and mixed reality.

Many teams start exploring the cloud by moving their existing applications to virtual machines that run in Azure. While migrating your existing apps to virtual machines is a good start, the cloud is more than just "a different place to run your virtual machines".

<b>For example,</b> Azure provides AI and machine-learning services that can naturally communicate with your users through vision, hearing, and speech. It also provides storage solutions that dynamically grow to accommodate massive amounts of data. Azure services enable solutions that are simply not feasible without the power of the cloud.

<a href="https://azure.codefari.com/2018/11/microsoft-azure-fundamentals.html#Benefits%20of%20Azure%20Cloud">Benefits of Azure Cloud</a>
<a href="https://azure.codefari.com/2018/11/microsoft-azure-fundamentals.html">The Azure cloud provides the facility</a>
Using private Golang libs
Tags: go, git, github
Published: 2019-12-21 03:51:38

1 - Configure GIT (~/.gitconfig)
```
[url "ssh://git@github.com/"]
	insteadOf = https://github.com/
```

2 - Add the private repository location in GOPRIVATE env var
```
go env -w GOPRIVATE="github.com/<org>/<project>"
```

2.1 - You can add a whole organization accepting all projects with `*`
```
go env -w GOPRIVATE="github.com/<org>/*"
```
TIL: String.raw
Tags: javascript, todayilearned, webdev
Published: 2019-12-21 03:14:37

---
description: How to avoid escaping the escape character in JavaScript string literals
---

_This article was originally published on [my blog](https://ncjamieson.com/til-string-raw/)._

---

Something that's always annoyed me — because I always seem to mess it up — is having to escape the escape character (`\`) in some JavaScript string literals.

Well, it turns out there's a feature that means having to do this can be avoided entirely.

## Other languages

C# uses the `@` character as a verbatim identifier and when it's applied to a string literal, it works like this:

```csharp
// These strings are equivalent:
const verbatim = @"C:\Windows\system.ini";
const escaped = "C:\\Windows\\system.ini";
```

This is part of the C# language syntax.

## JavaScript

In JavaScript, the mechanism is a little different. It doesn't extend the syntax. Instead, it leverages template literals and their tags.

The `String` object has a static [`raw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) method that is intended to be used as a [template-literal tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates), like this:

```js
// These strings are equivalent:
const raw = String.raw`C:\Windows\system.ini`;
const escaped = "C:\\Windows\\system.ini";
```

Having to put backslash-delimited Windows paths in JavaScript literals isn't something that I've ever had to do.

However, I often have to escape escape characters when I'm dynamically creating a regular expression using the `RegExp` constructor. And in these situations, not having to escape the escape characters makes things much clearer:

```js
const regExp = new RegExp(String.raw`(\b|_)${word}(\b|_)`));
```

## ES2018

It's worth noting that there are differences in how these 'raw' template literals are handled in [different JavaScript runtimes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates_and_escape_sequences).

In ES2016, this template literal will effect an error, because `\u` is interpreted as a Unicode escape sequence:

```js
const directory = String.raw`C:\images\unsplash`;
```

In ES2018, this behaviour was changed and — as long as a tag function is applied — no error will be effected.

## More template-literal tags

If template-literal tags are something you've not encountered before, you might also want to check out the [`common-tags`](https://github.com/declandewet/common-tags) package. It has a whole bunch of extremely useful tag functions.

---

_Title photo by Icons8 Team on Unsplash._
An ode to the brilliant minds who are working on taking humanity to new heights
Tags: showdev, webdev, weeklyretro, discuss
Published: 2019-12-21 02:23:44

India sent a lander this September to the lunar south pole. One of the most difficult places to land on the lunar surface. Many countries have tried to achieve this feat and failed honorably. India also showed valiant effort in achieving this feat but the lander was just 1.5 mi / 2.7 km from the lunar surface and lost ground communications. I have been an ardent space exploration nerd and was very much disheartened when this happened. So, I decided to pay homage to the brilliant minds at the [Indian Space Research Organization (ISRO)](https://www.isro.gov.in) who worked on the [Chandrayaan-2](https://twitter.com/hashtag/chandrayaan2?src=hashtag_click) mission. Though the mission lost contact it won many many hearts.

#Space is HARD !!!!

I made this short animation completely using [React](https://reactjs.org), [Three JS](https://threejs.org) and [react-three-fiber](https://github.com/react-spring/react-three-fiber) as my form of tribute to all the people working on such kind of missions.

{% youtube IYai-h_jMWE %}

{% twitter 1207054446448054272 %}

{% github manan30/chandrayaan-2 no-readme %}

Feel free to leave your comments and thoughts in the discussion section below.

You can also find me on [Twitter](https://twitter.com/Manan_30) and [Instagram](https://www.instagram.com/manan__joshi/).
Using Live Reload in Go
Tags: go
Published: 2019-12-21 02:19:19

---
title: Using Live Reload in Go
published: true
description: 
tags: go
cover_image: https://images.pexels.com/photos/2255595/pexels-photo-2255595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
---

When we're developing APIs in Go or any other language it's important to have tools that help us to automate certain tasks like **Live Reload**, I'd had been using [realize](https://github.com/oxequa/realize) to doing it, but it seems to have some [issues](https://github.com/oxequa/realize/issues/229) when working with Go modules, I tried some different solutions and they didn't work for me 😭.

![Spider Sad](https://media.giphy.com/media/KDRv3QggAjyo/giphy.gif)

Luckily I found a very handy package that can helps us to achieve this task adn it's called [modd](https://github.com/cortesi/modd), let's give it a try and see how it works:

### Create the basic project structure

```bash
$ mkdir live-reload && cd live-reload && mkdir cmd
$ go mod init
$ touch cmd/main.go
```

### Open main.go file and type the following

```go
package main

import (
	"fmt"
	"log"
	"net/http"
)

func main() {

	mux := http.NewServeMux()

	mux.HandleFunc("/", homeHandler)
	mux.HandleFunc("/contact", contactHandler)

	log.Println(fmt.Sprintf("Server running on http://localhost%s 🐹", ":4000"))
	err := http.ListenAndServe(":4000", mux)
	if err != nil {
		log.Fatalf("could not run the server %v", err)
		return
	}
}

func homeHandler(w http.ResponseWriter, r *http.Request) {
	w.Write([]byte("Hello from home handler"))
}

func contactHandler(w http.ResponseWriter, r *http.Request) {
	w.Write([]byte("Hello from contact handler"))
}

```

### Installing modd package

```bash
$ brew install modd
```

### Create modd config file

```bash
# run _only_ changed tests
**/*.go {
	prep: go test @dirmods
}

# run and rebuild the app
# make sure you type your app name adter -o flag and daemon command
**/*.go !**/*_test.go {
	prep: go build -o live-reload ./cmd
	daemon +sigterm: ./live-reload
}

```

Then execute `modd` command inside root project:

```bash
$ modd
```

You should see something like this in your terminal:

![modd running](https://thepracticaldev.s3.amazonaws.com/i/4cqd20ziipb6yjk71fmz.png)

Go to your `main.go` file and update `homeHandler`

```go
//... other code
func homeHandler(w http.ResponseWriter, r *http.Request) {
	w.Write([]byte("Hello from home handler changed and live reload 😎"))
}
//... rest of the code
```

After that `modd` is going to re-compile your server and now you can visit `http://localhost:4000` and see the updated version, your terminal should look like so:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9rqgk21nej4p22vxgqz5.png)

### Conclusion

Hope it helps, happy coding 👨🏽‍💻
How to add cron job in Python
Tags: python
Published: 2019-12-21 02:03:03

---
title: How to add cron job in Python
published: true
description: 
tags: python
---

While I was searching for some good ideas to run cron job in Python and eventually I've found **APScheduler**.

APScheduler has three built-in scheduling systems you can use:

* Cron-style scheduling (with optional start/end times)
* Interval-based execution (runs jobs on even intervals, with optional start/end times)
* One-off delayed execution (runs jobs once, on a set date/time)

This time, I tried to get via API every 10 minutes. So APScheduler definitely holds what I want to realize. In addition to this, it's quite useful because there're some methods which start the scheduler for each environment and each framework.

## Install APScheduler

```
$ pip install apscheduler
```

## app/schedule.py
```python
def hello_world():
  print("Hello World!")

sched = BackgroundScheduler(standalone=True,coalesce=True)
sched.add_job(hello_world, 'interval', minutes=1)
sched.start()
```
Print "Hello World!" every 10 minutes.

## app/__init__.py
```python
import app.schedule
```
How would you debug CSS performance? ⏱
Tags: help, javascript, css, gamedev
Published: 2019-12-21 01:35:28

---
title: How would you debug CSS performance? ⏱
published: true
description: Emoji Island is a bit slow on my machine, would love some help debugging! 🏝
tags: help, javascript, css, gamedev
series: Emoji Island
---

Hello all!

I'm having some performance issues with [Emoji Island](https://🏝.fm), and I could use some help debugging! How do you debug CSS animation performance? Here's what emoji island looks like on my machine. You can really notice the low frame rate in the new ocean wave animation! 🌊

{%vimeo 380846217 %}

And here's what it looks like on your machine (this is a current version always, so it may not look the same at the time you're reading this):

{%codesandbox ffjnh %}

I'd love some debugging advice, or a pointer to a good resource! How do you tell if its the animations causing the slow performance? How do you debug which animation is slowing things down? How do you tell if the real culprit is JS blocking rendering? All advice appreciated!

-- Ryan