teleren/devto huggingface dataset:
Reasons why I started to code in Elixir
Tags: elixir, functional
Published: 2020-07-26 16:44:47

One of my new year's resolution was to pick up a new coding language and at least attain a beginners level in it.I had my options open and languages like Go,elixir and R came in mind.I had my doubts as to which language to go with,as I wanted to choose something that would help expand my tech stack as well as turn out to be really fun.I went with Elixir.

As many of you would know,Elixir is a functional language that can help us to develop scalable applications.It leverages the powerful Erlang VM in order to achieve this.

Given below are 3 reasons I could come up with, that convinced me to start coding in Elixir.

#### Easy to understand 

One of the main reasons I chose elixir was that it is really easy to understand.It has easy syntax and the compiler offered is good too.

#### Functional

If you want to adopt functional programming Elixir would be a good option.It has most of the principles of functional programming in it.

#### Scalability

This is the reason why coders love elixir.The Erlang VM gives it scalability,the very edge it deserves.

There will be many other languages that could really compete with Elixir.But learning a new language is always fun.So Happy Coding.
Fond Memories or Surveillance Capitalism
Tags: privacy, machinelearning, security
Published: 2020-07-26 16:40:47

The fitness center I used to go to had started a new routine. The _cool_ thing introduced was to take a picture with the entire group at the end of every session on a daily basis. This picture would serve as a memory to the people who have attended the session and would only appear in the individual's app. The individual is free to share this memory on any social networking site though.

Now, I am not a person who particularly likes to be clicked, but something else bothered me here.I already have an app installed on my cell phone where the details of the sessions I take exists, but the thought of my daily activities being monitored through pictures made me a bit uneasy and also made me dig a little deeper into why exactly we need to be aware of what we are agreeing to and what are the repercussions of the petabytes of data we are producing unknowingly every minute, every second.

Time for some deep thinking now. Heard of the saying 'a picture is worth a thousand words'? Well, its true. Let us imagine a picture has been posted online. While a picture for itself already has a song to sing (details like people, culture and to top it up a notch, geo-tags), what can a bunch of pictures narrate? Can they provide insights or can they be used to train models, or both. Well...pictures throw a colorful tale which the usual data dumps can't. They convey feelings and emotions.This makes them extremely important in the realms of AI-ML world. And what happens when they end up in the wrong hands? Precisely, _it is full of dark and terror_.

"The goal is to automate us", after skimming through number of articles online, this one liner was my personal favorite and at the same time gave me the chills. Many of us are immune to the fact that whatever goes online stays online forever,(unless of course you use a open source decentralized social network) or worse , ends up being a dataset for a training model. We do not realize that the content we upload, like and share have the power to alter or inculcate new habits, likes and dislikes, traits etc. Most of the time we create data leading to insights without even knowing it.

Maybe I am being over critical on a mere photograph but we can't deny the fact that data is power these days, and with great power comes great responsibility. Let us be responsible of the content we share and the data we create. Let us be aware if our data can be used ever again. Knowing about GDPR, using anti-tracking browsers and search engines(Mozilla Firefox, DuckDuckGo etc) can definitely be a start in this journey. Privacy, at least Data Privacy, is not a privilege. It is a right.
A reintroduction to Javascript
Tags: javascript
Published: 2020-07-26 16:39:45

Reading most of the reintroduction I didn't found anything new up until, control structures, most of the things there: `Numbers, `Strings`, `Booleans` and `Symbols`. However I found something very interesting and for me in the introduction section, about how JS is a misunderstood language. 

~~~js
Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world. The most common host environment is the browser, but JavaScript interpreters can also be found in a huge list of other places
~~~

This particular piece, made me understand why Javascript is such a popular programming language and is a powerful tool for programming in general.

**Control Structures**
The switch statement can be used for multiple branches based on a number or string:

~~~js
switch (action) {
  case 'draw':
    drawIt();
    break;
  case 'eat':
    eatIt();
    break;
  default:
    doNothing();
}
~~~

`Switch` is essentially like `if` , `else` however it has a `break` keyword, a statement to 'break out' of the switch statement and continue to the next block of code. Without the break statement additional blocks may be executed if the evaluation matches the case value.

