I've read, like the rest of you internet creatures, that having goals and sharing them is encouraging and helps you reach your goals.

I've also read that concrete, attainable goals are better than pie in the sky fantasy goals.

So here it goes:

• Write at least 50 blog posts, or roughly one a week
• Get site traffic that moves the needle on google analytics - 5 people a day would satisfy me
• Get at least one subscriber on my mailing list

The year is half over, but I'm not going to let that stop me. I'm about 10 posts in and I think I get something like 3 visitors a week whenever I post something new. Hopefully they aren't all robots :)

When I was little, I loved computers. I thought they were terrifically cool and I really wanted to make them do things. I had a steady diet of cyberpunk and video games, so I had this idea that you could do anything by jockeying a keyboard and programming. What I didn't have was any knowledge or resources to get me going.

I wanted to write a program, but I didn't know anybody who had every programmed and the programming books I was able to get my hands on were either ancient and useless (think COBOL manuals) or new and useless (think a late 90's C++ doorstopper).

I had some idea of how to program. You write special words, in a really specific order and the computer does something. Like an excel macro, or something. What I didn't know is how to turn my words from a text file to something a computer could run. Like the literal mechanical process of programming. I was clueless about how to do that.

This was the 90's and I was in Alaska. Not rural Alaska, but definitely the sticks. I had the internet, or some reasonable facsimile if nobody needed to make a phone call. I read Slashdot and forums. I could read a lot about programming - how people were doing it, what languages were out there, some tutorials here and there.

Everything I read was missing the fundamental steps of how to program. Sure, they'd tell you how to say "Hello world", but bootstrapping myself up that high with no support network was just not happening. Maybe I was slow, or I was overthinking it. It seems like computers are complicated, so why wouldn't creating a program be complicated?

Let me cut to the chase and answer 12 year old me's burning question. Just in case there is someone out there with the same problem.

How to Make a Program in 4 Simple Steps

1. Open a text editor. A text editor is something like Notepad in Windows or Text Edit in OSX.
2. Write a program. Just copy paste a hello world program from a tutorial for this step
3. Save this file as a plain text document
4. This is the complicated part that confused me as a kid. There are two options, depending on the type of language you are using
   1. Compile the file you just saved with a compiler. Run the resulting executable
   2. Run the file you just saved with an interpreter

That's it! All you have to do is write a text file and feed it into a compiler or interpreter and you have a program. Seriously, don't over think this part

Compilers and Interpreters

I used a couple specialist words in step 4. 12 year old me had read them, but didn't understand them, so I better explain.

A compiler is a thing that takes the text file you wrote and translate it into machine code your computer understands. Compiled languages are things like C, Java, Go, Rust, etc.

An interpreter reads the program directly out of the file (or sometimes the command prompt) and 'interprets' the instructions on the fly. Interpreted languages are things like Python, Javascript, Ruby, Lisp, Perl, etc.

Some languages have both a compiler and an interpreter.

The Fine Points

It turns out that each language has a variety of fine points, or variations on the 4 steps I listed above. I'm not going to try to explain everything in a single blog post, but I'll hit the high points for my favorite languages in some later posts.

This is a little embarrassing, considering how long I've been working with SQL, but it's important to never stop learning.

Apparently, you can have a unique constraint that encompasses multiple columns. This is super useful!

I had a problem at work where I have two tables, a parent table

PARENT
--------------
ID

And a child table

CHILD
-------------
ID
PARENT_ID
NAME

I wanted to have each parent have children with unique names. Children don't need to have unique names - you might have a classroom full of Aidens, but every family only has one Aiden. I totally blanked on how to do this. I thought I probably had to craft a check constraint with a query that looked up the parent, but Stack Overflow to the rescue

You can just make a unique constraint that covers PARENT_ID and NAME at the same time

ALTER TABLE child ADD CONSTRAINT multi_unique UNIQUE (parent_id, name)

This probably saved future me from a real pain in the ass - I was worried I'd have to enforce this solely with business rules in the middle tier.

TIL that Python has a built in to escape text for html!

This might be old news, but it makes my life easier! I need to make a quick edit to the template for this blog.

Clearly I've been stuck in the 2.7 world too long!

I've never made an infographic before, but I enjoy reading them, and I've discovered Piktochart, so why not?

To create a block, use the bem-tools command bem create -l whatever.level.this.goes.to -b my-block-name

I have yet to develop a good organizational ontology¹ for naming levels, so your guess is as good as mine as to what the best practices are for naming levels.

Blocks seem easier to name, as they are generally some kind of structure. I've been using things like “button" or “title" or “search-bar" or “advanced-search" for names.

