5 (or more) indispensable online coding tools

The last decade has seen an explosion of online tools and services. Especially in the coding world, a lot has happened. If you’ve been stuck in a cave for all this time, or have been coding in your man cave without ever reading developer news, you may have missed out on some real gems!

Here’s a compilation of my personal favorites:

1. Repl.it

This is the Mother Of All Coding Tools. A REPL is a Read Eval Print Loop. In other words, the computer reads what you have created, executes the code, prints the output, and then gives you a chance to go change your code, after which the loop starts again. You could also call this ‘an interactive shell’, but in contrast to normal operating system shells, like the command window in Windows, repl.it offers shells for all kinds of programming languages.

Using repl.it you can code in Python, C, C#, Java, JavaScript, PHP, and also the newest coolest functional programming languages. Of course it also supports HTML/CSS/JavaScript. You can even try the classic BASIC.

On top of this interactive shell repl.it has created a community for teaching, complete with courses, subscribing students and tracking.

http://repl.it

2. JSFiddle and Code.pen

Let me compact this article by naming these two twins in the same breath. They are very alike, and give you the ability to use HTML/CSS/JavaScript as an interactive shell. They do offer more features then repl, but it’s really only for web development.

JSFiddle.netcodepen.io

3. Codetracer and stackoverflow

Again I am placing two tools together, but in this case they have the same purpose yet look totally different. It’s like comparing a katana to a swiss army knife. Codetracer is the katana. It’s a place where you can post a piece of code, and instantly get feedback from others, line by line. Stackoverflow is a giant, and less a tool and more a community. It’s the Google for Developers: every coding problem known to man has been solved before on stackoverflow. But, getting answers on a specific question you should post is horrendous: often questions are downvoted, censored, or outright deleted. On top of that some stackoverflow members like to mock or insult people for not following guidelines or not investigating their problem enough. Simple questions just do not belong on stackoverflow (like: how do I sort this array?).

codetracer.co – stackoverflow.com

4. Debugle and Toggl

Debugle is the most slick and simple interface for listing and tracking your bugs while coding. It’s catered especially for single developers or very small teams. Toggl is the most slick and simple interface for time tracking (hey I get a deja vu here!). Together with Debugle you have an independent developers coding workspace setup in a jiffy.

debugle.comtoggl.com

5. Workflowy

Workflowy is one of those ideas that wakes you up at 3AM but which you have forgotten in the morning: “what if you had a todo list, that could indent, just like code?”

By indenting tasks you can separate tasks from categories, and using workflowy you can really go wild with your creative task lists. Filter by date, by description, by status, you name it. Also entering tasks is so simple it’s a breath of fresh air compared to Outlook or other monsters that make you go through hoops just to write ‘try out several button styles’.

workflowy.com

Scribbler

example

Scribbler is a WordPress plugin that allows you to show an animation of handwritten text on your site. See an example on deschrijfcoacharuba.com

Why use Scribbler?

Handwriting is very personal, this can give a personal touch to your logo, your site, product, app or videos.

How to use Scribbler

  1. Download the plugin  (we’re not on the WordPress directory yet).
  2. Go to your admin section in WordPress and choose Plugins.
  3. Choose ‘upload plugin’
  4. Press ‘choose file’ and then install
    • Alternatively, unzip the plugin. Use FTP to go to your WordPress/wp-content/plugins folder and upload the directory there. Activate the Scribbler plugin
  5. Go to Settings > Scribbler
  6. Enter the text you’d like to see animated on your home page

Options

There is currently only one option: text. This defines what text to show on the page.

Customization

You will probably want to customize the CSS file, which is in the same folder as the plugin. By default the text appears in div#pen, which will be placed right below the content of the post.

Limitations

  • The plugin is programmed to only work on a home page (using is_frontpage), because having a handwriting animation on every page gives bad usability.
  • The speed is fixed to 400 ms per character
  • As already said, it has only one font: ‘Tangerine’ (a Google Font).

Caveats

The plugin hasn’t been tested on every website known to man, and it relies heavily on javascript, in particular the Raphael, jQuery and Cufon libraries.

