teleren/devto huggingface dataset:
Changelog: Site-wide design changes and a few other goodies
Tags: meta, discuss, changelog
Published: 2017-12-12 19:57:24

---
title: "Changelog: Site-wide design changes and a few other goodies"
published: true
description: 
tags: meta, discuss, changelog
---

Whenever a website changes its design, there's bound to be mixed feelings. But we hope that these changes have improved some aspects of the site's usability.

Besides what is clearly visible, some other things of note: 

You now get a color generated on your profile if you don't pick a scheme. Plain gray was boring but if you like plain gray, go for it 😄. This change hasn't fully rolled out to everyone but it should shortly.

Also if you press the key `/` when you are not focused on an input, you'll jump right to the search bar. As the knowledge base grows, the search will become more and more useful and this shortcut should make it easier. At some point we'll also roll out settings so you can customize your bindings if you don't like the default. We anticipate that as we add more shortcuts like this some folks might like that option.

You'll see that the home page now includes #explainlikeimfive under #discuss on the right sidebar. We'll continue to experiment with _where_ content goes to be raised at the most appropriate time for consumption and discussion.

We have some kinks to work out now that the design is live, and everything is subject to change if you have any suggestions. This is day one of a design direction that brings some more personality and usability to the site, but it may not be fully baked yet.

