teleren/devto huggingface dataset:
#CodepenChallenge Think Small: Hand-drawn Parallax Badge
Tags: codepen, javascript, vue, showdev
Published: 2019-09-03 11:36:28

<p>The image is inspired by countryside townhouse, which was drawn by me (Using MS Paint, then using Powerpoint to make the background into transparent). Its perspective will move according to the position of the mouse pointer.</p>

<p>I used Base64 to show the image.</p>

<p>The movement is made by VueJS.</p>

---

# How it works

<p>Most of the source code is self explanatory, so I will just put the most important part.</p>

<p>These layers are made with many images, with different sizes. It is crucial for the 'parallax' effect.</p>

<p>With the source code below, we can do the parallax movement.</p>

```javascript
calc: function(el, w2, h2, x, y) {
  const w1 = el.w;
  const h1 = el.h;
  const w  = w1 - w2;
  const h  = h1 - h2;

  return {
    top:  (w * y * -1) + 'px',
    left: (w * x * -1) + 'px'
  };
},
```

<p>I just took the distance between the space between the sizes of image, then change the top, and left position based on the position of mouse.</p>

<p>The CSS source code is not that readable, because of the Base64 source code. But the important is line 33.</p>

---

<p>I hope you like it. Thank you for reading.</p>

---

# Demo