**Objects**
Starting in ECMAScript 2015, object keys can be defined by the variable using bracket notation upon being created.
~~~js {[phoneType]: 12345} is possible instead of just var userPhone = {}; userPhone[phoneType] = 12345.
~~~

**Arrays**
Sometimes `array.length` would not equate to the number of elements inside the `array`
~~~js
var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length; // 101
~~~
If you do something like that, you will have 4 elements in the array, however the `array.length` will be 101

**Functions**
Javascript is very liberal with the use and declaration of the function overall. You don't have to pass parameters to the function upon declaration, you can pass several parameters and then pass a different number of arguments, upon invoking, and still JS will let you compile the code. So far as I know it is strictly prohibited in most of the languages.

`Object.prototype` is a little bit hard to wrap your head around this concept, however, as far as I understand a prototype is an instance of the parental method and whenever you are accessing the attributes of the prototype, the prototype is having most of the features and methods that we want the child to inherit.

You can use nested function to make your code cleaner to avoid congestion. You can also store your variables for the nested function inside the parental function, right above, that will make sure that you are not making excessive global functions.
CS193p Notes - Lecture 11: Picker
Tags: ios, swift
Published: 2020-07-26 16:39:44

- `var description: String { ... }` can be used to define what the variable is going to show when printed. Struct needs to also function like `CustomStringConvertible` to this work

