teleren/devto huggingface dataset:
Thousand forests in one acorn
Tags: codepen
Published: 2019-08-04 07:05:28

<p>"The creation of a thousand forests is in one acorn."
― Ralph Waldo Emerson</p>

<p>Poisson disk sampling ported in JS by @Nicoptere from <a href="http://devmag.org.za/2009/05/03/poisson-disk-sampling/" target="_blank">http://devmag.org.za/2009/05/03/poisson-disk-sampling/</a></p>

{% codepen https://codepen.io/sbuellet/pen/MNoJzM %}
Bringing the code format to legacy.
Tags: codequality, java, productivity
Published: 2019-08-04 06:57:35

A project without legacy code as hypothetic as the existence of developer who doesn't code.

You might write a clean code today and it will be a legacy code after sometimes, so we can't get rid of the legacy code in our field.

Now let's start the point, we have a project started 2011 and some of the codes are not even changed till date, so i have been assigned to format the entire code base to [google style](https://google.github.io/styleguide/javaguide.html)  I tried the following bash function to find out the last updated date of each file.


```
function ghlbt {
         git ls-tree -r --name-only HEAD |
        while read filename  ;
        do
            if
                [[ $filename == *.$1 ]] ; then echo " $filename ," $(git log -1 --format="%ad, %an" -- $filename);
            fi  ;
        done >> $1_$2.csv
}
```

` please replace $1 with the extension and $2 with the directory name or whatever suffix you need `

we got a CSV file and order by the date updated.
`"%ad, %an"` you can change this as well, you can get google for other patterns.

we thought of cleaning up the old one first, but after generating the CSV I realized that we have 1200+ java files and it's not a good idea to format all, so we thought of making use of our Jenkins to do that and make the process automated.

we are using Gradle for building projects. fortunately, there is formatter available for Gradle. 
```
buildscript {
  repositories {
    mavenCentral()
    jcenter {
    }
  }

dependencies {
    classpath "gradle.plugin.com.github.sherter.google-java-format:google-java-format-gradle-plugin:0.8"
  }
}
```
add the following to plugin 
`apply plugin: "com.github.sherter.google-java-format"`

so the job in Gradle is done now.

in jenkins, we use regular git comments after getting the commit hook to the production branch, and from there we create an intermediate branch, to format the code and commit that to the master after formatting.


Part 2 will be talking about the jenkins pipeline codes.
Sudoku puzzle with react hooks
Tags: githunt, react
Published: 2019-08-04 06:52:55

---
title: Sudoku puzzle with react hooks
published: true
description: sudoku puzzle with react hooks
tags: githunt, react 
---

I just got my hands react hooks by creating a sudoku puzzle.

{% github pranayrauthu/pk-sudoku %}


https://pk-sudoku.pranayrauthu.now.sh
Can you spot the problem in the implementation of nthElement?
Tags: challenge, elm
Published: 2019-08-04 06:44:05

---
title: Can you spot the problem in the implementation of nthElement?
published: true
description: 
tags: challenge, elm
---

There is a problem with this implementation of `nthElement`:

```elm
nthElement : List a -> Int -> Result String a
nthElement list n =
  if n >= 0 then
    nthElementHelper list n
  else
    Err ("The index must be non-negative: " ++ String.fromInt n)

nthElementHelper : List a -> Int -> Result String a
nthElementHelper list n =
  case list of
    [] ->
      Err ("List too short by " ++ String.fromInt (n+1) ++ pluralize n "element" "elements")

    x :: rest ->
      if n == 0 then
        Ok x
      else
        nthElementHelper rest (n-1)
```

Can you spot the problem and fix it so that it passes all the following tests?

```elm
nthElement : Test
nthElement =
  describe "nthElement"
    [ describe "empty list"
        [ fuzz Fuzz.int "can never find the nth element of the empty list" <|
            \n ->
              Ch1.nthElement [] n
                |> Expect.err
        ]
    , describe "non-empty list"
        [ test "it returns the 1st element" <|
            \_ ->
              Ch1.nthElement [1, 2, 3, 4, 5] 0
                |> Expect.equal (Ok 1)
        , test "it returns the 2nd element" <|
            \_ ->
              Ch1.nthElement [1, 2, 3, 4, 5] 1
                |> Expect.equal (Ok 2)
        , test "it returns the 5th element" <|
            \_ ->
              Ch1.nthElement [1, 2, 3, 4, 5] 4
                |> Expect.equal (Ok 5)
        , test "it returns an error given a negative index" <|
            \_ ->
              Ch1.nthElement [1, 2, 3, 4, 5] -1
                |> Expect.equal (Err "The index must be non-negative: -1")
        , test "it returns an error given an out of bounds index" <|
            \_ ->
              Ch1.nthElement [1, 2, 3, 4, 5] 5
                |> Expect.equal (Err "List too short by 1 element")
        ]
    ]
```

Share your thoughts in the comments below.

**P.S.** *I personally made this error and I found it due to the tests. Tests can still be useful even in a typed functional language.*
[german|deutsch] - Feedback für React-Kurs
Tags: learning, teaching, journey, german
Published: 2019-08-04 06:42:25

---
title: [german|deutsch] - Feedback für React-Kurs
published: true
tags: learning, teaching, journey, german
---

Hallo zusammen,

ich habe einen ["React für Beginner"-Kurs](https://www.youtube.com/playlist?list=PLVyp9714_1yLU8EUh4FbOoGPnvsNcAqyB) erstellt
und **freue mich über Feedback**, um ihn besser zugestalten.

Der Kurs ist work-in-progress, ich freue mich **ebenso über Themen-Ideen**.


[Link zu YouTube](https://www.youtube.com/playlist?list=PLVyp9714_1yLU8EUh4FbOoGPnvsNcAqyB)


Eigene Ideen:
* Channel-Logo
* Channel-Banner
* Intro vor Video


Danke!
Do I need to remember all the 300+ CSS Properties?
Tags: css, webdev, beginners, tutorial
Published: 2019-08-04 05:12:09

First of all, I would like to share why I picked this topic.

When I started learning web development languages such as HTML, CSS, naturally I always needed a constraint satisfaction to learn it. I think everyone wants to get this satisfaction. 

I mean we always want to know the boundaries of learning so that we can start from the start and end at the end. And then we know how much we have learned and how much does it remain to learn.
 
We take the example of CSS to understand. I wanted to know how many properties exist to learn and how many aspects are of the single CSS property.

Then I found there are more than 500 properties. But modern browsers don't support all the properties. And I found that some properties are partially supported by the browsers.

Now, a developer would like to get the following things at one place without wasting time.

1. All properties
2. Description of what a property does?
3. Syntax of that property
4. All possible values of this property with a description and practical implementation
5. Default value
6. Applicability 
7. Compatibility because not all browsers support every property
8. The practice of each possible value of the property
9. The practice panel

And this was irritating for me to find all these things in different places or even google it. On top of that do I need to remember all of them when I come back to the usage of these properties after a long time.

<b>Now how did I solve this problem?</b>

I summed up more than <a href="https://www.web4college.com/css-play/index.php" target="_blank" title="list of 300 properties"><b>300 CSS properties</b></a> in a single page. You can filter each one. Each property is pointing to a single page that has covered up all the above-given points.


Now if have a little idea about a property (i.e. only unambiguous name), you can filter it from our index. And you can dig into it. See a sample page of the <a href="https://www.web4college.com/css-play/demo-border-property.php" target="_blank">border property</a>.


I think we always follow this approach to learn some new technology provided no one forces us to learn it as in the university with some boring conventional studies.
Create GitHub PR based on a shared component upgrade?
Tags: help, react, javascript, github
Published: 2019-08-04 05:05:01



---
title: Create GitHub PR based on a shared component upgrade?
published: true
tags: help, react, javascript, github
---

Private shared React component living [here](https://bit.dev) and installed cross several projects. Each project handled by different teams. I want to create a PR on all repositories using the component every time a new version of the shared component is published.

Does anyone know of an existent solution? Checking [dependabot](https://dependabot.com/) now, but not sure if that will work with private things :P.
How To Monetize Private GitHub Repos
Tags: developer, programming, howto
Published: 2019-08-04 01:35:08

---
title: How To Monetize Private GitHub Repos
published: true
description: Sell your private GitHub R\repos on SugarKubes
tags: developer, programming, howto
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qycwj3w5ckxhhjsnolow.png
---

I've written a ton of code, and have had a ton of projects that never went anywhere. Some of them were full end-to-end products that never got off the ground for one reason or another. They were a ton of effort and I thought it would be great to be able to monetize those somehow. 

6 months ago I created SugarKubes to empower indie developers to make a living writing great code. It didn't work. I think part of the problem was that the old SugarKubes made people upload their code to our GitLab instance. It was also an experiment in a managed marketplace wherein the company created all the containers and code for sale. 

I decided to simplify SugarKubes to allow anyone to easily sell a private Github repo. You just log in, set up your project, and will get a simple URL you can embed or send people to purchase access or a subscription to your project on GitHub. 

If you're interested in getting started, feel free to hit me up on the chat at [SugarKubes](https://sugarkubes.io)

Hugs, 

AP
Scrapping WebPages from CommonCrawl Archive ? 
Tags: javascript
Published: 2019-08-04 00:20:29

I Recently started an Open-Source project to build a Nodejs scrapper for CommonCrawl web archive. 

The current version fetches the snapshots for any given URLs, and the next version will parse those snapshots and give RAW html data output. From there, Cheerio can be used to parse individual datapoints. 
 
It helps crawl web-pages about 100X faster than crawling them from their own hosting servers and the data is fairly up-to date. 

CommonCrawl data is hosted on AWS and running from the same DC with Lambda Functions (I have higher limits) I was able to crawl & parse 300M pages in about a day without worrying about rate-limits, Bot detection, proxies or slowing down websites. 

Is this something you like to see ? [Link to the repo if you are interested](https://github.com/subhashchy/commoncrawl)
GitOps: Deploying apps in Azure Kubernetes Service (AKS) with Flux
Tags: flux, gitops, kubernetes, aks
Published: 2019-08-04 16:54:41

---
title: GitOps: Deploying apps in Azure Kubernetes Service (AKS) with Flux
published: true
tags: flux, gitops, kubernetes, aks
canonical_url: https://carlos.mendible.com/2019/08/04/gitops-deploying-apps-in-azure-kubernetes-service-with-flux/
---

Recently I learned about GitOps which is a way to manage your Kubernetes clusters and the applications you run on top using Git. The idea is that you can declaratively describe the desired state of your systems in Git and roll out changes as soon as merges occur.

You can immediately see the main benefits of such an approach: Your Git repositories become the single source of truth for both your infrastructure and application code, allowing the teams to increase productivity and stability (you get the Git log to audit changes).

To implement GitOps you can use and configure [Flux](https://docs.fluxcd.io/en/latest/) following some simple steps:

## 1. Download the helm template

```
helm fetch `
  --repo https://fluxcd.github.io/flux `
  --untar `
  --untardir .\.charts `
  --version 0.10.2 `
  flux

```

## 2. Bake the template with your repo (I don’t use Tiller)

```
helm template flux `
  --set git.url="git@github.com:cmendible/kubernetes.samples" `
  --set git.path="19.flux" `
  --set git.pollInterval="5s" `
  --namespace flux `
  --output-dir .\.baked .\.charts\fluxcd

```

As you can see I’m configuring [Flux](https://docs.fluxcd.io/en/latest/) to use my k8s sample repo and the [19.flux](https://github.com/cmendible/kubernetes.samples/tree/master/19.flux) folder, which contains a simple deployment [file](https://github.com/cmendible/kubernetes.samples/blob/master/19.flux/dni-function.yaml), but of course you can have more resource definitions.

## 3. Deploy the configuration to your cluster

```
kubectl apply -f .\.baked\flux\templates\

```

## 4. Get the fluxctl CLI

Download the [fluxctl CLI](https://github.com/fluxcd/flux/releases/tag/1.13.2)

## 5. Use fluxctl to get the public key

```
fluxctl identity --k8s-fwd-ns flux

```

This key is needed to sync your cluster state with the Git repository (GitHub): Copy the key you obtained and use it to create a **deploy key** with write access on your GitHub repository (Settings > Deploy keys > Add deploy key > check Allow write access > paste the Flux public key > click Add key)

You are all set. If everything runs smooth you’ll find a new deployment in your cluster with the **dni-function** name.

To learn more about GitOps check: [Weaveworks](https://www.weave.works/technologies/gitops/)Click here to learn more about [Flux](https://docs.fluxcd.io/en/latest/)

Hope it helps!
How to create and fill out your own PDF form with Java
Tags: java, pdf, form, pdfbox
Published: 2019-08-03 22:23:57

---
title: How to create and fill out your own PDF form with Java
published: true
description: Create PDF form with Java
tags: java, pdf, form, pdfbox
cover_image: https://thepracticaldev.s3.amazonaws.com/i/s6ughfvy2ukx5vr52z5r.png
---
##Introduction

In this tutorial, you will learn how to populate a PDF document with Java using the [PDFBox](http://www.pdfbox.org/) library. In addition you will see how to create your own forms or add editable fields to an existing PDF document.

##Creating a simple form

To create a form, let's use [LibreOffice Draw] (https://www.libreoffice.org/).

Display the form toolbar. View Menu > Toolbars > Form Controls.

![](https://thepracticaldev.s3.amazonaws.com/i/o8z8zkhckpmj6q52b0vq.png)

In a blank document, enter two text fields:

![](https://thepracticaldev.s3.amazonaws.com/i/xpg0iq3une70xwepc1zv.png)

Display the properties of the text field:

![](https://thepracticaldev.s3.amazonaws.com/i/hstcje005dcteunlby13.png)

Rename the fields to 'txt_1' and 'txt_2' respectively. Also leave the 'Read-only' property as 'Yes'.

Export the document as PDF. Mine is like '/tmp/pdf-java.pdf'

My template looked like this:

![](https://thepracticaldev.s3.amazonaws.com/i/5elldti2dfjq20kqypju.png)

##Populating the PDF through Java

Create a new maven Java project and add the dependency below:

```xml
<dependency>
  <groupId>org.apache.pdfbox</groupId>
  <artifactId>pdfbox</artifactId>
  <version>2.0.16</version>
</dependency>
```

Create a Java class with the code below:

```java
    public static void main(String[] args) {
        try {
            PDDocument pDDocument = PDDocument.load(new File("/tmp/pdf-java.pdf"));
            PDAcroForm pDAcroForm = pDDocument.getDocumentCatalog().getAcroForm();
            PDField field = pDAcroForm.getField("txt_1");
            field.setValue("This is a first field printed by Java");
            field = pDAcroForm.getField("txt_2");
            field.setValue("This is a second field printed by Java");
            pDDocument.save("/tmp/pdf-java-output.pdf");
            pDDocument.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
```

Run the program and see the result:

![](https://thepracticaldev.s3.amazonaws.com/i/ax3oe78n9beau9y4n0at.png)

Remember, the ending file was saved to: "/tmp/pdf-java-output.pdf".

The complete source code it's on github:

https://github.com/sandrogiacom/pdf-java


##Conclusion

In this short tutorial, we learned how to populate a PDF from a PDF template created with LibreOffice Draw. Use your creativity to create beautiful templates, do automation, create batch files and more.

Leave in the comments what your use case would be.

See you soon!


[![](https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)](https://twitter.com/sandrogiacom)
How to align images in markdown
Tags: markdown, github
Published: 2019-07-29 19:48:11

---
title: How to align images in markdown
published: true
description: "A quick guide on aligning images in markdown for pretty README files"
canonical_url: https://davidwells.io/snippets/how-to-align-images-in-markdown
tags:
  - markdown
  - github
---

> Originally posted on [davidwells.io](https://davidwells.io/snippets/how-to-align-images-in-markdown)

Markdown is awesome. It's a fantastic way to write content quickly without the overhead of formatting with a WYSIWYG editor. If you are unfamiliar with `.md` files checkout the basics [here](https://guides.github.com/features/mastering-markdown/) & [here](https://daringfireball.net/projects/markdown/).

Writing text in markdown is super quick and easy, but **what about aligning images**?

Read on to learn how! The full code can be found in this [github gist](https://gist.github.com/DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d/)

# Image alignment in markdown

Normal markdown image tags don't allow for any alignment properties and thats a bummer when you are trying to make your `README.md` file pretty on github.

```md
<!-- No alignment options -->
![GitHub Logo](/images/logo.png)
```

Luckily, we can use `html` image tags to make enhance our docs.

```html
<!-- Alignment options!!!!! -->
<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">
```

## Left alignment

This is the code you need to align images to the left:

```html
<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">
```

## Right alignment

This is the code you need to align images to the right:

```html
<img align="right" width="100" height="100" src="http://www.fillmurray.com/100/100">
```

## Center alignment example

Wrap images in a `p` or `div` to center.

```html
<p align="center">
  <img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
```

## Markdown Formatting on steroids

If you like this, you might enjoy [markdown-magic](https://github.com/davidwells/markdown-magic). I built it to automatically format markdown files and allow folks to sync docs/code/data from external sources.
Using FullClip(jquery plug-in) to switch between backgrounds
Tags: html, tutorial, javascript, webdev
Published: 2019-08-03 21:04:19

---
title: Using FullClip(jquery plug-in) to switch between backgrounds
published: true
description: Changing multiple backgrounds with a jquery plug-in
tags: Html,tutorial,javascript,webdev
cover_image: https://i.ibb.co/8s5jr44/Cover.png
---

Recently I've started working more with Jquery and Plug-ins that Jquery has to offer like SuperSlides, EasyPieChart, CountUp.
Trying some of them made me come across one that is pretty handy, and easy to set up, and its call FullClip.

##About Full Clip
This simple plugin does only one thing and it does it well - it creates a responsive full-screen body background image by specifying the desired image whether it is a local or remote one. Also, it can create a beautiful background image slideshow by specifying an array of images. 
*via GitHub*

##Set up
The set-up for the plugin is quite simple, the first thing we have to do is to download it from the [GitHub Repo](https://github.com/bdimitrovski/full_clip).
**After downloading**  the files from repo, we will get the following files
![alt text](https://i.ibb.co/qghJSFj/prvi-Screnshot.png)
The files we need are in the **src** folder
![alt text](https://i.ibb.co/HGQMS8p/drugi-Folder-Screnshot.png)
Copy both files to your root folder and link the fullclip.js to your index file and you're ready to go
```html
<script src="fullclip.js"></script>
```

## Coding with the PlugIn

I will use some simple examples on how to use the PlugIn. 
First, we will create in the Html a simple container and a class with the name **.fullBackground**

```html
<section class="container">
  <div class="fullBackground"></div>
  <h2 class="caption">The future is now</h2>
</section>
```
##Styling
After setting up the Html, we will need some styling in the CSS, you can set up your section or header as you wish, I will use this only as an example.

```css
.fullBackground {
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```

##Jquery Code
In the code, we have set up an array of images that will be used as a slideshow.
We can set up the transition time and the delay of transition between images.
In the end, it is up to you to customize it for your needs 🙂

```javascript
$('.fullBackground').fullClip({
  images: ['images/house.jpg', 'images/road.jpg', 'images/winter.jpg'],
  transitionTime: 1000,
  wait: 7000
});
```

To see the full effect of the plugin and how it works, you can download the official Repo from [GitHub](https://github.com/bdimitrovski/full_clip).
Also, I have a template that I've made with FullClip that you can also download from my [GitHub Account](https://github.com/StraleB/Bar-page-template-with-jquery-plugin)😊

Hope that you enjoyed reading this, and if you have more recommendations for a plugIn that you think It's useful, make sure to let me know 😊