DEV Community: Tony

Building a HTML to PDF API using Go and wkhtmltopdf

Tony — Thu, 21 Oct 2021 19:49:20 +0000

Generating PDFs in code is difficult. Many solutions revolve around unfamiliar proprietary APIs that require pixel perfect placement of text and images that can become a nightmare in the long run.

This tutorial uses HTML, CSS, and Go to achieve a lightweight, modern approach to dynamically creating and serving PDFs from an API endpoint.

Introduction

This tutorial follows how our team replaced our exsting PDF generation system. The decision for us to use wkhtmltopdf was primarily driven by our use of Golang on the backend and the
allure of keeping our services as small as possible.

I recognize some teams may be interested in a Chromium/Puppeteer approach to PDF's and I've linked some helpful articles to get you started.

Continue reading on the ShareBuilder 401k Blog ->

You can checkout the template golang + go-wkhtmltopdf project if you'd like to skip straight to code.

Cheers,
Tony

^{Photo by Wei Zeng on Unsplash}

CSS Tip - Perfect Flexbox overflow items

Tony — Tue, 06 Jul 2021 18:06:46 +0000

^{Credits for cover photo}

The following snippet is a powerful set of CSS rules I use all the time. I think it solves a common layout issue I want to help others solve.

Original Source for the code

Ever needed to create a UI that required a list of items of varying length and you wanted to make it look fluid and pretty at the same time? You tried to use flex box but it all ended up looking like the image below?

Follow along for a quick CSS snippet that helps level up your CSS flex game.

What we will be creating:

Table of Contents
The Problem
The Solution
The Explanation

The Problem

We want to write some CSS that works when tackling variable length lists of items. In a lot of cases, when we start styling these types of pages it looks like the image below.

^source

Here is what I want to solve:

The margin issue - Children within a Flex parent do not collapse margins. So when we apply margins to them for spacing purposes, we end up in a scenario where the first/last elements in a row have less margin on their outsides than they do next to their siblings. This becomes an issue when we want a consistent gap between elements in our list.

Here's an example:

The overflow elements - Depending on the size of our page and the size of the elements in our list, we can have a variable number of items that "overflow" at the end of the list. How do we tackle this? Do we want them to be right justified? Do we want to hardcode some styles for each situation: if 1 item, width 100%, if 2 items width 50%, etc etc?
The size & spacing of the items - How much tweaking do we want to do to ensure the items look good? Are we okay with a max-width or do we need a min-width for the item to look okay? Are we using all the white space? Are things centered or is everything left-aligned?
Is IE friendly.

The Solution

Here is the solution to our problems listed above. I will explain this in further detail below.



.flex {
  --gap: 15px;

  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;  
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.flex > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 225px;
  margin: var(--gap) 0 0 var(--gap);
}

A small demo

What it looks like:

The Explanation

The core elements to our solution are margin, the calc function, and flexbox's flex-grow and flex-basis properties.

Margin

In the snippet we're doing 3 things with margin:

Defining how big of a gap we want between the elements.
Adding top and left margin to all the children elements.
Translating the parent .flex container in the opposite direction of our top and left margins we added on the children.

This snippet is essentially fixing our margin issue I outlined above.

Here is the margin applied to the children:

Here is the negative margin applied to the .flex container:

BUT BUT BUT You're forgetting about the `gap` property!!!!

Yes and no. This same functionality can be applied using the built in gap property, but this currently has limited support in some mobile browsers and all of IE.

I know that IE is going away, but I work in an industry & field that supports around 5-10% of our customer base on IE 11 and need a solution that I can trust works.

Here is a good article outlining the gap property.

Flex Grow

If you have never used flex-grow before, I highly recommend reading about how it works. The quick and dirty explanation is that it allows our flex children to expand to fill the row/column that they are in.

In this case we're using the property flex-grow: 1;. This tells the parent "Hey for all the children you have, make sure they take up ALL of the white space available".

With flex-grow: 0; (default)

With flex-grow: 1;

Flex Basis

I am going to be honest I really didn't understand what flex basis was until I learned about this css snippet. But, this snippet is a perfect way to understand the concepts of how it works.