{% codepen https://codepen.io/takaneichinose/pen/jONGYMb %}
How to store Data for your Data Science Process
Tags: machinelearning, sql, database, mongodb
Published: 2019-09-03 11:36:10

Data Storing is the first step of Data Science process. Normally Data Scientists work with collection of Data, however, their are times at which they may need to store data on their own or may collaborate with Database Administrators to outline the process of data storing.

There are some general guidelines which I found useful, so, I have collected them in the form of an article.

You can read the complete article here on Medium :

https://medium.com/@saeeddev/learn-how-to-store-data-for-your-data-science-problems-even-if-you-dont-want-to-27e02dd9f781

Give a read to it, hit some claps and tell me what are the best practises which you try to follow in data storing?

I will be happy to have a discussion with you.
Focus vs Focus-Within
Tags: css, webdev, learning, beginners
Published: 2019-09-03 11:30:42

---
title: Focus vs Focus-Within
published: true
description: Choose the right pseudo-class for your needs. In this post, we'll examine the difference between focus and focus-within.
tags: css, webdev, learning, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/idm47q0thsgbanlvh80p.png
canonical_url: https://tenmilesquare.com/focus-vs-focus-within/
---

Today we're going to talk about a couple of different pseudo-classes. If you are unclear what a pseudo-class is I recommend starting with this post.

{% link https://dev.to/laurieontech/an-introduction-to-the-hover-pseudo-class-o2k %}

### Focusable elements

We're going to discuss `focus` and `focus-within`, but before we do it's worth reviewing what focusable means in the context of CSS.

An element is focusable if you can tap it, click it or tab to select. Good examples of this are form inputs and links.

The `focus` and `focus-within` pseudo-classes are both triggered when a user focuses on an element, albeit in different ways.

### focus

Let's review `focus` first. This pseudo-class is applied to an element. When that element is in focus the styling appears. 

Take this example of a list of inputs. Each input has its own id with a corresponding `focus` style.

{% codepen https://codepen.io/laurieontech/pen/yLBVLZG %}

Depending on which input you select, it will have the associated background-color.

Pay attention to the fact that this pseudo-class responds to an elements state and applies styling to that same element. For our next example, that won't be the case.

### How is focus-within different?

Focus-within is assigned to a parent element. The styling rules are applied when any child element receives focus. Selecting an input, clicking a link, etc.

As it turns out, our list example from before is a good one to use. If we assume each `input` is the child then that makes `li` the parent. So let's add `focus-within` to our `li` elements. *As in our previous example, we're actually adding an id and associating that with each li element.*

{% codepen https://codepen.io/laurieontech/pen/oNvYgvz %}

If we click on an input we see that the surrounding element receives color.

So what's actually happening? The `li` element is looking at the `input` inside of it. When that `input` receives focus the styles are applied. However, since the rule is on the `li` element, the style is applied to the `li` element, even though the state change occurs in the `input`.

Make sense?

### The "grandparent" element

Let's look at another example. `li` elements have yet another parent, `ul`. What if we applied our `focus-within` pseudo-class to that element?

{% codepen https://codepen.io/laurieontech/pen/KKPzowG %}

If we click on an `input` inside the `ul` the style is applied to the `ul` element.

### Conclusion

These are really neat CSS features, and understanding the difference between them will help you apply styles more directly. Can't wait to see what you make!
A DEV.to API client is born
Tags: go, tutorial
Published: 2019-09-03 11:07:53

# Episode 2 - Project foundation

So let's get going, be sure to have golang installed in your computer, if like me you're using macOS and Homebrew then you just need to execute the following command:

```bash
brew install go
```

## The API client

The module we are going to create will showcase the top 10 links to avoid a huge display block.

For this, we will need to access the information from [devto API](https://docs.dev.to/api) and for this, we need code to programmatically access this information and be able to use it.

So let's start

## The project directory

Open a terminal window and navigate to the place where you store your go code, thanks to the implementation of go modules it doesn't need to be the `src` folder inside the $GOPATH so I will navigate to `~/Code` on my terminal.

We are going to create the directory in which our module is going to live and then we will go inside the recently created folder, you can accomplish this by executing the following

```bash
mkdir devto-api-go && cd devto-api-go
```

## Initializing Go modules support

To initialize a Go module you need to execute the `init` command of the go mod tool, so let's do it, first I will put the "template" and then the actual execution, I like to do this because that is how my brain stores information, so sorry if it's confusing.

> :warning: This is important :warning: as you learn go you will 
> understand that some of the go tooling for using third party code 
> relies on git features.
>
> So when initializing a module you should use the path to your 
> repository in the form of `{provider}/{username}/{repository}`

I like to think of it as a mock for the folder structure I would have created if using the $GOPATH.

So from now on, I will use `path-to-your-repo` to alias the composition described in my previous quote.

```bash
# Template for initializing a new go module once you're inside the 
# project directory
go mod init {path-to-your-repo}
```

Which for our project will be

```bash
# Template for initializing a new go module once you're inside the 
# project directory
go mod init github.com/VictorAvelar/devto-api-go
```
Please don't be surprised if nothing comes back, you will also get used to the fact that in go, no news are amazing news :joy:

## The final touch

Once our module is ready, you can create a folder called `devto`, there is no reason for this, it is a thing I picked, but I cannot remember how :thinking:, but it will be useful in the future, I can promise that.

Finally this is how your `go.mod` file should look like

```go
module github.com/VictorAvelar/devto-api-go

go 1.12
```
Weekly Cloud-Native Digest #10
Tags: weeklydigest, news, cloud, cloudnative
Published: 2019-09-12 17:59:19

---
title: Weekly Cloud-Native Digest #10
published: true
tags: Weekly Digest, news, cloud, cloudnative
canonical_url: https://educosta.dev/blog/weekly-cloud-native-digest-10/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0ov6xhnzgga51ad9pkz7.jpg
---

Stay up-to-date with what’s going on in cloud-native ecosystem. News, tutorials and useful information on microservices, serverless, containers, kubernetes and more.

-[Kubernetes Acadamey](https://kubernetes.academy/) 									
-[How to break a Monolith into Microservices](https://martinfowler.com/articles/break-monolith-into-microservices.html) 									
-[On-Premises Serverless Architecture](https://medium.com/@vineet96/on-premise-serverless-architecture-ce1874b702b)
-[Four Points You Should Consider for Scaling DevOps](https://dzone.com/trendreports/scaling-devops-continued-adoption-and-success) 									
-[Podcast talk on Hybrid Cloud, Code Reviews, and Kubernetes.](https://medium.com/faun/last-week-in-devops-july-19th-e7bdfa33359f) 									
-[Developing Microservices with Eclipse MicroProfile](https://dzone.com/refcardz/eclipse-microprofile-1?chapter=1) 									
-[Mono-repo vs one-per-service](https://lumigo.io/blog/mono-repo-vs-one-per-service/) 									
-[What is Service Mesh and Why you should consider it](http://claudioed.tech/2019/08/28/what-is-service-mesh-and-why-you-should-consider-it/) 									
-[Serverless Web Scraping With Python, AWS Lambda and Chalice](https://blog.dannyaziz.com/serverless-web-scraping-with-python-and-aws-lambda/) 									


The post [Weekly Cloud-Native Digest #10](https://educosta.dev/blog/weekly-cloud-native-digest-10/) appeared first on [Be Cloud Native](https://educosta.dev). If you have any doubts or questions feel free to drop a comment here or reach me out on Twitter [@educostadev](http://twitter.com/educostadev).
Base API - Updates
Tags: baseapi, ruby, javascript, crystal
Published: 2019-09-03 10:27:19

Since the release of [Base API](https://www.base-api.io) a month ago, I posted it on [Product Hunt](https://www.producthunt.com/posts/base-api) (#2 Product of the Day) and [Hacker News](https://news.ycombinator.com/item?id=20797828) (got the front page) and got a lot of good feedback.

In the last few weeks I added some new features:

### Custom Data for Users

This was a highly requested feature and now you can to store arbitrary data in JSON format on a user in the `custom_data` field.
 
### Mailing Lists

You now can create [mailing lists](https://www.base-api.io/reference/mailing-lists) from the interface and can use it's `id` to:

* **subscribe** emails
* **unsubscribe** emails
* **send** the same email to all of subscribers

The API is simple and all of the current clients and examples are updated, which you can check out in the repositories on the [Github organization](https://github.com/base-api-io).

------------

If you are interested in the development of Base then check out the [Development Board](https://trello.com/b/PyPW6uwG/base-features) where I keep track of the features and their status.

If you have any questions or ideas let me know in the comments or send me a direct message.
Google Closure Compiler ... for C programmers
Tags: c, todayilearned
Published: 2019-09-03 10:00:56

Yes, you read it right, C programmers.

I've been having a fun time at Exercism, as my last posting indicates. Today, I worked on a C challenge, which required the writing of a function to say whether a number was an [Armstrong Number](https://en.wikipedia.org/wiki/Narcissistic_number) (also known as a Narcissistic Number) or not. 

What I wrote works ok, but I got to wondering, as I do, what the Closure Compiler would make of the code, seeing as JavaScript is in C's family tree. 

So I followed my own custom link to [Google Closure Compiler](https://closure-compiler.appspot.com/home#code%3D%252F%252F%2520%253D%253DClosureCompiler%253D%253D%250A%252F%252F%2520%2540compilation_level%2520SIMPLE_OPTIMIZATIONS%250A%252F%252F%2520%2540output_file_name%2520default.js%250A%252F%252F%2520%2540formatting%2520pretty_print%250A%252F%252F%2520%2540language%2520ECMASCRIPT3%250A%252F%252F%2520%2540warning_level%2520QUIET%250A%252F%252F%2520%253D%253D%252FClosureCompiler%253D%253D%250A) and got to work. 

The first thing I needed to do was make the C more JavaScript-like. I achieved this by replacing the `int` declarations with `var` in the body and replacing the function header's `int` with `function`. The parameter's `int` was removed completely.

So this
```c
int numlen(int n) {
    int len = 0;
    int div = n, mod = div % 10;
    while (mod != 0) {
        len++;
        div = div / 10;
        mod = div % 10;
    }
    return len;
}
```
becomes this
```javascript
function numlen(n) {
    var len = 0;
    var div = n, mod = div % 10;
    while (mod != 0) {
        len++;
        div = div / 10;
        mod = div % 10;
    }
    return len;
}
``` 
Closure Compiler boils that down to
```javascript
function numlen(a) {
  for (var b = 0, c = a % 10; 0 != c;) {
    b++, a /= 10, c = a % 10;
  }
  return b;
}
```
which I then took back into C, finally ending up with 
```c
int numlen(int n) {
  int div = n;
  int len = 0; 
  for (int mod = div % 10; 0 != mod;) {
    len++;
    div /= 10;
    mod = div % 10;
  }
  return len;
}
```
Is there a speed improvement? I don't know. Is there a readability improvement? Probably not. In fact, I pity the maintenance programmer who might not catch the fact the that `for` has no iteration clause, only an initialisation and a termination.

That's not the full solution, by the way, but just enough to give the gist of what I'm using Closure Compiler for. When my mentor gives the thumbs up to my code, I expect the full solution will appear on my public profile.

In a subsequent post I may show how I used Closure Compiler to help with a C# exercism.
Meditation app for iOS - dribbble shot implementation
Tags: ios, swift
Published: 2019-09-03 09:35:04

Implementing animations may be tricky and demanding but on the other hand users require both value and aesthetic look from their apps. How about taking one of our designer's dribbble shot and converting into native iOS application? See the results below!

|Dribbble shot|Demo app|
|:-:|:-:|
|[![Shot](https://github.com/elpassion/Showcase/raw/master/content/meditation-ios-demo/shot_animation.gif)](https://dribbble.com/shots/3853204-Meditation-app)|![Preview](https://github.com/elpassion/Showcase/raw/master/content/meditation-ios-demo/app_demo.gif)|

- Swift 4.2

## Source

- [Dribbble shot by Ela Kumela](https://dribbble.com/shots/3853204-Meditation-app)
- [iOS implementation by Bartłomiej Guminiak](https://github.com/elpassion/meditation-ios-demo)

## License

Copyright © 2019 [EL Passion](https://www.elpassion.com)
Stop procrastinating. Time to cut the bullshit. 
Tags: productivity, discuss
Published: 2019-09-03 09:35:01

Clears up my mind and know exactly what to do by making a to do list.
I use [Ticktick](https://ticktick.com/?language=en_US) and [Quire](https://quire.io). Making choices, deciding which option to go with, or deciding whether do or not something, consumes your willpower. 


Our brain is designed to be as efficient with our willpower as possible, in order to conserve energy, I will break down my enormous projects into smaller tasks. 

When encountered an ginormous task, the brain will immediately pop up a message telling me, "nope this task is way too big to handle, skip it". 
But when I break it down and focus on small tasks at a time. The brain will normalize the situation and function efficiently, thus, increasing more willpower to do the next task. 


What are some of your tips to avoid procrastinating during work?
ListViewWithSectionsAdapter for Android ListView, simple way to implement list view with sections.
Tags: android, programming, coding, tutorial
Published: 2019-09-03 09:07:19

---
layout: post
published: true 
excerpt: "ListViewWithSectionsAdapter for Android ListView, simple way to implement list view with sections."
title: ListViewWithSectionsAdapter for Android ListView, simple way to implement list view with sections.
tags: android, programming, coding, tutorial
comments: true
author: daniel
---

If you need to implement Android ListView with sections like in iOS world then the code below can help you with that. The first thing you need is to implement two View providers, one for section view and second for section entry view. To do that you just have to create a class that implements ListViewWithSectionsAdapter.ViewProvider<T> interface, example below.

```Java

public class ProfileSectionViewProvider implements ListViewWithSectionsAdapter.ViewProvider<BasicUserProfileSection> {

@Override
public View getView(int position, View convertView, ViewGroup parent, BasicUserProfileSection item, Context context) {
    View v = convertView;
    if (v == null) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(R.layout.basic_user_profile_section, null);
    }
    TextView sectionTitleTextView = (TextView) v.findViewById(R.id.sectionTitle);
    sectionTitleTextView.setText(context.getString(item.getDisplayNameResourceId()));
    return v;
    }
}
```

Another thing you have to implement is DataProvider:

```Java
ListViewWithSectionsAdapter.DataProvider dataProvider = new ListViewWithSectionsAdapter.DataProvider() {
    @Override
    public List<Object> getSections() {
        ArrayList<Object> objects = new ArrayList<Object>();
        objects.addAll(BasicUserProfile.getDefault().getSections());
        return objects;
    }

    @Override
        public List<Object> getEntriesForSection(Object section) {
            ArrayList<Object> entries = new ArrayList<Object>();
            entries.addAll(((BasicUserProfileSection) section).getEntries());
            return entries;
        }
    }
```

Then you need to create an instance of ListViewWithSectionsAdapter class and assing that to ListView as adapter:
```Java
listView.setAdapter(new ListViewWithSectionsAdapter(getActivity(), dataProvider, new ProfileSectionViewProvider(), new ProfileEntryViewProvider()));
```

That's all. 

The implementation of ListViewWithSectionsAdapter you can find on github: [ListViewWithSectionsAdapter for Android ListView](https://gist.github.com/danielmakurat/2ed33ef7a3d1100149ef)
When you so done with Stackoverflow sorting accepted answers wrong
Published: 2019-09-03 08:11:04

**Hold my beer, imma write a web extension**

I'm aware some already exist, but nothing that respects the super odd anchoring system they have.

Scratch code so far is

```js
[...document.querySelectorAll('#answers > div.answer')].reduce((acc, el) => [...acc, {anchor: el.previousElementSibling, answer: el, votes: +el.querySelector('div[itemprop="upvoteCount"]').getAttribute('data-value')}], []).sort((a, b) => b.votes - a.votes)
```
How I used brute-force where I least expected it
Tags: python, challenge
Published: 2019-09-03 08:08:58

There is a very old *issue* regarding "encoding detection" in a text file that has been partially resolved by a program like [Chardet](https://github.com/chardet/chardet). I did not like the idea of single prober per encoding table that could lead to hard coding specifications.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/abb4qex3neg66gexvj94.gif)

I wanted to challenge the existing methods of discovering originating encoding. 

You could consider this issue as obsolete because of current norms :

> You should indicate used charset encoding as described in standards

But the reality is different, a huge part of the internet still have content with an unknown encoding. (One could point out subrip subtitle (SRT) for instance)

This is why a popular package like [Requests](https://github.com/psf/Requests) embed Chardet to guess apparent encoding on remote resources.

You should know that :

  - You should not care about the originating charset encoding, that because two different table can produce two identical files.
  - BOM ([byte order mark](https://en.wikipedia.org/wiki/Byte_order_mark)) is not universal and concern only a tiny number of encodings and not only Unicode !

I'm brute-forcing on three premises (in that order) :

  - Binaries fit encoding table
  - Chaos
  - Coherence

*Chaos :*  I opened hundred of text files, written by humans, with the wrong encoding table. I observed, then I established some ground rules about what is obvious when it seems like a mess. I know that my interpretation of what is chaotic is very subjective, feel free to contribute to improve or rewrite it.

*Coherence :* For each language there is on earth (the best we can), we have computed letter appearance occurrences ranked. So I thought that those intel are worth something here. So I use those records against the decoded text to check if I can detect intelligent design.

So I present to you [Charset Normalizer](https://github.com/Ousret/charset_normalizer). The Real First Universal Charset Detector.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ooz107intsclrpzkkj9h.PNG)

Feel free to help though testing or contributing.
Python Wrap Up - August 2019
Tags: top7, bestofdev, python
Published: 2019-09-03 08:04:16

Hi! I'm Vicente, your friendly Filipino mod for the #python tag. Today is another episode of the Top Python Posts of the month!

At the end of each month, I'll be curating the top #python posts based on traffic & engagement.

# 1.) 10 Great Programming Projects to Improve Your Resume and Learn to Program

One of the common questions we get when it comes to learning how to program, is: “What are some good ideas for projects to build?”

{% link https://dev.to/seattledataguy/10-great-programming-projects-to-improve-your-resume-and-learn-to-program-1e2h %}

# 2.) I Built a Bot to Try and Get Money Back From My Internet Provider

In my contract with my ISP, they gave me a range of speeds to expect but also a speed that was the guaranteed minimum. If they aren't able to keep above this minimum, I'm eligible for a discount a few times per year.

{% link https://dev.to/healeycodes/i-built-a-bot-to-try-and-get-money-back-from-my-internet-provider-33ip %}

# 3.) I am going to automate you with Python | Reverse Python Lab

In this lab, I am going to automate you with Python so you will start to fly end of this experiment.

{% link https://dev.to/coderasha/i-am-going-to-automate-you-with-python-reverse-python-lab-474e %}

# 4.) List of resources for junior developers

Starting on programming can be very exciting but at the same time scary. A lot of times I've come across articles and people highlighting the importance of having a mentor to help get your foot in the door in the industry.

{% link https://dev.to/lewiskori/list-of-resources-for-junior-developers-2l63 %}

# 5.) Web Scraping 101 in Python

In this post, which can be read as a follow up to our ultimate web scraping guide, we will cover almost all the tools Python offers you to web scrape. We will go from the more basic to the most advanced one and will cover the pros and cons of each. Of course, we won't be able to cover all aspect of every tool we discuss, but this post should be enough to have a good idea of which tools does what, and when to use which.

{% link https://dev.to/daolf/web-scraping-101-in-python-5aoj %}

That wraps up the top [#python](https://dev.to/t/python/) posts for this month. If you'd like to read more, check out [#python](https://dev.to/t/python/) or follow [The Python Dev](https://twitter.com/The_Python_DEV) on Twitter!
How do you manage your time?
Tags: discuss, productivity, help
Published: 2019-09-03 07:55:41

I find time management very tricky, having being diagnosed with ADD in my early childhood. Time management has always been an issue for me.

Especially now since I'm a Family man, working full-time, studying part-time, side projects and freelance work.

What do you use to manage your time efficiently?

Any MOOC courses, mobile apps, Python automation recommendation?