Musings of a dad with too much time on his hands and not enough to do. Wait. Reverse that.

Tag: tools (Page 33 of 35)

Watermarking Jupyter Notebooks, Part 2

In a previous post, I explored different ways in which I might be able to add a watermark to my Jupyter Notebooks.  I also referenced an interesting approach that would allow me to a) watermark all my notebooks at once and b) only have to write CSS once and write it entirely outside of any notebook.  Well, I decided to go ahead and give that approach a try.  Here are my results.

Step 1: Create your custom.css

The post I found on theming your notebooks suggested that you should place your custom CSS in a custom.css file here: ~/.jupyter/custom/custom.css

The tilde is supposed to represent your home directory; although, in different installations of Jupyter Notebooks that I’ve seen, I’ve found the “home” directory for Jupyter to not necessarily be your Windows home directory.  At any rate, on my home computer, I found my Jupyter folder here: %USERPROFILE%\.jupyter

Interestingly, when I navigated to the that folder, I found no “custom” directory.  So, I created one and then created a blank custom.css within it.

Step 2: Add the necessary CSS to custom.css

Next, I opened my blank custom.css in Notepad++ and added the following CSS code (apologies for the horizontal scrolling, but I’m not entirely sure how to properly format HTML code in a CSS file):


1
2
3
4
div#notebook {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600px' width='600px'><text x='-350' y='500' fill='lightgray' font-size='80' font-family='Arial' transform='translate(30) rotate(-45 0 0)'>DadOverflow.com</text></svg>");
    background-repeat: repeat;
}

Step 3: Start up Jupyter, create a new notebook, and profit!

Now, with your newly minted custom.css, launch Jupyter Notebook and start a new notebook…or even open up an existing one.  You’ll now see your watermark magically appear:

Pretty cool, eh?

Watermarking Jupyter Notebooks

Watermarked content can be annoying, but I get it: you work hard on a product and you should get credit for it. At my job, I sometimes have the same challenges–I work hard on a report or product, hand it over to the co-worker who requested it, and he takes it to upper management passing the content off, either unintentionally or otherwise, as his own. If only I could in some way watermark my work to make it clear where it originated.

Since I do a fair amount of work these days in Jupyter Notebook, I decided to take this question there and came up with three approaches:

1. The traditional image file approach

The most common approach to watermarking a web page seems to be creating an image file with your watermark and referencing that image file in your CSS. In Jupyter Notebook, you can use the IPython API to load your CSS:


1
2
3
4
5
6
7
8
from IPython.core.display import HTML


HTML('<style type="text/css">'
    'div#notebook {'
    'background-image: url("dadoverflow_wm.png");'
    'background-repeat: repeat;}'
    '</style>')

(The full notebook is here)

Alternatively, you can use this clever custom.css approach so that your watermark loads automatically in all your notebooks without any extra coding on your part.

One big drawback to this solution is that if you hand off your notebook to your customer, that image file needs to go with it. If your customer wants to get rid of your watermark, all he has to do is throw away the image file. Bummer!

2. Base64 encode that image file

Files can be embedded in a web page, so to speak, by base64 encoding them and pasting the encoding right into your HTML. You can take this approach with your watermark and then never have to worry about the image file having to travel side-by-side with your notebook. Here, I first base64 encode my image file and then use the IPython API to shove my markup, including my base64, into the CSS:


1
2
3
4
5
6
7
8
9
10
11
12
13
import base64
from IPython.core.display import HTML


with open('dadoverflow_wm.png', 'rb') as f:
    encoded_string = base64.b64encode(f.read()).decode()
   
image_url = 'data:image/png;base64,{0}'.format(encoded_string)
HTML('<style type="text/css">'
    'div#notebook {'
    'background-image: url("' + image_url + '");'
    'background-repeat: repeat;}'
    '</style>')

(The full notebook is here)

Same deal as above, you can also paste that markup in a custom.css that all your notebooks will inherit. While this eliminates your dependence on that image file, base64 strings, like this one, are huge! It is not fun dealing with such things. Fortunately, there’s yet a better solution.

