5 Ways to Make a Div Fill Up the Remaining Width

How can you expand a div to take the remaining width?

There are multiple ways: You can do it with Tables (okay, that’s not actually a div, but you could do it with div’s by setting the containers property to table-cell and the inner property to table-row or something like that), you could do it with margins, with overflow or with flex box.

JSfiddle of the Code

https://jsfiddle.net/2ahnru0c/

 

Get an A+ rating in SSL Labs

Get Certificate from Letsencrypt

sudo apt-get -y install git bc
sudo git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt
./letsencrypt-auto certonly --standalone --email yourmail@gmail.com -d www.example.com

Strong Diffie-Hellman

sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048

Link to SSL Certificate / Key

cd /etc/nginx
mkdir ssl
cd ssl
ln -s /etc/letsencrypt/live/www.example.com/privkey.pem nginx.key
ln -s /etc/letsencrypt/live/www.example.com/fullchain.pem taskbaSe.crt

Use the following in your nginx conf

server {
 listen 80;
 server_name taskba.se;
 return 301 https://$host$request_uri;
}

server {
 listen 443 ssl;
 client_max_body_size 20M;
 server_name www.example.com;
 ssl_certificate /etc/nginx/ssl/nginx.crt;
 ssl_certificate_key /etc/nginx/ssl/nginx.key;
 
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 ssl_prefer_server_ciphers on;
 ssl_dhparam /etc/ssl/certs/dhparam.pem;
 ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
 ssl_session_timeout 1d;
 ssl_session_cache shared:SSL:50m;
 ssl_stapling on;
 ssl_stapling_verify on;
 add_header Strict-Transport-Security max-age=15768000;
}

Chrome Plugin to Block Game of Thrones Spoilers on 9gag

It seems to become quite popular, to post spoilers the day after an episode of some TV show has aired… I don’t know why this is, but it started to get on my nerves. Fortunately, writing a Plugin for Chrome turned out to be rather easy! In a matter of 3 hours, I had a Game of Thrones Spoiler Blocker up and running.

You can find the plugin at https://chrome.google.com/webstore/detail/9gag-got-spoiler-blocker/jagofmnlfelcophmdongolafmkjcldml and the code at https://github.com/bersling/9gagGoTSpoilerBlocker. Hope it helps some of you, either the code to get started with your own Chrome Plugin or the actual plugin to block some spoilers on 9gag…

You probably don’t need Java StringBuilder – Use a templating engine instead

NoString Builder

Does your code look like somewhat like this? Do you find \n in your code? Then you are doing it wrong. Building strings is a very, very cumbersome process. You’ll miss newlines, you can’t see what’s happening in the process, it’s inefficient if you want to wrap something and so on… Overall very error prone and time consuming. As a rule of thumb: When you write something, that could go into a file (e.g. a .tex file or a .html file), then write it into a file, and not intermixed with Java, C++ or Python code!

But I want to generate my file dynamically, so how can I do it?

Templating Engines

Instead of writing derpy stuff like

String start = "\\escaping \n too much \n"
String middle = "wow... that's weird"
String end = "homg the middle forgot the \n what amigonnadu noww\n"
String full = start + middle + end;

there is a more elegant concept for generating files dynamically. It’s called Templating Engine. In a templating engine, you write your file as you would have anyways, for example:

Hello, I'm just a .txt file... Almost... I have some special syntax enabled like variables denoted by $imAVariable.

And then I just continue writing. No chance to forget a new line.

… with a few “enhancements” to the default file:

  • write variables, for example with $variableName notation in Apache Velocity Templating engine.
  • write for loops, for example with
    #foreach ($name in $myArray)
     ...some normal derpy text
    put a $name in between
    lalala
    #end
  • … and some more functionalities, depending on the power of your templating engine.

Like this you’ll never miss a \n again and your file-to-be becomes much, much, much more readable. If you’re programming in Java, the best choice for you is probably Apache Velocity Templating Engine.

After writing your template file for example helloworld.vm

Hello $name!  Welcome to Velocity!

you can use Java to fill in the gaps, as in:

/*  first, get and initialize an engine  */
    VelocityEngine ve = new VelocityEngine();
    ve.init();
/*  next, get the Template  */
    Template t = ve.getTemplate( "helloworld.vm" );
/*  create a context and add data */
    VelocityContext context = new VelocityContext();
    context.put("name", "World");
