Blog Posts Page: 6 of 7

• What is the average amount of time between blocks mined?

  I am taking an online class through the University of Nicosia in digital currencies and covers Bitcoin and the Blockchain. It is a free MOOC and can also be used as credit towards their Masters in Computer Science.

  During the Live Q&A section on October 3rd, 2016, there was a question about the timing between blocks being mined. It was suggested that we look at the previous 2016 blocks to see what the average time between blocks mined.

  The Bitcoin protocol is set to average the time to be 10 minutes between blocks. Every 2016 blocks the network readjusts the difficulty so the average time blocks are mined is 10 minutes. If the average time is longer than 10 minutes then the difficulty decreases, if the average time is shorter than 10 minutes the difficulty increases.

  I wrote a small JavaScript script to parse Blocktrail’s API to get the previous set of 2016 blocks and convert it to a CSV. I opened that file in Excel and created the chart and the results below.

  The blocks started at 429408 and finished at 431423. The difficulty was set at 225,832,872,179.46.

  Results

  

  The average time to mine a block was 563 seconds or 9:23. The longest time was 1:17:36 and the shortest was less than a second.

  Because the average time to mine was less than 10 minutes, the difficulty was increased starting at block 431424 to 241,227,200,229.99

  The Code

  I posted the code up on GitHub if you are interested in contributing.

• Use of Blockchain for Monitoring, Identification and Notification of Population Health Trends and Outbreaks

  In July 2016, the Department of Health and Human Services put out a call for whitepapers about using the blockchain in health care. I had used the Bitcoin blockchain but hadn’t considered how the blockchain could be used outside of a ledger system.

• Inserting Icons into OU Campus

  Our web authors love icons and for the longest time they inserted them as icons that they found from google searches. Our designer would design custom icons for sites and they would be converted to svgs and placed in the page. Both of these solutions worked but were clunky. Luckily, icon fonts and icon sets have been popping up which provide end users an array of icons to use on their pages.

  Non-content tag’s in WUSIWYG editors

  The biggest challenge with inserting icons into a WYSIWYG interface is that they are usually only code and don’t render until after you preview the page. Most icon code looks similar to this:

  <i class="material-icons xl UNC-blue">assessment</i>

  In this example, the word assesssment would be written on the page without any context. Within the WYSIWYG editor, a user could get stuck within the tag and could be difficult to get out of. Typing content inside the tag would be hidden by CSS.

  Table Transformations

  OU Campus users are familiar with table transformations as it allows users to create tab navigation, accordions and other content structures where some of the content may be hidden when the page loads. This solution works great in edit mode because the web author can edit all of the content on the page. If your installation was like ours, you may have the ‘Place cursor at the end of this sentence to add more content’ content which helps with the cursor issue in WYSIWYG editors with tables.

  Image Transformations

  I’d like to introduce the concept of an image transformation for icons. The benefit of using an image instead of a table is that the tag is inline so icons can be placed with content. When the user inserts and image with a specific class to the page, it gets converted into an icon.

  

  In the picture above the source of the image is a placeholder, it doesn’t matter what image this is because it will be replaced using XSL on preview and publish. (The source could be a dependency tag if the image was within OU but this image will never get served to the public.)

  The description is the one of hundreds of icons that could be inserted. This demo uses Google’s Material Icon set but any icon set would work.

  Class is the additional classes that the tag needs to render out the icon. material-icons is the parent class that is used by Google and will be searched for in the XSL match below. xl is the size (extra-large) and gold is the color of the icon. The Dimensions are also added but this only effects the editor.

  After hitting [OK], the WYSIWYG editor puts an image in the editor that we can edit just like an image:

  <img class="material-icons xl gold" 
  	src="https://www.unco.edu/omni/gadgets/icons/img/placeholder.svg"
  	alt="account_balance_wallet" width="200" height="200" />
  

  HTML Transform!

  On preview and publish the image needs to be replaced with the icon code. A simple template match to find the class .material-icons will work:

  <!-- Convert img to icon -->
  <xsl:template match="img[starts-with(@class, 'material-icons')]">
    <i class="{@class}"><xsl:value-of select="@alt" /></i>
  </xsl:template>

  So you expect web authors to remember all these steps?

  This solution works great if you follow these steps and know the short code for each icon. Expecting web authors to know this and go through the process each time is not reasonable. This is where the Material Icons Gadget comes in! With a side bar gadget, the user can select their icon, size and color from dropdowns and then insert the code into the editor. The only downside is that when they are in edit mode they see the placeholder image.

  

  Install

  Take a look at the Readme file at the root of the GitHub repository for detailed instructions. CSS for the icon set, colors and sizes needs to be added. The XSL transformation needs to be applied and the gadget needs to be installed.

  Final Thoughts

  Google’s icon set was used here but any icon set could work. In fact the gadget could be expanded to provide multiple icon sets for users. If you feel like contributing, please do on Github!

