Yakov Fain's Blog

My notes about everything in IT

How to create a signup screen to minimize the number of users who will sign up

with one comment

I’m wondering if these developers do this on purpose or they are just random people in our profession? I was trying to sign up at this Web site. Had to enter my email and pick a password, which I did. Nobody warned me that the password had to be 8 characters until I pressed the submit button. Then the new window popped up:

login

Just take a look and try to recreate the line of thinking of the developer of this piece of art:

“I need to let the user enter the password that’s at least 8 characters long. So I’ll hide in the bushes and will quietly wait till the user will make a mistake and enter a shorter password. Then I’ll chuckle: one more fell into my trap. Then I’ll add a cool Whoops message. The instructor in our vocational evening classes told us that the error messages should be shown in red. Makes sense. Let me google how to display the text in red. Got it. There is a Font tag with an attribute color. It was easy. Done.  It would be nice to add a counter to know how many people will enter a short password.  I hope it’ll be covered in the Advanced Programming class that I’m planning to take next year”.

Why some developers hate users so much? The prompt in the password field reads “Enter a password”. Why not add the helpful text prompting to enter at least 8 characters?

Maybe this developer was a rookie? And the QA engineer didn’t notice? And the manager never tried to sign up? And the site owner didn’t care?

It’s all about caring. If you care about your users, you’ll find a way to do it right.

And the biggest irony is that the name of this Web site is Skills Matter. Indeed. That’s why I’m not going to sign up for their services.

Update. Two days after writing this blog I decided to registered at the Vimeo video site. They were also hiding in the bushes with the same password length error. Is is something wrong with me? Am I being too picky?

vimeo

Written by Yakov Fain

March 16, 2015 at 1:56 am

Posted in java

Tagged with ,

Am I still a Java Developer?

with 10 comments

This morning I got the following email from a Java developer: “It seems you are doing less Java and more web development every year.” This got me thinking, and I decided to write this blog.

Am I still a Java developer after 17 years of using this language? I certainly am. But in today’s world using just one programming language is almost impossible unless you’re willing to limit yourself to the server-side development. I’m not saying this is bad – it’s a huge field for never ending self-education and research. Even from the career perspective becoming an expert in a specific Java field can put bread and butter on your table for years to come. For example, Java experts specializing in performance tuning can charge several times more than a typical Java developer. Some people become experts in security or concurrent programming, which allows them to eat an omelet with truffles for breakfast daily.

But 95% of Java developers are doing more or less routine work, and learning other languages and tools can bring some excitement in their lives and make them more competitive in the job market.

While Java is the server-side king, HTML/JavaScript/CSS (a.k.a. HTML5) rule on the client. You can use HTML5 for creating a cross-platform UI for desktop and mobile applications. People use a variety of languages and frameworks to develop Web applications that we use daily. If you already know Java, why not come out of the closet and explore the huge and ever growing HTML5 world?

Traditionally many Java developers look down on JavaScript developers with a false assumption that real development is happening only in Java. I can reveal a secret: this is wrong. JavaScript is as close to the Web what as C language is to the hardware. Just look at this long list of compilers from different languages that generate JavaScript. In our company we use Google Dart as a way to produce JavaScript. Next year we’re planning to switch to programming in the new version of JavaScript (EcmaScript 6 spec will be finalized this summer).

Lots of popular IDEs offer great support for developing and debugging JavaScript. Every Web browser comes with a developer tool allows you to debug JavaScript and monitor everything that goes over the wire during the runtime. The tooling of a modern JavaScript developer has everything that Java developers are accustomed too:

node.js – JS framework plus a runtime for all development tools listed below
npm – node package manager used for installing and managing development tools
bower – package manager for the application dependencies
grunt – a build automation tool
yeoman – a scaffolding tool for generating the initial structure of an application for various frameworks

I teach JavaScript classes for Java developers several times a year. A typical feedback is “I thought JavaScript is a toy, but it’s a serious programming ecosystem worth learning and mastering”. And this is what I do while remaining a Java developer.

