UML Class Diagrams

On Tuesday, Simon was following another tutorial by Derek Banas, this time on UML Class Diagrams, and thought it would be fun to draw the diagrams in a new app he downloaded: ClickCharts. He tried to understand the relations between classes, abstraction, dependence, inheritance and constraints. The examples used illustrate design patterns in Java.

 

 

 

Principle of inheritance:

Strategy Pattern:

Observer Pattern:

Factory Pattern:

UML stands for Unified Modeling Language, it is a general-purpose, developmental, modeling language in the field of software engineering, that is intended to provide a standard way to visualize the design of a system. A diagram is a partial graphic representation of a system’s model. There are two types of diagrams in UML 2: static (or structural) and dynamic (or behavioral). Simon was studying class diagrams, which belong to static (structural) diagrams.

In software engineering a class diagram is a type of static structure diagram that describes the structure of a system by showing the system’s classes, their attributes, operations (or methods), and the relationships among objects.

The class diagram is the main building block of object-oriented modelling. It is used both for general conceptual modelling of the systematics of the application, and for detailed modelling translating the models into programming code. Class diagrams can also be used for data modeling.^[1] The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.

Here Simon turned the Factory Pattern into actual code:

Java Design Patterns

Simon has been studying Java Design Patterns with Derek Banas. Some he tries to build (videos below), some he gets stuck with, but the topic has kept him excited for days.

 

AngularJS Filters

I thought we could limit ourselves to just two or three filters but Simon wanted to make videos about all the filters he learned, so here you go. The upper and lower case filter:

The currency filter:

The Filter Filter:

The number filter:

The date filter:

the limit-to filter:

 

And the custom filter. Here Simon got stuck in the end and didn’t complete it.

 

 

All code comes from Derek Banas’ tutorials on Angular.

XML in Eclipse

Many tears today around Eclipse IDE and trying to build a webpage in XML. Several times the Eclipse version Simon downloaded was incorrect and he started anew. It was like the sun going down on me, watching him break down crushed and doing my best to search for a solution together. Funny how quickly he recuperated every time the obstacle was (or seemed to be) resolved.  In the end, he managed to build the page he wanted. Credit to Derek Banas for the code and the tutorials.

 

 

Console Application in Java

Simon was training to build console applications with Derek Banas’ tutorial on design patterns. At the end of the third video, Simon says yes to my question if the console app could also be displayed on a webpage. After we stopped filming he corrected himself: Java is never used for websites, he said, but the same techniques he learned today can be useful for Android apps.

 

 

Coffee?

Simon is giving a short tutorial about Coffeescript, a JavaScript preprocessor, and explaining why it’s so popular:

AngularJS in Espresso

Simon downloaded Espresso coding editor yesterday and used it to write AngularJS (a JavaScript framework about which Simon said that it was “a lot of fun” and “not intimidating”).

Here he is introducing Espresso:

And making a “calculator” webpage in Angular:

And another webpage generating bad and good emotions:

And some more webpages where the text can be edited on the webpage itself (without touching the code):

 

The content comes from various tutorials on Angular by Derek Banas.

Back to circuits

Yesterday Simon asked me to buy new electronics software he found on the internet. It’s a realtime circuit simulator and editor called iCircuit. Simon has already built several circuits in it last night and there is so much more to discover. He was following Derek Banas’ tutorials on electronics.

jQuery as an alternative to CSS

Simon has tried using jQuery instead of CSS to style a couple of webpages. The code comes from a Derek Banas tutorial.

 

These buttons have quite amusing effects:

Susy, a SASS framework

Simon has spent nearly the whole day trying to build a website following a Derek Banas tutorial on Susy, a SASS framework. He first built the website in Windows 10, then on a Mac. The problem he encountered with inserting an image in the Header caused many tears. In our case the image’s size was too big so we had to adjust its size manually in Photoshop and manually remove the white background. Simon always wants things to go exactly as shown in tutorials and was extremely frustrated.