teleren/devto huggingface dataset:
Vim Filters
Tags: vim, tricks
Published: 2018-03-19 02:37:45

---
title: Vim Filters
published: true
description: A quick Vim tip to run an external command on a file.
tags: vim, tricks
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7s8nnri502al5cmndz8w.jpg
canonical_url: https://www.assertnotmagic.com/2018/03/18/vim-filters/
---


Quick tip time!  Let's talk about Vim filters.  This is a way to execute any external command and pipe the results into your current buffer.  This is a great way to get the power of your shell into vim without having to learn much VimScript.  Here are the basics:

## Reading command input into the current buffer

This is the simplest method:

```vimscript
:r !ls
```

This command will read the results of `ls` into your buffer at your cursor location.  You can also specify the specific line to insert after.  The next command will read the results of the `ls` command into your current buffer after line 4.

```vimscript
:4r !ls
```

## Sending buffer contents as input to an external command

You can also send lines of your buffer out to be replaced with the results of the command.  A common thing to do is to operate on the whole buffer you're working on.

```vimscript
:%!sort
```

The `%` selects the whole buffer, and then the `!` sends the selected lines out to the external `sort` command.  The whole buffer contents will be replaced with the results of the command.

For example.  Let's say you're working on a text file.

```markdown
# Attention, Everyone!

This markdown file contains some **pretty interesting** stuff.

I __mean__ it.
```

But something's just not quite there.  It needs some more zoom -- some more whammy!  Try combining it with a [slick Ruby one liner!](https://assertnotmagic.com/2017/10/05/smooth-one-liners/)

```vimscript
:%!ruby -ne 'puts $_.upcase'
```

And suddenly, the contents of your buffer is:

```markdown
# ATTENTION, EVERYONE

THIS MARKDOWN FILE CONTAINS SOME **PRETTY INTERESTING** STUFF.

I __MEAN__ IT.
```

This will work with any command.  You can use shell commands, or you can run it through a Python or Node script.  It gives you the power to select the best (or your favorite) tool for the job, instead of locking you into Vim's capabilities alone.  And you can use other motions if you just want to replace a portion of your buffer.

```vimscript
:!!ruby -ne 'puts $_.upcase'
```

Two exclamation points will operate on the current line.

It also works on visually selected lines.  Select a couple lines in visual mode:

```vimscript
v         " Visual mode activated
jj        " Select next two lines
:!sort    " Sorts the lines that were selected.
```

*Protip: If you accidentally run a command and blow away your file somehow, don't panic.  Simply press `u` in Normal mode to undo the operation.*

Hope this comes in handy!

<hr>