Written by Yakov Fain

March 6, 2015 at 1:46 pm

Posted in java, javascript

Why I Rejected a LinkedIn-Originated Offer of 10 Million Euros

with 10 comments

LinkedIn is a popular social network for connecting professionals, and I have an account there. Every day I get an invite to connect with someone. Typically I ignore these invites unless I know the person. But I’ve never received invites to connect from a chair of board of directors of a bank. Till yesterday.  So I’ve accepted the invite.

Then I’ve received an LinkedIn email from this woman stating that she had a business proposition for me, and if I was interested, she was ready to explain. She also provided her email that ended in outlook.com. I checked her LinkedIn profile again. Looked legit. She even had a Twitter account with recent tweets in two languages.

I responded that I was ready to hear about this business proposition. Next day I’ve received a long email from her explaining how she had a private client named Lewis Fain who initially deposited €19M  in their bank and she helped him to grow the wealth to €22M, but unfortunately he died in a car crash. She’s ready to wire transfer me the money, in one condition: we’d split the amount in half so she could improve the wellbeing  of her family. She also asked me not to ruin her career in the bank if I was not interested.

At this point it was clear that it was a new type of a scam that involved creating  fake LinkedIn accounts and impersonating themselves as someone else. Still I decided to continue my treasure hunt and responded to my fake banker asking her to send me any email from her bank email account. She responded again, stating that she understood my concern, but couldn’t use her bank email for such a delicate matter. But to establish trust, she attached a photo of her bank ID.

At this time I had enough of materials for this blog and responded wishing her good luck in finding another heir of poor Lewis Fain. Then I decided to report this scam to LinkedIn. To my surprise this banker was not in my connections list any longer. I searched by her name in LinkedIn, and found the account of that banker, the profile looked different and she didn’t have any connections.So either someone else reported this as a stolen account, or the con artists have removed it programmatically. I’ve reported this account to LinedIn anyway.So beware of LinkedIn initiated scams.

One more warning. Even if this banker would have sent me an email from the account that ended with the bank name, this would not be enough. Being a programmer, I can easily write a program that would send an email with any address in the “Reply To” field. Here’s how a fragment of the Java code to wannabe con artists:

Message emailMessage = new MimeMessage(session);

emailMessage.setFrom(new InternetAddress("MaryLou@thefakebank.com")); 
emailMessage.setRecipients(Message.RecipientType.TO, 
                                 InternetAddress.parse(emailRecipient, false));
emailMessage.setSubject(emailSubject); 
emailMessage.setSentDate(new Date()); 
emailMessage.setText(emailText);  

So if you want to confirm someone’s identity, you need to send an email to the provided email address and receive a response back. Hope this helps.

Written by Yakov Fain

February 27, 2015 at 2:43 pm

Posted in java

Tagged with

JavaFX 8: The keyboard events are not being processed if a scene has only shapes

with one comment

I ran into an interesting problems with JavaFX. When the GUI is done in FXML it seems that if a scene has only shapes (e.g. Rectangle, Circle, etc.) the handler method doesn’t receive keyboard events. And the problem seems to be that there is no way (at least I don’t see it) to give a focus to such a scene. I found a workaround, but I’d appreciate if someone could offer a cleaner solution or confirm that this is a JavaFX bug.

Here’s a code sample that illustrates the problem and the solution:

1. Here is the main application:

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

@Override
  public void start(Stage primaryStage) throws Exception{
   Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));

   primaryStage.setScene(new Scene(root, 300, 300));
   primaryStage.show();
  }

  public static void main(String[] args) {
     launch(args);
  }
}

2. Here’s the sample.fxml that works, except I don’t need a Button there:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.Group?>

<Group fx:id="theGroup" onKeyPressed="#keyHandler" focusTraversable="true"
       xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="sample.Controller">
   <children>
       <Button />
       <Rectangle fill="BLUE" height="300.0"  stroke="BLACK"
                              strokeType="INSIDE" width="300.0" />

   </children>