Flex basis lets us define the base or minimum size we want an element to be in a flex container. Whats nice about this is for scenarios where we won't know how many elements we're going to be styling in our list, we can treat the flex-basis as our "default" size, and then with flex-grow, if we have less items on the last line, they will fill up the remaining space and look nice.

Without flex-basis or flex-grow:

With flex-basis, Without flex-grow

With both flex-basis and flex-grow

Putting it all together in the long-form way, we have the the snippet again:



.flex {
  --gap: 15px;

  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;

  /*  */
  margin-top: calc(-1 * var(--gap));
  margin-right: 0;
  margin-bottom: 0;
  margin-left: calc(-1 * var(--gap)); 

  width: calc(100% + var(--gap));
}

.flex > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 225px;

  margin-top: var(--gap);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--gap);
}

The small demo again

All in all, I hope you can take these learnings and apply them to your web projects as you see fit. I hope you learned something new and if anything -- I hope have a better understanding of how flexbox works.

Thank you for reading.

Web - Tips for Prototyping

Tony — Wed, 21 Apr 2021 17:37:26 +0000

Cover photo by zoo_monkey on Unsplash

I am the type of person that has to think through code when building new things. At least once a day I get an idea for something that could be used in a project and instantly create an HTML doc, prototype, and then leave knowing I tried what I was thinking.

Prototyping is super important to web development. There are a lot of different trains of thought on how to learn and maintain knowledge in software, but prototyping and scratch pad coding are some of the best ways to really understand what you're learning.

Below I will go through my setup for prototyping and some patterns that come in handy. This has been an ongoing journey through my growth as a developer and I want to share to help others in this way.

Table of Contents
Create a project template
Start with one file
Always publish your work
Buy a Domain
Online Code Editors
Styling that works for you

Create a project template

The biggest hurdle when taking action is the first step. So why not cheat the system and lower the barrier to starting.

For my scratch pad projects I have a gist html file that comes with any dependency I might need for a little side project. If I don't need a specific dependency at the time, I can just remove it. But the point is having a good starting place for getting things done.

Here's my simple Vuejs starter:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Site Behavior tags -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Basic site info-->
    <meta name="title" data-hid="title" content="">
    <meta name="description" data-hid="description" content="">

    <!-- Open Graph (Facebook/Linkedin) tags -->
    <!-- Testing tool: https://developers.facebook.com/tools/debug/ -->
    <meta property="og:site_name" content="">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="http://">
    <meta property="og:type" content="website">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">

    <!-- Twitter tags -->
    <!-- Testing tool: https://cards-dev.twitter.com/validator -->
    <meta name="twitter:site" content="http://">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="">
    <title>Document</title>

    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hehe'
            }
        })
    </script>
</body>
</html>

The things to note are:

I don't want to remember which meta tags I need to make my links look pretty on Twitter
I don't want to remember the tag testing urls
I want to interact with the site using Vue
If I'm lazy, having a classless style system like new.css is great.

With this template I have published tons of little crappy site projects. I'll list a few below:

Start with one file

It is really easy to get distracted while building out a software project. A lot times we think we need a lot more than we actually do to get started.

I want to remind you that a website with all the JavaScript and CSS in <script> and <style> tags in the html is still a website. Don't get caught up with trying to productionize your scratch pad code before you've even solved the problem or idea you came up with. It is very easy to burn yourself out with steps you perceive as important, but are really just procrastinating from what you initially set your goal at!

Make your life easier and keep things simple until you're ready to tidy everything up.

Always publish your work

I get it. Putting things out on the Internet is stressful and daunting! BUT it is not that bad. Once you've published a few things and get comfortable showing others your little snippets it gets a lot easier. The point is as you make things, put them on the Internet.

On the same thread as creating a project template, you want to find a hosting provider that makes it as seamless as possible to publish new sites. I'll list some of the big ones, but find a service that makes you feel comfortable and enables you to get things out quickly.

... A 50%-good solution that people actually have solves more problems and survives longer than a 99% solution that nobody has because it’s in your lab where you’re endlessly polishing the damn thing. Shipping is a feature. A really important feature. Your product must have it.