*Originally posted on [`assert_not magic?`](https://assertnotmagic.com/2018/03/18/vim-filters/)*
What is this design trend called?
Tags: discuss, design, ui, ux
Published: 2018-03-19 00:52:50

---
title: What is this design trend called?
published: true
description: 
tags: discuss, design, ui, ux
---
I'm seeing quite a few web applications and websites that look this on the front end. Any ideas its origin or name so I can study it further? The color gradient blend of the buttons, the illustration styles...

https://www.algolia.com/
https://stripe.com/
https://kinsta.com/
https://ionicframework.com/
https://status.im/
https://cssninja.io/
https://tipe.io/
https://lusaxweb.github.io/vuesax/

https://www.sqreen.io/plugins?utm_medium=cpc&utm_source=t.co&utm_campaign=Twitter%20-%20cpc%20-%20Plugin:%20Security%20Hub

https://www.madebyspeak.com/blog/posts/web-design-trends-2018
https://www.b3multimedia.ie/top-10-web-design-trends-for-2018/
Node.js: Como criar um servidor HTTP
Tags: node
Published: 2019-09-27 12:33:09

---
title: Node.js: Como criar um servidor HTTP
published: true
tags: nodejs
canonical_url: https://medium.com/alex-ribeiro/como-criar-um-servidor-http-nodejs-1dcf74e05423
---

![](https://cdn-images-1.medium.com/max/1024/1*AwwTkIU5BagLCdAD74GhDw.jpeg)

Nessa postagem, irei mostrar a vocês como é simples criar um servidor HTTP, mais conhecido como servidor Web, utilizando Node.js.

> Caso tenha alguma dúvida sobre o que é Node.js, dê uma lida em minha postagem onde explico de forma simplificada clicando [aqui](https://medium.com/@alexribeiro_/o-que-e-nodejs-bc0066b3bfe2).

### Criando um servidor HTTP

Pressupondo que já tenha o Node.js instalado em sua máquina. Vamos criar um arquivo chamado _app.js_ com a seguinte estrutura:

{% gist https://gist.github.com/alexribeirodev/99c3dea917608401725295ef609fbb4d %}

> Toda vez que o servidor HTTP recebe uma requisição, a função de callback passada para o método _createServer_ é executada.  
> O método listen é o responsável pela parametrização de endereço e porta, escutando os mesmos, possibilitando a execução do servidor.

Perfeito. Todos as linhas necessárias para a criação de nosso servidor estão prontas. Agora só precisamos iniciar o servidor.

Pelo terminal, vá até a pasta onde se encontra o arquivo _app.js_ e execute o seguinte comando: node app.js.

A saída no terminal será:

_Servidor rodando em http://localhost:3000  
Parar o servidor com: ctrl + c_

A partir de agora, seu servidor Web está rodando! Se tudo estiver correto, ao acessar [http://localhost](http://localhost):3000 pelo navegador e terá o mesmo retorno da linha 7: _Retorno da requisição._

Servidor configurado e funcionando! Porém, qualquer caminho vai dar o mesmo retorno. Como iríamos configurar diversas rotas com essa estrutura atual?

![](https://media.giphy.com/media/10yIEN8cMn4i9W/giphy.gif)

Calma, meu caro leitor! Irei lhe mostrar uma forma simples e funcional para isso. Vamos lá!

### Trabalhando com rotas

Sabendo como funciona o fluxo de requisições no servidor, podemos adicionar poucas linhas ao nosso código atual para termos um controle de rotas simples e funcional:

{% gist https://gist.github.com/alexribeirodev/873ae172dec914f5c2b30c40242176fb %}

Pronto, agora temos um controle de rotas funcional. Se cancelar a execução atual do servidor com _ctrl+c_ e rodar novamente o comando _node app.js_ poderá testar as as rotas.

Viu só como é simples?! Com poucas linhas temos uma estrutura capaz de receber requisições e dar um retorno baseado em rotas dinâmicas. Brilhante, não?!

Apesar de funcional, essa estrutura é difícil de se manter. Por diversos motivos a comunidade de JavaScript começou a criar frameworks (novidade?!) para cuidar das rotas.

A partir deste ponto, podemos construir diversas outras formas de organização e tratamento dos retornos. Deixo essa tarefa com vocês.

#### Obrigado e até mais!

Se gostou do meu texto, me acompanhe que em breve estarei trazendo novidades.

Quer saber mais sobre o assunto ou tem alguma dúvida? Deixe um comentário. Ah, estou aberto a críticas também.

Abraço!

* * *
What E2E testing framework are you using?
Tags: discuss, testing, e2etesting, javascript
Published: 2018-03-19 00:24:49

---
title: ‪What E2E testing framework are you using?
published: true
canonical_url: https://www.iamdeveloper.com/posts/what-e2e-testing-framework-are-you-using-3njg/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0e73045dnzv7luijm1d1.jpg
description: Discussion about end to end (E2E) testing frameworks.
tags: discuss, testing, e2etesting, javascript
---

*Photo courtesy of Flickr user [dkuperman](https://www.flickr.com/photos/dkuperman/5999888524/in/photolist-a9bZPS-btgb8B-5KoXPH-6Bp3Zi-b25aPB-65Z45C-a2rgTW-kqrHrq-aMNivF-4tQ2MJ-7haMZc-BQPB7-evkxu6-6k4agk-g9nHvQ-DrRQxa-56TVCr-af1Fu5-b25aLH-4RhZVg-7cQVvp-6hng3g-rgsoGG-5Xqh7r-isuz3j-by4zqS-8qejkV-4usPqP-3LjhUy-aj98uL-8UGuN7-9vEhvt-a6Dabg-cPusgs-dBq9tZ-fLpBgB-bnSvXH-6fBvf-a6G2LN-64D62u-9mQAZx-4Uf5oA-TB9pFt-6Rj6Zk-2PAFt-2Yas-dDXxVL-P14Ld-fbYEL2-cgzKAb)*

‪What E2E testing framework are you using these days? I'm going to be looking into [Puppeteer](https://github.com/GoogleChrome/puppeteer) and [Cypress](https://cypress.io).

I like that Puppeteer uses async/await in their API, but you're limited to just Chrome. Cypress is coming out with Firefox support, so +1 to them. 

In the past I've used [webdriver.io](http://webdriver.io) and other Selenium based ones, but [webdriver](https://www.w3.org/TR/webdriver) based ones are generally slower.
Tunnelling TCP over DNS in 2018
Tags: freeinternet, tunnelling
Published: 2018-09-05 21:17:12

---
title: Tunnelling TCP over DNS in 2018
published: true
tags: free internet,tunnelling 
canonical_url: https://booyaa.wtf/2018/2018-0004-tunnelling-tcp-over-dns-in-2018
---

I wrote this article after seeing that no one had written anything about tunnelling tcp traffic over dns since 2016. 

A common use of this type of tunnelling is to gain free Internet access by tunneling through a WiFi captive portal. 

I'd also say it's probably a good idea to get some practice before similar types of network restriction are imposed by your ISP or the state.

Just like stateful packet inspection will reveal ssh tunneling over https, this is by no means a method of concealment so caveat emptor! 

My choice of tunneling tool is **iodine**. The code can be found on [GitHub](https://github.com/yarrick/iodine), the site is hosted on [code.kryo.se](http://code.kryo.se/iodine/).

The setup hasn't changed along with the current version (0.7.0). Important thing to note here is that you should always have parity with the client and server version of iodine.

## Setting up iodine:

### Provision a server (via DigitalOcean et al). 

- install iodine (ubuntu/debian) `apt-get install iodine`
- run as a service `iodined -f -c -P f00b44 10.0.0.1 t1.yourdomain.tld`

note 1: f00b44 is your shared secret between client and server

note 2: just as you would with a vpn, you create a private network for your tunnel, in our case we're using the 

note 3: here's my DigitalOcean referral [link](https://m.do.co/c/95d81208d348) if you're feeling particularly generous.

### Create DNS records to point to your server

```text
t1ns A your_vps_ip
t1 NS t1ns.yourdomain.tld
```

tip: I use cloudflare to manage my dns, which means my DNS records propagate fairly quickly across the Internet.

### Install the client (mac OS)

```shell
git clone https://github.com/yarrick/iodine.git
ls
cd iodine/
ls
make
make
PREFIX=/usr/local make install
```

### Connect the client to the server  

`sudo /usr/local/sbin/iodine -d utunX -f -P f00b44 t1.yourdomain.tld`

note: you need sudo to use the tunnelling network adaptor.

### Setup verification

To verify setup we'll setup a ssh as a SOCKS proxy `ssh -D 9999 10.0.0.1`.

note: we're setting up the the SOCKS proxy via our server's ip address.

And then use httpbin to verify our ip address `curl --socks5-hostname 127.0.0.1:9999 -L http://httpbin.org/ip`

When tunnelling you got expect a considerable loss of bandwidth, I'd only recommend using ssh over this type of tunnelling, it's just too slow to do anything else useful.

random-tip: `<enter> ~.` to escape hung ssh sessions
Does Chrome for iPhone have window.scrollTo?
Tags: javascript, help
Published: 2018-03-18 15:57:49

---
title: Does Chrome for iPhone have window.scrollTo?
published: true
description: confuse
tags: javascript, help
---

I tried `window.scrollTo([0, 1000])` but Always back to top.

Another one tried `window.scroll([0, 1000])`.
scroll is keeping.

I wanted it.

Why `window.scrollTo`?
Looking for feedback/tips on my portfolio site
Tags: discuss, beginners, showdev, portfolio
Published: 2018-03-18 12:35:41

---
title: Looking for feedback/tips on my portfolio site
published: true
description: I'm trying to build a compelling portfolio site and I need your help!
tags: #discuss, #beginners, #showdev, #portfolio
---

Hi Everyone!

I'm an aspiring developer trying to get my breakthrough in the industry. According to literally (almost)(!) everyone on the internet, A portfolio is the most important thing when you need to demonstrate your skills. So, I took some time to create my first portfolio site.

I'd LOVE you to take a look at it [here](https://faahim.github.io).

![Afiur Rahman Fahim - Portfolio](https://raw.githubusercontent.com/faahim/faahim.github.io/development/screenshot.png)

I'm not a designer, but I like things pretty. And simple. But I'm not sure about some of the design/content decision I made. I have lots of questions in my mind.

For example, I've probably added a bit too much text on the **About** and **Projects** page. Do you usually read this much text? Also, I'm confused about the tone I've taken on **About** page. I believe I'm a humble person and I want that to be reflected in my words. Did that happen here? Do you like the colors? Are they too vibrant or dull? Does the animation cause more bad than good? The list goes on...

I'm looking for any and every kind of feedback/suggestions/tips/critique on it. How could I make it better? What would you change? Also, I'd love to see your portfolio so that I can steal some idea and put it on my portfolio. I'm just kidding, Seriously! ;)

I made the site using React and SVGs for animated elements. I'm not at all an expert, so there might be some bugs as well. The site is on [GitHub](https://github.com/faahim/faahim.github.io) if you want to take a look at the codes. But go through it at your own responsibility cause my code stinks. :(

Now I'm going to grab some snacks while waiting for your response.
Have a great day! :)
HTML SASS Starter kit with Parcel
Tags: html, css, sass, parcel
Published: 2018-03-18 08:19:33

---
title: HTML SASS Starter kit with Parcel
published: true
description: Parcel is an amazing zero-config bundler.
tags: html, css, sass, parcel
---

<img src="https://user-images.githubusercontent.com/19409/31321658-f6aed0f2-ac3d-11e7-8100-1587e676e0ec.png"/>

[Parcel](https://github.com/parcel-bundler/parcel) is an amazing zero-config bundler. (You know bundlers right? Like webpack?) It has out of the box support for so many things that we generally do. It is very fast when compared to others in this domain.

Having said that, you can use it for popular frameworks like [React](https://github.com/jaredpalmer/react-parcel-example), [Angular](https://github.com/DeMoorJasper/Angular-Parcel-Boilerplate), [Vue](https://github.com/parcel-bundler/examples/tree/master/Vue) and so on. So many things can be done with it. This [awesome list 🕶](https://github.com/parcel-bundler/awesome-parcel) speaks about it.

My goal was something different. I wanted it for basic use. Like, for building small websites (or just a page) with HTML and Sass (or SCSS, you may say). Parcel is great for this too.

I have been a fan of [DevTips](https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ) and modified their [starter-kit](https://github.com/DevTips/DevTips-Starter-Kit) to use **Parcel**. The cool thing is that it has support for ES6 and does code-splitting out of the box (#OOTB).

Here is the repo:

https://github.com/aravindballa/DevTips-Starter-Kit

---

Keep on Hacking ✌🏻
Google HashCode 2018: my experience
Tags: hackathon, hashcode
Published: 2018-03-18 01:45:17

---
title: Google HashCode 2018: my experience
published: true
description: 
tags: hackathon, hashcode
---

I would like to share in this post my experience participating in the Google HashCode for the first time. It's an experience I recommend to every person that loves challenges. Although it is hard to win, it's really exciting to take part on the competition!

It was my first big hackathon and I was really excited. The Google Developer Group in my university organized a hub and me and my teammates decided to join. We were so many people that we had some troubles with the internet connection, but somehow we managed to get the problem text.

My team was composed by 4 people, counting myself, and we were going to use an online platform to work on it together. However, due to the bad internet connection in the place, we had to work offline. So first we talked about how were we going to approach the problem. When we had the design of the algorithm, we decided to divide the work in groups of 2, each group would solve one part of the problem. Also, we decided to use Java as the solving language, since we all had good skills with it.

Using Java for that problem wasn't maybe the best idea, though. When we tried to mix the code we had been working on, we encountered some unexpected problems. The bad internet connection wasn't helping at all.

After solving the problems, we ran out of time, so we didn't have time to improve the algorithm. The hackathon was 4 hours long, but it seemed way less.

We didn't win, of course, however I had a really nice time and now I feel more prepared for the Google HashCode 2019!
Running Docker on Digital Ocean Droplets 
Tags: docker, portainer, digitalocean, droplets
Published: 2018-03-18 01:01:35

---
title: Running Docker on Digital Ocean Droplets 
published: true
description: Learn about running a fully containerized setup on digital ocean.  
tags: Docker, Portainer, Digital Ocean, Droplets
---

Have you been thinking of moving to docker for some devOps work? Try setting up a containerized Website with the help of docker and portainer. Use some of the latest 2018 developer tools to get the must customization out of your website. 

Firstly, you will need to setup your droplet at Digital Ocean. Use this link to get a free <a href="https://m.do.co/c/c81cb396ae03">$10</a> dollars. Once you have chosen a droplet location, select your droplet size. Recommended size is at least $20 per month. Once you have your ip address and successfully started running your droplet. 

Navigate to your <a href="https://github.com/portainer/portainer">Portainer</a> and grab the latest copy using their docker setup. 

Secondly, ensure you have docker installed on your droplet. Use the lastest docker install and make sure to update your system via "apt-get" command. 

Run your setup of portainer in an open port via:


$ docker run -d -p 9000:9000 --restart always -v /var/run/docker.sock:/var/run/docker.sock -v /opt/portainer:/data portainer/portainer


Congratulations! This command will setup your containerized environment and will get you started running websites in containers with the help of portainer. 

Remember to keep your Portainer ports Open and running within your droplet or you will not be able to access your portainer dashboard. 

  
Cheers! Happy Devs, for Days!
About keyboards
Tags: discuss
Published: 2018-03-17 22:49:49

---
title: About keyboards
published: true
tags: discuss
description: About keyboards
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z2cq1tdm60cqxmzz2ldk.png
---

Should I put some attention to the keyboard I'm using to code? Should I spend my money on some MX-Cherry keyboard (or whatever is popular now) or I'd live with a cheaper one? What keyboard do you use or could recommend?
Disable Prestashop Add to Cart Popup - Step by Step
Tags: blog
Published: 2018-04-12 08:11:31

---
title: Disable Prestashop Add to Cart Popup - Step by Step
published: true
tags: blog
canonical_url: https://www.prestasoo.com/blog/disable-prestashop-add-to-cart-popup-step-by-step.html
---

![](https://www.prestasoo.com/images/stories/disable-prestashop-add-to-cart-popup.jpg)

Many people want to disable the popup that shows when adding a product to the cart with ajax, and instead redirect to the Cart Summary page. I have seen many posts instructing to [disable **Add to Cart popup**](https://www.prestasoo.com/blog/disable-prestashop-add-to-cart-popup-step-by-step.html) in the Cart Block module, but it only works for Prestashop 1.6.

In Prestashop 1.7, the feature "Redirect after adding product to cart" does not exist anymore, and in this case, you might want to disable **Ajax Cart** feature that belongs to Shopping Cart module. Unfortunately, if you disable this feature, the popup won't display but it does not redirects your customer to the Cart Summary page.

On this [Prestashop tutorial](https://www.prestasoo.com/Blog/), i will show you how to **disable Prestashop Add to cart popup** , redirect to the Cart Summary on Prestashop 1.7.
Advanced queries with RubyOnRails — Talks
Tags: sql, ruby, arel, rails
Published: 2021-01-31 16:05:25

---
title: Advanced queries with RubyOnRails — Talks
published: true
date: 2018-03-17 14:02:34 UTC
tags: sql,ruby,arel,rails
canonical_url: https://medium.com/sumone-technical-blog/advanced-queries-with-rubyonrails-19fc3d56c182
---

![](https://cdn-images-1.medium.com/max/840/1*a_H8ZUnYxPZvw47KRwZzgg.png)

Some months ago I did a talk in a meetup for RubyFloripa about advanced queries in RubyOnRails. The objective of the talk was to explain that it does not need to be extermely hard and stressfull to write complex queries in rails projects. And it does not need to have a lot of strict sql written directly in your code, in your classes either. You can write complex queries in a way that is easy to read and understand using a combination of activerecord and arel and following some good practices.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fembed_code%2Fkey%2FipYtmVeEdAukJF&amp;url=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fembed_code%2Fkey%2FipYtmVeEdAukJF&amp;image=https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fadvancedquerieswithrubyonrails-180316121116-thumbnail.jpg%3Fcb%3D1521202312&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=slideshare" width="600" height="500" frameborder="0" scrolling="no"><a href="https://medium.com/media/003bfed9727e9502b434435313867fee/href">https://medium.com/media/003bfed9727e9502b434435313867fee/href</a></iframe>
* * *
Service Workers at Cloudflare
Tags: javascript, cloudflare, webdev, webperf
Published: 2018-03-17 13:41:37

---
title: Service Workers at Cloudflare
published: true
description: "Workers allow you to run JavaScript code on the Edge which is basically the outta rim of the Cloud. Cool thing is, it's based on a standard: Service Workers!"
tags: javascript, cloudflare, webdev, webperf
cover_image: https://thepracticaldev.s3.amazonaws.com/i/igdda0el2kc5hpmspwq5.jpg
---

[_Cover image by Christopher on Flickr_](https://www.flickr.com/photos/christopherf/)

Cloudflare has a new product, called [Workers](https://blog.cloudflare.com/cloudflare-workers-unleashed/), they allow you to run JavaScript code on _the Edge_ which is basically the outta rim of _the Cloud_. Cool thing is, it's based on a standard: [Service Workers](https://developer.mozilla.org/de/docs/Web/API/Service_Worker_API)!

## Why

Sometimes you want to do things with your Web application that isn't directly part of it. Like modifying requests or responses or caching. And sometimes you want to do this _and_ prevent clients from accessing these modifying code.

## What

A service worker is mostly transparent. It can for example intercept a `fetch` event and modify it somehow. Setting different headers, getting some of the content from a cache or different servers, etc.

But they run on the client.

Cloudflare Workers run on _the Edge_ of the Cloudflare infrastructure, right between your clients and your servers, but they have the same API as Service Workers. 

This means, you can write a service Worker that runs on your dev client, but won't run on your users clients, because you have a clean interface between the worker and the app.

This can be used to write static front-ends and route the requests through the Worker, for example to add API secrets that would normally need to set up a whole server. Since it runs on _the Edge_ the code is in geographical proximity to the client and not the server, which reduces latency.

## Conclusion

Cloudflare Workers seem to be a nice alternative to solutions like AWS Lambda. While [Lambda@Edge](https://docs.aws.amazon.com/lambda/latest/dg/lambda-edge.html) is a similar offering, the Workers adhere to the Service Worker standard, which could bring benefits on porting it to another provider or moving code between client and Edge when needed.

All in all, they give more power to the front-end and allow for less infrastructure.