</Group>

3. Here’s the Controller.java:

package sample;

import javafx.fxml.FXML;
import javafx.scene.Group;
import javafx.scene.input.KeyEvent;

public class Controller {

  @FXML Group theGroup;

  public void initialize(){
     theGroup.setFocusTraversable(true); // doesn't have any effect
     theGroup.requestFocus(); // doesn't have any effect
  }

  public void keyHandler(KeyEvent event){
    System.out.println("A Key was pressed");
  }
}

This application works and prints the message “A Key was pressed” as long as I keep the <Button> tag in FXML (it’s not visible on GUI because the Rectangle covers it). This is my workaround to make sure that event handler works and prints the message.  Remove the <Button> tag from FXML, and the application won’t process the keyboard events. The problem seems to be that if the FXML has only shapes, it can’t get the focus. The code in the initialize() method doesn’t help to set the focus on a Group container.If anyone could find an explanation of why this code  doesn’t work without a <Button>, please let me know.

Update: The user jewelsea on Stack Overflow suggested to set the focus after  calling  primaryStage.show(); http://stackoverflow.com/questions/28506855/javafx-8-the-keyboard-events-are-not-being-processed-if-a-scene-has-only-shapes.

This gave me an idea how to do it. I’ve added one line root.requestFocus(); at the end of the start() method. No <Button> is needed in FXML and no initialize() method is needed in the Controller.

 

 

 

Written by Yakov Fain

February 13, 2015 at 6:50 pm

Posted in java

Tagged with

Introducing AngularJS to Java Developers

with 6 comments

If you want to develop Web applications, you’ll need to learn JavaScript. But writing code in JavaScript (at least in its ECMAScript 5 incarnation) is non-productive. You need to pick up a one of the JavaScript frameworks, because:

  • they make you more productive
  • will deal with cross-browser compatibility and make the application more structured
  • may include reusable components
  • lower the amount of manually written code.

JavaScript market offers multiple frameworks and libraries. While frameworks expect you to programs using well defined ruleswithin a certain code structure, libraries just offer reusable components a la cart.

In turn, frameworks can be categorized as feature complete (rigid app structure, intrusive, rich GUI components, tooling) and lightweight (MVC + Binding + Routing)
.

Ext JS, YUI, and Dojo represent feature-complete frameworks. AngularJS, Backbone.js, and Ember are examples of lightweight frameworks. After years of experimenting with different frameworks and libraries we decided to stick with hugely popular AngularJS by Google.

I work in a Java shop, and one of my responsibilities is to create an conduct trainings (both internal and external). Several years ago I started to work with our engineers on the curriculum introducing AngularJS to an enterprise Java developer.

The learning curve of AngularJS is not too steep for Java developers, who understand the concept of containers, dependency injections, callbacks. They must become proficient with JavaScript with its functions, closures and other good stuff.

But equally important is to be familiar with todays tooling of a productive Web developer. Here’s a short list of tools that JavaScript developers use today:

  • npm – node package manager used for installing and managing development tools
  • yeoman – a scaffolding tool used to generate the initial structure of an application
  • bower – package manager for application dependencies
  • grunt – a build automation tool
  • A JavaScript testing framework

The next decision to make is how to communicate with the Java backend. Forget about JSP, servlets, and JSFs. Preparing HTML in your Java code is out of fashion. A Java server exchanges the JSON-formatted data with a single-page HTML/JavaScript front end, which use either AJAX techniques (old) or WebSocket protocol (new).

On the Java side we like to use such tried and true technologies as RESTful Web service and Java Messaging API.

When we hire a AngularJS/Java developer, we expect him to be familiar with at least 90% of all the above buzzwords. Finding such skilled software engineers may be difficult, so we’ve created a training program to prepare such a person.