Once you've created blocks and have a bundle you want to look at², what do you do?

You run the bem server! The bem documentation says running bem server works, but in my case, I need to specify the ip address. I also specify the port, because I run a lot of different things on my workstation. For example:

bem server -p 8080 --host=127.0.0.1

Once you've done that, browse to 127.0.0.1:8080 and you should see the bem server index page giving you diagrams of your bundles and links to your bundles' index pages

Footnotes

1:I'm not at all certain I'm using 'ontology' correctly, but I'm cribbing from wikipedia and the w3c so at least I look smart. ⏎

2: What is a bundle? I don't really know, but I think it roughly maps to a 'web page' - look out for a future blog post. ⏎

BEM is an interesting concept from Yandex for managing large/complex webapps html and css. It’s a really verbose way of assigning css classes to html elements such that everything’s independence is preserved and everything is pluggable and reusable.

Once you get past the snazzy sales pitch pages, the documentation becomes a little terse, and is more obviously the translated product of busy working programmers.

The team I’m working with is moving away from a big Flex app, so I’ve been evaluating a lot of different Javascript frameworks and ways of organizing a project. Our Flex app is pretty big (round about 100 swfs), and one thing we like about Flex is how it makes reusing components fairly easy. BEM seems like it offers something similar, in terms of modularity, with perhaps a better organizational structure.

My method of evaluation has been to re-implement one of our medium complexity pages, using different frameworks and styles. The concept of the page is fairly straightforward - a search, some tabs that display data, and some editing functionality, but it’s big enough and has enough state that it offers some flavor of what it is like to develop in a given framework.

Setting up the BEM Tutorial

After reading the “what is BEM” stuff, I dove right into setting up the “hello world” tutorial. I already have node and github installed, so I fired up gitbash, and started copy pasting.

The first¹ thing I ran into was that bem server didn’t quite do what the tutorial said it would. I expected that command to run a server, so I could check out the demo page, but something went wrong and I had to dive into the documentation to figure out how to actually run a bem server. For me, the answer was to run bem server -p 8080 --host=127.0.0.1. I assume this is a network or security setting, because the problem seemed to be that a host of 0.0.0.0 wouldn’t work on my machine.

I created a test bundle without an trouble and was able to make a bemjson.js that said “hello BEMHTML” without trouble. Then I tried the part of the tutorial where we make the “hello world” dynamic via BEMHTML.

At first I was a little confused by what they meant when they said

Edit test.bemjson.js:

{block: ‘hello’, name: ‘BEMHTML’ }

I wasn’t sure where I should put the snippet, but then it dawned on me that the tutorial intended me to remove the content field from the ‘hello’ block and add a name field. Initially I tried to put the entire snippet in the content field. ¯\_(ツ)_/¯

I used the bem create command to create a directory for the block and “all other necessary files” but was immediately confused, because the tutorial indicates that I should edit the “hello.bemhtml” file, as though it had been newly created. In my case, it had not been created. I flailed around for a while, but finally got the hello.bemhtml file created and working the way the tutorial suggested.

After that, the sailing was smooth.

Blazing My Own Way

At this point, I felt like I had a vague idea of how the BEM tools were intended to be used

• BEMJSON is how you define a page by building it up from blocks
• BEMHTML is BEM’s templating language - it is not how you inject javascript into a page
• i-bem is how you inject javascript into a page (I think)
• BEMTREE isn’t something I’ve figured out a use for as yet. I assume it’ll come up as I try to make a page that does something. Or perhaps it is just internal to their templating engine?

After a close reading of the method of BEM, I feel like I have an idea of how to write BEMJSON. My takeaways were

1. Blocks can be made of blocks
2. A block should stand on its own, so a block-like sub-part should really be an element
3. You put the contents of a block or element in the content field :)
4. I’m not yet sure how to make a button with an onclick method

As soon as I figure out how to make a button with an onclick method, I’ll post a tutorial. I suspect the answer is contained here. I might also take a crack at improving the “hello world” tutorial for rank beginners, such as myself.

Footnotes

1: Well, the real first thing is that I’m on Windows and all the documentation assumes I’m running something Linuxy… I feel like this is a real problem in the node world. All us enterprise devs are off in Redmond-land flailing to get stuff made for bash working. ⏎

This is a list of bad things people do with forms on web pages. If you do any of these things, you should not only feel bad, you should change it!

Losing Data When Users Go Back (or Forward)

