teleren/devto huggingface dataset:
Why you should give Sim City Skylines a chance
Tags: design, games
Published: 2022-10-04 22:21:17

Design is everywhere, if you are a front end dev like me, design constantly follows you. I mean I pick new bottles of wine at the store based on their design. Everything around you is designed mostly to please you in one way or the other.

For those of you who have already joined the sim city community, thats great! For those of you who have never played or are not into video games, but are into design, then trust me you need to give it a chance. And trust me its nothing like the Sims Franchise, so do not worry about assisting with sims daily choices, everyone is programmed to work, shop, and go home. 

The base game is challenging, you have to design a city or multiple cities, and create an infrastructure all while dealing with traffic, pollution, noise complaints, fires, crime, land value, etc.. Since giving the game another go, I now drive around my city and notice how different roads are made: main roads, side roads, bypasses, interchanges, 3 lane roads, 6 lane roads, roads with parking on the side, bus only lanes, traffic will make a ton of sense once you play this game and watch sims struggle from a birds eye view. As well as how the city is planned as in how the grids are formed and how certain districts are planned to become touristy, or simply just an inner-city neighborhood. Google an urban design or roadmap of a city near you (bigger cities are better), you can see why it takes 30-40 min to reach each destination around a city like San Francisco for example, It all comes down to the design and layout of roads. 