^{The Duct Tape Programmer - Joel Spolsky}

Hosting Providers:

Surge.sh - Static Sites
Github Pages - Static Sites
Netlify - Static Sites & Serverless f(x)
Glitch <3 - Static Sites & Web Servers
Vercel - Static Sites & Serverless f(x)
Heroku - More robust hosting solution

I personally use Surge, Glitch, and GitHub pages. For scratch work Surge is a one command tool that publishes your current working directory into a site. I use Glitch for anything that requires a NodeJS web server. Lastly for any static site I polish and want to put on my domain, I use GitHub Pages.

Buy a domain

Having a domain means owning your own little piece of space on the Internet. I think everyone should have one, and it is a great skill to know how to navigate the workings of a domain/website.

I won't go into too much detail on these, but having a personal domain tied to your side projects add's a nice touch when sharing the URLs.

I personally use Google Domains, but I'm sure you'll be fine with any provider.

Just don't use GoDaddy.

Online Code Editors

Online editors are great for combining a lot of the previous steps into one "cloud" friendly solution. They play an important role in scratch pad coding. One way to think of these tools is like a notebook, where you have all your resources at your fingertips and all you have to do is put the pen to the paper, and then with one click you can share it out to friends & coworkers.

Some notable sites:

Styling that works for you

CSS is a very personal topic for people, and rightfully so.

We have the full fledged Bootstrap/Tailwind folks, the opt-in Bulma/Tachyons style, the "I don't want to write any CSS" classless folks (new.css), and then my fellow masochist's who prefer to write css from scratch.

The point is, find the CSS toolkit that gives you the look and feel you're striving for, and gives you the confidence that you can style and be proud of that sites that you create.

I urge anyone interested or working in this space to take some of the tips above and find a flow that works for you. Being able to prototype through code, and share visual thoughts with others is a valuable skill.

Comment below with the tools that you use to prototype and build things, and feel free to let me know of any links and resources you'd like me to add to this post.

Viral Math Problems: 6 / 2 * (1 + 2)

Tony — Mon, 19 Apr 2021 18:23:26 +0000

Viral Math Problems: 6 / 2 * (1 + 2)

How do computers solve - 6 / 2 * (1 + 2) ?

The answer is 9.

Code & Repo for current solutions

C answer - 9

code:

#include "stdio.h"

int main() {
    int a = 6 / 2 * ( 1 + 2);
    printf("C answer - %d\n", a);

    return 0;
}

Golang answer - 9

code:

package main

import "fmt"

func main() {
    a := 6 / 2 * (1 + 2)

    fmt.Printf("Golang answer - %d\n", a)
}

Node.JS answer - 9

code:

const a = 6 / 2 * (1 + 2)
console.log(`Node.JS answer - ${a}`)

Deno answer - 9

code:

const a = 6 / 2 * (1 + 2)
console.log(`Deno answer - ${a}`)

Python2 answer - 9

code:

a = 6 / 2 * ( 1 + 2)

print("Python2 answer - " + str(a))

Python3 answer - 9.0

code:

a = 6 / 2 * ( 1 + 2 )

print("Python3 answer - " + str(a))

Ruby answer - 9

code:

a = 6 / 2 * (1 + 2)

puts "Ruby answer - #{a}"

DEV Community: Tony

Building a HTML to PDF API using Go and wkhtmltopdf

Introduction

CSS Tip - Perfect Flexbox overflow items

The Problem

The Solution

The Explanation

Margin

BUT BUT BUT You're forgetting about the gap property!!!!

Flex Grow

Flex Basis

Web - Tips for Prototyping

Create a project template

Start with one file

Always publish your work

Buy a domain

Online Code Editors

Styling that works for you

Viral Math Problems: 6 / 2 * (1 + 2)

Viral Math Problems: 6 / 2 * (1 + 2)

C answer - 9

Golang answer - 9

Node.JS answer - 9

Deno answer - 9

Python2 answer - 9

Python3 answer - 9.0

Ruby answer - 9

BUT BUT BUT You're forgetting about the `gap` property!!!!