[24:16](https://youtu.be/fCfC6m7XUew?t=1456)

```swift
struct FilterFlights: View {
  @Binding var flightSearch: FlightSearch
  @Binding var isPresented: Bool

  // applies filters only when leaving the sheet
  @State private var draft: FlightSearch

  init(flightSearch: Binding<FlightSearch>, isPresented: Binding<Bool>) {
    _flightSearch = flightSearch
    _isPresented = isPresented
    _draft = State(wrappedValue: flightSearch.wrappedValue)
  }
...
```

- `Picker(...)` takes 3 parameters: label, selection (binding to the thing where selected value is saved), and the views (you provide a bunch of views to choose from
    - Add `.tag(...)` to the view that's clicked because this line will then update second argument to be what value is inside tag
    - Looks much better when `Picker` is put inside `Form`
        - `Form` needs to be inside `NavigationView` to make it clickable

[@RealLankinen](https://twitter.com/reallankinen)

- [Notes 1](https://dev.to/lankinen/cs193p-notes-lecture-1-course-logistics-and-introduction-to-swiftui-44ap)
- [Notes 2](https://dev.to/lankinen/cs193p-notes-lecture-2-mvvm-and-the-swift-type-system-406f)
- [Notes 3](https://dev.to/lankinen/cs193p-notes-lecture-3-reactive-ui-protocols-layout-5g8a)
- [Notes 4](https://dev.to/lankinen/cs193p-notes-lecture-4-grid-enum-optionals-4noj)
- [Notes 5](https://dev.to/lankinen/cs193p-notes-lecture-5-viewbuilder-shape-viewmodifier-fgh)
- [Notes 6](https://dev.to/lankinen/cs193p-notes-lecture-6-animation-1a8f)
- [Notes 7](https://dev.to/lankinen/cs193p-notes-lecture-7-multithreading-emojiart-2ak3)
- [Notes 8](https://dev.to/lankinen/cs193p-notes-lecture-8-gestures-json-1f3m)
- [Notes 9](https://dev.to/lankinen/cs193p-notes-lecture-9-data-flow-26e)
- [Notes 10](https://dev.to/lankinen/cs193p-notes-lecture-10-navigation-textfield-3ei9)
- [**Notes 11**](https://dev.to/lankinen/cs193p-notes-lecture-11-picker-2hgh)
- [Notes 12](https://dev.to/lankinen/cs193p-notes-lecture-12-core-data-eci)
- [Notes 13](https://dev.to/lankinen/cs193p-notes-lecture-13-persistence-2jeh)
- [Notes 14](https://dev.to/lankinen/cs193p-notes-lecture-14-uikit-integration-1p7m)

[Originally published here](https://www.notion.so/lankinen/CS193p-2020-iOS-development-course-from-Stanford-81c094238e9d471bbf059ea8d83b3e15)
CS193p Notes - Lecture 10: Navigation + TextField
Tags: ios, swift
Published: 2020-07-26 16:39:20

- `popover(...)`
- ViewModel is passed to subviews using `@EnvironmentObject`
    - Add var with `@EnvironmentObject` property wrapper to the sub view and give `@ObservedObject` ViewModel to it by adding `.environmentObject(self.viewModel)`

Navigate to another view by clicking an item

```swift
NavigationView {
  List {
    ForEach(store.documents) { document in 
      NavigationLink(destination: EmojiArtDocumentView(document: document)) {
        Text(self.store.name(for: document))
      }
    }
  }
}
```

Delete items from list

```swift
List {
  ForEach(...) {
    ...
  }
  .onDelete { indexSet in
    indexSet.map { self.store.documents[$0] }.forEach { document in
      self.store.removeDocument(document)
    }
  }
}
.navigationBarItems(
  trailing: EditButton()
)
```

[@RealLankinen](https://twitter.com/reallankinen)

- [Notes 1](https://dev.to/lankinen/cs193p-notes-lecture-1-course-logistics-and-introduction-to-swiftui-44ap)
- [Notes 2](https://dev.to/lankinen/cs193p-notes-lecture-2-mvvm-and-the-swift-type-system-406f)
- [Notes 3](https://dev.to/lankinen/cs193p-notes-lecture-3-reactive-ui-protocols-layout-5g8a)
- [Notes 4](https://dev.to/lankinen/cs193p-notes-lecture-4-grid-enum-optionals-4noj)
- [Notes 5](https://dev.to/lankinen/cs193p-notes-lecture-5-viewbuilder-shape-viewmodifier-fgh)
- [Notes 6](https://dev.to/lankinen/cs193p-notes-lecture-6-animation-1a8f)
- [Notes 7](https://dev.to/lankinen/cs193p-notes-lecture-7-multithreading-emojiart-2ak3)
- [Notes 8](https://dev.to/lankinen/cs193p-notes-lecture-8-gestures-json-1f3m)
- [Notes 9](https://dev.to/lankinen/cs193p-notes-lecture-9-data-flow-26e)
- [**Notes 10**](https://dev.to/lankinen/cs193p-notes-lecture-10-navigation-textfield-3ei9)
- [Notes 11](https://dev.to/lankinen/cs193p-notes-lecture-11-picker-2hgh)
- [Notes 12](https://dev.to/lankinen/cs193p-notes-lecture-12-core-data-eci)
- [Notes 13](https://dev.to/lankinen/cs193p-notes-lecture-13-persistence-2jeh)
- [Notes 14](https://dev.to/lankinen/cs193p-notes-lecture-14-uikit-integration-1p7m)

[Originally published here](https://www.notion.so/lankinen/CS193p-2020-iOS-development-course-from-Stanford-81c094238e9d471bbf059ea8d83b3e15)
Linking Route 53 to Elastic Beanstalk Environment
Published: 2020-07-26 16:36:17

In Route 53, go to `Hosted Zones`.

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

Click `Create record`.

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

Click whichever routing policy you need. I chose `Simple Routing`.

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

Click `Define Simple Record`.

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

Create your record name, and choose `Alias to Elastic Beanstalk environment` as your endpoint. Finally, select your region, and resource, and click `Define simple record`.

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

That's it!
Creating a Dark and Light Mode UI Theme Smooth Transition | Pure HTML, CSS and JavaScript (video tutorial)
Tags: html, css, javascript, codenewbie
Published: 2020-07-26 16:35:45

The dark and light UI themes toggle is a feature for modern apps and websites.

In the following video tutorial we will create the dark and light UI theme smooth transition using pure HTML, CSS and JavaScript.

{% youtube OoARU-ZmseA %}
Accessing Elastic Beanstalk MySQL Database Inside EC2 Using SSH Connection
Tags: aws, elasticbeanstalk, rds, ec2
Published: 2020-07-26 16:19:54

Prerequisites

- The EC2 instance and the RDS database have already been set up.
- The EC2 instance and the RDS database belong to the same security group and have the same VPC ID.
- An app has already been deployed on Elastic Beanstalk.
- SSH connection to the EC2 instance is enabled.

After accessing the EC2 instance via SSH, we can connect to the database as below. Enter the password, and you should be able to connect to your mysql database.

```
// connect to EC2 instance
$ ssh -i "KEYPAIR_PEMFILE.pem" ec2-user@PUBLIC_DNS.compute-1.amazonaws.com

// connect to mysql
[ec2-user@PUBLIC_DNS ~]$ mysql -h RDS_ENDPOINT.us-east-1.rds.amazonaws.com -P 3306 -u ADMIN_NAME -p
password:
```

Once you enter, you can use mysql commands to navigate through the database. If you want to check the database contents of your Elastic Beanstalk, you can select `ebdb`.

```
MySQL [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| ebdb               |
| innodb             |
| mysql              |
| performance_schema |
| sys                |
| tmp                |
+--------------------+

// to check contents of your Elastic Beanstalk database
MySQL [(none)]> use ebdb;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
MySQL [ebdb]> show tables;

+-----------------------------+
| Tables_in_ebdb              |
+-----------------------------+
| auth_group                  |
| auth_group_permissions      |
| auth_permission             |
| django_admin_log            |
| django_content_type         |
| django_migrations           |
| django_session              |
+-----------------------------+
```
Given a chance to time-travel to 90s and rewrite the JavaScript specification, what you'd have done differently?
Tags: javascript
Published: 2020-07-26 16:04:45

The title says it all. What change will you make to JS to make it easier to code and understand from today's perspective. Would you for example:

1. Add classes and proper inheritance?
2. Have support for namespaces?
3. Support for static types?
4. Built-in runtime for various tasks?
I tried Angular and I created a website about my self. 
Tags: angular, javascript
Published: 2020-07-26 15:36:39

Finally after few weeks of reading and going threw Angular courses I made an attempt at creating my own personal website. 

I have never been strong with JavaScirpt so attempting at using a big framework was challenge on its own. 

I have been following certain pages and online courses about how the framework works. On top of that I have read few books regarding the basics of how to start a simple app. 

It has been intensive few weeks of try and error approach, to actual get a grasp of how it all works.

My first proper attempt at using the framework was a simple `todo list` which I have approached with caution and care (Watching few tutorials and making notes as I went threw the code was the key !). The output of this exercise you can all see deployed example here. 
[demo](https://kbucz.com/Angular-TodoList/)

After a night of coding and attempting at putting together components with correct CSS I have mange to create my V1.0 Personal website which can be viewed here.
[My Website](https://kbucz.com/)
วิธีตรวจสอบระบบว่าเป็น Little Endian หรือ Big Endian
Tags: cpp
Published: 2020-07-26 15:36:10


```cpp
#include <iostream>
#include <bitset>

int main() {
  unsigned int i = 1;
  char *c = (char*)&i;
  if (*c)
      std::cout << "Little endian" << std::endl;
  else
      std::cout << "Big endian" << std::endl;
    
  return 0;
}
```
จาก source code ด้านบน การประกาศตัวแปร i = 1 ถ้าเป็น Little endian เราจะได้รูปแบบการจัดเก็บในหน่วยความจำดังนี้ 

สมมติว่าระบบเราเป็น 32bit ดังนั้น รูปแบบภายในหน่วยความจำที่จัดเก็บของ i จะเป็นดังนี้

Little endian 
Higher Byte--> Lower Byte
|**0x01**|0x00|0x00|0x00|


Big endian
Higher Byte--->Lower Byte
|0x00|0x00|0x00|**0x01**|

จาก source code
char *c = (char**)&i;
*c จะชี้ไปที่ตำแหน่งแรกของหน่วยความจำ คือ ตำแหน่ง bit ซ้ายสุด หรือตำแหน่ง high
ดังนั้น ถ้าเป็น Little endian จะแสดงผลเป็น Little endian แต่ถ้าเป็น Big endian จะแสดงผลเป็น Big endian
เรียน C# Syntax จาก Unity
Tags: unity3d, csharp
Published: 2020-07-26 15:23:28

ถ้าใครได้ลอง Unity จะได้เห็น type นึงที่ใช้ประจำนั่นคือ Vector2 และ Vector3 ซึ่ง blog นี้ผมจะลองทำความเข้าใจ C# จาก type ทั้งสองอันนี้กัน โดยยกตัวอย่างจาก  Vector2 เป็นหลัก

ปล. หน้าตาอาจจะไม่เหมือนกันเป๊ะ แต่จุดประสงค์คือเพื่อให้อ่านโค้ดของ C# รู้เรื่อง -/\-

## 1. Struct

Vector2 ถูกประกาศเป็น type struct เราสามารถประกาศได้แบบนี้

```csharp
public struct Vector2
{
    public float x, y;
}
```

ข้อดีของ struct คือมันจะ copy data ซึ่งทำให้ไม่มีผลกระทบอะไรเวลาเราส่งค่าไปให้อีก method แล้วมีการ modify เช่น

```csharp
[TestFixture]
public class LearnStructTests
{
    private void ModifyVector2(Vector2 vec)
    {
        vec.x = 2;
    }

    [Test]
    public void TestStruct()
    {
        var vec = new Vector2
        {
            x = 1,
            y = 20
        };
        ModifyVector2(vec);
        Assert.AreEqual(1, vec.x);
    }
}
```

ในตัวอย่าง เมื่อเราเรียก ModifyVector2 ซึ่งภายใน method นั้นมีการเปลี่ยน field `x` ของตัวแปร `vec` แต่ค่าของ `vec` ภายใน `TestStruct` กลับไม่ถูกเปลี่ยนแปลงแต่อย่างใด

## 2. Operator Overloading

อีก 1 feature ที่จะถูกใช้บ่อยใน Unity คือการลบ vector เพื่อเอาไปหาทิศทางที่จะเดินไป เช่น

```csharp
// In Unity.
var target = new Vector2(10, 34);
var player = new Vector2(1, 2);
var direction = (target - player).normalized;
```

Unity ใช้ feature ของ C# ที่เรียกว่า operator overloading ในการทำให้การลบ vector เหมือนลบเลข โดยเราสามารถ declare operator - ได้แบบนี้

```csharp
public struct Vector2
{
    public float x, y;
    
    public static Vector2 operator -(Vector2 a, Vector2 b)
        => new Vector2{x = a.x - b.x, y = a.y - b.y};
}
```

## 3. String formatting

ใน type Vector2 implement interface `IFormattable` เพื่อให้ Vector2 สามารถแปลงเป็นข้อความที่อ่านรู้เรื่องใน debug console โดยเราสามารถทำได้แบบนี้

```csharp
public struct Vector3 : IFormattable
{
    public float x, y;

    public static Vector2 operator -(Vector2 a, Vector2 b)
        => new Vector2 {x = a.x - b.x, y = a.y - b.y};

    public string ToString(string format, IFormatProvider formatProvider)
    {
        if (string.IsNullOrEmpty(format))
        {
            format = "F1";
        }

        return $"({x.ToString(format, formatProvider)}, {y.ToString(format, formatProvider)})";
    }
}
```

`IFormattable` จะให้เรา implements `string ToString(string, IFormatProvider)` เพื่อคืนค่า string ที่ format แล้วกลับไปให้ เท่านี้เราก็จะใช้ string interpolation ได้แบบนี้

```csharp
var vec = new Vector2{x = 1, y = 2};
Assert.AreEqual("(1.0, 2.0)", $"{vec}");
```

สังเกตว่าผมมี check if ตรง format ไว้ใน ToString สาเหตุเพราะว่าใน C# สามารถกำหนดรูปแบบของ format ได้เช่น

```csharp
Assert.AreEqual("(1.00, 2.00)", $"{vec:F2}");
```

สังเกตใน string interpolation สามารถกำหนด format โดยใช้ `:` ตามด้วย format ที่ต้องการ ผมใช้ F2 เพื่อบอกให้ format เป็นทศนิยม 2 ตำแหน่ง

โค้ดเต็มดูได้ที่นี่ครับ https://gist.github.com/wingyplus/08656ff8da061445f39a0af8c052e0c4/08656ff8da061445f39a0af8c052e0c4
Packet Sniffing tool implemented in Node.js (alternatives to Charles, hoxy, etc...)
Tags: node, charles, sniffing, proxy
Published: 2020-07-26 15:13:13

<a href="https://stories.freepik.com/online" target="_blank">Illustration by Stories by Freepik</a>

{% github cola119/ESniffer %}

<a href="https://www.charlesproxy.com/" target="_blank">Charles</a> is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. I'm a heavy user of Charles for debugging but sometimes struggle with its lack of customization.

If we can monitor HTTP/HTTPS traffic using Node.js script, we can do even more useful debugging and testing. So I've developed a simple module that allows for packet monitoring. 

```js
import ESniffer from "esniffer";
import fs from "fs";

// Required if you want to monitor over HTTPS
const key = fs.readFileSync(`path/to/root-key.pem`);
const cert = fs.readFileSync(`path/to/root-cert.pem`);

const proxy = ESniffer.createServer({ secure: { key, cert } });
proxy.listen(8080);

proxy.on("request", (req) => {
  req.pipe(process.stdout);
});
proxy.on("response", (res) => {
  res.pipe(process.stdout);
});
proxy.on("info", (info) => {
  console.log(info);
});
proxy.on("error", (e) => {
  console.error(e.message);
});
```

This is inheriting the `EventEmitter` so we can access `request` to the server and `response` from the server via custom events. By installing and trusting a self-signed certificate, we can also monitor over HTTPS communication. See <a href="https://github.com/cola119/ESniffer/tree/master/example" target="_blank">examples</a> for more information.

Finally, I welcome bug reports and requests for additional features. Github Star, please!


{% github cola119/ESniffer %}
Barra de navegación responsive (Mobile first)
Tags: css, beginners, html
Published: 2020-07-26 15:09:34

¡Hola chicos! Vamos a arrancar con un ejemplo de una barra de navegación responsive, usando Mobile First.

### Código básico de la barra de navegación: 
```html
<header>
  <h1> Titulo </h1>
  
  <nav>
    <span class="menu-button">☰</span>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </nav>
  
</header>
```

### Puntos importantes en el estilo CSS:
- Contenedor header:
 - **display: flex** y **justify-content: space-between**. Para ubicar en extremos opuestos al logo y a la barra de navegación.

- Contenedor nav:
 - **ul: display: none**, ya que la idea es hacerlo mobile first, la lista de navegación se visualizará cuando se pase el mouse por arriba o se haga click en el botón del menú.

```css
*{
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header{
  background-color: grey;
  height: 8vh;
  display: flex;
  justify-content: space-between;
}

header ul{
  display:none;
}

header h1{
  line-height: 8vh;
  margin-left:.5em;
}

.menu-button {
  display: inline-block;
  margin: 1vh;
  height: 6vh;
  width: 6vh;
  border: 1px solid black;
  line-height: 6vh;
  text-align: center;
}
```

### Vista de escritorio:
Dos cosas importantes a hacer ahora son:
- Ocultar el botón del menú (**.menu-button**) con **diplay:none**
- Ahora sí, visualizar la **lista*+ con los links de navegación con **display:block**.

Todo esto, por supuesto, dentro de un @media query.

```css 
@media screen and (min-width: 768px){
  .menu-button{
    display: none;
  }
  
  nav ul{
    display: block;
  }
  
  nav ul li{
    list-style: none;
    display: inline-block;
    line-height: 8vh;
    margin: 0 .5em;
  }
}
```

### Resultado

{% codepen https://codepen.io/tognola/pen/PoZgbQa default-tab=css,result %}

### Paso siguiente
Ahora queda dar funcionalidad al menú hamburguesa (sólo con css), [ver en este post](https://www.tosch.dev/blog/hamburger-menu-css).