![Image from https://generalplan.sfplanning.org/I5_Urban_Design.htm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/734m7zhqh4vkseya35rv.jpeg) 

Compare San Diego to San Francisco traffic wise, both are desirable cities, but San Diegos design of freeways within their city create far less traffic than San Francisco's reliance on city roads with stoplights everywhere. 

Now before I go too deep in to the answer of the question: "how does traffic even happen?", let's get back to my persuasion of getting you to play Sim City. You get to have every ounce of control of how your city looks and runs. The mod community is large, you can stray away from the vanilla assets of the game (basic assets that come with the original game) and bring in buildings, trees, roads, etc., that other people have made to make the game better. You get to design districts, making them dedicated to industry, business, offices, parks, residential or a mix of all. Design parks, add benches, add water fountains, edit terrain, pretty much everything is editable and it all matters for your economic output.

To highlight a smaller creator I have recently landed upon, check out Few Candy on Youtube: https://www.youtube.com/c/FewCandy/videos

The game will certainly give you a break from whatever you are dealing with, throw on some calming music, drink some tea, open your window, and create a city at your full discretion. Much like the developer community, the sim city community is very strong and are very prevalent on Youtube and Reddit.
Paracetamol.js💊| #185: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-10-04 22:08:13

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
function Student(nombre, apellido, edad){
  this.nombre = nombre;
  this.apellido = apellido;
  this.edad = edad;
}

Student.prototype.getNombreCompleto = function(){
  console.log(this.nombre + " " + this.apellido);
}

const juanito = new Student("Juan", "Ramirez", 26);
console.log(juanito.getNombreCompleto()); //??
```

A. `undefined undefined`
B. `null null`
C. `Juan Ramirez`
D. `SyntaxError Student.propotype.getNombreCompleto is not a function`

Respuesta en el primer comentario.

---

Respuesta:
C. `Juan Ramirez`

Javascript es un lenguaje orientado a prototipos, desde su creación en 1995 fue concebido de esta manera, entonces podemos usar funciones como clases para abstraer la lógica del programa.

Quizá lo mas curioso de esta sintaxis es la creación de métodos usando la palabra reservada `prototype` que añade el método `getNombreCompleto` a todas las instancias creadas con `Student`.

La instanciación de objetos se hace como si se tratase de clases de toda vida. De hecho la sintaxis de clases agregada en ES6 al lenguaje es solo _sugar syntax_ ya que por dentro todo se hace con prototipos.
HTTP Request Methods
Published: 2022-10-04 21:45:51

We have various HTTP Request Methods available which indicate the desired action which is performed for a resource. Let us go through some of them here - 

1) **GET** -
HTTP GET Method, as the name suggests, requests a representation of a resource from the server. GET Method should only get the data. GET returns a representation in JSON format and an HTTP response status code of 200 (OK). In case of an error, it most often returns a 404 (NOT FOUND) or 400 (BAD REQUEST).

2) **POST** - 
HTTP POST Method is often used to create new resources. On successful creation, HTTP response code 201 is returned.

3) **PUT** - 
HTTP PUT Method replaces the target resource with the request payload.

4) **DELETE** - 
HTTP DELETE Method deletes a resource which is identified by filters or ID. On successful deletion, the HTTP response status code 204 (No Content) is returned.

5) **PATCH** - 
HTTP PATCH Method is used so that we can modify the resources. This method is used to do some partial modifications to a specified resource.

We can classify the HTTP methods on the basis of idempotent and safe properties.

The safe methods are the HTTP methods that do not modify resources. For example,if we use the GET or HEAD methods on a resource URL, they never change the resource.

An HTTP method is called as an idempotent method if it can be called many times without different outcomes. It doesn't matter if we call the method one or hundred times over, the result should be the same.
ActionText: Modify the rendering of ActiveStorage attachments
Tags: actiontext, rails, ruby, webdev
Published: 2022-10-04 21:39:36

If you have not already, make sure to run both the ActiveStorage and ActionText installers respectively.

The ActiveStorage generator should create a file that looks like this:

`app/views/active_storage/blobs/_blob.html.erb`

```erb
<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% else %>
      <span class="attachment__name"><%= blob.filename %></span>
      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
    <% end %>
  </figcaption>
</figure>
```

You can modify this file however you see fit. For example, you may want to provide custom overrides onto these dimensions for things like retina rendering or other optimizations.

The reason I took the time to document this is because I noticed when I turned on file annotations for rendering partials, this is what showed up:

```html
<!-- BEGIN /Users/konnorrogers/.asdf/installs/ruby/3.1.2/lib/ruby/gems/3.1.0/gems/actiontext-7.0.4/app/views/action_text/contents/_content.html.erb -->
```

Other use cases include using something like tailwind and adjusting the produced markup!

I'll be documenting more undocumented things from ActionText as I go along and hopefully will upstream them into the official Rails guides!
More new tech skills - Docker up to the plate. Pt 3 - with AWS ECS
Tags: docker, aws, architecture, devjournal
Published: 2022-10-04 21:33:27

Welcome, thanks for coming back!

Well, this was an interesting exercise. I'll be honest, I only mostly understood what I was doing in this AWS Workshop. I really try to understand what's happening & how/why & not just push buttons when I do hands-on lessons, but sometimes I just don't get it 100%
{% embed https://catalog.us-east-1.prod.workshops.aws/workshops/8c9036a7-7564-434c-b558-3588754e21f5/en-US %}

The other thing that made it interesting were the mistakes in it. I found 2, there is a problem with the NAT Gateway/Internet GW setup. The CloudFormation stack sets them both up, but I had to redo the route tables to use the IGW instead of the NAT GW to get the website to work. It's also completely possible I missed some bit of config I needed to do to make the NATGW work.
The other is a problem with the whole thing not building the appropriate EC2 instances for the 'Cats' half of the website. I could have missed something though. I went back over the instructions twice more to see if I did, to no effect. I didn't have time to dig into that one to figure out what the exact problem was though.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi9omv3358apy4d72604.gif)

I should go back and redo this workshop, not only to figure out the problem, but to make sure I fully understand everything that is going on. I had to tear it all down due to time constraints so I wouldn't get charged for all the running objects in my free tier account. It would be nice if they had AWS Sandboxes to run these in - if you're at an AWS event, they do - but outside of that you use your own account.

This is the first AWS workshop I've done (outside of an event), & overall it's a good experience. Although they have this listed as a 300 level workshop, it's not so complicated that having only basic knowledge or experience with Docker is a hinderance. I think they mark it as 300 due to the extended logging & setup with Firelens. That was completely new to me (not surprising, who can keep up...) but per AWS "You can use FireLens for Amazon ECS to use task definition parameters to route logs to an AWS service or AWS Partner Network (APN) destination for log storage and analytics." So it's a seemingly dedicated log utility for ECS.

The one thing that is, irritating, is that for ECS, the intro level workshop (Amazon ECS Basic Workshop) is in Japanese only. Since I only know how to count to 10 in Japanese & a few other words, & I can't read Kanji at all, probably not gonna get too far with that one. Hopefully, AWS adds an English version of it.

Thanks for reading. I think there will be 1 more blog in this series, but I have to sit down & do some work first. Gonna give Docker-Compose a spin. So stay tuned to see how that works out.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owkfxa6qsmq0vftf7f54.gif)
Day 629 : How I Feel
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-04 21:30:31

_liner notes_:
- Professional : Had a couple of meetings. One was with my manager and I got a clear list of things to do in the upcoming weeks. Had another one with a coworker to go over a project that we are working on. Rest of the day, worked on adding some functionalities to some Web Components I've been working on. Also worked on creating a demo application. The library I'm using has a very convoluted starter project, so I'm trying to create a barebones demo so that I can figure out what is and isn't part of the library.

- Personal : Last night, I did some research and design for a new side project. I also watched an episode of "Atlanta", "Rick and Morty", and a bunch of episodes to almost catch up with "Kevin Can F*CK Himself".

![Aerial view of pine tree forest, river and mountains of Banff, AB, CAN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mblttu7d25h5ahe9zyg4.png)

Going to finish up watching "Kevin Can F*CK Himeself". I want to start writing some code for my side project also. If not that, maybe go through tracks for this week's radio show. We'll see how I feel.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube y1R9ZyZ1H5w %}
The Easy Way To Do Basic CSS Animations
Tags: webdev, html, css, programming
Published: 2022-10-04 20:54:16

Do animations run automatically once the page loads? YES.

**Animation** in CSS sounds like a cool thing that manages to be complex at the same time, but an animation is just a change of a CSS property(e.g `height`) from one value to another. Simple.

#Defining Animations

To define a CSS animation, you must specify some keyframes. A keyframe just contains the styles the element you want to animate will have at different times.
You also use keyframes to define the name of an animation. Look at the code snippet below.

```
@keyframes demo-animation {
  from {
    height: 24px;
  }
  to {
    height: 48px;
  }
}
```

##Code breakdown

The code snippet above will animate the height of any element from 24px to 48px and the animation's name will be _demo-animation_
In other words, when the animation starts, the height of the element you animate will be 24px and when the animation ends the height will be 48px.

#Applying an Animation To an Element

If we want to use the animation we defined on an element with an id _animated-element_, we simply set the element's `animation-name` property to `demo-animation` (the name of the animation that we defined with keyframes).
Look at the code snippet below.

```
#animated-element {
  animation-name: demo-animation;
  animation-duration: 2s;
}
```

##Code breakdown

`animation-name` is a CSS property whose value must be a CSS animation that has been defined somewhere with keyframes

`demo-animation` is the name of the animation. That's what we are passing to `animation-name`

`animation-duration` is another CSS property that dictates how long the animation will last. Setting it to 2s means that when the animation starts, the height of the element will be 24px and after two seconds, the height of the element will be 48px.


There are other properties you can assign to an element that affect how the animation you have defined will be run. They include:

1. `animation-delay` - the amount of time to wait before the animation starts running.

2. `animation-iteration-count` - the number of times the animation should run.

3. `animation-direction` - whether the animation should play from start-to-end or from end-to-start. Its values are `normal`(default), `reverse`, `alternate` and `alternate-reverse`.

You can look the other properties up on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)


> Note that animation properties(CSS properties that start with "animation-") are not to be used inside keyframes. They are to be used inside the style ruleset of the HTML element or elements you want to animate.
Hacktoberfest First PL/MRG
Tags: hacktoberfest, javascript, html, opensource
Published: 2022-10-04 20:26:36

##Overview
For my first Hacktoberfest Pull/Merge, I had to go looking around for issues that have not been commented on when I stumbled upon a repository that caught my eye. It was a simple note taking website called [Noter JS](https://github.com/ShravaniAK/noter-js). What it did was take a user input and then transferred it into a note that is displayed. At the time this note could only be deleted.

##Before Starting
What did catch my eye, was that this small site had barely anything going on for it. Just a simple white screen, and a navigation bar with just the home button as well as a search bar.

They were looking for people to make the navbar look better and add a bit of flare to it. But someone had already taken that request. But after looking at some other issues I found one saying that [the UI itself could be made to look better](https://github.com/ShravaniAK/noter-js/issues/2). That's all it said, nothing else.

##While Working
I asked to be assigned the issue. Low and behold I was assigned to make the new UI. So, within the HTML I used `<style></style>` to implement a CSS structure inside. I gave the navigation bar a new makeover along with making the background a looped animated gradient color change. An extra touch was when someone were to press a button of sorts, it would have a ripple animation.
https://github.com/ShravaniAK/noter-js/pull/18

## Finishing
It was refreshing working on a completely different kind of repository, and with the objective so different. Considering the limited uses the web app has, it was an interesting experience to say the least.

░░░░░░░░░░░░▄▄░░░░░░░░░
░░░░░░░░░░░█░░█░░░░░░░░
░░░░░░░░░░░█░░█░░░░░░░░
░░░░░░░░░░█░░░█░░░░░░░░
░░░░░░░░░█░░░░█░░░░░░░░
███████▄▄█░░░░░██████▄░
▓▓▓▓▓▓█░░░░░░░░░░░░░░█░
▓▓▓▓▓▓█░░░░░░░░░░░░░░█░
▓▓▓▓▓▓█░░░░░░░░░░░░░░█░
▓▓▓▓▓▓█░░░░░░░░░░░░░░█░
▓▓▓▓▓▓█░░░░░░░░░░░░░░█░
▓▓▓▓▓▓█████░░░░░░░░░█░░
██████▀░░░░▀▀██████▀░░░
Comunidad de programadores discord mexicodev
Tags: comunidad, community, progaramacion
Published: 2022-10-04 20:24:52

{% embed https://www.youtube.com/watch?v=BlYwlau4G30 %}

Somos una comunidad de personas interesadas en tecnología donde charlamos sobre programación y contribuimos al planeta.

Enlaces:

https://discord.gg/mexicodev
https://mexicodev.org
Install Python Packages with requirements.txt
Tags: python, beginners
Published: 2022-10-04 19:57:05

Install Python packages with requirements.txt

```
pip install -r requirements.txt
```

Output Python packages to requirements.txt

```
pip freeze > requirements.txt
```

---

## reference

- [www.codespeedy.com](https://www.codespeedy.com/how-to-install-python-packages-with-requirements-txt/)

- [stackoverflow.com](https://stackoverflow.com/questions/31684375/automatically-create-requirements-txt)
LegionTD2 SDK in Go
Tags: games, gamedev, sdk, showdev
Published: 2022-10-04 19:41:10

Recently I've been fascinated with a game called [LegionTD2](https://beta.legiontd2.com/), this is a newly created game that I've been playing
as a map ever since Warcraft 3, it is tactical multiplayer tower-defense(td). The game is based on predictions and timings, if you play your cards right (or in the context of the game: sends/workers/units) you will prevail over the enemy team. Read more about it [here](https://store.steampowered.com/app/469600/Legion_TD_2__Multiplayer_Tower_Defense/).


# LegionTD SDK

I've doing stuff in Go in my free time (mainly code challenges) for a while now and I've decided that I should spend some time creating something useful for myself such as creating tools that would help me get better at the game. The game has an API which resides [here](https://swagger.legiontd2.com/), there are couple of endpoints that are useful for helpful statistics such as the `player/*` and `games/*` endpoints. I knew that I will be querying the API a lot for 
fetching info about players and games, so I've decided to create an SDK for that so I can ease my work a little bit. And after couple of weeks free time work I've created the [LegionTD 2 SDK for Go](https://github.com/syrull/ltdsdk).


# Functionality

## Analyze games

While my ultimate goal is to create set of analytics tools for Legion, I've created the most basic example of how that might happen using SQLite3 and Go.

Under the [examples/analyze_games/](https://github.com/syrull/ltdsdk/tree/main/examples/analyze_games) I've created an example that fetches about 3k games and put them into a SQLite database, after that you are able to analyze the data using SQL. I've created a simple query that gets the percentage of games 
that are being finished at waves 15, 13 and 10.

In my case here are the results, games finished at wave

| Wave 15 |  Wave 13 | Wave 10
|---|---|---|
| 20%	| 14% | 4% |

## Exporting the games

You can derive that from the previous example but I've created a dedicated examples for both exporting to JSON and exporting to SQL.

- [Export games to SQL](https://github.com/syrull/ltdsdk/tree/main/examples/export_games_to_sql)
- [Export games to JSON](https://github.com/syrull/ltdsdk/blob/main/examples/export_games_to_json/main.go)

## Fetching all of the Units

Since that the game hasn't got a dedicated route for fetching all the units I've created a simple example that resides in the repository under [examples/get_all_units](https://github.com/syrull/ltdsdk/tree/main/examples/get_all_units). The important thing here is that I've exported all the units into a single txt file and then I just spawn requests for each unit. 

# Conclusion

I will be updating the SDK as I am p
'Lists' in HTML
Tags: html, webdev
Published: 2022-10-04 19:39:27

While building a web page, there will be situations when we have to place a group of items next to each other. Just like conventional writing, a web page of text content may include paragraphs, media and lists. HTML has provisions for creating such lists with the aid of some elements. Firstly let's look at the various kinds of lists we could have.

Lists in HTML are of 3 types:

1. Unordered List
2. Ordered List
3. Description List

**Unordered List**
An Unordered List usually consists of related items that don't necessarily have to be in any particular order. An example can be a list of groceries or a list of travel essentials. Unordered lists in HTML are created using the _ul_ tag. And each item of the list is created using the _li_ tag. The list items by default take a bullet style.


![Creating Unordered Lists in HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2z9w23geimir48jh3dr.png)


![Unordered Lists Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpz5iyjgtwvwuhdv06jr.png)

**Ordered List**
An Ordered List usually consists of items that have to be in some particular order or hierarchy. An example would be a list of to do items or a recipe. Ordered lists in HTML are created using the _ol_ tag. And same as unordered list, each item of the ordered list is also created using the _li_ tag. The items in an ordered list by default are marked using numbers in increasing order.


![Creating Ordered Lists in HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m15pquwxvphwogdyzjkm.png)


![Ordered Lists Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l26whg8tp9hp3d6zgyxl.png)

**Description List**
The description list is a unique type of list which is used to display a list of terms followed by the description of those terms. In a Description List, the tag that denotes the list is _dl_. The name/term is created using _dt_ tag and the description for the term is created using the _dd_ tag.


![Creating Description Lists in HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/773jj3ndalgpzxgon6wy.png)


![Description Lists Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83c3h3aym6kqxrdseoks.png)