There is only one font (Tangerine). If you want to use another font, you’ll have to do the preparations yourself: create a cufonized font and modify the default in Scribbler.php.

Known Problems

There are no known problems as of yet.

Contribute

If you want to help me, I’d appreciate to be sent cufonized fonts. I will then implement the use of that font in the plugin.

I want this too on my site!

If you’re not technically inclined I can customize it for you on your site. Just leave a comment or contact me (http://about.me/michiel) and we can agree on a price.

Download

Or, do it yourself.

Source

Download

Permutations with repetition using Excel

The back story

Recently I have been trying to limit my use of VBA. It’s not that I was addicted and needed to go to VBA-rehab, on the contrary, I still love VBA till death do us part. But the thing is, every time someone opens an Excel sheet with VBA macros they are reminded of Excel’s vulnerability and the risks of macros.

So I set out to make workbooks that do the same thing, but without VBA. Not always is this possible, or efficient to do so. But when it’s possible, it also comes with great performance and great stability. No code needs to be changed, ever. Of course there are also downsides. It’s not as flexible as VBA, so you’re stuck in a rigid framework that solves one thing and one thing only. But it does it so well, oh my.

My latest endeavor was with permutations. I needed something that would generate all permutations of the tokens F,C,R,A (don’t ask) with repetition. As some know I am an avid speed cuber, that is solving the Rubik’s cube for speed. And the Rubik’s cube is a permutation puzzle. So I have dealt with permutations quite a lot. For those who haven’t paid attention in math class: you should know that permutations come in two flavors: with repetition (Pr) and without repetition (P). The number of permutations (Pr) in these four tokens F,C,R,A is 4^4, or 256. That number is exponential, so it grows so fast that at 5 tokens you are at 3,125 permutations and at 6 tokens at 46,656 permutations. At a set size of 10 tokens you are at 10^10 or 10,000,000,000 (ten billion) permutations. VBA would surely choke on that number of statements to follow. Excel can handle 1 million rows, although I wouldn’t put it to the test with that.

A clean slate

I started out writing a VBA program, that generates all permutations (Pr). The funny thing is if you go online and expect to find a bunch of worked out examples of algorithms, you don’t. Almost all examples you find are about permutations without repetition, which is like working with real objects, since you can’t duplicate real objects. The lottery is a good example of this. The program worked, but it was slow, and cumbersome. So let’s drop VBA and try it without.

CaptureFirst, I set out with some settings (sheet ‘settings’). We define the pattern, and calculate the size of the set (using LEN), and the number of possible permutations (using Length^Length). These values will be used extensively in the functions to generate permutations.

The maximum length of the pattern is set to 5, which totals 3,125 permutations, an amount which Excel can handle in the blink of an eye. You could extend the grid to a width of 7, which would come to 823,543 permutations. I’d be interested to know how fast Excel would generate the output, and how big the file would become. If you try it out please let me know.

Formula frenzy

CaptureGo to the output sheet and look at the grid on the right. There you see in the top row a couple of simple formulas. They are to set the repeat cycle of that column. In the first column you see a token repeated once, in the second column 4 times, in the third column 16 times. We’re multiplying by Length to set the repeat cycle. This is an easy way to generate permutations of any set. Think of how it works with regular counting. You start with 0,1,2,3,4,5,6,7,8,9, and then go one digit to the left, and you repeat, but now in cycles of 10, so that 10,11,12,13,14,15,16,17,18,19 has exactly 10 times a 1. We’re using the same principle.

Our basic generating formula is as follows:


=MID(Pattern,MOD($D4/E$3,Length)+1,1)

If you don’t know MOD, this is a function for modulo, also called the remainder after performing division. The MID function gets a character from a specified position in the string. The column with N is simply to count and use the MOD function properly.

By using absolute referencing we are now able to copy the cell E4 to all other cells in the grid, while keeping a properly working formula. With a pattern of length 4 we can ignore the last column, which is only needed for a pattern of length 5.

In the settings sheet you will see a width and a height. By selecting the range starting at E4 with that width and height, we get exactly all permutations in the set.

Alternatively, on the left, there is a table with all tokens concatenated in one string, for ease of use. The formula for this is:


=IF(D4>=NumItems,"",LEFT(CONCATENATE(E4,F4,G4,H4,I4),Length))

Using FCRA as a pattern we can now see all 256 permutations in column A!

Perfect permutations

CaptureWell, permutations without repetition are actually a subset of permutations with repetition (P < Pr). In a permutation without repetition you don’t have any duplicates. So for the tokens F,C,R,A a valid Pr would be FFFF, but it’s not a member of P. You can only get a member of P by swapping original tokens. So e.g. FRCA is a member of P. That’s why the number of items in P doesn’t grow as fast as in Pr. Four tokens gets to 4*3*2*1=24 permutations. This is called a factorial.

If a token set does not contain duplicates we can easily filter out the permutations we need. E.g. in the set A,A,B,B we still get duplicates in the list, and so we can’t filter. But in F,C,R,A it’s quite possible using Excel. The formula used is a but difficult though, and requires some thought:


=SUM(IF(FREQUENCY(
  MATCH(OFFSET(E4,0,0,1,Length),OFFSET(E4,0,0,1,Length),0),
  MATCH(OFFSET(E4,0,0,1,Length),OFFSET(E4,0,0,1,Length),0))
  >0,1))=Length

Here, OFFSET gives us a dynamically defined range, which is handy, because we don’t know how long the pattern is beforehand. In this formula, Length is the size of the set (aka the length of the string). Both OFFSET and MATCH return multiple values, so it’s impossible to split the formula into more cells, but just for clarity, let’s view it in condensed form:


=SUM(IF(FREQUENCY({FFFA}, {FA})>0,1))=Length

What it does is it totals the frequencies of each character in the set, so in this case it returns 2, and then checks to see if it matches the length (4). If it matches we have a permutation. Note this only works for patterns that have no repeating tokens, like FCRA.

Using named formulas we can simplify the long formula to:


=SUM(IF(FREQUENCY(
  MATCH(tokens,tokens,0),
  MATCH(tokens,tokens,0))>0,1))=Length

…where tokens equals OFFSET(E4,0,0,1,Length)

Now we have a formula to detect permutations. Unfortunately we still have duplicates, because our table always has 5 tokens and we might have a shorter pattern, like our example FCRA. So we use an IF to detect empty cells in column A and we can now use Excel’s filter (On the ribbon choose Data, then Filter) to get all permutations.

Download

permutations with repetition (320KB)

Using named ranges and worksheet functions in Excel VBA

Bold Brackets

A couple of days ago I saw something in an article on StackOverflow, that blew my mind. I can’t find the article anymore, but I do remember what this one neat trick was, that will for ever change your VBA. It’s called a named range, and I found out I had always been doing it wrong. So have you, most likely.

Have you ever written something like this?


s = Application.WorksheetFunction.Sum(Range("A1:A10"))

You thought you were quite smart, using SUM to add some values together that would have taken a loop in VBA. You petted yourself on the back, took a beer, and applauded yourself for you being awesome. Well, you’re not awesome. This is lame. You suck. Ok, maybe not, but watch this:


s = [Sum(A1:A10)]

It’s incredible! This gives the exact same result.  You may wish to prepend with a sheet name, so it’s an exact reference. You can use any kind of name inside the square brackets. So, if A1:A10 is named ‘records’ in Excel you could rewrite this code to


s = [Sum(records)]

Note that with this notation we don’t use double quotes around the name of the range.

Vanishing Variables

CaptureA quite mighty use for this, is that we can now write code with a lot less variables, if we let Excel do the work for us.

  1. make a new sheet
  2. name it ‘variables’
  3. make three columns: name, value, description

Now you can fill the table you just made with all kinds of settings, constants or calculations that you want to use in your elaborate VBA program.

I am a lazy teacher, and I have a lot of students, so I work a lot with short macros that can help me get more spare time. Here’s an example:

    For Each subfolder In FSfolder.SubFolders
        If subfolder Like "Student *" Then
            [studentNr] = Right(subfolder, 6)
            If Not FileExists([sClass]) Then
                FS.createFolder [sClass]
            End If
            FS.MoveFolder subfolder, [newFolder]
        End If
    Next subfolder

In line 3 I fill the named range ‘studentNr’ with a value taken from a folder, which contains a student number. In the next line, I check if a folder for that students’ class has already been made, and if not, I make the folder. The variable [sClass] does not exist in my code. It only exists in my variable table in Excel. The cell contains a VLookup function to find in which class this student is currently enrolled. Similarly I have a [Teacher] variable, also with a VLookup function. NewFolder is simply a concatenation and formatting, which is also easily done in Excel.

As you can see, the values for [sClass], [Teacher] and [newFolder] are filled automatically by Excel, and I don’t have to process anything.

Programming like this in Excel is a new paradigm. You don’t churn out all your code top-to-bottom as you used to. You create sheets with lots of calculations, lookups etc, and then you make a tiny program that links all this together. Excel can do some crazy fast, complex stuff, and you should never have to program those anymore!

Crazy Caveats

Well wasn’t that incredible? You may not be used to programming like this, and I recommend this method only for experts. You should be in full control of the worksheets, or otherwise someone will mess with your program. Also, when you are part of a team, you should make sure this ‘magic’ is elaborately documented in the code (e.g. in a header of the function mention which Excel named ranges are used).

Good luck.

Learn more: FastExcel Blog

 

The selection contains multiple data values… Merging cells in Excel.

This is a super powerfeature I have always missed in Excel: the ability to join the content of cells without losing any data. Sorry, what’s that?? Yes, I know about the ‘merge’ option. It’s lame! Try merging two cells that both have content. Excel answers, delightfully happy, that you will only keep data in the first cell and lose all of the data of the other cells, and go deal with it.

multiple-data
multiple-data

So, I decided to ‘deal with it’ and I present here several macros for your pleasure and entertainment that will solve this once and for all.

Merging, Joining and Combining

Well, that’s all the same of course. Let’s start with a simple macro to join a bunch of cells and put the result in the first cell.

Sub Join()
   Dim out As String
   Dim c As Range

   out = ""
   For Each c In Selection.Cells
      out = out & c.Value
      c.ClearContents
   Next
   Selection.Cells(1, 1).Value = out
End Sub

How does it work? First, we define the variable out which will contain all content. Then we loop over all cells in the current selection and we combine their values using the concatenation operator “&”. Finally we put the value of out in the first cell of the selection.

If you have never created a macro before, you can add them by pressing ALT+F11. After that, make sure to copy this one to the personal macro workbook.

In some occasions I needed to merge, but also keep the data separated by either commas or newlines. So I made a slightly modified version with arguments. Note for noobs: you can’t run these like normal macros, you’d have to go into the VB editor and start them from the immediate window. Or, you can make a short calling-macro similar to the JoinWithBreaks below.

' join the contents of a selection of cells
' and put all of these together in one single cell
Sub Join(Optional s As String = "", Optional wrap As Boolean = True)
    Dim out As String
    Dim c As Range
    Dim n As Integer

    out = ""
    For Each c In Selection.Cells
        n = n + 1
        out = out & c.Value
        If n < Selection.Cells.Count Then
            out = out & s
        End If
        c.ClearContents
    Next
    Selection.Cells(1, 1).Value = out
    Selection.Cells(1, 1).WrapText = wrap
End Sub

Sub JoinWithBreaks()
    Join vbNewLine, True
End Sub

Fillerup

Another problem closely related to the merge problem is when you have a sheet looking like this:

excel fill problem
excel fill problem

And let’s say it extends a long long way to the bottom for your archive of ten years. To create a usable Excel table and e.g. to create a pivot table your table needs to have values in every cell, not just the first one. Humans can reason that cell A3 also belongs to January, but computers and thus Excel cannot. Clicking on the autofill handle in cell A2 fixes this, but doing so for 100 cells is still very tedious work. For that, we can use the following macro, which will automagically fill every empty cell with the value right above it.

Sub Filler()
    Dim c As Range

    For Each c In Selection.Cells
        If IsEmpty(c) And c.Row <> 1 Then
            c.FormulaR1C1 = c.Offset(-1, 0).FormulaR1C1
        End If
    Next
End Sub

How to fix the document map in MS Word 2007

The Document Map! That horrendous, horrible, horrific horror! It never does what I ask it to, it never shows what I tell it to show, it constantly messes itself up beyond recognition. It’s like a crazy guy beating himself up, I keep thinking of Fight Club. The first rule of Document Map is you don’t talk about Document Map. And yet, I am going to talk about it.

Today I suddenly found out the magic trick, the silver bullet that fixes the problem that had haunted me for so long.

As any professional MS Word user, I use the map extensively, even though its quirks pester me constantly. It’s just too powerful to let go.

What are its problems?

  1. Outline works, as long as you have very strict usage of headings. A lot of documents fail this, especially if they aren’t created by yours truly (ahem).
  2. Titles show no outline numbering, even though it’s definitely there. This is more an annoyance then an outright problem.
  3. The map is not updated. Grrrrr.

It appears Microsoft has put some fuzzy logic in the document map. Now most of the time I don’t really care about MS’s guess at what I want to do. If I press TAB then most of the time I actually want an indent. If I type ‘Teh’ I do mean ‘The’. And of course, I know how to disable that behavior.

However, the document map seems to magically create non-existing headings from my text, and not in the farthest corners of options and settings is there mentioning of the document map doing this. It’s like an easter egg, but not a very funny one.

And then I did what I often do when cleaning up documents. I pressed “CTRL+Q+SPACE”. If you don’t know this trick, it’s the ultimate cleanup action. It removes all and every formatting. I had the map open because I was about to do some things with headings when I noticed after pressing ‘CTRL+Q’ that the item disappeared from the map, as it should because it wasn’t a heading! Then, by not continuing with CTRL+SPACE I retained the original formatting (bold in this case).

Before you select all text and press CTRL+SPACE remember it wil turn lists into regular paragraphs, so make sure to just do this on the items that need to be removed from the map. If that still doesn’t work continue to press CTRL+SPACE. You will lose formatting, which you should recreate using styles. And if that fails make sure to press the Normal style button to revert to the default formatting.

The second problem appeared to actually be a bug. A heading right after a page break will not show its numbering. Well, that’s minor and you can always select ‘page break before’ in the style settings.

The third was related to both 1 and 2, perhaps it won’t happen again. I hope so, I really do.

Try it out and let me know of any other problems you encounter with the document map.

Update: someone created a macro for fixing the document map!

Here’s the slightly modified code for this (I added a progress counter):

Sub ResetOutline()
    Dim currentParagraph As Paragraph
    Dim numParagraphs As Long
    Dim percentComplete As Byte
    Dim oldPercentage As Byte
    Dim n As Long
    
    numParagraphs = ActiveDocument.Paragraphs.Count
    n = 0
    For Each currentParagraph In ActiveDocument.Paragraphs
        percentComplete = Round(n / numParagraphs * 100, 0)
        If percentComplete > oldPercentage Then
            Debug.Print percentComplete & "%"
            Application.StatusBar = "Processing... " & percentComplete & "% complete"
            DoEvents
        End If
        n = n + 1
        currentParagraph.OutlineLevel = currentParagraph.Style.ParagraphFormat.OutlineLevel
        oldPercentage = percentComplete
    Next currentParagraph
    Application.StatusBar = ""
End Sub

Fantasy Selling

photo of earth from NASA
The earth is FLAT! Seriously.

Here is a little mind control technique I just thought of: selling/planting an idea into someone’s head by just telling random stuff. You’d have to make sure to put enough symbolism in it, so it enters the brain of the other person through the power of their own associations. Make sure to bring in scientists, religion, government and media. Those are powerful friends to convince people.

The earth is flat

Goal: sell the idea that the earth is in fact flat.
Script: “Hey, you know the whole thing about the earth being a globe is in fact a hoax? Yeah, I didn’t believe it at first, but apparently it’s true. So when you see that image from space it’s always a circle but there is no shadow, so you know it can’t be round. Also, in the bible nobody says the world is round. In fact, in Daniel 4:10, “he saw a tree of great height at the centre of the earth…reaching with its top to the sky and visible to the earth’s farthest bound”. If everyone could see the tree, the earth must have been flat. Also, research has shown that people believe anything on television, and the images from space usually don’t show a moving earth: it is still, fixed as the bible says too. The reason you see that same picture of the earth from space again and again is because the media and the government need to sell this idea so bad. That’s why they need to repeat it, otherwise we would quickly fall back to the truth, which is that the earth is flat. “

A physics model of a physics model

One of the hardest topics in school next to computer science is physics. Time and again I see students struggle with the topics, and I have to admit I didn’t find it easy in high school myself. So I started studying physics again using Khan Academy, and gained much insight into the basics. I have admired Sal Khan since he started his site, and as a school teacher I also think I should help him, and my students, wherever possible.

I started drawing a diagram of how all things in physics connected to each other, and while doing that, I realized there should be software to do this better. After a short search I found the wonderful D3 toolkit, based on web standards, just as I like it. D3 can create awesome diagrams, graphs, infographics, you name it.

So now I have for your pleasure and learning aid a physics based overview of common physics quantities. Click the image to see the actual animated model.

Some tips on how to use it:

  1. Click the diagram to automatically redraw it
  2. Drag nodes to change the layout
  3. Mouseover a node to see related info
force diagram physics
force diagram physics

view on JSFiddle

Use in physics assignments

The colors in the diagram denote related quantities:

  • blue – essential axiomatic units Mass, Length and Time. Learn more about these in this lecture by Walter Lewin.
  • green – related to movement
  • orange – related to energy
  • red – related to a single unit

To use this diagram in your physics assignment, look at the known variables. Find those in the diagram. Now see if you can combine those to make more variables: follow the arrows. If you can start from two known values you can usually calculate a third. You continue doing this until you have found the desired outcome.

Salman Khan is the smartest man in the world

The world is changing. At some point in the future, says Ray Kurzweil, computers will be more intelligent than humans. He thinks it will happen in the year 2045 to be exact. That’s a scary thought, but he could be right. Many say he is the smartest man in the world.

But today I realized that Salman Khan is ahead of him. Khanacademy is an online tutorial for everything including math, biology, economics, chemistry, physics, history, and more. And Khan made all videos himself.

But not only did he do that, he is expanding at an exponential rate, to offer his courses to classrooms. And that could revolutionize education.

And all of that… for free, because he is filthy rich anyway, and doesn’t care about making more.

World changing: Khanacademy. See for yourself.

Facebook limits you at 5000 friends

enough is enough
enough is enough

Jeffrey Zeldman claims 5000 friends is not enough!

Not Amen! Agree to disagree!

The value in a social network lies in social. So the friends should be people you have met in real life and value in your social circle, which revolves around your life, not your business. A page is a business tool so that is what you should have.

The cap may be nonsense, but unfortunately there is no way for Facebook to validate that you actually know the ‘friend’ personally.

One other side-effect in which Facebook bites it’s own hand is that apps and games (OK and businesses) thrive by the amount of ‘friends’ you have. That is an incentive to make fake friends. I started to play CityVille only to find out that none of my friends did. If I were true to Facebook’s dogma I would quit playing or be an obnoxious friend who would evangelize CityVille to all my friends all the time, until they unfriend me. Now I play it happily with over 30 fake friends whom I’ve never met. I even block them from my wall, as I don’t want them in my real social circle. Once I stop playing CityVille I will quickly unfriend all these people.

Still, I fully agree that Facebook should work on a solution, which in my opinion is definitely not removing the cap but some way to have people in your network for a certain purpose, and have great distinction in how you treat and communicate with them.

All the positive talk about Twitter’s agility: don’t become so vigilent, or should they also remove the 140 character cap!?!?!?

I have always been appalled at the nomenclature of new applications: Friend and Like come to mind. I call them ‘close-related-marketing-profile’ and ‘increase-marketing-keyword-potential’.

Jeffrey, you don’t get to  5000 friends without making a few enemies 😛