by Joel Limardo
Home | Twitter | LinkedIn | Consulting | About | RSS | Map

Wed, 15 Feb 2017

HTML/CSS Samples

I have this very old book (I'll skip the name/author) on designing web sites using HTML and tables -- something nearly verbotten nowadays. Anyway, I got the idea of redoing the examples using CSS. I'm no CSS expert and some of these examples simply may not work across all browsers but here they go.

posted at: 17:39 | path: /technical/markup/HTML/CSS | this entry | top

Cellpadding and Cellspacing

Here's what I changed to achieve the equivalent of the old cellpadding and cellspacing properties that you would use on an HTML table (output is a diff from the last example to this one):

<              float : right;
<              width : 200px;
>              float : left;
>              width : 400px;

11c11 < border-spacing: 2px;
> border-spacing: 10px;
20c20 < padding: 2px; > padding: 10px;

22a23,25 > .aTableCellLeft { width: 40%; } > .aTableCellRight { width: 50%; } >

28,29c31,32 < float : right; < width : 100px; > float : left; > width : 200px;

52,53c55,56 < <span class="aTableCell" id="span1">This is my first table cell</span> < <span class="aTableCell" id="span2">This is my second table cell. Second cells are really not that big a deal.</span> > <span class="aTableCell aTableCellLeft" id="span1">This is my first table cell</span> > <span class="aTableCell aTableCellRight" id="span2">This is my second table cell. Second cells are really not that big a deal.</span>

posted at: 17:35 | path: /technical/markup/HTML/CSS | this entry | top

Mon, 13 Feb 2017

Simple Table w/Media Query

Table-like design need not do without media queries. I used the same idea behind the media query example and applied it to the first example).

Again, here is the markup:

Here's the thing: you have to be wary of the order of your CSS. If the media query came before the base definition the results would be different. Try it yourself.

posted at: 18:13 | path: /technical/markup/HTML/CSS | this entry | top

Sat, 11 Feb 2017

Interlude 1: Media Queries

One minute -- this book was written back before media queries. I've created a very simple example of a media query that changes some text when you change the size of the screen. I'll have to apply this to a table design if I'm to use tables generally in design across devices.

posted at: 19:45 | path: /technical/markup/HTML/CSS | this entry | top

Wed, 08 Feb 2017

Simple Table

The very first example was, unsurprisingly, to build a table and then add some text to the cells. The text is of different sizes (one has more characters than the other -- a significant point as you can see). Here is the markup:

posted at: 19:03 | path: /technical/markup/HTML/CSS | this entry | top

Thu, 02 Feb 2017


This is a tool you can get using:

 sudo apt-get install c-repl

It has a really small footprint but it is a finnicky tool that is a bit of fun to play with. For instance, you can normally just do the following to test out making different types of arrays in C (store this in a file called simplearrays.c):

