teleren/devto huggingface dataset:
Instalación de Ruby on Rails en WSL2 y zsh
Tags: ruby, rails, linux, opensource
Published: 2021-01-12 23:32:45

A continuación y de una manera muy breve, se muestran los pasos para realizar la instalación de Ruby y su framework Rails dentro un sistema operativo Windows 10 con WSL2 (Windows Subsystem for windows v2) y zsh* instalado. 

  

## Instalando dependencias de ruby

Primero actualizaremos paquetes y después instalaremos algunas dependencias para Ruby. 


```
sudo apt-get update

sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev
```

## Instalando el manejador **rbenv**

```
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
exec $SHELL
```
## Instalando la versión de Ruby deseada
Para este post ya está disponible la versión 3.0.0, pero instalaremos la más estable que será la 2.7.2.

```
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.zshrc
exec $SHELL

rbenv install 2.7.2
rbenv global 2.7.2
```

Y ahora comprobamos que todo esté bien, haciendo:

```
ruby -v
```
## Instalando Blunder 

Para manejar las gemas(librerías) de Ruby, usaremos blunder y solo debemos hacer:

```
gem install bundler
rbenv rehash
```

## Instalando Rails 
Por último, si deseamos instalar el framework Rails, debemos tener instalado [NodeJs](https://nodejs.org/es/download/) en nuestro sistema operativo y un manejador de paquetes como [npm](https://www.npmjs.com/) o [yarn](https://yarnpkg.com/) y posteriormente ejecutar:

```
gem install rails -v 6.1.0
rbenv rehash
rails -v
```

Y así, ya tendrás el entorno adecuado para trabajar con toda en Ruby on Rails !!!




__Basado en [este](https://gorails.com/setup/windows/10#ruby-rbenv) post__
*Si lo deseas hacer en bash, reemplaza .zshrc por .bashrc
Day 286 : A Feeling Inside
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-12 22:59:33

_liner notes_:
- Professional : Whew...what a day. Had a couple of meetings then got to speak with an engineer and ask some questions I had about the documentation I have been updating. Good to see what I was thinking was inline with what they are doing. Spent the rest of the day working on the documentation. I'm almost done with this one section. There was a lot to add. I want to make sure each part has some sample code that a user can just copy and paste the code and have a starting point. That involves me implementing it into a demo application and making sure it works the way the documentation says.

- Personal : Don't really remember much from last night. I went to Arby's, ate my food, did some coding and fell asleep. Pretty sure that was it. Maybe watched some YouTube videos.

![The temples of Bagan, Myanmar with the mountains in the background at sunset](https://dev-to-uploads.s3.amazonaws.com/i/ohj7s56l9gu2l1papucd.jpg)

Probably going to do a repeat of last night. Really want to knock down this list I've got for updating this section of the docs. Probably just finish up the stuff I don't need to put into a demo application and have used the code previously. I have a feeling inside I'll be able to finish up tomorrow morning. Oh and I need to go through tracks for the radio show this week.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube mIDVmaK77JU %}
My VS Code Setup for 2021! Theme, Font, Extensions, and Settings
Tags: vscode, uses, setup
Published: 2021-01-12 23:16:06


{%youtube 6VOUka1zGvk %}

My VS Code setup is something I change often. I often get asked about my setup, so here is all of the stuff I use! This will most likely be changed and tweaked over time as I search for my best setup. I encourage you to try new themes/fonts/extensions/settings and see what fits you best.

Here's the VS Code theme, font, extensions, and main settings I'm using for 2021:

## Theme

[Monokai Pro](https://monokai.pro)

## Favorite Fonts

[Cascadia Code](https://github.com/microsoft/cascadia-code)
[Operator Mono](https://www.typography.com/fonts/operator/styles)
[Dank Mono](https://gumroad.com/l/dank-mono)
[Fira Code](https://github.com/tonsky/FiraCode)

## Extensions

amVim
Better Comments
Bracket Pair Colorizer 2
Color Highlight
EditorConfig for VS Code
ES7 React/Redux/GraphQL/React-Native Snippets
ESLint
Git Indicators
Git Project Manager
gitlink
Highlight Matching Tag
Import Cost
JavaScript (ES6) code snippets
laravel-blade
Material Icon Theme
Monokai Pro
npm
Path Intellisense
Peacock
Prettier- Code formatter
Sublime Text Keymap and Settings Importer
Tailwind CSS IntelliSense
View Node Package
Kite AI Code AutoComplete
PHP Intelephense
Vetur
Vue Inline Template
Snake Game in 10 Minutes | SpeedCode
Tags: javascript, beginners, gamedev, showdev
Published: 2021-01-12 23:14:06

Can a simple but fun snake game be coded with just HTML, CSS and Javascript? Of course! In addition, this project that will teach beginners to learn the canvas system, how to use direction arrows, and solve simple math problems is right here!

{% youtube gPx1ega_qcM%}


Of course you can improve this and share it with me. Maybe you can make improvements like various obstacles, a better scoreboard, a better looking snake.

I can't wait to see what you do. Take care of yourselves.

Happy Coding.
Next.js Image Component - Automatic Image Optimization
Tags: javascript, nextjs, imageoptimization
Published: 2021-01-12 23:08:25

[Next.js 10](https://nextjs.org/blog/next-10) came out recently and with it brought the [Next.js Image Component](https://nextjs.org/docs/basic-features/image-optimization).

{% youtube 7fqKzvjQj94 %}

## Next.js Image Component Features

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

The main features of the Next.js Image Component are that it requires very little configuration to immediately optimize our images.

Main features include:

- **Automatic Image Optimization**: Deliver the right optimized image and format
- **Lazy loading**: An image will only load when it is within the viewport
- **Automatic Resizing (srcset)**: Deliver the correct size image based on the browser size


### Image Optimization on-demand

The cool thing about Next's Image Optimization is that it all happens when a user requests the page, not when we build our static sites.

> Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.

## To Use the Next.js Image Component

Replace your `<img>` tags with the Next.js `<Image />` component. [Required properties](https://nextjs.org/docs/api-reference/next/image) are:

- src
- width
- height

Let's say we have an image located in our Next.js project at `/public/images/mountains.jpg`. Instead of having an <img> tag:

```html
<img src="/images/mountains.jpg" />
```

Replace with the Next.js Image Component

```javascript
import Image from 'next/image';

export default function Home() {
  return (
    <Image 
      src="/images/mountains.jpg" 
      width="1920" 
      height="1080"
    />
  )
}
```

Our image will be optimized and will be a smaller size.

## Delivering Resized Images

To deliver a Next.js Image Component with a resized image, add a `layout` property to your component.

```javascript
<Image 
  src="/images/mountains.jpg" 
  width="1920" 
  height="1080"
  layout="responsive"
/>
```

You should see even smaller file sizes now.
The Core of JavaScript
Tags: javascript, codenewbie, tutorial, programming
Published: 2021-01-12 22:39:15

{% youtube 1zuEE_ZwjqY %}

---
##### View on [Github](https://github.com/bellogit/the-core-of-javascript/)
---

*JavaScript* is a popular programming language used both in the browser and server. It was initially called **LiveScript** but later changed to JavaScript. 

The programs in the language are called **script**.

> JavaScript is a high-level, dynamic, untyped, and interpreted programming language. 

> It was created in 10 days by Brendan Eich. 😮

It is named JavaScript to position it as a younger brother to Java because Java was more popular back then (in 1995). But they are independent of each other.

JavaScript was changed to ECMAScript or ECMA-262 in 1996 but is still called JavaScript.

It is executed on any device that has a special program called JavaScript engine or **ECMAScript engine**. The engine renders web pages to the **DOM** (**Document Object Model**) for easier interaction between the browser and the user.

The engine is also called **JavaScript Virtual Machine** because it executes code in an environment independent of the platform.

> ECMAScript is the standardized [specification of JavaScript](https://www.ecma-international.org/publications/standards/Ecma-262.htm). It contains the most in-depth detailed information about JavaScript.

{% youtube l4sgVEKsWyk %}

There are different JavaScript engine code names based on the browser. For example, in Chrome and Opera, it is V8; in Firefox, it's Spider Monkey; in Internet Explorer, it's Chakra; in Microsoft Edge, it's ChakraCore; in Safari, it's Nitro and SquirrelFish, etc.

The full integration of JavaScript with HTML and CSS makes JavaScript a unique Programming Language. It also supports all major browsers.

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613668162316/G1zfmhxQd.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
### Applications of JavaScript
- It allows users to interact with web pages.
- It is used to build web, mobile, and desktop apps.
- It is used to build games on the web.
- And many more...

{% youtube GxouWy-ZE80 %}

{% youtube Sh6lK57Cuk4 %}

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>
Define your Custom Elements functionally
Tags: javascript, functional
Published: 2021-01-12 20:29:09

I've been using custom elements a lot lately, they're great fun!

The only thing that bothers me, as a "functional-style" developer, is the class-based definition interface: It feels a bit awkward to parcel my code according to it instead of my actual concerns. So I keep finding myself write the same boilerplate code which relays lifecycle events to the constructor, where I can handle them all in a tidier fashion (using RxJS or Kefir).

That's why I've created [Element-F](https://github.com/tweinfeld/element-f). A functional-style wrapper for defining custom elements, in which a definition looks like this:

```javascript
window.customElements.define('my-world', ElementF(function(life){
  
  const WORLD_DICT = {
    "spanish": "mundo",
    "french": "monde",
    "german": "welt",
    "russian": "mir",
    "chinese": "世界"
  };
  
  const spanEl = document.createElement('span');  
  life.once('connect', ()=> this.appendChild(spanEl));
  life.on('attribute:lang', ({ newValue })=> spanEl.textContent = WORLD_DICT[newValue] ?? "world");
  
}, ["lang"]));
```

[Live demo](https://codepen.io/tweinf/pen/OJRodpW?editors=1000)

Feel free to share your impressions 🙂
How does the internet work? 
Published: 2021-01-12 22:22:02

---
title: How does the internet work? 
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
We have been using the internet for a while now, around the late 1960s but do we know how it works? I mean yeah sure, we don't need to know how it works to use it and we can't care much about how it works as long as we get our daily doses of memes, but this post is for you if you did want to take a break from browsing those memes and find out *how the internet works?* in a simple way! 

##So What happens when you access a website using your device?

The software on your computer creates a message using different software languages like HTTP, TCP/IP, etc.) which requests the web page you clicked. These are called *protocols*. The message is then broken into *packets* which are routed through the internet hopping from one *router* to another. 
1. **Protocols** - They are rules on how information passes through the internet. Two of the most important protocols are TCP i.e. Transmission control protocol and IP i.e. Internet Protocol.
2. **Packets** - Data that is sent across the internet is called a message but the whole message is not sent in one go. It is broken into fragments called packets. All these packets are sent independently and a packet size could range from 1000 - 3000 characters. The IP is responsible for deciding how the message is packaged.
3. **Router** - The internet is made up of a network of specialized computers called routers. They are responsible to move packets from the source to the destination. The movement of packets from one router to another is called a *hop*. 

*Traceroute command in the picture below shows the number of hops it has taken to access Google from my laptop* 

![Traceroute Command](https://dev-to-uploads.s3.amazonaws.com/i/o0pr0iwv1xacvi7ec66k.jpg)

##So, you might be wondering do packets always arrive in order? 

Uhmm nope, they don't. But yet, you never received a message and found yourself unjumbling sentences, so how does that happen? Glad you asked...it happens because even though a later packet may arrive before but the header of a packet contains information about the packet's order in relation to the entire message. The TCP uses this information in the header to rearrange the packets in order. 

##So, you might wonder what happens if the packet is lost?
Well, the TCP also handles this through retransmission of the lost packet. This is done by having the destination computer send an acknowledgment to the source computer and if the source computer fails to receive an acknowledgment of a particular packet it re-transmits the packet. 

##So...
now you have a general idea of how the internet works. Take a moment and appreciate the complexity that underlies behind something as simple as a google search. 
In the next post, I will try to better explain the layers that are present in the internet model that would help you understand how the independent networks connect to provide the Internet. 

*If you read till here, Thank you. Much appreciated!*
I am also self taught
Tags: programming, productivity, discuss, codenewbie
Published: 2021-01-12 21:55:48

I taught myself how to code. But I taught myself everything I know. I am not trying to sound full of myself, I actually think that this is true for everyone.

## What is learning?

I love the American Pragmatist Philosopher [John Dewey](https://en.wikipedia.org/wiki/John_Dewey). He was much smarter than I. He also thought very deeply about the question of what it is to "learn" something. He developed a theory that says something that might sound basic. To know something is to have an experience of something. He laid the theory that knowing something is being able to apply it in the context in which it will be used. And, the only way to know something is to have done it before, to feel the nuances based on your experiences, to gain the habit, the muscle memory, the traps and the ability to figure out what will probably work and what wont. This also means that knowledge cannot really be taught. 

The concept is very similar to what we hear all the time in programming communities. Do projects, build things, don't get stuck in tutorial purgatory, make projects apply what you learned. Dewey would agree with this.

Saying that you can't be taught something sounds harsh. Of course there is value in teaching and learning from others. After all, there will always be people more experienced than you at what you are trying to do. Their experience is absolutely valuable, and what you get from them is knowledge about perils, it is knowledge about what will give you more leverage, about where to direct your attention to get a good basis, but the problem is when you begin to confuse hearing facts about something with learning about something. You cannot transfer knowledge into your head. You need to practice in the context as close as the real thing. Otherwise, you will only get good at answering quizzes, not at solving problems.

So, we are all self taught, because it is only by doing the work that you learn. And doing the work, takes effort that you can simply not buy. A teacher can show you the way, but learning happens on your own. 

Do you agree?
Are you familiar with FrontEndMentor.io?
Tags: webdev, frontendmentor, challenge, webdesign
Published: 2021-01-12 21:53:04

Maybe you're thinking of improving your Front-End skill by practicing with some real projects, right? Then, this post is obviously for you!

A few days ago (maybe before the last week) I was randomly browsing YouTube and somehow I got introduced with FrontEndMentor.io, where I found some cool front-end development-related challenges. For those, I'd been looking for months!

But I was a little bit confused about what to do, how to take the challenges, how to make them accomplished, how to submit my challenges...these kinda stupid questions were spinning in my head.

I asked some of my Facebook Friends to arrange a BootCamp and work together completing the challenges from FrontEndMentor.io with them. They agreed, and we built a good team. (Still, now we're working very well on completing the challenges!)

Then, I dared to take a very [basic challenge](https://www.frontendmentor.io/solutions/social-proof-section-challenge-completed-by-alnahian2003-v03ryo5ZW) and I accomplished the challenge within 24 hours!

After getting the result/report, I was so relaxed, and then suddenly someone commented on my submitted challenge.

When I checked the comment, I saw that someone appreciated my effort!
His comment motivated me to take another challenge and I did it.

Still, now I'm working on my intermediate challenge from FrontEndMentor.io

The funniest thing is that Today I've found myself in the 2nd position of "Wall of Fame" in FrontEndMentor.io!!!

That was my first ever experience with FrontEndMentor.io

Let me know about your progress in FrontEndMentor.io :)

Happy Coding!

[This is definitely not a promotional/paid post or anything else from FrontEndMentor.io . I just shared my experience with you]

#FrontEndMentorIO
Perform an action on team creation with Laravel Jetstream
Tags: laravel, php
Published: 2021-01-12 22:03:37

---
title: Perform an action on team creation with Laravel Jetstream
published: true
date: 2021-01-12 21:24:41 UTC
tags: laravel,php
canonical_url: https://michaelheap.com/laravel-jetstream-team-created/
---

In my latest [Laravel Jetstream](https://jetstream.laravel.com/) project there are some configuration options that are set on a per-team basis. Initially I edited the `Team` model to add a `static::created` method that directly called my `Category` model:

```
public static function boot() {
  parent::boot();
  static::created(function (Team $team) {
    // createDefaultsForTeam is a custom method that I added
    Category::createDefaultsForTeam($team->id);
  });
}
```

As I started adding more side effects to `Team` creation I realised that this `boot` method was too long and knew too much about the rest of my application.

Fortunately, Jetstream emits a `TeamCreated` event that we can hook into and perform any actions we need in response to a team being created.

You can create a listener for this event with the following command:

```
php artisan make:listener CreateBaseCategories --event=TeamCreated
```

Once that’s created, open up `app/Listeners/CreateBaseCategories.php` and make sure to add `use Laravel\Jetstream\Events\TeamCreated;` to import the event to listen to.

The `handle` method will be empty, so let’s call `Category:: createDefaultsForTeam` in there:

```
public function handle(TeamCreated $event)
{
  Category::createDefaultsForTeam($event->team->id);
}
```

The team that was created is accessible as `$event->team`.

Now that our event listener is created, we need to update `app/Providers/EventServiceProvider.php` to add a new listener to the `$listen` array that will trigger when a team is created:

```
// Make sure to import the TeamCreated event
use Laravel\Jetstream\Events\TeamCreated;

class EventServiceProvider extends ServiceProvider
{
    protected $listen = [
        // ...other listeners...
        TeamCreated::class => [
            \App\Listeners\CreateBaseCategories::class,
        ]
    ];
}
```

Now, whenever a team is created our `CreateBaseCategories` listener will be called and the configuration options for that team will also be created.

This has an added benefit that you can disable side effects in your tests by disabling the event from firing:

```
public function test_teams_can_be_created()
{
  Event::fake([
    TeamCreated::class,
  ]);

  // The rest of the test
}
```
Little red riding hood
Tags: writing, productivity
Published: 2021-01-12 21:19:18

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

Ini mungkin cerita horor yang paling familiar untuk anak-anak. Bagaimana tidak horor kalau ada anak-anak kecil berjalan di hutan untuk mengunjungi neneknya, kemudian ada serigala haus darah mengintainya. Pasti tujuannya bukan untuk mengomentari warna jubahnya kan. Untung ada seekor gagak yang selalu membawa kunci merah mengamatinya. 

Kisah [Little Red Riding Hood](https://en.wikipedia.org/wiki/Little_Red_Riding_Hood) ditulis pertama kali oleh [Charles Perrault](https://en.wikipedia.org/wiki/Charles_Perrault), tapi ada pendapat lain [Grimm Bersaudara](https://en.wikipedia.org/wiki/Brothers_Grimm) juga pernah menuliskan versi mereka.

Anda pasti paham siapa Little Red, Sang Srigala, dan Sang Gagak.

#365figures #365writings
🔐 How Retailers Can Prevent Ecommerce Fraud This Holiday Season
Tags: security, ecommerce, fraud
Published: 2021-01-12 21:16:03

💰 Retailers are embracing eCommerce but are vulnerable to fraudsters impersonating real users.
[Read more...](https://auth0.com/blog/how-retailers-can-prevent-ecommerce-fraud-this-holiday-season/?utm_source=content_synd&utm_medium=sc&utm_campaign=prevent-fraud)
11 Nano shortcuts that you should know

Published: 2021-01-12 20:32:43

Check out this post on the [devdojo.com](https://devdojo.com/) website!

It is a post on [11 Nano shortcuts that you should know
](https://devdojo.com/bobbyiliev/11-nano-shortcuts-that-you-should-know) 🔥!

To make things even better you can use this referral link to get a free $100 credit that you could use to deploy your virtual machines and test the guide yourself on a few DigitalOcean servers:

[Digital Ocean $100 Free Credit](https://m.do.co/c/2a9bba940f39)

Link to the post:

https://devdojo.com/bobbyiliev/11-nano-shortcuts-that-you-should-know

I strongly encourage everyone to go ahead and check out the [devdojo.com](https://devdojo.com/) website, there's a lot of valuable content there.
MAJOR LEAgue hacking blog
Published: 2021-01-12 19:57:50

#MLH,#MAJORLEAGUEHACKING,#LOCALHACKDAY
IT IS QUITE INTERESTING TO SAY THAT BUT IT MY FIRST EVERY HACKATHON,I AM IN EQUICODE GUILD AND WE ARE AT THIRD POSITION FROM 3 DAYS AND WE ARE LOOKING FORWARD TO MAINTAIN THAT POSITION .WE HAD PERFORMED MANY CHALLENGES AND MANY EVENTS ONLINE WE HAVE RYAN AND MARRY AS OUR GUIDE AND, THAT LEADERBOARD REVEL , WHEN YOU SEE YOUR GUILD AT TOP IT IS A GREAT FEELING . SO THIS IS ALL FOR THE DAY NOW I AM LOOKING FORWARD FOR TOMMROW CHALLENGE , AND ALSO LOOKING FORWARD TO GET RANKED IN TOP 30 HACKERS