All Day Hey! 2018 Reflections

Yesterday I took a trip to Leeds to All Day Hey!, a one-day one-track conference on topics across the front-end ecosystem. Now in its second year, All Day Hey! has managed to attract some top speakers, and curated an interesting day of diverse topics.

Every talk had something of value, but I don’t have space to write them up and couldn’t do them justice in this format. Instead, I’m going to pick out some of my top take-aways from the day that I think you’d most like to know.

If you want to know more about any of the topics covered, or any of the talks I haven’t written up then let me know! I’d be happy to chew your ear off about them some time, or arrange a way to pass on anything learned.

So here’s a list of the talks, speakers and topics. After the jump, my top lessons.

  • Unlocking the Power of CSS Grid LayoutRachel Andrew (CSS Grid, CSS standards)
  • Building Resilient Frontend SystemsIan Feather (Infrastructure, disaster recovery)
  • What is the Web without the Browser?Peter Gasston (Extended reality, future web)
  • Idea to Execution, and BeyondAshley Baxter (Product development)
  • Lightning Talks
  • CSS — Past, Present and FutureUna Kravets (Modern CSS, Houdini)
  • In the LoopJake Archibald (Event loop, JavaScript programming)

Continue reading “All Day Hey! 2018 Reflections”

A View from the Prater – IS at DrupalCon Vienna, Day 1

View of the Prater park in Vienna

As we embark upon our next big adventure, planning for the migration from Drupal 7 to Drupal 8 of EdWeb, the University’s central CMS, a group of us from Information Services are here in Vienna this week attending DrupalCon 2017.  We are a small but diverse bunch of project managers, developers, sysadmins, and support staff who all play a part in building, running and managing EdWeb.  For the next few days we’ll be sharing our thoughts on the sessions we attend, recommending top sessions, and giving our key takeaways – not the wurst variety – from our DrupalCon experience.

On Tuesday, we started DrupalCon the right way by attending the always entertaining Pre-note, followed by Dries Buytaert’s traditional Driesnote keynote presentation on the state of Drupal.  We then set out on our different tracks, paths crossing at coffee and lunch, for the first intense but interesting day of DrupalCon sessions.

Continue reading “A View from the Prater – IS at DrupalCon Vienna, Day 1”

ScotlandJS 2016

ScotlandJS

Scotland JS was held on the 2nd and 3rd of June at Dynamic Earth in Edinburgh. There were numerous talks, a few interesting and/or useful of which I have detailed here.

There were a few others, such as VR, JavaScript desktop applications and LiveJS (A demo of using MIDI input to create visuals) that I have not covered. If anyone wants to know more about these, I can also write up the notes I have about them. The rest I have written my notes on and what we can take away from them.

Continue reading “ScotlandJS 2016”

Render Conference 2016 sessions

In April this year I attended the Render Conference, a rebrand and reorganisation of 2015’s jQuery UK Conference. The name change signifies better the broader content of the conference, covering all sorts of front-end topics from CSS and JavaScript to form content and development philosophy.

In this post I’m going to go through each of the talks over the two days and summarise what the speakers talked about. I’ll also adds links to the slides and videos as they become available for those who want to look a little bit deeper. In a separate post, I’ll talk about what the lessons are that we can learn in the University of Edinburgh; and what we can start doing today.

Continue reading “Render Conference 2016 sessions”

Making Portlets Angular

This post is following on from our moves to separate out concerns when it comes to our portlet development.

Following on from my previous post on using JSON and ETag caching, where we focused on provide data for our portlet to render client-side, we then wanted to concentrate on making the UI render side more elegant. Typically to date we’d been using .JSP with Tags to render, and using jQuery to render the JSON to page. That ended up with fairly lengthy <script> and JSP files, which were frankly messy to look at.

Here’s a truncated example of the horror:

$( document ).ready(function() {
	    
	    var jsonurl = "/libraryonline/rest/summary";
	    
	    $.ajax({
	    	url: jsonurl,
	    	dataType: "text",
	    	
	    	success: function( data ){
	    		
	    		var json = $.parseJSON(data);
	    		
	    		$("#${n}libraryForm").attr("action",json.voyagerUrl);
	    		$("#${n}loginId").attr("value",json.barcode);
	    		$("#${n}lastName").attr("value",json.surname);
	    		
	    		$("#${n}loanTotal").html(json.totalLoans);
	    		$("#${n}requestTotal").html(json.totalRequests);
	    		$("#${n}fineTotal").html(json.totalFines);
	    		
	    		if(json.loanItems != null && json.loanItems.length > 0){
	    			/* populate loan items table*/
	    			
	    			var $itemTable = $("#${n}loanItemsTable");
	    			
	    			$.each(json.loanItems, function(key,entry){
	    				/* This is just getting silly */
	    				$itemTable.append("<tr><td>"+ entry.title +"</td><td>"+ entry.statusText +"</td><td>"+ entry.dueDateConverted +"</td></tr>");

	    			});
	    		}

I wanted to introduce some kind of templating for rendering the HTML, and declutter the JavaScript we’re adding into pages to do the render. There are many options here todo this, we settled on Angular.

Continue reading “Making Portlets Angular”

Unit testing AngularJS portlet with Maven and Jasmin

Recently, we have converted a few portlets to use AngularJS for the front end.  We have also used the Jasmine framework for unit testing. Since our portlets are already configured with Maven, we have added Jasmine support with jasmine-maven-plugin to the existing set up. This posts will walk you through the configuration required to run Jasmine tests with Maven.

Portlet directory layout

|—— Portlet
| |——– src
| | | ——– main
| | | | ——— webapp
| | | |————- js
                              app.js
| | | ——– test
| | |———— webapp
| | | |————- js
                              controllerSpec.js

Our angularJs files are contained in src/main/webapp/js directory. Jasmine spec files are placed in a test directory that reflects main.

Plugin configuration 

Based on the directory structure, we can configure jasmine-maven-plugin. we are using version 2.0 which requires Maven 3.1.x. This is an example plugin configuration for our portlet:

<build><plugins>
    …
    <plugin>
       <groupId>com.github.searls</groupId>
       <artifactId>jasmine-maven-plugin</artifactId>
       <version>2.0</version>
       <executions>
          <execution>
             <goals>
               <goal>test</goal>
             </goals>
          </execution>
       </executions>
 <!-- keep the configuration out of the execution so that the bdd goal has access to it -->
       <configuration>
           <jsSrcDir>src/main/webapp/js</jsSrcDir>
           <sourceIncludes>
               <include>app.js</include>
           </sourceIncludes>
           <jsTestSrcDir>src/test/webapp/js</jsTestSrcDir>
           <specIncludes>
               <include>*Spec.js</include>
           </specIncludes>
           <preloadSources>
               <source>webjars/angular.js</source>
               <source>webjars/angular-sanitize.js</source>
               <source>webjars/angular-mocks.js</source>
               <source>webjars/jquery.js</source>
           </preloadSources>
       </configuration>
 </plugin></plugins></build>
<dependencies>
 
<!-- jasmin maven plugin dependencies -->
 <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <scope>test</scope>
 </dependency>
 <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>angularjs</artifactId>
      <scope>test</scope>
 </dependency>
<!-- for headful tests
 <dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>selenium-firefox-driver</artifactId>
      <scope>test</scope>
 </dependency>
 -->

 </dependencies>

<jsSrcDir>  points to diectory with your JavaScript, this will be your angular controllers, directives, filters, etc.

<sourceIncludes> specifies which files within jsSrcDir should be included and in which order (added sequentially as defined)

<jsTestSrcDir>  points to directory with your Jasmin specs

<specIncludes> specifies which spec files to include and in which order

<preloadSources> JavaScript files to be loaded before the application files and specs, added sequentially as defined; these should be all libraries that you need for your application e.g. angular files, jQuery etc. We can reference webjars files here as done in our example. Since we require them for the tests only, we reference them in the test scope.

Out of the box, jasmine-maven-plugin comes preconfigured with PhantomJS for headless tests. For headful tests, configure the plugin with a different driver, such as:

<webDriverClassName>org.openqa.selenium.firefox.FirefoxDriver</webDriverClassName>

Usage

Jasmine can be used for TDD (Test Driven Development). Run

mvn jasmine:bdd

This will fire off the browser at http://localhost:8234 and run the specs from the test directory whenever you refresh the page. This will give you an immediate feedback as you develop your angular controllers etc.

Running

mvn jasmine:test

will run the headless tests by default, unless configured otherwise.

Running

mvn clean test

will run all your tests in the portlet, including Jasmine headless tests provided there were no test failures before.

With this configuration we are now ready to write Jasmine specs for our portlets.

Scotland JS 2015 – Day 1

ScotlandJS2

Recently I attended the Scotland JS conference, which I have to say was really inspirational. A big thank you to the organisers for making this happen! The conference was an amazing mixture of the practical and thought-provoking. I came away with a lot of ideas on improving my own work.

For those who weren’t able to attend I’ll be posting my notes from the talks. You can also find out more about these from the conference website (linked above) and the Scotland JS Twitter feed.

Continue reading “Scotland JS 2015 – Day 1”