/* now render the template into a StringWriter */
    StringWriter writer = new StringWriter();
    t.merge( context, writer );
/* show the World */
    System.out.println( writer.toString() );

Well and that’s it! Files built efficiently, readable, maintainable.

Summary

Writing files via string-concatenation is bad idea since the code is non-readable, errorprone and takes forever to write. A much better idea is to use a templating engine, where you’ll write your file as usual, with the exception of the dynamic parts. Those are inserted by the templating engine later on.

Programming in LaTeX

Latex is turing complete, but it’s syntax can make it hard to really program. What’s especially confusing, is that oftentimes keywords are not followed by a space, but rather directly by a string. For example if you have the boolean variable foo, you can set it to true using the command footrue, which is a very weird syntax compared to foo = true what we’re used to… However, if you really want to, you can write if’s and loops and do all kinds of stuff… Following is a short tutorial on how to do so.

Booleans and If / Else Statements in Latex

One of the most fundamental parts of any programming language is arguably the boolean data type and it’s logic counterpart the if/else statement. Booleans are part of the latex core, as well as of packages such as the ifthen package.

Booleans and If / Else Without a Package (Option 1)

Booleans can be used in Latex without the use of any packages. However, the syntax is quite cumbersome.

Declaration:

\newif\iffoo %Declaration

Assignment:

\footrue %Sets foo to true
\foofalse %Sets foo to false

Check:

\iffoo
...
\else % else is optional, you can leave it out
...
\fi

Usage example:

\documentclass{article}

\begin{document}
\newif\iffoo %Declaration, defaults to false

\iffoo
text 1
\fi

\footrue % Set foo to true...

\iffoo
text 2
\else
text 3
\fi
\end{document}

Output:Screen Shot 2016-05-22 at 18.45.22

Booleans with the Ifthen Package (Option 2)

When someone is not comfortable with the syntax of the latex core for booleans, he or she might consider to use the ifthen package.

Requirements:

\usepackage{ifthen}

Declaration & Assignment:

\newboolean{boolvar} %Declaration, defaults to false
\setboolean{boolvar}{false} %Assignment

Check:

\boolean{boolvar}

Usage Example:

\documentclass{article}
\usepackage{ifthen}
\begin{document}
\newboolean{boolvar} % Declaration, defaults to false
\ifthenelse{\boolean{boolvar}}{text1}{text2} % If/else with boolean
\setboolean{boolvar}{true} % Assignment
\ifthenelse{\boolean{boolvar}}{text3}{text4} % If/else with boolean
\end{document}

Output: Screen Shot 2016-05-22 at 18.18.29

Integers and Loops in Latex

While integers and loops are an integral part of any programming language, it only occurs to few people to use those concepts in latex outside of the enumeration or itemize environments. Nonetheless it can be done, and here is how.

Integers / Counters

Right next after booleans, or even before them, one usually learns about the data type integers. Latex again has a very peculiar syntax for handling them.

Declaration:

\newcounter{mycounter} %initialized with 0

Assignment:

\setcounter{mycounter}{2} %sets counter to 2

Increment:

\stepcounter{mycounter} % increases mycounter by 1

Get value for programming (e.g. in ifnum condition, see below):

\value{mycounter}

Get value for text output in document:

\themycounter

Adding a number to a counter:

\addtocounter{mycounter}{4}

Adding a counter to a counter:

\addtocounter{mycounter}{\value{myothercounter}}

To compare two counters in an if-clause, the \ifnum-keyword is used:

\ifnum\value{mycounter}>3
Cool beans! % this is only printed if mycounter is larger than 3
\fi

Note: There are also counters in TeX (as opposed to LaTeX), so you might encounter code like \newcount\mycounter elsewhere. The difference between \newcount (TeX) and \newcounter (LaTeX) is minuscule, so make sure you don’t get confused since e.g. calling \value{mycounter} on a counter initialized by \newcount\mycounter will throw an error!

Finally, here’s a complete usage example:

\documentclass{article}
\begin{document}
\newcounter{mycounter} %declare counter, initialized to 0
\themycounter %prints 0
\setcounter{mycounter}{4} %mycounter is now 4
\themycounter %prints 4
\addtocounter{mycounter}{4} %adds 4 to mycounter
\themycounter %prints 8
\addtocounter{mycounter}{-2} %subtracts 2
\themycounter %prints 6
\addtocounter{mycounter}{\value{mycounter}} % adds mycounter to itself
\themycounter %prints 12
\stepcounter{mycounter} % increments mycounter by one
\themycounter %prints 13