• Create an A-Z directory with XSL

  In the previous tutorial, data was pulled into a page using OU Campus’ Tags. In this tutorial, data will be pulled in based on a folder location, sorted and then displayed.

  View a simplified but workable code on GitHub.

  Get All the Journal Data Files and Organize them by File Name

  In case you haven’t read the previous tutorial, Data files are standalone .pcf files that are similar to a database entry. Each file contains the information for a single journal entry: Journal Name, Description, URL and a dropdown for Active, which will tell the XSL if the data file should be pulled in or not.

  All the data files exist in one folder and XSL can grab those files and parse the data. The XSL needs to get those file names and sort them alphabetically:

  Two variables are setup, the first tells the XSL where to look for our data files. In this demo, the value is hard coded in. The second variable is a variation of the first but for OU Campus includes the root and the site. These are separated out into individual variables because $data-folder is used later when tags are pulled in.

  Next a variable of $sortedcopy is defined by looping through all of the files in the directory. This is stored as a variable because to use the functionality of preceding-sibling is used in the next code snippet and this and <xsl:sort /> can not be used in the same loop.

  Loop Through the Sorted Data Files

  The following for-each statement is a bit longer, and could be separated out into multiple functions, but then the parameters would need to be passed to each function. This decision would depend on how much of the code is reused. For this tutorial, it is a single loop and is split up into three separate code snippets below:

  Each data file in the $sortedcopy variable is looped on line 2. The variables are setup for the file name (line 5) and then the content of that data file is stored into the second variable (line 6).

  Next the page type is checked to make sure it is a library-database file. In many OU instances, a _props.pcf file may exist that should not be pulled in.

  Does the Journal Need an A-Z Heading?

  On the A-Z Listing page, the journals should be listed out in alphabetical pagination. If the journal’s title starts with a new letter then a heading for that label should be displayed. XSL functions below have been separated out into individual lines for better readability, but in practice it could be on one line.

  Current Letter

  Line 3 gets the first character of the current title using the XSL function substring(string, starting integer, ending integer). Then on Line 2 it converts it to uppercase with the XSL function upper-case(string). If the character is not converted to a uppercase, the lowercase version would be treated as a different letter.

  Previous Letter

  This is my favorite part of the code. To get the previous starting letter the XSL function preceding-sibling() can be used. Line 10 should be true unless this is the first node in the data set. If this is not checked, the first item will fail and an XSL error will be thrown.

  The first part of line 13: doc(concat($data-location,'/', preceding-sibling::file[1])) starts by selecting the previous data file, then gets the database-name: /document/ouc:properties/parameter[@name='database-name']. Similar to the current letter’s code it selects just the first letter and then capitalizes it. Now the current letter and previous letter are both stored as variables.

  Need a Heading?

  On line 20 the current letter is compared against the previous letter and if it isn’t the same, or if it is the first letter, a heading with that letter is displayed.

  Display the Journal’s Information

  The journals now need to be displayed. If there are a lot of journals, then the description could be hidden. Or in our final version of the UNC Libraries version accordions are used.

  Lines 2 – 4 display the name, description and create a link for the database.

  Lines 7-9 call a template that will get the tags for the page. Here the $page-path parameter, that was defined in the first code example, is used again. This template is described next.

  Finally, lines 14 and 17 close open tags from the code snippet above.

  List the Subjects Associated with the Journal

  Below the link to the journal database, there will be a list of the subject tags that this journal is associated with. This will help with usability for the end users who may not be aware that the categories exist. These subject tags will link to the subject page so the user can explore more databases.

  $page-path is passed to the function and on line 5, the tags associated with the data file are returned as the variable $page-tags. On line 6 the tags are looped and lines 8-10 the tag is passed to an additional template to display the tag.

  Display the Tag and Link to the Subject Page

  Bootstrap and Foundation have a class for tags called .label. This will be wrapped with an anchor to link to that subject page.

  The variable on line 6 removes the prefix of ‘library-database’ which was the naming convention used in the previous blog post. On line 9 an anchor is used to link to that subject page. This only works if the tag name and the subject file name are exactly the same. If the files are in a sub folder, that should be defined here.

  Line 12 replaces the underscore in a tag with a dash. This naming convention allows for a tag with multiple words. As an example: library-database-hispanic_studies gets converted into hispanic studies but keeps the URL of hispanic_studies.aspx.

  Thanks for Reading

  A simplified code example can be found on GitHub.

