teleren/devto huggingface dataset:
From HackMD to PDF
Tags: latex, markdown, pandoc, pdf
Published: 2020-05-09 08:42:49


Full disclosure, I'm a big fan of Markdown, and also a big fan of [HackMD](https://hackmd.io) (and it's community fork [CodiMD](https://codimd.org)). 

Now imagine you have to write a technical assessment or specifications and you started writing it down on hackmd/codimd because, you know, reasons 😤. But then, for the sake of the argument, let's say that you have to produce a deliverable artifact that can be shipped to someone, like a customer; then a link to a online document might just not cut it 🤔. 

So what to do? Alright, easy solution, fire up [typora](https://typora.io/) (or similar), paste the markdown, File > Export >  PDF. The day is saved.

You go back skimming through the news and you find this: [Writing a Book with Pandoc, Make, and Vim](https://keleshev.com/my-book-writing-setup/)

Wait a second... what if... 🤯 `vim Makefile`

```
AU_HACKMD_CODE  = bfScafhcTdGzzhJ4B3evlQ
AU_FONT         = NeufileGrotesk
AU_FONT_DIR     = $(HOME)/.fonts/NeufileGrotesk
AU_OUTFILE      = $(HOME)/$(AU_HACKMD_CODE).MD.$(shell date +%F).pdf
AU_FORMAT       = article

hackmd2pdf:
	@echo format doc
	curl -s -L "https://hackmd.io/$(AU_HACKMD_CODE)/download" -o /tmp/$(AU_HACKMD_CODE).md
	pandoc /tmp/$(AU_HACKMD_CODE).md -o $(AU_OUTFILE) \
  --table-of-contents \
  --pdf-engine=xelatex \
  --highlight-style=monochrome \
  --number-sections \
  -H $(HOME)/.config/apeunit/header-$(AU_FORMAT).tex \
  -V 'mainfont:$(AU_FONT)' \
  -V 'mainfontoptions:Extension=.otf, UprightFont=*-MediumExtended, BoldFont=*-BoldExtended, ItalicFont=*-MediumExtendedItalic, BoldItalicFont=*-BoldExtendedItalic, Path=$(AU_FONT_DIR)/' \
  -V 'fontsize: 12pt' \
  -V 'papersize: A4' \
  -V 'urlcolor: blue' \
  -V 'date: \today{}' \
  -V 'documentclass: $(AU_FORMAT)' \
  -V 'geometry:margin=3.8cm'
	xdg-open $(AU_OUTFILE)
	@echo done

```

```
make hackmd2pdf HACKMD_CODE=bfScafhcTdGzzhJ4B3evlQ
```

BOOM![^deps][^pandoc]

Now, I do understand that from a pure aesthetic point of view this might not be enough to satisfy the sensitive eye of the graphic designer, but it can be shipped!

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

[^deps]: some dependencies need to be installed, on ubuntu `texlive-xetex` and `pandoc`
[^pandoc]: this command will not work for you, because it contains specific branding stuff from [Ape Unit](https://apeunit.com), but if you are looking for a simpler one, look [no further](https://gist.github.com/noandrea/1082b6649d526d301980b97365691b1c)!
Intro to Node.js and Telegraf API | Telegram Bot Development | Part 1
Tags: telegram, node, bot, tutorial
Published: 2020-05-11 21:08:01

{% youtube elmm7woOJyU %}

Telegram bot development using *node.js* and *Telegraf* API.

During lockdown I thought of creating a series on telegram bot development and I live streamed it on Youtube.
This is my 1st post on dev.to, feel free to give me constructive comments on improvement. I would love to hear and improve myself.

Also, do subscribe to my YouTube channel.

*You will learn:*
 - The Telegraf library and Telegram Bot API.
 - Basic Bot Functions such as commands, middlewares, context shortcuts.
 - Learn to call External APIs and return the processed information to users with bots.
 - And a lot more.

*Requirements:*
 - Basic Programming (everything will be taught from basics).
 - Telegram Account.

*Example Bot:*
Search for @covid_19_india_bot on telegram or click here
https://t.me/covid_19_india_bot
What’s your alternative solution? Challenge #41
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-11 20:58:14

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that converts a string to an array of characters

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge36

println(getChars("I like JavaScript"));

function getChars(s)
{
    return Array.from(s);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Which physical book to learn JavaScript from for absolute beginners who only know HTML and CSS?
Tags: javascript, webdev, beginners, books
Published: 2020-05-11 20:39:19

Hi. I am new. I know HTML/CSS and now trying to learn JavaScript. It would be my first ever "real" programming language. I would like some suggestions of books that teach from bottom-up, from the basics all the way up to more advanced things.

 I searched up beginner books but many of them seem to assume one or more of (A) You know the basics of JavaScript (B) You are a programmer coming to JavaScript from some other language (C) You know the fundamentals of programming. Some books for instance that operate under these assumptions or are too terse for me are Eloquent JavaScript, The Good Parts, You Don't Know JS, Speaking JS, The Definitive Guide. My aim is to be able to learn React/Angular after learning JS and be able to build web apps and websites. 

What physical print book recommendation would you thus give to a complete novice to programming and JavaScript (I don't know the fundamentals of programming and don't know any programming language or JavaScript) who only has HTML/CSS basics down? The book should start from the absolute fundamentals/basics of JavaScript and follow ES6 or later and thus published after June 2015 (recent) when ES6 was finalized.
Introducing Prototope - utility-first CSS-in-JS library!
Tags: javascript, webdev, library
Published: 2020-05-11 20:15:08

You might know that  **CSS-in-JS**  has been growing in popularity recently. Due to better maintainability and flexibility, JavaScript has become a legitimate alternative to the usual CSS.

Now, I've recently created a new JavaScript UI library called  [Isotope](https://areknawo.com/isotope)  with a goal of combining high performance and memory efficiency (check out the  [benchmark](https://krausest.github.io/js-framework-benchmark/current.html)) with approachable and easy-to-use API. Personally, I think that results look promising. But naturally, as it's a relatively new library, it doesn't have an ecosystem required to be a legitimate go-to tool for many of its potential users.

With this in mind, I'm happy to announce that the Isotope ecosystem is now extended by one new library -  [Prototope](https://areknawo.com/prototope)! It's a CSS-in-JS library to go along with Isotope, but with a little twist.

![Prototope's logo](https://areknawo.com/content/images/2020/05/logo-3.png)

I've recently been exploring the  [Tailwind CSS library](https://tailwindcss.com/), that's increasingly growing in popularity. The concept of using a set of utils to built your UI really intrigued me, and led me to prototype and bring my designs to production much faster, with better experience along the way. With this in mind, I started using Tailwind with Isotope, which of course is still an option, but then I got an idea - what if I bring Tailwind-like library to JS and integrate it with Isotope's JS-first approach? And that's how Prototope was born.

The library builds upon Isotope's  [context](https://areknawo.com/isotope/#docs%3Econfigurators)  and  [directives](https://areknawo.com/isotope/#docs%3Edirectives)  functionalities, in order to provide a set of easy to use utility functions. Here's an example:

```javascript
import { Prototope, bgColor, h, w } from "@isotope/prototope";
import { createDOMView } from "@isotope/core";

const view = createDOMView(document.getElementById("app"));
const { node } = view.$(Prototope());
const box = node.div([bgColor("primary"), h(8), w(8)]);
```

Apart from nice API, Prototope is quite small for a library of its kind ([7.5KB min+gzipped](https://bundlephobia.com/result?p=@isotope/prototope)) and it's written in TypeScript.

So, if you're interested in such a tool, be sure to check out  [the docs](https://areknawo.com/prototope/)  and drop a star on  [Isotope ecosystem monorepo](https://github.com/Isotope-js/isotope), if you like it!

For more content about Isotope, Prototope, and web development as a whole, follow me on  [Twitter](https://twitter.com/areknawo),  [Facebook](https://facebook.com/areknawoblog)  or here on Dev.to! Thanks for checking in!
Looking for a Django lover!
Tags: django, python, remotejob, startup
Published: 2020-05-11 20:04:59

---
title: Looking for a Django lover!
published: true
description: Remote job - Back-end Python developer.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jt0kqonsqm2qrtvcmznc.png
tags: django, python, remotejob, startup
---

Hello people, I’m part of a very interesting Python project and we are looking to grow our team and solve a problem that still doesn’t have a great solution - mentorship matching using linear regression (perhaps one of the most well known and well-understood algorithms in machine learning) based on human behaviour. If someone is interested or if you know someone else that might be interested, here is the full job description: 

https://oneuponedown.org/careers/

If you are interested, please send your cv at hello@oneuponedown.org
Available Now:   CFM 1.1.0
Tags: 2020, apachenifi, apachenifi111
Published: 2020-05-13 18:15:16

---
title: Available Now:   CFM 1.1.0
published: true
date: 2020-05-11 20:03:00 UTC
tags: 2020,apache nifi,apache-nifi-1.11
canonical_url: 
---

<font size="6">Cloudera Flow Management 1.1.0</font>

  

Now with all the cool new features of Parameters, Predictive Monitoring, Rules Engine, Encrypted Repositories and SQL Reporting Tasks.

  

  

[https://docs.cloudera.com/cfm/1.1.0/release-notes/topics/cfm-whats-new.html](https://docs.cloudera.com/cfm/1.1.0/release-notes/topics/cfm-whats-new.html)
  

  

Download it today:   [https://www.cloudera.com/downloads/cdf/cfm.html](https://www.cloudera.com/downloads/cdf/cfm.html)

  

  

Features are highlighted here:   [https://www.slideshare.net/bunkertor/introduction-to-apache-nifi-1114](https://www.slideshare.net/bunkertor/introduction-to-apache-nifi-1114)

  

  

[https://www.datainmotion.dev/2020/03/using-nifi-cli-to-restore-nifi-flows.html](https://dev.to/tspannhw/using-nifi-cli-to-restore-nifi-flows-from-backups-18p9)

[https://www.datainmotion.dev/2020/02/new-and-improved-its-nifi.html](https://dev.to/tspannhw/new-and-improved-it-s-nifi-1k6o)

  

Apache NiFi 1.11.4 [Release Note](https://cwiki.apache.org/confluence/display/NIFI/Release+Notes)s.

  

[![](https://1.bp.blogspot.com/-E20PGF3-EJQ/XrmvlzFNr6I/AAAAAAAAaO0/oKGvu12pTsIGV7Z3ae29cMo7Y1ppO-RrACK4BGAsYHg/w640-h404/NiFiFlowTwoTopicsTwoTables.png)](https://1.bp.blogspot.com/-E20PGF3-EJQ/XrmvlzFNr6I/AAAAAAAAaO0/oKGvu12pTsIGV7Z3ae29cMo7Y1ppO-RrACK4BGAsYHg/NiFiFlowTwoTopicsTwoTables.png)
Request Google Sheets JSON API v4 with PHP
Tags: php, webdev
Published: 2020-05-11 20:01:04

Via the Google API, it's really easy to `GET` your spreadsheet as JSON and then work with it in whichever way you like.

Since the API v3 is going to go away in September 2020 it renders many tutorials useless, so here is how you do it with API v4[^2].


1. Set up a Google Form, a spreadsheet will be created automatically or you can point to an existing spreadsheet. ([Help](https://support.google.com/docs/answer/2917686?hl=en))

![Forms to Sheet](https://dev-to-uploads.s3.amazonaws.com/i/w8egkn3pyrnrrr5o1w61.png)

2. Add entries and check if they appear in your spreadsheet

3. [Acquire an API key](https://console.developers.google.com/apis/credentials) to [authorize](https://developers.google.com/sheets/api/guides/authorizing#APIKey) the access to the API.

4. Share the spreadsheet and save the `spreadsheetId` and the `sheetName`

![Share Sheet to Public](https://dev-to-uploads.s3.amazonaws.com/i/ddqed1qnmfs30f6kqxzo.png)


```
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}
```

For more in-depth information about how to query the spreadsheet, [check out the docs](https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/get).



```php
defined('API_KEY','XXX');

$url = sprintf('https://sheets.googleapis.com/v4/spreadsheets/1TlhxvW4GxayktKdjoWKt620qTzysEquC4UPGmOlGxb0/values/Formularantworten%203?key=%s', API_KEY);
$json = json_decode(file_get_contents($url));
$rows = $json->values;

foreach($rows as $row) {
	var_dump($row);
}
```

**Result**

```json
// https://sheets.googleapis.com/v4/spreadsheets/1TlhxvW4GxayktKdjoWKt620qTzysEquC4UPGmOlGxb0/values/Formularantworten%201?key=xxxx

{
  "range": "'Formularantworten 1'!A1:M104",
  "majorDimension": "ROWS",
  "values": [
    [
      "Zeitstempel",
      "What's up",
      "Short Text",
      "Long Text",
      "Matrix [Row 1]",
      "Matrix [Row 2]",
      "Matrix [Row 3]"
    ],
    [
      "01.05.2020 18:06:54",
      "Nothing",
      "Diana",
      "My Answer",
      "Col 1",
      "Col 2",
      "Col 3"
    ],
    [
      "01.05.2020 18:07:17",
      "A Lot",
      "Marc",
      "It's raining",
      "Col 2",
      "Col 1",
      "Col 3"
    ],
    [
      "01.05.2020 18:07:39",
      "Nothing",
      "Maria",
      "Still raining",
      "Col 2, Col 3",
      "",
      "Col 1"
    ]
  ]
}
```


For more complex tasks, you might want to [check out google's api wrapper libraries](https://developers.google.com/sheets/api/guides/concepts).


<small>This appeared first on my blog: [Request Google Sheets JSON API v4 with PHP](https://marcus-obst.de/blog/request-google-sheets-json-api-v4-with-php)</small>

[^1]: <https://www.quora.com/Is-Google-Forms-GDPR-compliant>
[^2]: It's much easier to work with v4! JSON result of v3 was a mess. [Migrate to v4](https://developers.google.com/sheets/api/guides/migration#retrieve_row_data)
Solve REM problem with the 'happy rems' approach
Tags: css, beginners, webdev, html
Published: 2020-05-11 19:55:51

Some time ago I've heard about the approach called 'happy rems' helping to avoid problems with converting rems to pixels.

As you probably know `rem` is the CSS unit related to the browser. It's shortcut form root em. In Google Chrome and Firefox, the initial value of 1rem is set to the 16px. 

And here comes the problem, when you want to use rems in your project but need to set font-size to 21px you need to make some calculations. In that case, it would be around 1.3125rem. So I want to share with you the happy rems approach that helps to avoid all those weird values.

Set root font size (rem) value to the 10px in your global style

```
html{
   font-size: 62.5% // from now 1rem === 10px
}
body{
   font-size: 1.6rem; // we set default font size value to the 16px as it was
}
```
As you see we didn't changed default browser font size it's still 16px, but now our 1rem is 10px so

```

.myCoolText{
   font-size: 1.4rem; // 14px
}

```
A detour ain't gonna stop me!
Tags: 100daysofcloud, gads, cloud, alc
Published: 2020-05-11 19:55:09

2,3.

I few days since I posted last. I had to pause and do other things. I figured this should not stop me from continuing. I'll work towards building the habit of consistency and not breaking, but I am taking it more softly.

Today I learnt about Cloud IAM.
Cloud IAM is Google Cloud Platform’s unified system for managing access to resources and assigning permissions for users and services to access those resources. {% youtube 96HlT4f2AUU %}
[More here:](https://cloud.google.com/iam)

*Cloud IAM Lab on qwiklabs*

I did the lab I looked forward to. I'm already feeling like a cloud architect!(I know I still have a long way to go though lol). The lab was legit really cool!

In the lab I:
 - Used Cloud IAM to implement access control

 - Restricted access to specific features or resources

 - Used the Service Account User role

I exercised granting and revoking Cloud IAM roles, first to a user, Username 2, and then to a Service Account User. You could allocate Service Account User credentials and "bake" them into a VM to create specific-purpose authorized bastion hosts.

I may write less frequently now, and sometimes a tweet does the magic for me. But I initiated a __for loop__ that will only stop when __i = 100__!!!

{% twitter 1256664381569429504 %}
My life during the confinement
Tags: SliceOfLife
Published: 2020-05-11 19:49:47

In France, when i wrote this text, the confinement just stoped, the 05/11.
And for me, the confinement change a bit my vision of the life.

During the confinement, I went back to live with my parents. When Emmanuel Macron announced that we will be locked in our homes, I did my bagages in less than a day to leave my studio, more than 8 bags and a suitcase. I was caring a lot of thing but mostly my informatic equipements, perishable foods and clothes.
Fun fact, I had to use my hair dryer to defrost my fridge, not the most environmentproof.

My days during the confinement was kind of peaceful. Not really, because for me the school didn't stop. I had to work on my projects again, but now, it was more difficult, because we had to work in video conference. The big part of us didn't want to work with all the other stuffs that you can do in this situation, like playing videogames, working on private project or just doing nothing. A really big part of us want to be a lazy person in this situation. For my part, I lived with my parents and this motivated me a lot.

Living with our parents during the student's life is precious. For exemple, you don't have to cook, and like I already said, I am really bad at cooking. My parents motivated me a lot because they were watching me in order to make me aware of some troubles that I had, mostly in the organisation part. I wanted to thanks them for all the stuffs that they have done and to endure me for the 6 next mounths, because my school will restart in september.

That was my life during the confinement, what was your ?

Léo Ménard
How to setup Algolia's DocSearch in NextJS app
Tags: nextjs, algolia, react, search
Published: 2020-05-11 19:44:22

I've spent some time figuring out why my search wasn't working, just to realize that Algolia's documentation was meant to be used in a common HTML approach. In the end, the app was loading before the script was initilized.

TL;DR: If you're not using Next JS, just ignore the first step and add the script and the styles to your root html (usually `index.html`) and initialize it like the last snippet inside the component.

With NextJS, you need to create a file named `_document.js` inside `pages` (the minimum setup can be found in [Next's documentation](https://nextjs.org/docs/advanced-features/custom-document)), and add the CSS and Docsearch script to the `Head`. This way the search will be accessible through all the pages.

```react
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
          />
          <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
```

Then, in your component (in my case `Navbar.jsx`), initialize the script that you've received, inside `componentDidMount` or `useEffect`.

```react
...
useEffect(() => {
  if (window.docsearch) {
    window.docsearch({
      apiKey: 'your api',
      indexName: 'your id',
      inputSelector: '#algolia-search', // the selector of my search input
    })
  } else {
    console.warn('Search has failed to load')
    // do something here
  }
}, [])
...
```

I hope that this save people some time when implementing Docsearch.
10 CSS Tooltip 
Tags: javascript, webdev, beginners, css
Published: 2020-05-11 19:27:29

---
title:10 CSS Tooltip 
published: true
tags: #javascript #webdev #beginners #css
---


<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>30 CSS Tooltip – GS CODE</H2>
https://gscode.in/css-tooltip/

<p>1.Read full tutorial <a href="https://webdesign.tutsplus.com/tutorials/css-tooltip-magic--cms-28082">How to Make Magic, Animated Tooltips With CSS</a> on Tuts+. By <a href="https://codepen.io/jasesmith/">Jase</a></p>

{% codepen https://codepen.io/tutsplus/pen/WROvdG %}


<p>2.Pure CSS tool tips using pseudo elements and data- attribute.</p>

{% codepen https://codepen.io/davidicus/pen/yyxoXW %}

<p>3.Animated tooltips with just CSS. No extra HTML, no JS.</p>

{% codepen https://codepen.io/runnabro/pen/imeHn %}

<p>4.tooltips with just CSS.</p>
{% codepen https://codepen.io/fdsea/pen/BMPeVR %}
<p>5.Simple social navigation with CSS-only tooltip descriptions</p>

{% codepen https://codepen.io/kylephillips/pen/ByNBwL %}

p>6.tooltips with just CSS.</p>
{% codepen https://codepen.io/sambrishes/pen/roXMxb %}

<p>Just experimenting :)</p>

<p>7.PS Merry Christmas.</p>

{% codepen https://codepen.io/dope/pen/RNGQWp %}

<p>8.Light weight jQuery plugin specialized only in drawing doughnut chart. Also please check out Pie chart version of this!


{% codepen https://codepen.io/githiro/pen/ICfFE %}


<p>9. css tooltips </p>
{% codepen https://codepen.io/asistapl/pen/QEAgdA %}


<p>10. css tooltips </p>
{% codepen https://codepen.io/EricPorter/pen/xdJLaG %}




<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>30 CSS Tooltip – GS CODE</H2>
https://gscode.in/css-tooltip/