3. The SVG way

SVG tags are the continuum transfunctioners of HTML–their mystery is only exceeded by their power. But you can do amazing things with SVGs, watermarking your pages among them. Here, I don’t even need to rely on an image file, base64 encode or not. I simply adjust the properties of my SVG and TEXT tags as needed to get the effect I’m after:


1
2
3
4
5
6
7
8
9
10
from IPython.core.display import HTML


svg = ("<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600px' width='600px'>"
       "<text x='-350' y='500' fill='lightgray' font-size='80' font-family='Arial' transform='translate(30) rotate(-45 0 0)'>DadOverflow.com</text></svg>")
HTML('<style type="text/css">'
    'div#notebook {'
    'background-image: url("data:image/svg+xml;utf8,' + svg + '");'
    'background-repeat: repeat;}'
    '</style>')

 

You can find all three of these examples in my GitHub page.

Saving time in Windows

I’m always trying to find ways to save time and working on the computer is no exception. At work, I do some work in Linux, but probably 95% of my computing time at work and at home is in Microsoft Windows. While I certainly do look to free and pay software to save time, Windows itself has a lot of nifty features that can cut down a lot of work time. Here are a few you might find helpful (NB: many of these reference the Windows key found on Windows-friendly keyboards, so I’d highly recommend becoming familiar with that key):

1. The Run Window (Win+R)

The Run Window is a great place to quickly fire up many applications you use without having to find the icon on your desktop or search through the Start Menu. Need a new instance of Notepad? Go to the Run Window and type “notepad”. Microsoft Word? Type “winword”. The calculator? Type “calc”. You can easily launch the Run Window with the Windows key plus R (Win+R) or by right-clicking on the Start Menu icon and selecting “Run” from the context menu.

2. Copy as Path

Often, I will need to have the full path to a file: say, I’m running an application and wish to open a file in it, such as an image or document. I could select the “Open” menu item and navigate through several folders to find my file. However, another option is to find my file in Windows Explorer, then hold the Shift button down and right-click on the file. A context menu will appear that includes a selection called “Copy as path”. This will copy the full path to your file in your clipboard. Now, you can paste that path in the “Open” dialog box and open your file more quickly.

3. “Cmd” in explorer

Sometimes I need to work with my files at the command line. I could certainly open a new command window by going to the Run Window and typing “cmd”, by then I would have to do a lot of change directory commands to get to the folder where my files are. Lots of wasted time. Alternatively, you can navigate to where your files are in Windows Explorer. Then, click in the address bar. The path to that folder becomes highlighted. Now, just type “cmd” and hit <Enter>. A new command window will open that’s immediately at your folder location.

4. Locking your computer with Win+L

When working on your computer, security should always be a top priority. So, whenever you get up and walk away from your workstation, you should lock your computer so that no one else can come up to it while you’re away and do nefarious things on it. The easiest way to lock your computer is the key combination of the Windows Key+L. I use this combination multiple times throughout the day.

5. Pin to taskbar

The newer versions of Windows allow you to “pin” an application to your taskbar. This way, an icon for your application will be permanently affixed to your taskbar allowing you to very easily launch the application when you need it. To pin an application to the taskbar, first launch it. You’ll see that the icon of your application now appears on the taskbar. Right-click on that icon. In the context menu, you’ll see a “Pin to taskbar” option, so go ahead and click that. When you close your application, the icon will remain allowing you to easily re-launch it. You can also move those icons around in case you want to group certain types of software together.

6. Open Windows Explorer with Win+E

I spend a fair amount of my computer time navigating around folders and files in Windows Explorer. You can launch an instance of Windows Explorer by looking for it in the Start Menu or you can even type “explorer” in the Run Window, but an even easier option is to click the key combination Windows Key+E.

7. Selecting files (or text) with either Shift, Ctrl, or both