\ifnum\value{mycounter}>11
Well yes, \themycounter\ is larger than 11...
\else
...thus this is neverprinted
\fi

\roman{mycounter} %prints mycounter in roman numbers
\end{document}

With it’s glorious output: Screen Shot 2016-05-22 at 20.59.28

Next, we’ll cover how loops can be implemented in LaTeX.

For Loops Without a Package

Since we now have the basics in place to create an integer, compare integers using the operators =, < and > , all we are missing to write a loop is a keyword to do so. The syntax for this is:

\loop \ifsomething
...
\repeat

So a full example would be:

\documentclass{article}

\begin{document}
\newcounter{mycounter}
\setcounter{mycounter}{2}

\loop
\ifnum \value{mycounter} < 5
hello \themycounter,
\stepcounter{mycounter}
\repeat

\end{document}

Output:Screen Shot 2016-05-22 at 19.50.36

For Loops With the forloop package

Requirement:

\usepackage{forloop}

Usage example:

\documentclass{article}
\usepackage{forloop}
\begin{document}
\newcounter{ct}
\forloop{ct}{1}{\value{ct} < 5}{\arabic{ct} }
\end{document}

Output:Screen Shot 2016-05-22 at 17.53.37

For Loops With the pgffor Package

If you prefer a more Python-like syntax, the pgffor package might just be for you. I took the examples from this Stackoverflow answer.

Example Snippet 1:

\foreach \n in {0,...,22}{do something}

Full Example 2:

\documentclass{article}
\usepackage{pgffor}
\begin{document}
\foreach \n in {apples,burgers,cake}{Let's eat \n.\par}
\end{document}

Output: Screen Shot 2016-05-22 at 20.25.45

While Do in Latex with the Ifthen package

Requirement:

\usepackage{ifthen}

Usage Example:

\documentclass{article}
\usepackage{ifthen}
\usepackage{pifont} % for the ding
\begin{document}
\newcounter{ctra} % declare counter, is set to 0
\setcounter{ctra}{3} % set counter to 3
\whiledo {\value{ctra} < 7}
{
 \thectra {\large \ding{111}} % the + counter name prints a counter
 \stepcounter {ctra} % increase the counter by one
}
\end{document}

Output:Screen Shot 2016-05-22 at 18.05.12

Floating Point Numbers (Lenghts in Latex…)

If you read the previous paragraphs, you should get the gist of it by now, so I’ll just provide an example for this one:

\documentclass[varwidth]{standalone}
\begin{document}
\newlength{\mylen} %Declaration
\setlength{\mylen}{3.14pt} %Assignment
The number $\pi$ is approximately \the\mylen\ (think away the pt...).

\addtolength{\mylen}{0.0016pt} %Operator
To be (2 digits) more precise, it's rather \the\mylen.

\settowidth{\mylen}{Text} % measures the width of "Text"
"Text" is \the\mylen\ wide... Crazy stuff.
\end{document}

Which yields the following output:

Screen Shot 2016-05-22 at 22.27.40

Comparison to a Normal Programming Language

Let’s compare the crazy LaTeX syntax to a normal language like Java. The following table can also be used for reference.

LaTeXJavaMeaning & Notes
\newif\iffooboolean foo;Declare a boolean. Defaults to false in LaTeX and null in Java
\footruefoo = true;Set foo to true
\foofalsefoo = false;Set foo to false
\iffoo
%do this
\else
%do that
\fi
if (foo) {
//do this
} else {
//do that
}
If-else statement
\newcounter{n}int n;Initialize integer. Defaults to 0 in Latex and null in Java.
\setcounter{n}{2}n = 2;Set n to two
\stepcounter{n}++n;Increases n by one
\value{n}n;Get value of n for calculations
\then %this is actually a \the immediately followed by n...log.info(Integer.toString(n));Get value of n for print
\addtocounter{n}{4}n += 4;Add 4 to n.
\ifnum\value{n}>12
%do this
\fi
if (n > 12) {
//do this
}
Check if n is larger than 12.
\ifnum\value{n}=12
%do this
\fi
if (n == 12) {
//do this
}
Check if n is equal to 12.
\newcounter{mycounter}
\loop \ifnum\value{mycounter}<5
\themycounter
\stepcounter{mycounter}
\repeat
for (int i = 0; i < 5; i++) {
log.info(Integer.toString(i));
}
For Loop. Prints 0 1 2 3 4
Alternative:
\usepackage{pgffor}
\foreach \n in {0,...,4}{do something}
\newlength{\mylen}float mylen;Create a floating point number. Latex initializes this to 0.0, Java to null.
\setlength{\mylen}{3.14pt}mylen = 3.14;Sets length to 3.14pt in latex and to 3.14 in Java. Since Latex is for typesetting the length must have a unit.
\the\mylenlog.info(Float.toString(mylen));Get mylen for print
\mylenmylen;Get mylen for calculation
\ifnum\mylen<1
%do this
\fi
if (mylen < 1) {
//do this
}
Compare mylen to another number

This article is based on this article here, so thank you Matthias for working this out!

How to Solve Vagrant Spikes CPU to 100% on OSX

Does this look familiar to you…? Then you’ve come to the right place.

Since one year I’ve been developing now using Vagrant and about every day I had to reload the freakin virtual machine because I computer suddenly started getting hot… I’ve been looking for answers but couldn’t find any, until I gave it another shot today. I’ve found a solution for my problem in this thread. So big shoutout for pgrunwald… Anyways, the problem seems to appear when you’re doing port forwarding.

That was my setup when I had the problem:Screen Shot 2016-05-21 at 21.18.05

That’s my setup now:

config.vm.network "private_network", ip: "192.168.3.4"

And THAT’S IT. Now you just have to vagrant reload --provision and you’re Mac won’t go crazy no longer.

Download File From Controller in Angular

Screen Shot 2016-05-20 at 11.05.39

Ever had to download a file from your controller in angular? Then you know the struggle is real. You’ll encounter iframe tricks and filesaver.js and all sorts of stuff. But instead of an iframe trick, what you should really do is a link (<a href=”url”></a>) trick!!!

          var a         = document.createElement('a');
          a.href        = yoururl; 
          a.target      = '_blank';
          a.download    = 'yourfilename.pdf';
          document.body.appendChild(a);
          a.click();

Ta da!!! It’ll download your file!!! Note that the file has to exist on your server. You don’t return the file in a post request, you need a url to an existing file instead. So if you’re looking for how to download the answer from a post request, this you can only use this way if you have access to the server and the server writes an actual file to the file system, which can be accessed from the browser.

Deploying Multiple Meteor Apps on One Ubuntu Server

Meteor makes everything easy. Except for deploying your app on your own server, since they want you to use their solution “Galaxy”. Setting up your own infrastructure can be daunting, especially when you want to host multiple meteor apps on one server. Here I’m going to describe how this can be done using nginx.

Step 1) Configuring nginx

After installing nginx

sudo apt-get update
sudo apt-get install nginx

you can use the following setup in your /etc/ngnix/nginx.conf :

# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value

events {
  worker_connections 768;
  # multi_accept on;
}

http {

    upstream project1 {
      server localhost:8081;
    }

    upstream project2 {
      server localhost:8082;
    }

    server {
        listen 80;
        server_name project1.com project1.org;
        client_max_body_size 20M;

        location / {
          proxy_pass http://project1;
          proxy_read_timeout 1000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
        }
    }

    server {
        listen 80;
        server_name project2.com;
        client_max_body_size  20M;

        location / {
          proxy_pass http://project;
          proxy_read_timeout 1000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
        }
    }

}

meteordeploy

Step 2) Setting up a meteor project folder

In order to have only one deploy script (aka code duplication is bad), it’s useful to have all meteor apps in one folder. Therefore your directory structure should be somewhat like:

meteor-projects
--project1
--project2

Step 3) Setting up the server

You need to install a bit of stuff on your server in order for meteor to work:

install.sh

#!/bin/bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install -y build-essential

#install node
curl -sL https://deb.nodesource.com/setup | sudo bash -
sudo apt-get install nodejs -y

#install npm modules
npm install -g forever
npm install -g phantomjs

#install mongo
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list
sudo apt-get update
sudo apt-get install -y mongodb-org
sudo service mongod start

#install meteor
curl https://install.meteor.com/ | sh

#utils
sudo apt-get install graphicsmagick

