NewFiveFour | Blog | Portfolio

Using AWK with CSV files with commas inbetween quotation marks

Sometimes you’ll get a CSV like: Here is something, And another thing, "OH LOOK, A COMMA WITHIN QUOTATION MARKS", something else.

This is annoying, since a normal awk separator like -F , will not work. But in modern version of awk, you can use -FPAT to use a regular expression.

Use awk -vFPAT='[^,]*|"[^"]*"'. This says you’re either looking for a field that ends in a comma, or looking for anything that begins and ends with quotation marks.

awk csv

Linux: How to take screenshots and screen grabs from the command line

If you have gnome-screenshot installed, you can type gnome-screenshot -a which will screenshot an area of the window you chose.

The parameters -w copies the whole window. Without parameters and it will copy the entire window.

It will be saved into your Pictures directory as Screenshot.... If you use the -c command it’s suppose to copy to the clipboard, but there’s a bug that prevents this apparently.

If you use the -i command, you’ll see a dialog with capture options.

And after the capture, you will see a save box. With this method you will be able to copy to the clipboard with the button provided.

Ensure you’re on the window you want to capture, if you use multiple desktops.


Bash command line movement and deletion shortcuts

If you have typed in

Man I was mean, but I'm changing my scene

And then press alt shift b (the shift may not be needed) twice the cursor will go back to the m of my.

(alt shift f moves in the opposite direction, incidentally)

Press alt shift d it will delete the word my. Press it again and it will then delete scene.

Press ctl d and you will delete not the word but a single character under the cursor.

Press ctl k and you will delete everything after the position. ctl u everything before.

Press ctl _ and you will undo your command line edits.

unix bash

CSS: Bottom sheet using flexbox and css transition

We’ll create two divs. The first one will have a lot of content. The second will have little.

When you click on the second it will animate itself to take up most of the space.

Here is the basic layout:

<div class="main" style="height: 100%;">
  <div id="top" class="big" style="background-color: blue; overflow: hidden;">
    <div>I read</div>
    <div>the news</div>
    <div>today. </div>
    <div>Oh boy.</div>
    <div>A thou-</div>
    <div>-sand holes</div>
    <div>in Black-</div>
    <div>-burn Lan-</div>
    <div>-ca shire.</div>
  <div id="bottomsheet" class="small" style="background-color: orange; overflow: hidden;">
    Bottom sheet

The divs have overflow: hidden css attributes so we can resize their height regardless of their content.

Let’s now give our div a flexbox display, with the column direction. The big and small css classes will say that the first div will take up 80% and the second will take up 20%:

  .main {
    display: flex;
    flex-direction: column;
  .small {
    flex-basis: 20%;
  .big {
    flex-basis: 80%;

We’ll now have a 80/20 height ratio between our two divs. Now let’s use the javascript (which you must put after your body’s content) to swap those dimensions via swapping the css big and small classes:

  document.querySelector("#bottomsheet").addEventListener("click", function() { 
    var small = document.querySelector(".small").classList;
    var big = document.querySelector(".big").classList;

This all works wonderfully, but there’s no smooth animation. Let’s fix that by saying both the big and small css classes will involve a ease-in-out transition on the flex-basis attribute that will take 0.3 seconds:

.small, .big {
  transition-timing-function: ease-in-out;
  transition: flex-basis 0.3s;

And voila.


CSS 3: Animate or transition from one css value to another

To transition from one css value to another, you can use the transition attribute.

In your element, set the value you want to transition, with the time taken to do such: transition: flex-basis 0.3s; for example.

And the change flex-basis value somehow to see the transition, usually by changing either class or style property of an element.

You can change the type of transition by setting the transition-timing-function attribute: to ease-in-out for example.


Page 2 of 77
Previous Next