Look, people think they should be able to navigate around the web. They want to go forward, backwards, up, down wherever. They will get to your form and want to check something on the page they came from. They will leave your form half filled out and when they come back and they have to type everything again, they will drop kick their computer out the window and send you the bill.

How many users do you lose because your form doesn’t remember what they typed? I bet you don’t know, because if you do this you don’t bother logging user behavior.

When a user navigates away from a form you should hang onto what they typed for a loooong time. However long you think is reasonable, multiply it by 7.

Losing Data on Validation

Validation is great, everyone should validate user input to their server. What nobody should ever do is tell the user they gave you something “bad” and then ditch everything they just spent ten minutes typing out. Someone just tried to engage with you, to have a meaningful conversation with you(!) and you kicked them in the teeth for splitting an infinitive.

via GIPHY

When a form fails server side validation DO NOT THROW AWAY THE USER’S DATA! You have their data. Just give it back to them with some red text or a message telling them how to fix whatever it is you need fixed.

Modal Dialogs as Form Validation Messages

Sometimes you really want to get a user’s attention. You may be tempted to use a modal dialog to display form validation messages.

via GIPHY

Especially don’t do this on focus lost from each field. People need to tab around

Inappropriate Security Level

You need to actually think about what level of security your form needs. If the form you designed just collects people’s addresses, social security numbers, bank passwords and mother’s maiden names, you need a high level of security. You should not remember data in this form forever, and maybe not remember it at all.

Hell, data like that should probably be trapped behind a login before the user even gets to enter it.

via GIPHY

If you’re writing a form like the vast majority of the internet is composed of - that is to say trivial nonsense that nobody but you cares about - you don’t need a high level of security. Please save this data forever (or however long the user is likely to walk away and come back to the computer).

If you have a mix of sensitive and inane data, do the sensible and kind thing - make two forms. The first form should require no login and should only have inane data and should keep it forever. The second form should be behind a login and keep the data only as long as your security requirements dictate.

And for the love of god, if their logged in session expires, don’t just kick them back to your homepage and throw away all their work without an awfully good reason.

Lots of people want to wet their feet with web development by building with Java. The trouble is that Java presents an overwhelming number of frameworks. It's easy to go round and round in circles, stuck in analysis paralysis. They read about JavaEE, then servlets. Someone on a forum says Spring is better. A flamewar erupts between Play and Grails.

What should a person do?

I think the most important thing to do, when faced with overwhelming choices, is to pause and step back. Take a deep breath! Go for a walk away from the computer. When you come back, dig into what your intent really is. In this case, you want to make a simple web app. "Hello world" in Java, but on the web.

I suggest choosing the simplest option, which is vanilla Java servlets. Don't bother with a framework until you know the application is complex enough be worth the overhead. After you've made your simple servlet, build a war, deploy it to Tomcat and call it a day.

That said, if you must use a framework...

Use Dropwizard

Java has a reputation for being heavyweight and verbose. It doesn't have to be that way. Dropwizard takes a lot of verbosity and enterprise-yness out of making a web application (especially compared to Spring). I'm a fan, and if you're hellbent on using a framework, try out Dropwizard.

I saw a question on r/java that I thought was great. OP is deploying a fat jar that has everything OP's app requires, so the deploy is just a simple file copy. OP is also using Docker to deploy the entire environment along with the jar and wonders if it is worth it.

When to Use Docker

Docker is great when you are using Docker to deploy your entire server environment. If you have already container-ized your database, proxy and load balancer, it's a no brainer to add just one more docker image to container-ize your application. Your team already has the Docker infrastructure in place. Your environment already deploys with Docker. Unifying procedures keeps things simple.

3 Reasons to Use Docker

1. Your application shrinks and grows. Adding/removing instances helps keep the bills down and the customers happy. This is particularly important on providers like AWS and DigitalOcean
2. You deploy your application to a lot of different environments. Each different environment needs a couple tweaks to work.
3. You don't want your deployment process to care about the state of server upgrades (like the JVM or Tomcat)

When to Use a Fat Jar

Fat jars are great. A fat jar bundles everything you need into one convenient archive, ready to go. Deploying a fat jar is easy: copy the jar to the server and run it. It's worth pointing out that fat jars combine very well with Docker - they are easier to use in the Docker context than containers.

3 Reasons to Use a Fat Jar

1. When your environment is hand crafted. Fat jars are particularly useful both the jar and the environment define configuration
2. When maintaining a Docker registry is significant overhead. If you're not already doing it, why add yet another infrastructure system?
3. When you have an artifact repository (like Archiva or Nexus). These make it trivial to grab and deploy a particular version of your fat jar