Thanks so much to [Ara Ko](https://dev.to/arakodesigner) for freelancing with our team to create this redesign with us. She's looking for more work, so if you like what we did here, email yo@dev.to and we can put you in touch.

Anyway, thanks for being a great community.
12 Days of Kingfisher
Tags: showdev
Published: 2017-12-12 18:54:11

---
title: 12 Days of Kingfisher
published: true
tags: showdev
---

Hey all!

I’m super proud to announce my new web design agency, Made by Kingfisher. 

I'm also proud to announce #12DaysOfKingfisher. Starting today, we're giving away prizes in the days leading up to Christmas, including vouchers for Amazon, Odeon, WHSmith, restaurants and more!  

You can signup to receive daily alerts and enter today’s competition using the link below:

https://madebykingfisher.co.uk/advent

It’s been a real journey to get to where I am today, I can’t be more proud.
Explaining Net Neutrality to Non-Technical People
Tags: explainlikeimfive, netneutrality
Published: 2017-12-12 17:20:32

---
title: Explaining Net Neutrality to Non-Technical People
published: true
description: 
tags: #explainlikeimfive #netneutrality
---
Net neutrality is in the news, but I think there's a lot of confusion about what net neutrality is in the first place. I decided to take a stab at making an analogy to help non-technical people understand the general idea of what it is and isn't without getting into the weeds about ISPs, traffic shaping, QoS, zero rating and such. I'd love to hear people's thoughts and suggestions.

The internet service provider operates a toll bridge. Under net neutrality rules, they would be free to set their own prices for crossing the bridge, they can offer an ‘unlimited’ bridge crossing plan that allows subscribers to cross the bridge as many times as they want for a fixed monthly fee. They can charge higher tolls during busy hours.

They can charge heavier vehicles higher fees to compensate for the higher cost of providing service (i.e. more wear and tear caused by heavier vehicles). For example, they can have a weigh station and set the fees for crossing the bridge based on the weight of the vehicle.

However, they are barred from inspecting the contents of the truck and charging a fee based on the contents. They are barred from asking the driver their destination and varying the charge based on that.  They are barred from charging a low fee to cross the bridge to visit Whole Foods but a higher fee to visit Stop and Shop.
A quick look at Bechdel test data (& an awtools update)
Tags: rstats
Published: 2017-12-12 16:31:12

---
title: A quick look at Bechdel test data (& an awtools update)
published: true
description: 
tags: #rstats
---
https://thepracticaldev.s3.amazonaws.com/i/x1f1wy9ezy9yzzdngch2.PNG

A good visualization always grabs my attention and draws me into articles. I am an avid follower of the Washington Post, New York Times, The Economist and a host of other websites/publications that are doing their fair share of data driven journalism. A couple weeks ago I came across a this article, Men, women, and films from 1843 Magazine which is the Economist’s lifestyle magazine. The article drew me in with the tagline “how pronounced is the gender divide on the silver screen”.

view the full article at https://austinwehrwein.com/post/bechdel/
Parcel + Riot.js
Tags: javascript, packagebundler
Published: 2017-12-14 05:06:57

---
title: "Parcel + Riot.js"
published: true
tags: javascript,package bundler
canonical_url: https://blog.web-apps.tech/parcel-riot-js/
---

## tl;dr

- [Parcel](https://parceljs.org/)というJavaScriptのモジュールバンドラを触ってみた
- webpackなどと比べて設定ファイルなどもいらずとても簡単
- ホットリロードな開発サーバを簡単に実行できる
- Riotと組み合わせるのもそれほど難しくない

## Parcel + Riot.js
 ![Parcel + Riot.js](https://blog.web-apps.tech/content/images/2017/12/parcel.png)

[Parcel](https://parceljs.org/)というJavaScriptのモジュールバンドラが話題なのでさわってみました。  
国内で話題になっている元の記事は「[webpack時代の終わりとparcel時代のはじまり](https://qiita.com/bitrinjani/items/b08876e0a2618745f54a)」。  
[React](https://reactjs.org/)との組み合わせで記事を書かれています。

個人的には[Riot.js](http://riotjs.com/ja/)が好みなので、Riot.jsとの組み合わせで触ってみました。  
尚、webpackは挫折したため比較できません。

## Parcel/Riot.jsのインストール

npmを使ってインストールします。

```
$ npm install -g parcel-bundler riot
```

## source code

### ディレクトリ構造

以下の様なディレクトリ構造だとします。  
なお、練習用のため、動作確認に関係ない部分は適当に削っています。

```
src/
|- index.html
|- index.js
|- package.json
|- app/
| |- App.tag
```

### index.html

```
<!doctype html>
<html lang="ja">
  <head></head>
  <body>
    <App></App>
    <script src="index.js"></script>
  </body>
</html>
```

### index.js

```
import riot from 'riot'
import './app/tags'

riot.mount('App')
```

### App.tag

```
<App>
  <h1>Hello, parcel world!</h1>

  <script>
  import riot from 'riot' 
  </script>
</App>
```

### package.json

`package.json`は`npm init -y`で作成しました。

## compile/bundle & run

```
$ riot app/ app/tags.js
$ parcel index.html
```

上記のコマンドで `http://localhost:1234` でホットリロードのサーバが動作します。  
最終的な成果物を作る場合は `parcel build index.html`とすれば良いようです。

しかし、riot.jsのコンパイルはparcelの前段で別途行っているため、tagファイルの変更はwatchされません。riotコマンドに`-w`オプションをつけることでウォッチできますが、そのままだと二つのコマンドを別々の端末で開くなどする必要があり、若干面倒です。  
`package.json`の`scripts`に以下の三つのコマンドを追加します。

```
{
"watch": "npm run watch:riot & npm run watch:parcel",
"watch:riot": "riot -w app/ app/tags.js",
"watch:parcel": "parcel index.html"
}
```

追加したら、以下のコマンドを実行します。

```
$ npm run watch
```

これでコマンド一つでホットリロードの開発サーバを動作させることができます。
Introduction to Google Code-In
Tags: code, beginners, opensource
Published: 2017-12-12 13:19:35

---
title: Introduction to Google Code-In
published: true
description: You don’t need to be a nerd to get some certificates, T-shirts or even a trip to Google headquarters
tags: code, beginner, opensource
---

Did you just start your programming journey?

if your answer is a big “YES” then let me introduce you to Google Code-in. It’s an annually held challenge for pre-university kids. You need to be in the age group of 13–17 for attending this challenge.

## what’s that?

![logo](https://thepracticaldev.s3.amazonaws.com/i/1upwxm06cj7yivadui6o.png)

This challenge has tasks that are chosen by open source organizations like Ubuntu. The challenges vary from making a logo for their brand new app to fixing an issue on their production website. Even if don’t know programming then you can participate in Google Code-in. You need to complete as more challenges as you can to win this challenge.

## what’s exciting about it?

You don’t need to be a nerd to get some certificates, T-shirts or even a trip to Google headquarters. If you even complete 1 task you will get a certificate and after completing 3 tasks you will get a T-shirt along with it and when you win this competition you will get a trip to Google headquarters. Something that’s worth mentioning is every organization will have 2 winners so you don’t even need to be “one in billions to win this”.

## Where can I get started?

Google code-in starts from 28th November every year and it’s going on now so you can participate you just need a valid Google account. After signing in, it will ask for sign the Parental Consent form. Now, you can find a task that interests you, claim that task and start working on it.

Additional links:

[Getting Started Guide for google code-in](https://developers.google.com/open-source/gci/resources/getting-started)

[rules for google code-in](https://developers.google.com/open-source/gci/resources/contest-rules)

[Announcing Google Code-in 2017](https://opensource.googleblog.com/2017/09/announcing-google-code-in-2017.html)

[code-in FAQ](https://developers.google.com/open-source/gci/faq)

[Code-in 2016 winners](https://opensource.googleblog.com/2017/01/announcing-google-code-in-2016-winners.html)
Magento 2 Filter Product by Custom Attributes with Ajax Layered Navigation 
Tags: magento2extension, layerednavigation, filterproduct, productsearch
Published: 2017-12-12 09:45:57

---
title: Magento 2 Filter Product by Custom Attributes with Ajax Layered Navigation 
published: True
description: Product find ability is becoming a big issue when an eCommerce grows and possessing tons of products with various attributes, and visitors like to use that product attributes in the search queries. Magento platform has already developed default layered navigation system to help visitors using product attributes for product find-ability. 
tags: magento 2 extension, layered navigation, filter product, product search
---
<img src="https://www.mconnectmedia.com/blog/wp-content/uploads/2017/12/Easy-Way-to-Filter-Product-with-Custom-Attributes.png">

There are various types of product finding tools and technologies available on Magento platform. Among those, layered navigation is one and highly useful for the large online stores with tons of products in multiple categories.

However, default Magento native layered navigation is coming with some inherent limitations and need customization according to types and nature of the eCommerce business requirements.

M-Connect Media has found out an awesome solution to overcome the shortcomings of default Magento layered navigation system. It is the <a href="https://www.mconnectmedia.com/alnavigation-magento-2.html">AJAX-based Layered Navigation extension for Magento 2</a> stores. It has some additional and distinct advantages such as 

• The asynchronous data loading without reloading of the entire web page.
• It provides different filter types to implement and can position the filter module on any location of the web page.
• It provides a list of product attributes to make a selection as filtering parameters.
• As an additional feature, it offers rating filter to help merchants to achieve ranking in SERPs as well as build trust among the first time shoppers.
• It also provides stock filter as a utility feature.
• Similarly, price slider feature in the extension is an essential feature to woo price-conscious shoppers.

Interested to know how to allow your customers to filter Product with Custom Attributes? We have recently published blog post on <a href="https://www.mconnectmedia.com/blog/magento-2-layered-navigation-extension-filter-product-custom-attributes/">How to Filter Product with Custom Product attributes in Magento 2?</a>
What Are the Best Programming Languages to Learn in 2018?
Tags: mobileappdevelopment, uae, dubai
Published: 2017-12-12 08:28:28

---
title: What Are the Best Programming Languages to Learn in 2018?
published: true
description: Learning new programming languages is essential for every developer, new and old alike. Here are some of the best programming languages that every developer must master.
tags: mobile app development, uae, dubai
---

The world of technology is an ever evolving one. The programming languages used frequently a few years back have been replaced by newer and better options and to stay relative and in business one must learn with changing times and adopt newer technology. Every <a href="http://www.incubasys.com">mobile app developer</a> needs to learn these following programming languages to sustain 2018 and the coming years in the industry:

1. Javascript
Javascript has been around for years topping the charts every year and looking at the dynamics it is clear that this trend is not going anywhere for now. It allows developers to create cross-platform apps and software for desktop, web and mobile.

2. Java
Java because of its speed and safety level is extremely popular among financial and banking industries. This is not an easy language to learn and since not a lot of programmers learn it there is always a shortage of qualified and skilled Java developers in the market.

3. C#
C# is one of the most advanced programming languages and is used mainly for Microsoft .NET platform. It is quite similar to Java in use and functionality but a bit more difficult to learn than Java.

4. PHP
PHP is the most used programming language for server and according to a survey it accounts for more than 240 million websites currently on the internet. It’s a flexible language that can be used to create small and large websites with the same ease.

5. Python
Until recent years, PHP was more popular but after the advent of Python it won’t be an exaggeration to say that it is gaining the trust of young developers and slowly replacing PHP. Python’s convenient code structure makes it a great start for beginners and allows them to easily develop a project and further support it.

6. C++
If you are looking forward to learning a very versatile programming language then it is without a doubt C++. It might be a bit difficult for a newbie to grasp but once they do they can create application and software for any purpose and magnitude with this.

These are some of the programming languages that every programmer must learn if they want to stay in business in 2018.
Git 101 — Step 3: branches
Tags: github, git, bitbucket, webdev
Published: 2017-12-19 10:38:40

---
title: "Git 101 — Step 3: branches"
published: true
tags: github,git,bitbucket,web-development
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*QzHx-SVN3OC6VomhRstEig.png)

This time we are going to talk about how you can handle branches with Git on the terminal 🚀. For a full explanation check the video&nbsp;😉

{% youtube Kf4sjbE-G24 %}

#### What is a Git&nbsp;branch?

A branch is a separate workspace, it’s like a bucket where you can fiddle around without screwing the production application.

You create branches when you are gonna make new functionality or features for your application.

So let’s get started with branches!

#### Check your&nbsp;branch

**Check your&nbsp;branches**

If you want to know on which branch you are currently working? This command will tell&nbsp;you!

```
git branch
```

**Update your local&nbsp;branches**

So let’s face it! Sometimes your branches are behind of the branches on the remote. So to update this list, use this&nbsp;command.

```
git fetch origin
```

#### Do something with your&nbsp;branch!

**Create branch**

Now we want to create a branch, because we want to fiddle around without the code. Pretty easy command. _Keep in mind to use “-b” instead of the “-d”!!_ 😅_, because the “-d” will delete your&nbsp;branch!_

```
git checkout -b branch_name
```

**Push to a&nbsp;branch**

When you made some changes, staged them and added a commit message, we want to push our branch to the remote. Use this command for&nbsp;it!

```
git push origin branch_name
```

**Pull changes from a&nbsp;branch**

When your team member made some change to the same branch you are working on. You can pull those changes from the remote into your local branch with this&nbsp;command.

```
git pull origin branch_name
```

**Switch branch**

Sometimes you want to switch to another branch for some reason. Just checkout the other branch with this&nbsp;command.

```
git checkout branch_name
```

**Delete local&nbsp;branch**

Be careful with this command! If you didn’t pushed the changes in this branch, all the changes will be lost with this&nbsp;command!

```
git branch -d branch_name
```

#### Do you need some&nbsp;help?

If your working with Git, but getting stuck? Please let me know in the comments or hit me on twitter [@frontendmr](https://twitter.com/frontendmr) and I would ❤️ to help you&nbsp;out!

Did you liked this post? Please share it around&nbsp;🙏

_Originally published at_ [_Mr Frontend&nbsp;Blog_](https://blog.mrfrontend.org/2017/12/git-101-step-3-branches/)_._

* * *
ELI5: how to contribute to a project?
Tags: explainlikeimfive, discuss, help
Published: 2017-12-12 05:32:30

---
title: "ELI5: how to contribute to a project?"
published: true
description: Need guidance how to contribute to a project and where to start
tags: #explainlikeimfive, #discuss, #help
---

Hi there,

I'm thinking about contributing into an open project. I'm trying to get an idea, how to work in a team, even remotely, from home. To learn from more experienced peers, how they organize their code, how they add comments, what approaches do they use in problem solving, what are best practices and algorithms.

I know basics of git, but I haven't contributed to any project yet. My languages are pretty basic: PHP, C#, ASP, SQL, JavaScript, though I believe, I can solve more complicated tasks. All at a beginner or intermediate level. To tell the truth, it is hard for me to measure my level, because I spent many years of learning how to code. It was my hobby or a "side-effect" of my job responsibilities, where I had to research how to fix some features at my websites. My primary occupation was always events management.

And yes, I myself despise this way of thinking - "I wish I could..." or "Tell me how to do this..." I always do my best to find solution myself. I'm a stop-dreaming-start-doing guy. So, yes, I did some research/googled "how to participate in a project". But every time I end up with looking at a list of files in a github folder confused with where and how to start, who to contact, are they accepting contributors, you know )))

I'll really appreciate any guidance from you. Explain, please, like I'm 5.
I want to learn Python, where should I start?
Tags: discuss, python
Published: 2017-12-12 03:40:46

---
title: I want to learn Python, where should I start? 
published: true
description: I ask you to the path I should take learning python. 
tags: discuss, python 
---

I made a commitment this year to learn python, and so far I know nothing. I would like to at least know the basics. I don't want to master python, I don't even master JS/TS and I have been with them for a long time now. But just for fun. 

I want to learn python because is far from my comfort zone, for what I've read.

Thanks! :D.
What is infrastructure as code and why should you use it?
Tags: devops
Published: 2019-01-17 00:32:53

---
title: What is infrastructure as code and why should you use it?
published: true
tags: devops 
canonical_url: 
---

Infrastructure of code is just the process of writing down what makes a particular machine unique, in a way that both computers and humans can understand. (When I say infrastructure here, this is most often the servers that make up and support a given application or service.)

Depending on what configuration management software you choose to help you with this, you might be using Ruby, Python, or even Bash.

Does it run an http server? Does it have an increased number of file descriptors? What config files need to be in place for it to operate?

This resultant code can be run to recreate a machine or if it was changed incorrectly, even bring it back inline with how it should be if changes were made manually.

Having the definition be code allows you to do some things like:

- Versioning it. You can know when a change was made, by whom, and see the difference between versions.
- You can review changes. Since the definition is code you can begin to apply your peer review process (you do have a peer review process right?).
- It makes it easier to do the right thing. Ever find yourself SSH’d into a server (perhaps even prod?!) and making a change, all the while thinking “I’ll document this later, after I make sure it works.” IAC helps you avoid this. The way to make the change is the same way to codify it.

How does this differ from documentation? The code is human readable, but also machine runnable, so servers can be recreated/updated as needed where as with docs, there are separate steps, update the machine (by hand?) and then update the docs.

With infrastructure as code, defining/updating the state that you want is the same thing as documenting it.

Infrastructure as code is not the same as documentation. Just having the definition of a server codified and recreatable is not a replacement for documentation, but it allows you to focus on your docs on different things.

Instead of having to go through and write everything down all over again about what’s on the server, you can write about why that server does what it does and how it relates to other infrastructure or applications.

For example instead of having to say Server X is a CentOS server that runs Application Y and has ruby version 2.2.3 and is firewalled with such and such iptables rules. You can instead focus on docs like server X is a server for Application Y and is critical for it to continue running. If you need to know what’s on the box and its version, see the code.

What do you think? Leave a comment. For more like this see: https://thaiwood.io/DevTo