Put this somewhere on your server, then chmod +x install.sh and run it ./install.sh.

Step 4) Configuring properties

There are variables to your project, you can put them into a properties.sh file inside of each project:

#!/bin/bash
server=root@46.101.140.209
domain=project1.com
name=project1
port=8081

Note that I’ve set it up in a way, that name should be identical to your folder name.

Step 5) Writing a deploy script

Put those files into your meteor-projects folder:

meteor-projects/deploy.sh

#!/bin/bash
source ${1}/properties.sh

cd ${name}
meteor build compiled
ssh ${server} mkdir ${name}
scp -r compiled ${server}:${name}/compiled
rm -rf compiled
scp ../helper.sh ${server}:${name}/helper.sh
scp properties.sh ${server}:${name}/properties.sh
ssh ${server} chmod +x ${name}/helper.sh
ssh ${server} ${name}/helper.sh

meteor-projects/helper.sh

#!/bin/bash
cd $(dirname $0)
source properties.sh

tar -xvzf compiled/*.tar.gz
rm -rf compiled

# rebuild native packages
cd bundle/programs/server && npm install
cd ~

# setup environment variables
export MONGO_URL="mongodb://127.0.0.1:27017/${name}"
export ROOT_URL="http://${domain}"
export PORT=${port}

# start the server
forever stop ${name}/bundle/main.js
forever start ${name}/bundle/main.js

Things should be ready now!

In order to deploy, perform chmod +x deploy.sh and run ./deploy.sh project1 or ./deploy.sh project2. This should upload & run your meteor files.

Top 6 Google Analytics Features for Beginners

Google Analytics is quite crammed with options, making it hard to find the useful ones. Here’s a list of the most useful features from the reporting tab, the most important one for starting.

Screen Shot 2016-05-14 at 22.20.56

#6 Dashboard

Somewhat hidden under Dashboards > Private > My Dashboard you’ll find the following metrics:

Screen Shot 2016-05-14 at 22.13.28

This gives you a good overview over your users. You see how many new users you’re gaining and how many you have in total and where they’re located. About the bounce rate you shouldn’t worry too. I’d stay clear of focusing too much on improving it, as it will improve naturally if you just provide an interesting page.

#5 Behaviour Flow

Screen Shot 2016-05-14 at 22.07.16

This view can be found under Behaviour > Behaviour Flow. This is interesting, if you have a complex website and you want to reduce the number of clicks a user needs to get to his or her goal.

#4 Pages

Here you can see which pages are doing best:

Screen Shot 2016-05-14 at 23.24.33

It’s found under Behaviour > Site Content > All Pages. This lets you know where you have done an exceptionally good job and what still needs improvement.

#3 Heat Map

In order to see which buttons get used on your page, it’s useful to install the Page Analytics (by Google) plugin for the Chrome Browser.Screen Shot 2016-05-14 at 23.35.07

Using this feedback, you can optimize your website by removing buttons that never get clicked anyways, or position important links more prominently.

#2 Audience Overview (Default Screen)

Screen Shot 2016-05-14 at 22.23.23

Google Analytics sets the default screen to Audience > Overview. Here you can gain a quick overview over what’s happening on your site. Of course you’ll want Sessions and Users to increase. That’s the page you’ll get addicted to, in order to see whether traffic on your page is increasing.

#1 Connecting Search Console with Google Analytics

A really useful screen is Acquisition > Search Console > Queries. But before this will work, you’ll need to connect your search console with Google Analytics. If you don’t have you’re site registered in google search console, you have to do so first. That’s important to be found on Google in any case.

Once you have established the connection, you can see which queries resulted in an impression of your website on Google and how often the search result was clicked:

Screen Shot 2016-05-14 at 23.10.42

So for this page, you see that some impressions were displayed, but none were clicked, which will hurt the ranking in the future. The (not set) is explained by Google like so:

To protect user privacy, queries made a very small number of times or containing personal or sensitive information are grouped as “(not set)”.

It’s possible that the view is not entirely up to date:

No data is available for the 2 most recent days.

Screen Shot 2016-05-15 at 15.33.04

The SEO view is so important, because it lets you know where you rank good on Google and where you could improve. For example, if something has 100 impressions but no clicks, you might consider putting a better description on the page. Or when you already rank good in “bla” for a page, you might consider to optimize the page even more for “bla” so it’ll get to Google page one, increasing your user numbers.