By now, we’ve taught and fine-tuned this training class multiple times. The latest online version of this class consists of seven weekly training sessions (3.5 hours each) and seven consultations (from 30 to 60 min each). Programmers learn and gradually apply all of the above tools and techniques while working on the Online Auction application that has the following architecture:

javaauction-1

We have a great feedback from people who have completed this training. But everyone says it’s challenging. And it should be. Back in the nineties a person who knew one of the programming languages plus SQL could relatively easy get a well paid job. Not anymore.

If you’re ready to give a boost to your programming career, our next online training starts on March 7, 2015. And the good part is that you can take it from any part of the world as long as you are connected to Internet and can be awake and eager to learn at 9:30AM New York time on Saturdays.

Written by Yakov Fain

February 12, 2015 at 12:20 pm

Posted in AngulerJS, java, javascript, Web

JavaScript for Java/C#/C++ Developers

leave a comment »

This year I’m planning to run a one day workshop at a couple of software development conferences and privately for IT shops. The goal is to introduce JavaScript and related technologies to developers that are accustomed to developing in classical object-oriented languages like Java, C++ or C#. Below is the outline of this workshop.

Part 1. JavaScript Building blocks

* Functions, Objects, Prototypal Inheritance,Closures
* Using Chrome Developer Tools
* JavaScript in the Web Browser, DOM, CSS.
* New JavaScript: an overview of selected ECMAScript 6 features.

Part 2. Designing Single-Page Web Applications

* Web app prototyping. Designing a Product page of an online auction using Pure JavaScript and CSS.
* Responsive Web Design. CSS Media Queries. Redesigning the Product page for smart phones and tablets by adding CSS Media Queries. Our Product page will look like this.
* Single-Page Applications. AJAX.
* The Bootstrap framework. Responsive GUI components. Fluid grids. Yet another redesign of the Product page by using responsive Bootstrap components.

Part 3. Productive JavaScript development with Google Dart

* Getting familiar with the Google Dart language. Classes, top-level functions.
* Dart Tooling. Dartium VM. Dart Editor IDE. Dart to JavaScript Compiler. Package manager pub.
* Re-creating the Product page in Dart + Bootstrap. JavaScript generation and deployment.

Written by Yakov Fain

January 22, 2015 at 2:27 pm

Posted in java

Why You Should Start Developing With Google Dart

with 16 comments

In the summer of 2013 I wrote a blog “How Serious is Google About Dart“. It’s January of 2015, and I’d like to give you an update from the trenches. Our team has developed and deployed in prod a beta version of the application that helps consumers with finding and rating insurance agents and getting quotes online. The front end of EasyInsure is written in Dart language.

Before introducing the Dart ecosystem, I’d like to give you a little background about our prior experience in developing Web applications (I work for Farata Systems).

On the server side we always use Java and have no plans to switch to any other technology. After spending many years developing the front end with Adobe Flex framework and ActionScript programming language we got spoiled by this super-productive environment. After the mankind led by Apple killed Flash Player, we started to look for an alternative.

Back in 2005 we’ve abandoned JavaScript, but decided to give it another chance. Things were a little better this time. JavaScript has better IDEs and browser-based tools for developers. The number of JavaScript frameworks and libraries went down from two hundred to a couple of dozens, which is a good thing.

Still, the productivity of our developers dropped substantially in JavaScript comparing to what we’ve seen with Flex. I can’t give you exact numbers, but it looks like developing in Flex is at least three times faster than with any JavaScript framework we tried (ExtJS,AngularJS, and lots of small libraries). When I say JavaScript, I mean its version based on the ECMAScript 5 specification.

In 2013 we got familiar with the Google Dart language. The syntax of the language was pretty appealing and easy to understand. It felt like Java, but a little more modern. Dart is optionally-typed language. You can run the compiled Dart code in DartVM, but no browser except Dartium support it, and it’ll remain this way. Generating JavaScript from the Dart code is a realistic way of delivering Dart applications for any browser today.