• Pull in Files using XSL and Tag Management in OU Campus

  The Library website at the University of Northern Colorado has a list of academic journals that they subscribe to. This list is constantly changing and needs to be updated by Library staff. The academic journals are organized in an A-Z listing as well as organized by subject. Each journal can belong to a single subject or multiple subjects.

  If this was a SQL database there would be three tables. One table for the journals, a table for subjects and a table linking between the subjects and the journals.

  With OU Campus ‘tags’ can be added to the page to create the link between journals and subjects. On each subject page, the journals with that individual tag get pulled in.

  “Data Files”

  

  Data files are standalone .pcf files that are similar to a database entry. Each file contains the information for a single journal entry: Journal Name, Description, URL and a dropdown for Active, which will tell the XSL if the data file should be pulled in or not. Line 9 defines the page type as library-database which will be used in case other OU users assign tags to their pages.

  Data File XSL

  In the XSL for the Data File, the tags that are associated with the page are looped and displayed:

  GetTags() returns a node with the sibling node of . Display the tag name: ``

  The next step (will take some time but only has to be done once,) is to create a data file for every Library Academic Journal.

  Subject Tags

  The data files will be pulled in based on the tags that are associated with that data file. Each data file can have an unlimited number of tags associated with it allowing it to belong to an unlimited number of subject areas. A tag needs to be created for each subject area. This may also take some time, and could be been done when the DataFile is being created. A naming convention would be a good idea. For this demo library-database-name. is used.

  

  Tags are stored on OU Campus and not with the individual .pcf file, so if you have cloned the repo you will need to add tags to each data file. It would also be a good idea to duplicate the data file to have more than one page to pull in.

  Subject Pages

  Now that the data files have been created and assigned tags, they need to be pulled into the subject pages. The tag that will be pulled in will be the first tag associated with the subject page. For the demo, the subject page will pull in Accounting Journals. Attach the library-database-accounting tag to this subject page.

  

  Below is the XSL for the subject pages. On line 4 the first tag that is associated with the page is assigned to the variable $page-tag. Then all pages with that tag are are assigned to the variable $tag-select Finally, the data files are looped and the path of each data file is passed to a template to display the content:

  On line 16 of the previous code example, the data file’s path is passed to the function GetContentFromSingleDataFile. More code could be nested here, but breaking it up into multiple templates is easier to read and is better organization and re-usability of code.

  GetContentFromSingleDataFile

  This code snippet takes the path as a parameter (line 3) and creates a variable of the full path to the file (line 6). Next, the content of the page is stored as a new variable (line 9). Lines 6 and 9 could be combined into a single variable.

  Line 12 checks to see if the page-type is a library-database file. This is important since anyone can assign tags to a page in OU Campus. By selecting only pages with the page type of library-database no renegade pages will be pulled in.

  Checking to make sure the Active dropdown is set to True (line 15) will allow end users to turn on and off databases as access is changed.

  Finally, it the database name, description and link are outputted.

  Wrap Up

  The final step would be to create subject pages for each subject. UNC has about 50 academic journal subjects and a page will be created for each one as well as a master A-Z listing. If there is interest, I can write up an article about the listing page which won’t use the tags since every journal will get pulled in.

  This is my first technical post so feedback is welcomed. The full source code is on GitHub.

• CheckIn All Content Gadget

  April 27th, 2018 Update A new version of this gadget has been released!

• Previous Posts
• Page: 6 of 7
• More Posts