As I alluded to above, I spend a portion of my computer time in Windows Explorer working on folders and files including moving them around. For instance, I’ll frequently download pictures and video off phones and cameras and move them off to my NAS and other storage devices. If I need to move all files from one folder to another, I can drag my mouse across all the files to select them all at once and then move them in bulk. However, what if I only want to move a portion of the list? That’s where the Shift and Ctrl buttons can help. Say I have 10 files in a folder but I only want to move the first 5. I can left-click on the first file then, holding my Shift key down, I can click on the fifth file and effectively select all the files in between. Now I can move all five at once. What if I only want to move the first, third, and fifth files? That’s where the Ctrl key can help. I can left-click on the first file, then, holding the Ctrl key down, left-click on the third and then the fifth files. This will surgically select just those three files allowing me to work with just those three.

The Shift and Ctrl keys come in handy with word editing, too. I tend to do a lot of editing of my kids’ various school papers. Much of my editing consists of removing and/or replacing whole words and sentences. You can do this sort of pruning with a mouse, but a mouse can be a rather clumsy instrument when performing surgery on that book report (not unlike a clumsy blaster). Instead, I’ll use the arrow keys on my keyboard to position the cursor in front of the word I wish to edit, then, holding the Shift key down, I’ll click the right arrow button across the word and simultaneously highlight the letters of the word one-by-one. If I want to edit the entire word instead of a few characters, I can hold both the Shift and Ctrl keys down together and then click the right arrow key once to highlight that word. I can hit the arrow key a second time to highlight the next word and so on. If I want to take out the entire line, I can click the Home button to position my cursor at the start of the line then, holding the Shift key down, click the End button to highlight the entire row. If I’m deep into a lengthy research paper and just want to get back to the start of it, Ctrl+Home will do the job; conversely, Ctrl+End will take me to the end of the document. Whatever you do, don’t forget to periodically Ctrl+S to save your modifications!

8. Copy/Paste alternative

Copy, Cut, and pasting (Ctrl+C, Ctrl+X and Ctrl+V) are Windows staples I assume most of you are already familiar with. Here’s a handy alternative, though. Suppose your kid writes, “to boldly go…”, and you decide the phrase should be “to go boldly.” With your mouse, double-click “go” to highlight the word then, holding your left button down, drag the word in front of “boldly”. You’ve effectively performed and pretty slick Cut-and-Paste operation.

Now, suppose your child is writing a retrospective on the fantastic Forrest Gump and decides to quote Private Bubba Blue: “There’s pineapple shrimp, lemon shrimp, coconut, pepper shrimp…”. Uh-oh: it’s coconut shrimp, not coconut. To fix this error of omission, double-click on the word “shrimp” used elsewhere. Normally, you might hit Ctrl+C then move your cursor to after coconut and click Ctrl+V. Instead, hold the Ctrl key down and drag your highlighted shrimp to just after coconut and then let go: you’ve just performed a nifty Copy-and-Paste. Neat, huh?

9. Ctrl+T in browsers

Admittedly, I do spend a lot of time in my browser. Like most of us, I take full advantage of tabs in our modern-day browsers. Need to open a new tab and don’t want to take your hands off your keyboard? Most browsers honor Ctrl+T as a way to open a new tab. Furthermore, once you open a new tab, most browsers will place your cursor directly in the address bar, so you can immediately start typing the url or search term you wish to execute.

10. Wheel clicking

I’m a big fan of mice that have a wheel between the left and right buttons. Wheels allow you to quickly scroll vertically in web pages, documents, etc. Most mouse wheels also allow you to click them like a button. What does this button do, you might ask? Well, the next time you’re in your browser, find a hyperlink and wheel-click on the link. The default behavior will be twofold: 1) a new tab will open in your browser and 2) the new tab will immediately navigate to the url on the link you clicked on. Nice little hack over what you’re probably already doing: right-clicking on the link then selecting “Open Link in New Tab” from the context menu. Now, try this: choose any tab in your browser (even one that doesn’t have focus), position your mouse pointer anywhere on the tab and then click your wheel. The default behavior will be to close that tab. This feature can help you quickly close all those tabs you’re done viewing. Many other tab-based applications, like Notepad++, also honor this behavior.

« Older posts Newer posts »

© 2024 DadOverflow.com

Theme by Anders NorenUp ↑