A tutorial to help you understand the basics of Ansible - an open-source software provisioning, configuration management, and application-deployment tool. 

Getting Started With Ansible


If you're wondering how to make a static site like this one, search no more.

I had this thought before that it would be good to have developer blog, but I was lazy to make it. Until now...

So what are the options in terms of static site generators?

 - Gatsby (React)
 - Hugo (Go)
 - Next.js (React)
 - Jekyll (Ruby)
 - Gridsome (Vue)

 These are the most starred projects on GitHub. I've read about Hugo previously, so I decided to make this blog with it.

## Install

Mac:
```bash
brew install hugo
```

Linux:
```bash
sudo apt-get install hugo

or

sudo pacman -Syu hugo
```

To verify your install:
```bash
hugo version
```

## Usage

Create a new project:
```bash
hugo new site my-project
```

Add a theme. You can find themes [here](https://themes.gohugo.io/).

```bash
cd my-project
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```

Add the theme to the config file.

```
echo 'theme = "ananke"' >> config.toml
```

Add some content.

```bash
hugo new posts/my-first-post.md
```

It should look something like this:

```
---
title: "My First Post"
date: 2020-01-05T18:37:11+01:00
draft: true
---

Hello World!
```

There are lots of options (tags, description, categories, author) you can write to the front matter details.
More about the details [here](https://gohugo.io/content-management/front-matter/).


Take a look what we made:

```bash
hugo server -D
```

Open `localhost:1313`

## Styling

Remember, we applied a theme before. Now if we inspect the `themes` folder, we can see the styling files. 

But surprise!
**DO NOT EDIT THESE FILES DIRECTLY**.

Instead we will mirror the theme directory structure to the root `layouts` folder.
Let's say I want to apply custom CSS to the theme.

The theme has a `themes/theme-name/layouts/partials` folder, where we can find some html templates (header.html, footer.html). Now we will edit the `header.html` template, so copy the content from this file to `layouts/partials/header.html` and be careful to create the same directory structure like the theme's into the root `layouts` folder.

```
layouts/partials/header.html

themes/theme-name/layouts/partials/header.html
```

Create a custom css file: `static/css/custom-style.css`.

Add the custom css file to `config.toml`:

```
[params]
  custom_css = ["css/custom-style.css"]
```

Open `layouts/partials/header.html`:

Add this code inside the `<head>` tag:

```html
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
```

Now you can overwrite css classes applied by your theme.


## Deploy

Netlify is a very good choice for hosting a static site. 

Requirements:
  - Netlify account
  - Github repository

Create a `netlify.toml` file into the root of your project with the content below.

I won't go into the smallest [details](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/) how to set up Github and Netlify on the UI, but here is a `netlify.toml` file:

```
[build]
publish = "public"  // default hugo build folder
command = "hugo --gc --minify" // hugo build command

[context.production.environment]
HUGO_VERSION = "0.62.1"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
```

Now if you push your code to Github, Netlify will deploy the site, and blogging shall start.

Hugo offers so much more you should know about. Discover the official [documentation](https://gohugo.io/documentation/).

![Unlimited power](https://media1.giphy.com/media/3o84sq21TxDH6PyYms/giphy.gif?cid=790b7611f96ab1767b958080a2f06b34e1ed402337c52d48&rid=giphy.gif)


How to make a static site with Hugo and deploy it to Netlify

Static site with Hugo + Netlify deploy


**In this article I’m going to show how you can generate a PDF document from a heavily styled React page using Puppeteer, headless Chrome & Docker.**

Background: A few months ago one of our clients asked us to develop a feature where the user would be able to request a React page in PDF format. That page is basically a report/result for patients with data visualization, containing a lot of SVGs. Furthermore, there were some special requests to manipulate the layout and make some rearrangements of the HTML elements. So the PDF should have different styling and additions compared to the original React page. 

As the assignment was a bit more complex than what could have been solved with simple CSS rules, we first explored possible implementations. Essentially we found 3 main solutions. This blogpost will walk you through on these possibilities and the final implementations.  

A personal comment before we get started: it’s quite a hassle, so buckle up! 

## Table of contents

Client/Backend side
Option 1: Screenshot from the DOM
Option 2: Use only a PDF library
Final option 3: Puppeteer, headless Chrome
Using Puppeteer with Docker
Option 3 +1: CSS print rules
Summary


## Client side vs Backend

It is possible to generate a PDF file both on the client-side and on the server-side. However, it probably makes more sense to let the backend handle it, as you don’t want to use up all the resources the user’s browser can offer. 

Even so, I’ll still show solutions for both methods. 


## Option 1: Make a screenshot from the DOM

At first sight, this solution seemed to be the simplest, and it turned out to be true, but it has its own limitations. If you don’t have special needs, like selectable or searchable text in the PDF, it is a good and simple way to generate one.

This method is plain and simple: create a screenshot from the page, and put it in a PDF file. Pretty straightforward. We used two packages for this approach:

[Html2canvas](https://html2canvas.hertzen.com/), to make a screenshot from the DOM
[jsPdf](https://github.com/MrRio/jsPDF), a library to generate PDF

Let’s start coding. 

```bash
npm install html2canvas jspdf
```
 
```js
import html2canvas from 'html2canvas'
import jsPdf from 'jspdf'
 
function printPDF () {
    const domElement = document.getElementById('your-id')
    html2canvas(domElement, { onclone: (document) => {
      document.getElementById('print-button').style.visibility = 'hidden'
}})
    .then((canvas) => {
        const img = canvas.toDataURL('image/png')
        const pdf = new jsPdf()
        pdf.addImage(imgData, 'JPEG', 0, 0, width, height)
        pdf.save('your-filename.pdf')
})
```

And that’s it! 

Make sure you take a look at the `html2canvas` `onclone` method. It can prove to be handy when you quickly need to take a snapshot and manipulate the DOM (e.g. hide the print button) before taking the picture. I can see quite a lot of use cases for this package. Unfortunately, ours wasn’t one, as we needed to handle the PDF creation on the backend side.

## Option 2: Use only a PDF library

There are several libraries out there on NPM for this purpose, like jsPDF (mentioned above) or [PDFKit](https://www.npmjs.com/package/pdfkit). The problem with them that I would have to recreate the page structure again if I wanted to use these libraries. That definitely hurts maintainability, as I would have needed to apply all subsequent changes to both the PDF template and the React page. 

Take a look at the code below. You need to create the PDF document yourself by hand. Now you could traverse the DOM and figure out how to translate each element to PDF ones, but that is a tedious job. There must be an easier way.


```js
doc = new PDFDocument()
doc.pipe fs.createWriteStream('output.pdf')
doc.font('fonts/PalatinoBold.ttf')
   .fontSize(25)
   .text('Some text with an embedded font!', 100, 100)
 
doc.image('path/to/image.png', {
   fit: [250, 300],
   align: 'center',
   valign: 'center'
});
 
doc.addPage()
   .fontSize(25)
   .text('Here is some vector graphics...', 100, 100)
 
doc.end()
```


This snippet is from the PDFKit docs. However, it can be useful if your target is a PDF file straight away and not the conversion of an already existing (and ever-changing) HTML page.


## Final Option 3: Puppeteer

### What is [Puppeteer](https://github.com/GoogleChrome/puppeteer)?

The documentation says ‘Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium’.

It’s basically a browser which you can run from Node.js. If you read the docs, the first thing it says about Puppeteer is that you can use it to **Generate screenshots and PDFs of pages**’. Excellent! That’s what we were looking for. 

Let’s install Puppeteer, and implement our use case.

```bash
$ npm i puppeteer
```
 
```js
const puppeteer = require('puppeteer')
 
async function printPDF() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://blog.risingstack.com', {waitUntil: 'networkidle0'});
  const pdf = await page.pdf({ format: 'A4' });
 
  await browser.close();
  return pdf
})
```

This is a simple function that navigates to a URL and generates a PDF file of the site.

First, we launch the browser (PDF generation only supported in headless mode), then we open a new page, set the viewport, and navigate to the provided URL. 

Setting the`waitUntil: ‘networkidle0’`option means, that Puppeteer considers navigation to be finished when there are no network connections for at least 500 ms. (Check [API docs](https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md) for further information.) 

After that, we save the PDF to a variable, we close the browser and return the PDF.

Note: The `page.pdf`method receives an `options` object, where you can save the file to disk with the ‘path’  option as well. If path is not provided, the PDF won’t be saved to the disk, you’ll get a buffer instead. Later on, I discuss how you can handle it.)

In case you need to log in first to generate a PDF from a protected page, first you need to navigate to the login page, inspect the form elements for ID or name, fill them in, then submit the form:

```js
await page.type('#email', process.env.PDF_USER)
await page.type('#password', process.env.PDF_PASSWORD)
await page.click('#submit')
```

**Nb. Always store login credentials in environment variables, do not hardcode them!** 

### Style manipulation

Puppeteer has a solution for this style manipulation too. You can insert style tags before generating the PDF, and Puppeteer will generate a file with the modified styles.

```css
await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
```


### Send file to the client and save it

Okay, now you have generated a PDF file on the backend. What to do now?

As I mentioned above, if you don’t save the file to disk, you’ll get a buffer. You just need to send that buffer with the proper content type to the front-end. 

```js
printPDF.then(pdf => {
	res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
	res.send(pdf)
```


Now you can simply send a request to the server, to get the generated PDF.

```js
function getPDF() {
 return axios.get(`${API_URL}/your-pdf-endpoint`, {
   responseType: 'arraybuffer',
   headers: {
     'Accept': 'application/pdf'
   }
 })
```

Once you’ve sent the request, the buffer should start downloading. Now the last step is to convert the buffer into a PDF file. 

```js 
savePDF = () => {
    this.openModal(‘Loading…’) // open modal
   return getPDF() // API call
     .then((response) => {
       const blob = new Blob([response.data], {type: 'application/pdf'})
       const link = document.createElement('a')
       link.href = window.URL.createObjectURL(blob)
       link.download = `your-file-name.pdf`
       link.click()
       this.closeModal() // close modal
     })
   .catch(err => /** error handling **/)
 }
```

```js
<button onClick={this.savePDF}>Save as PDF</button>
```

That was it! If you click on the save button, the PDF will be saved by the browser.

## Usage with Docker

I think this is the trickiest part of the implementation - so let me save you a couple of hours of Googling. 

The official documentation states that *“getting headless Chrome up and running in Docker can be tricky”*. The official docs have a [Troubleshooting](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker) section, where at the time of writing you can find all the necessary information on installing puppeteer with Docker.

If you install Puppeteer on the Alpine image, make sure you scroll down a bit to [this part of the page](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-on-alpine). Otherwise, you might gloss over the fact that you cannot run the latest Puppeteer version and you also need to disable shm usage, using a flag:

```js
const browser = await puppeteer.launch({
  headless: true,
  args: ['--disable-dev-shm-usage']
});
```  

Otherwise, the Puppeteer sub process might run out of memory before it even gets started properly. More info about that on the troubleshooting link above.

## Option 3 + 1: CSS print rules

One might think that simply using CSS print rules is easy from a developers standpoint. No NPM modules, just pure CSS. But how do they fare when it comes to cross-browser compatibility? 

When choosing CSS print rules, you have to test the outcome in every browser to make sure it provides the same layout, and it’s not 100% that it does.

For example, inserting a break after a given element cannot be considered an esoteric use case, yet you might be surprised that you need to use workarounds [to get that working in Firefox](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#Browser_compatibility). 

Unless you are a battle-hardened CSS magician with a lot of experience in creating printable pages, this can be time-consuming.

Print rules are great if you can keep the print stylesheets simple. 

Let’s see an example.

```css
@media print {
    .print-button {
        display: none;
    }
    
    .content div {
        break-after: always;
    }
}
```

This CSS above hides the print button, and inserts a page break after every `div` with the class `content.` There is a [great article](https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/) that summarizes what you can do with print rules, and what are the difficulties with them including browser compatibility. 

Taking everything into account, CSS print rules are great and effective if you want to make a PDF from a not so complex page.


## Summary


So let’s quickly go through the options we covered here for generating PDF files from HTML pages:

**Screenshot from the DOM**: This can be useful when you need to create snapshots from a page (for example to create a thumbnail), but falls short when you have a lot of data to handle.
**Use only a PDF library**: If you need to create PDF files programmatically from scratch, this is a perfect solution. Otherwise, you need to maintain the HTML and PDF templates which is definitely a no-go.
**Puppeteer**:  Despite being relatively difficult to get it working on Docker, it provided the best result for our use case, and it was also the easiest to write the code with.
**CSS print rules**: If your users are educated enough to know how to print to a file and your pages are relatively simple, it can be the most painless solution. As you saw in our case, it wasn’t.

Happy printing!


In this article I’m going to show how you can generate a PDF document from a heavily styled React page using Puppeteer, headless Chrome & Docker

Generating PDF from HTML with JavaScript


This is the first post of a series called 'Learn JavaScript for free' - in these chapters, you can read about the path of becoming a JavaScript developer and getting hired. 


## Why learn JavaScript Now?

Just in a nutshell:

JavaScript is almost everywhere: in your browser, web apps, mobile apps, cloud services, even IoT devices.
It’s easy to get started with it as all you need is a plain text editor and a browser.
It is a beginner friendly language, with an awesome community around it. 
You can code both frontend and backend with JavaScript, which makes it extremely useful. 


## It’s hard to figure out where to Start


To become a JavaScript Engineer, you have to acquire various skills. For beginners, finding an optimal learning path is not apparent, especially with zero background. The depth of the trade seems to be infinite, so the question ‘Where to start?’ raised by beginners seems legit. There are other questions like

* ‘What skills do I need to learn JavaScript?’, 
* ‘How to get a job?’, 
* ‘How to prepare for interviews?’.

In this series, I’ll attempt to answer these questions. 

One thing to mention: this is not a specific JavaScript tutorial. You will not learn how to code from this post. Instead, it is an overview/roadmap of the path ahead of you to become a developer on your own. 


## About my JavaScript Path

To give some context, my relationship with development started in my teenage years. I’ve learned HTML and CSS just for fun and curiosity. After that, I built websites with content management systems like Wordpress, and that was it. I didn’t take it seriously: it was a hobby and nothing more. 

After graduation, I went to law school, worked for law offices, but after 5-6 years, I realized this is not the kind of career I imagined for myself. In retrospect, it was a useful experience, but I didn’t want to do it anymore. I needed something more creative. So I started learning JavaScript.

Taking part in a programming school wasn’t an option: the basics are freely available on the internet, and I didn’t want someone to charge me for the same thing I can find in tutorials. I knew it wouldn’t be easy though, but I can say it was fun for me.

I practiced at least 6-7 hours a day.




I worked on hobby projects with React, but after 3 months, I started to feel the limitations of self-learning. There was nobody to tell me the best coding practices: 

* “How do I structure an app?” 
* “Which packages should I use?” 
* “What makes sense learning and what is merely some glorified sugar coating?” 

Maybe I could have figured it out somehow by myself, but I realized that I need to work with people who already have many years of experience, so I can soak up the knowledge from them. The best way to be around people like that was to get hired, so I started sending my CV to companies. Many of them. Even for positions I was sure I wouldn’t be hired. Why not? If you can get through and be called in for an interview you can already learn from the questions you cannot answer or the coding challenges you cannot complete. 

After several attempts, my efforts paid off: I got hired by RisingStack as a junior developer which allowed me to develop my skills a lot faster compared to the time I spent with self-learning. During my first month  - like every new recruit - I had to finish the internal [bootcamp](https://github.com/RisingStack/risingstack-bootcamp), which prepared me to work on client projects.  


**But this series is about what to do before you get hired, so you can get hired.**


## Acquiring the Engineering Mindset

In this section, I’ll cover the skills necessary to start learning JavaScript.

At least you should have a basic interest in web technologies, programming or IT itself. It will be cumbersome without that, and anyway, why start learning something that you are not interested in? Learning how to write code just for the money isn’t a good idea either. 

If you are reading this post, I assume you have the curiosity I’m talking about. 

Basic interest is enough for learning the fundamentals and maybe even for getting hired, but if you want to make progress especially from an entry level, it requires extra dedication and effort. This is maybe the most crucial point about it.  

Try to set reachable goals for yourself. Learn something new everyday. 

Beyond the efforts, the required mindset to be a successful developer is also worth mentioning.


Source: https://www.7pace.com/blog/become-a-better-programmer-skills-development


These are skills you will have to pick up as the time passes.

One of the other most important must-have skill is to know how to Google, a.k.a find solutions to a problem. I’ve seen a lot of people struggling to search for an obstacle that is so obvious to solve with a bit of inspection. There is an answer for the 99% of the problems that a beginner is going to face. 

You just have to find the solution and apply it. It’s that simple (at the beginning).  If you didn’t find the answer, probably you didn’t search the right way.  So start getting to know how to Google correctly, and make a ‘friendship’ with StackOverflow and [MDN](https://developer.mozilla.org/en-US/).

Do not fear making mistakes. It’s part of the learning process.  

With respect to the subject above mentioned, let’s move on to the next section. 


## JavaScript Fundamentals

### Getting started with the web

Before you start to learn JavaScript, it is highly advised to get familiar with [HTML, CSS and how the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) works. 

HTML and CSS can be picked up really fast. Build a simple static website, experiment a little bit. Once you are comfortable with the concepts of these technologies, you can move on..

### Intro to Programming Basics

As HTML and CSS are not programming languages, so it is time to get some theoretical knowledge about programming. There are some books that I recommend:
 [You Don't Know JS: Up & Going](https://github.com/getify/You-Dont-Know-JS/tree/master/up%20%26%20going). (for beginning) 
It is a good introduction into programming and into JavaScript. [YDKJS](https://github.com/getify/You-Dont-Know-JS) is a series of books diving deep into the core mechanisms of the JavaScript language.
[Speaking JavaScript](http://speakingjs.com/es5/index.html)
[Eloquent JavaScript](https://eloquentjavascript.net/)
[MDN JS Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
These books and tutorials should give you a basic understanding of the language. 

### Learn using the Command line 
Getting to know the command line is necessary. Learn the basic commands like how to enter/leave a directory, and edit/copy/move/remove files. You will use them a lot - so why not save time for yourself by learning them at the beginning?


## Start with vanilla JS, learn the frameworks and advanced concepts later.

Forget these cool words like React, Vue, Angular, Node.js, OOP, Webpack, functional programming, etc. In my experience, until you don’t know the basics, it is absolutely unwanted to confuse your mind with these advanced concepts and frameworks. Be patient, you will get there soon. 

Get the [basics](https://www.w3schools.com/js/) right first, and start coding ASAP with [Vanilla JS](https://stackoverflow.com/questions/20435653/what-is-vanillajs).


### Setup IDE

Setting up an IDE with a decent config will make your life easier. My personal favourite is VSCode, but there are other amazing IDE’s like Atom, WebStorm, Brackets or Sublime.

### Choose a project to build

Your project can be a todo-app, a calculator or basically anything. Don’t choose very complex projects, it’s good to have a sense of achievement in the beginning. As you develop your project, you’ll have lot of questions. Use MDN, StackOverflow and Google. As I said above, there is an answer almost for all questions a beginner going to face. In case of you have no idea what kind of project to build, I provide some links below which maybe help with the decision. 
https://www.codementor.io/npostolovski/40-side-project-ideas-for-software-engineers-g8xckyxef
https://skillcrush.com/2018/06/18/projects-you-can-do-with-javascript/
https://medium.com/@GarrettLevine/5-projects-to-complete-when-starting-to-learn-front-end-web-development-48e8a1ce3178


### Learn from your mistakes

Learning from mistakes is also an essential part of the process. Don’t be afraid to break the code. A failure is an opportunity to prevent future failures, and it makes you curious how to solve the problem.  

### Moving Forward

I think you can get familiar with these things I outlined within 1-2 months if you do some exercise every day. Once you think you are confident with this knowledge, and made some hobby projects, and read the books, you can do a level up, and choose a framework and set Node.js in motion as well. 

In the meantime you should explore more stuff about JavaScript like articles, newsletters, podcasts, YouTube channels, and a lot of tutorials. 

If you have accomplished all of the above, you can start getting to know [NPM](https://docs.npmjs.com/getting-started/what-is-npm), the package manager of JavaScript and Node.js.  


## Summary and Next Up

In the next chapter, I’ll continue with an overview of the JavaScript ecosystem, and a roadmap of frontend development (React, Vue.js, etc.), a backend roadmap for Node, and with some tips to get hired.