But any language without the proper tooling is doomed, and this is what makes Dart stand out. Here’s the list of tools available for Dart Developers:

1. The IDEs: Dart Editor from Google and WebStorm from JetBrains. We use Dart Editor because it’s smarter than WebStorm today.
2. dart2js is a Dart-to-JavaScript compiler and a tree-shaker, which removes the unused code from the third-party libraries used in the application.
3. pub is a dependency management, development server and build tool.
4. gulp is a task manager. It’s an analog of Grunt or Gradle. We use gulp to prepare optimized ready-to-deploy application from the code produced by the pub build. In particular, we do the gzip compression there.
5. Dartium is a Web Browser for developers. Google Chrome is based on the open source project called Chromium, and Dartium is Chromium with built-in DartVM. We use it for launching and debugging applications.
6. Dump-Info Visualizer – allows to inspect the generated JavaScript. It gives a very convenient breakdown by the application’s JavaScript code so we can analyze file sizes and identify the scripts to be optimized.
7. Observatory is Dart profiler (we haven’t used it yet).
8. AngularDart framework. It’s a port of a popular JavaScript framework AngularJS.

The above list is pretty impressive, isn’t it? As Google Dart evangelists say, “Batteries included”.

Developing JavaScript applications in Dart is definitely more productive. I do recommend you to start learning Dart and develop the front end of your Web applications in this developer-friendly environment. Having said that, I’d like to warn you that there are no jobs on dice.com that require programmers with Dart skills. Oops… Moreover, three years from now your Dart skills may be in even lesser demand in the enterprise world. Oops…

After these two oopses half of the readers may lose interest to Dart, because it doesn’t meet their career objectives. For those of you who continue reading I’ll explain why IMHO you still should learn and use Dart today. Because the final release of ECMAScript 6 (ES6) is around the corner. Because this spec already gave birth to JavaScript 6 (it’s a boy)!

By the way, do you know why there is no enterprise jobs that require Dart skills? Because enterprise architects will fight hard against any language that runs in a browser unless it’s called JavaScript. Back in 2007 Adobe sales force did a great job by pushing Flex framework into enterprises. Enterprise architects were fighting hard against Flex then, and they will do the same with Dart. But Google is not Adobe. They won’t fight for Dart in enterprises.

But promoting Dart in your organization can be easy. Just explain your enterprise architects that programming in Dart is just a smart way of preparing the enterprise to embrace the bright JavaScript 6 future with classes,modules, promise, fast image rendering, et al. The code that you’ll be writing in Dart during the next 12-18 months will need to be converted into EcmaScript 6 as soon as several major Web browsers will start supporting it.

The syntax of Dart and ES6 are literally the same. Google invested time and resources in creation of IDE for Dart, and now they’re working on the IDE for ES6. Even manual refactoring of the code from Dart to ES6 shouldn’t be a major project, but I’m sure this process will be automated soon.

As a matter of fact, some browsers already started supporting ES6. See for yourself:

dartblog

I’d like to draw your attention to the greenest column on the right side. Yes, it’s the successor of the today’s funniest browser known as IE! Microsoft calls it Spartan, and promises that Spartan will be a lightweight browser that feels like Chrome or Firefox. You just can’t go wrong with such a name.

Spartan already supports ES6. Courageous early adopters can start developing code in ES6 now, than compile the code down to ES5 with Traceur compiler and deploy it in any today’s browser. But if you want to work in a tools-rich environment just develop your single-page applications in Dart and AngularDart. Give the ES6 some time to mature. The work on ES7 is being done too, and it looks very interesting and promising.

I’ve created a New York City Dart Meetup with a hope to get some Manhattan-based firm to host our meetings in the future. Meanwhile we’ll run our meetings online so you’re welcome to join no matter where you are located. Go Dart if you need to deliver today!

Written by Yakov Fain

January 8, 2015 at 1:52 pm

Posted in dart, javascript, Web

Follow

Get every new post delivered to your Inbox.

Join 159 other followers