#include <stdio.h>
int main() {

char sentence1[] = "This is a sentence!\n";
  int m[10] = {1,2,3,4,5,6,7,8};
  int i;
  for (i = 0; i<=9; i++) {
      printf("This is the element: %d\n", m[i]);
  return 0;

And to compile just do this on the command line:

     make -f simplearrays

Should produce:

This is the element: 1
This is the element: 2
This is the element: 3
This is the element: 4
This is the element: 5
This is the element: 6
This is the element: 7
This is the element: 8
This is the element: 0
This is the element: 0
This is a sentence!

Now, in c-repl when you try to directly create an array in that fashion the thing crashes:

/usr/lib/c-repl/codesnippet.rb:19:in with_semi': undefined method+' for nil:NilClass (NoMethodError)
    from /usr/lib/c-repl/codesnippet.rb:46:in parse'
    from /usr/lib/c-repl/codesnippet.rb:14:ininitialize'
    from /usr/lib/c-repl/codesnippet.rb:57:in new'
    from /usr/lib/c-repl/codesnippet.rb:57:inparse'
    from /usr/bin/c-repl:161:in c_command'
    from /usr/bin/c-repl:196:inblock in inputloop'
    from /usr/bin/c-repl:184:in loop'
    from /usr/bin/c-repl:184:ininputloop'
    from /usr/bin/c-repl:203:in `

Bamph. But you can get around this by including a header and using a simple trick:

.h string.h
char foo[];
<stdin>:3:6: warning: array ‘foo’ assumed to have one element [enabled by default]
strcpy(foo,"This is a string");
This is a string

To see what c-repl is doing use the .d flag to toggle debugging:

debug is on

#include <stdio.h>
#include "string.h"

extern char foo[];
void dl4() {
  #line 1
  printf("repl is ok\n");
gcc -xc -g -fPIC -shared -o /tmp/c-repl.uZqS0iwFXV/  -
repl is ok

As you can see, c-repl creates a shared library in the /tmp/c-repl.uZqS0iwFXV/ directory for every instruction, increments the name of the routine (dl1...N), includes some variables previously used during the session, and then runs it.

Whenever you see c-repl in examples in this section you'll know what it is referring to.

posted at: 21:36 | path: /technical/C | this entry | top

Sun, 29 Jan 2017


There's a tool that works a lot like Visual Basic but for the web. You can use it to create nice looking user interfaces.

posted at: 10:02 | path: /technical/systems/UI/crossui | this entry | top

Sun, 22 Jan 2017

Misc Perl Stuff

posted at: 16:02 | path: /technical/perlstuff/Misc | this entry | top

Perl Misc

posted at: 14:35 | path: /technical/perlstuff/Misc | this entry | top

Sat, 21 Jan 2017

General Utils

  1. Profit Calculator

External Site Tools

  1. Scrum Reference Card - Scrum overview in a single PDF
  2. - Online collaborative document editing tool
  3. - Online PlanText UML Editor
  4. Git for Windows -- has bash!
  5. Gridulator - Make grids
  6. Emacs/Vi Commands Table

Samples From Posts

  1. Simple Calculator (from jQuery)

Useful Linux Commands

  1. wget --spider -r http://localhost
  2. wget --continue URL
  3. fc -l <some history #> <some history #>

posted at: 22:05 | path: /technical/utils | this entry | top

Wed, 18 Jan 2017

Learn C

Learning C can be a pain because virtually every resource tries to dumb it down. You then think you know the language, crack open a program, and are almost instantly lost. Here I'm attempting to show techniques actually used in real programs.

posted at: 22:55 | path: /technical/C | this entry | top

Linking Headers

Headers can get big. The bigger they are the more you will want to separate the code portion from the method declarations. You can do this is C by putting the code in a file with a C extension and the declarations in a header file with the normal header extension.

Here is an example:

There are several ways to compile this and link it. I just used the easiest one for now.

posted at: 22:26 | path: /technical/C | this entry | top

Sat, 14 Jan 2017

Social Media

Major social media platforms:

  1. Twitter
  2. Facebook
  3. LinkedIn
  4. Reddit
  5. Youtube
  6. Pinterst
  7. Tumblr

E-Begging Platforms

  1. GoFundMe



posted at: 13:07 | path: /technical/systems/socialmedia | this entry | top

Container/Microservice Info

posted at: 12:59 | path: /technical/os/containers/redhat | this entry | top

Wed, 11 Jan 2017

Gaming Dev. Information

posted at: 10:31 | path: /technical/gaming | this entry | top

Gaming Projects

  1. Development
  2. Physics
  3. Lighting and Shading
  4. Polygons and What-Not
  5. Artificial Intelligence
  6. Learning Applications
  7. MMO

posted at: 10:29 | path: /technical/gaming | this entry | top

Tue, 10 Jan 2017

.NET Projects

  1. Read ILSpy - Assembly Browser/Decompiler(Windows)
  2. Initial Mono vs. CSharp Shell
  3. Simple Casting
  4. While Loop
  5. For Loop
  6. Switch
  7. Arrays
  8. Objects
  9. Namespaces
  10. Static Methods
  11. Numeric Input
  12. MonoDevelop
  13. Passing Arguments
  14. Variable Arguments
  15. DateTime
  16. Inheritance
  17. Nullable Types
  18. Anonymous Types

posted at: 22:47 | path: /technical/programming/DOTNET | this entry | top

Nullable Types

csharp> int? m = null;
csharp> int p = null;
(1,10): error CS0037: Cannot convert null to 'int' because it is a value type
csharp> int y = m?? - 1;
csharp> y

Strange syntax for nullable types (question mark) and even stranger when you try to use them (double quotes).

posted at: 22:43 | path: /technical/programming/DOTNET | this entry | top

Anonymous Types

csharp> var v = new {Amount=100 , Message="hi"};
csharp> v.Amount;
csharp> v.Message; 
csharp> v.Amount = 999;
(1,4): error CS0200: Property or indexer `anonymous type.Amount' cannot be assigned to (it is read-only)

So anonymous types are useful for holding a bunch of read-only values together.

posted at: 15:18 | path: /technical/programming/DOTNET | this entry | top

Initial Mono vs. CSharp Shell

With the Mono kit there is a 'Mono shell' that can be run from the command line like this:


It produces some output like this:

 csharp> string sFahr = "88";
 csharp> print ((Int32.Parse(sFahr) - 32) * (5.0/9.0)); 
 csharp> print ((Int32.Parse(sFahr) - 32) * (5/9));     
 csharp> print ((Int32.Parse(sFahr) - 32) * (5.0/9.0));

It works with standard C#:

using System;
 class celsius 
 { public static int Main(string[] args){
      Console.Write("Enter temp in degrees Farenheit:");
      string sFahr = Console.ReadLine();
      double dFahr  = double.Parse(sFahr);
      double dCelsius;
      //dCelsius = (dFahr - 32.0) * (5.0 / 9.0) ;
      dCelsius = (dFahr - 32.0) * (5/9) ; 
      Console.WriteLine("Temperature in degrees Celsius = " + dCelsius );

Because it works the same way you can try out syntax and run all sorts of tests with it. There's even a way to run it in standalone scripts (see the manpage).

Update #1: You have to give sFahr (variable above) a type or csharp will issue an error.

posted at: 15:04 | path: /technical/programming/DOTNET | this entry | top

Sun, 08 Jan 2017

Simple Class Example

The simple clock example exemplifies how to write up classes and bundle them into header files that can be used later on. Then you can then simply use a make file to build (not stricly necessary but you want to get into the habit): simple make file.

posted at: 15:11 | path: /technical/CPP | this entry | top

Passing Vars in Inline::C

A simple example demonstrates passing data to and getting data from an C function when using Inline::C.

posted at: 15:04 | path: /technical/perlstuff/Inline/C | this entry | top

CrossUI Hello World

I created something in like 5 minutes that has a silly world image, a label, a field, and a button that launches two different message box types. Yes, it is ugly mainly because none of the controls are properly aligned and the form does nothing interesting other than say hello. However, it is a web application produced without much code mainly by using a GUI RAD tool.

posted at: 14:51 | path: /technical/systems/UI/crossui | this entry | top

C++ Projects

  1. Simple Object

posted at: 14:11 | path: /technical/CPP | this entry | top

XS Info

  1. Pretty Good XS Tutorial

posted at: 14:00 | path: /technical/perlstuff/XS | this entry | top

Test XUI Grid
The sample was not built using the builder but rather follows the cookbook. Oddly enough if you try to open this file with the builder it will crash.

posted at: 13:58 | path: /technical/systems/UI/crossui | this entry | top


  1. Hello World
  2. Passing Vars
  3. Profiling
  4. Ease of Deployment

posted at: 13:51 | path: /technical/perlstuff/Inline/C | this entry | top

Wed, 30 Nov 2016

Case Statement


test=> \d foobar;
                        Table "public.foobar"
  Column  |         Type          |             Modifiers 
----------+-----------------------+----------------------------------- id | character varying(20) | not null longdesc | character varying(15) | superid | character varying(15) | default 'none'::character varying Indexes: "foobar_pkey" PRIMARY KEY, btree (id)

Case Statement:

 select id, CASE WHEN id::integer > 1 THEN 'GREATER_THAN_ONE' ELSE   'NOT_GREATER_THAN_ONE' END as P from foobar;

Function that Tries the Same Thing:

CREATE OR REPLACE FUNCTION mydecode(varchar) RETURNS varchar AS $$
    IF $1::integer > 1 THEN
    END IF;
   $$ LANGUAGE plpgsql;


posted at: 15:52 | path: /technical/DB/postgreSQL | this entry | top

postgreSQL Projects

  1. Database Versioning
  2. Case Statement
  3. Try PostgreSQL Cloud Service

posted at: 15:46 | path: /technical/DB/postgreSQL | this entry | top

Sat, 01 Oct 2016

Raspberry Pi

There are lots of ways to do these things but these are methods and tools I used to get a Rasberry Pi 2 to work.

I purchased a big enough micro SD Card to hold OSMC's image and then used their OSMC Installer on Mint to format and put the image on the card. Everything was actually pretty straightforward.

OSMC is a bit of a multimedia distribution with things that you would need to turn your Raspberry Pi into a kind of media center. I used the HDMI cable to convert an old small television into a monitor using one of its HDMI ports. I also 'repurposed' an old box I had to hold it (I'll share an image later).

posted at: 10:12 | path: /technical/hardware/formfactor/handheld | this entry | top

Handheld Harware

  1. Raspberry Pi

posted at: 10:04 | path: /technical/hardware/formfactor/handheld | this entry | top

Fri, 30 Sep 2016

Simple Input

The code sample shows how to write to and input a simple numeric value using scanf and printf. There are things like buffer overflows to think about but at such an early stage you can ignore that stuff for now.

posted at: 14:41 | path: /technical/C | this entry | top

Fri, 16 Sep 2016

Hello World in C

For me Hello World for a language is essential. You want that instant gratification from running something so basic that you really should not be able to screw it up.

#include <stdio.h>
 void main() {
 printf("hi there %s", "American");

posted at: 15:07 | path: /technical/C | this entry | top

Hello World Using Inline::C

Very simple example:

#!/usr/bin/perl -w
 use Inline C=><<'_start';
     void sayHello() {
       printf("hgello universe");

posted at: 15:06 | path: /technical/perlstuff/Inline/C | this entry | top

Sat, 21 May 2016

HTML Style

  1. Basic Principles
  2. Sans Tables
  3. Floating Forms

posted at: 15:37 | path: /technical/markup/HTML/general/style | this entry | top

Floating Form

Sometimes you want to creating floating forms . This one sort of works in reverse -- the form floats over a div and makes it show/hide. In real situations it would be the other way around.

See example.

posted at: 15:34 | path: /technical/markup/HTML/general/style | this entry | top

Fri, 13 May 2016

Passing Variables

Rather than cut/copy/pasting hard-coded things, use variables.

posted at: 21:08 | path: /technical/programming/emacs | this entry | top

Sat, 30 Apr 2016

Reading Projects

Books, Currently Reading

  1. Introducing HTML 5 - Lawson, Bruce and Sharp, Remy; New Riders Publishing; 2011
  2. RESTful Web Services Cookbook - Allamaraju, Subbu; O'Reilly; 2010
  3. Lisp Primer - Online Published Book; Dhagat, Maneesh and Allen, Colin; 1997

Books, On Deck

  1. Beginning Android Tablet Application Development - Lee, Wei-Meng; Wrox; 2011
  2. Programming Google App Engine - Sanderson, Dan; O'Reilly; 2010
  3. Raspberry Pi User Guide - Upton, Eben and Halfacree, Gareth; Wiley; 2014
  4. Knowledge-Based Systems in Japan - Engelmore, Robert S. , et. al.; Online Publication; 1993

posted at: 09:00 | path: /technical/books/reading | this entry | top

Thu, 28 Apr 2016


posted at: 14:53 | path: /technical/javascript/angular | this entry | top

Disable Elements

It is possible to use Angular to easily disable controls depending on certain conditions. A simple example follows.

HTML File | Live Example

posted at: 13:55 | path: /technical/javascript/angular | this entry | top

© 2015-2017. All Rights Reserved. All original code appearing on this site is MIT Licensed unless otherwise noted.