tag:blogger.com,1999:blog-1557966278477011442024-03-14T09:48:34.545+00:00Alicia Sykes's BlogAlicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.comBlogger67125tag:blogger.com,1999:blog-155796627847701144.post-51288321189980001952016-10-20T14:09:00.000+01:002016-10-20T14:09:59.206+01:00Sentiment Sweep<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="background-color: white; color: #777777; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">Recently I developed and published an opensource web app that uses data from Twitter combined with sentiment analysis and emotion detection to create a series of data visualisations to illustrate the happy and less happy locations, topics and times....</span></div>
<span style="background-color: white; color: #777777; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<h3 style="text-align: left;">
<span style="background-color: white; color: #777777; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-size: large;">The Final Product</span></span></h3>
<div>
<span style="color: #777777; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;">Live application: </span><a href="http://sentiment-sweep.com/">http://sentiment-sweep.com/</a></span></div>
<div>
<span style="color: #777777; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;">Source Code + Documentations: </span><a href="https://github.com/Lissy93/twitter-sentiment-visualisation">https://github.com/Lissy93/twitter-sentiment-visualisation</a></span></div>
<h3 style="text-align: left;">
<br /></h3>
<h3 style="text-align: left;">
<span style="background-color: white; color: #777777; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-size: large;">The Aim</span></span></h3>
<span style="background-color: white;"><span style="color: #777777; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">1. To make the uncomprehendable mass of Twitter data that available for many topic, accessible, clear and understandable for users.</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">2. To develop a new, faster more efficient method of calculating sentiment on the fly.</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">3. To use only opensource resources (and many of them!), and to then document and publish all code and findings from results back to the opensource comunity via GitHub.</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">4. To allow businesses and individuals to analyse the good/ bad points about what people are saying about their product or brand.</span></span><br />
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">This primarily involved the research and development of a sentiment analysis module, and the implementation of it on real-time social media data, to generate a series of live visual representations of sentiment towards a specific topic or by location in order to find trends.</span><br />
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<br />
<h3 style="text-align: left;">
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;">Screenshots</span></span></h3>
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;">There are some screenshots of the various data visualisations here: </span></span><br />
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;"><a href="https://github.com/Lissy93/twitter-sentiment-visualisation/tree/dev/docs/screenshots">https://github.com/Lissy93/twitter-sentiment-visualisation/tree/dev/docs/screenshots</a></span></span><br />
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="362" src="https://1.bp.blogspot.com/-L6cB-vA4L4Y/WAiyUKzq9YI/AAAAAAAA56U/yEf7MEDIUUUzzBt_6onwrbicRY0JfM5QgCLcB/s640/overview.png" width="640" /><span id="goog_175938652"></span><span id="goog_175938653"></span><a href="https://www.blogger.com/"></a></div>
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;"><br /></span></span>
<br />
<h3 style="text-align: left;">
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-size: large;">Tech Stack</span></span></h3>
<div>
<span style="background-color: white;"><span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">There is so much really cool new technologies (languages, libraries, API's, dev tools, platforms....) published opensource all the time! And I wanted this project to utilize and build upon many of these awesome projects! Below is a summary of the main tech stack:</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-bRm1F97tLoI/WAiql3T-oqI/AAAAAAAA56E/EIu-tEioxwEHWvNeCOkjI8_es1QbOE9ngCLcB/s1600/stack.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="448" src="https://2.bp.blogspot.com/-bRm1F97tLoI/WAiql3T-oqI/AAAAAAAA56E/EIu-tEioxwEHWvNeCOkjI8_es1QbOE9ngCLcB/s640/stack.png" width="640" /></a></div>
<div>
<span style="background-color: white;"><span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><br /></span></span></div>
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<h3 style="text-align: left;">
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-size: large;">Published Node Modules</span></span></h3>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
Several open sauce node modules have been developed and published on npm as part of this project</div>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><a href="https://www.npmjs.com/package/sentiment-analysis" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">sentiment-analysis</a> - useses the AFINN-111 word list to calculate overall sentiment of a sentence</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://www.npmjs.com/package/fetch-tweets" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">fetch-tweets</a> - fetches tweets from Twitter based on topic, location, timeframe or combination</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://www.npmjs.com/package/stream-tweets" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">stream-tweets</a> - streams live Tweets in real-time</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://www.npmjs.com/package/remove-words" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">remove-words</a> - removes all non-key words from a string sentence</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://github.com/Lissy93/place-lookup" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">place-lookup</a> - finds the latitude and longitude for any fuzzy place name using the Google Places API</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://github.com/Lissy93/haven-sentiment-analysis" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">hp-haven-sentiment-analysis</a> - A Node.js client library for HP Haven OnDemand Sentiment Analysis module</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://github.com/Lissy93/haven-entity-extraction" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">haven-entity-extraction</a> - Node.js client for HP Haven OnDemand Entity Extraction</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://www.npmjs.com/package/tweet-location" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">tweet-location</a> - calculates the location from geo-tagged Tweets using the Twitter Geo API</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://github.com/Lissy93/find-region-from-location" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">find-region-from-location</a> - given a latitude and longitude calculates which region that point belongs in</li>
</ul>
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<h3 style="text-align: left;">
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><span style="font-size: large;">Documentation</span></span></h3>
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;">Thorough documentation of opensource projects is very important to ensure future maintainability, and to allow other developers to use the code in their projects, or to contribute.</span></span><br />
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;"><br /></span></span>
<span style="color: #666666; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><span style="background-color: white;">The documentation can be viewed at: </span><a href="https://github.com/Lissy93/twitter-sentiment-visualisation/tree/dev/docs">https://github.com/Lissy93/twitter-sentiment-visualisation/tree/dev/docs</a></span><br />
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"><br /></span>
<span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">Below are links to each of the key documentation articles written as part of the project</span><span style="background-color: white; color: #666666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";"> </span><br />
<br />
<br />
<h3 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; text-align: left;">
<span style="font-size: large; font-weight: normal;">Project Information</span></h3>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/project-introduction.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Project Introduction</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/project-risks.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Addressing Potential Risks</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/sdlc.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">System Development Life Cycle</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/LICENSE.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Licence</a></div>
<h4 style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; text-align: left;">
<span style="font-size: large; font-weight: normal;">Project Planning</span></h4>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/user-stories.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">User Stories</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/story-points.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Complexity Estimates</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/high-level-data-flow.png" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">High Level UML</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/methodology-frontend.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Methodology - frontend</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/test-strategy.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Test Strategy</a></div>
<h4 style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; text-align: left;">
<span style="font-weight: normal;"><span style="font-size: large;">Development Documentation</span></span></h4>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/installation-instructions.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Installation Instructions</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/build-environment.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Build Environment</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/test-strategy.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Testing</a></div>
<h4 style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; margin-bottom: 16px; text-align: left;">
<span style="font-size: large; font-weight: normal;">Research</span></h4>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/research-1-sa-current-uses.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">The current sentiment analysis scene</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/research-2-sa-comparison.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Comparison of various sentiment analysis algorithm approaches</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">
<a href="https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/references.md" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">References</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">
<br /></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">
<br /></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">
<br /></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com4tag:blogger.com,1999:blog-155796627847701144.post-84722418430912433692016-10-13T09:51:00.000+01:002016-10-21T12:55:07.688+01:00Hack Zurich 2016<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://2.bp.blogspot.com/-WUeL3Mo3CdQ/WAoBr9NEu5I/AAAAAAAA57c/LY9dhFW7VlkSPqAV_zq6G-rk-uKtaKHnQCLcB/s1600/14322283_1162832210427347_848280423416660113_n.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="266" src="https://2.bp.blogspot.com/-WUeL3Mo3CdQ/WAoBr9NEu5I/AAAAAAAA57c/LY9dhFW7VlkSPqAV_zq6G-rk-uKtaKHnQCLcB/s400/14322283_1162832210427347_848280423416660113_n.jpg" width="400" /></a>Europes biggest 40 hour non-stop hacking marathon, HackZurich 2016 had 800+ Attendees from around the globe, 500+ hackers, hundreds of submissions, and 3.6 tons of food. Big name sponsors (including Google, Kyak, Adobe, Samsung, Bosch, Microsoft and loads way more) ensured that event was an awesome one. Plenty of funding for a great venue, tons (literally) of food, a swimming pool worth of RedBull and proper coffee, not to mention enough swag to not need to go shopping for the next year!<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-7y5yFJM7Hmc/WAoB8qF0T_I/AAAAAAAA57k/11gNge240ZI_S_-RfAujfgLtNIhQ6d0cgCLcB/s1600/14352631_1166979656679269_5251760920228127511_o.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="266" src="https://1.bp.blogspot.com/-7y5yFJM7Hmc/WAoB8qF0T_I/AAAAAAAA57k/11gNge240ZI_S_-RfAujfgLtNIhQ6d0cgCLcB/s400/14352631_1166979656679269_5251760920228127511_o.jpg" width="400" /></a></div>
<br />
<br />
<br />
<a href="https://1.bp.blogspot.com/-Um88MRz_-bQ/WAoB5jR_1wI/AAAAAAAA57g/5fCS9n2705UbZCGRs1odhzJWpPGBGbAnwCLcB/s1600/14435322_1166973430013225_1789188897898388496_o.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="133" src="https://1.bp.blogspot.com/-Um88MRz_-bQ/WAoB5jR_1wI/AAAAAAAA57g/5fCS9n2705UbZCGRs1odhzJWpPGBGbAnwCLcB/s200/14435322_1166973430013225_1789188897898388496_o.jpg" width="200" /></a><br />
<br /></div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/fdGJrQXX9QE" width="560"></iframe><br />
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0Zürich, Switzerland47.3768866 8.541694000000006847.204846599999996 8.2189705000000064 47.5489266 8.8644175000000072tag:blogger.com,1999:blog-155796627847701144.post-67619308189939610112016-03-31T11:33:00.000+01:002016-10-21T12:55:49.314+01:00StartHack Switzerland 2016<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://4.bp.blogspot.com/-kdPlCOFHqdg/WAiacl9pJoI/AAAAAAAA55U/4E97ktHP3XINgGCH3Zo7vnVVygHOXynqgCLcB/s1600/UcVoNVK9.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://4.bp.blogspot.com/-kdPlCOFHqdg/WAiacl9pJoI/AAAAAAAA55U/4E97ktHP3XINgGCH3Zo7vnVVygHOXynqgCLcB/s200/UcVoNVK9.jpg" width="200" /></a>On the 11th - 13th of March 2016, 200 hackers from around the world descended on St Gallen, Switzerland, for the second addition of StartHack. Sponsored by SwissCom and run as part of the START summit 2016, this 36 hour coding competition had plenty to offer.<br />
<br />
There were many awesome projects that came out of StartHack, some of the winning submissions can be viewed here: <a href="https://starthack.devpost.com/submissions">https://starthack.devpost.com/submissions</a><br />
<br />
<br />
<span style="font-size: large;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-h5gESg99Eeg/WAic8pQds6I/AAAAAAAA55o/6HNkxiDF0I0SnSp5JSauaU0RHp0cgoNAgCLcB/s1600/1506241_10208718493539371_2469171548322684292_o.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="213" src="https://2.bp.blogspot.com/-h5gESg99Eeg/WAic8pQds6I/AAAAAAAA55o/6HNkxiDF0I0SnSp5JSauaU0RHp0cgoNAgCLcB/s320/1506241_10208718493539371_2469171548322684292_o.jpg" width="320" /></a></div>
<a href="https://3.bp.blogspot.com/-OQerT51g2Aw/WAic8dz1z8I/AAAAAAAA55k/Bws8Q3yzIC8e2Zcr7Poy-o4EtA-uqqYjgCLcB/s1600/CdcUbmWUEAE-sX3.jpeg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="240" src="https://3.bp.blogspot.com/-OQerT51g2Aw/WAic8dz1z8I/AAAAAAAA55k/Bws8Q3yzIC8e2Zcr7Poy-o4EtA-uqqYjgCLcB/s320/CdcUbmWUEAE-sX3.jpeg" width="320" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Sbhl5QoDGok/WAic_vH4CLI/AAAAAAAA550/-wS0xqVdnKQKI1X9_rI_AJ4fRpdSByIYQCLcB/s1600/hacker7.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="175" src="https://1.bp.blogspot.com/-Sbhl5QoDGok/WAic_vH4CLI/AAAAAAAA550/-wS0xqVdnKQKI1X9_rI_AJ4fRpdSByIYQCLcB/s320/hacker7.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Links</span><br />
<a href="http://www.startglobal.org/">http://www.startglobal.org/</a><br />
<a href="https://startsummit.ch/">https://startsummit.ch/</a><br />
<a href="https://www.facebook.com/STARTHackathon/">https://www.facebook.com/STARTHackathon/</a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/0ZJAaIUxjpM" width="560"></iframe></div>
<br />
<br />
<br />
<a class="twitter-timeline" href="https://twitter.com/START_Hack">Tweets by START_Hack</a> <script async="" charset="utf-8" src="//platform.twitter.com/widgets.js"></script>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0St Gallen, Switzerland47.4244818 9.376717299999995747.338537800000005 9.2153557999999958 47.5104258 9.5380787999999956tag:blogger.com,1999:blog-155796627847701144.post-38299896722011338932015-10-11T08:54:00.000+01:002015-10-11T08:54:00.101+01:00Unit Testing and why it should be used<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
What is Unit Testing?</h3>
Unit testing is where the program is broken down into a series of units, or functions, or areas - each of these is tested individually/standalone in a lot of detail. This allows us to check that each function works as it should. So if we give one of our methods/functions a set of inputs we can then verify that we get the expected output for each example.<br />
<br />
We will need to check our functions with not only predictable values, but also borderline values and just as importantly totally unexpected values (e.g. wrong datatype, size, empty, irrelevant...)<br />
<br />
Only the characteristics of that unit need to be tested, as everything else in the application will be covered by the other unit tests.<br />
<br />
It is usually an automated process, once the tests are written they will run automatically when the tests are configured to run.<br />
<br />
<h3>
Benefits of Unit Testing</h3>
<div>
<br />
<ul style="text-align: left;">
<li>Identify failures in our code BEFORE it gets integrated with the larger application</li>
<li>Allows you to continue verifying that your method still works as expected in all (tested) cases while your refactor/ change the logic in the methods body</li>
<li>If your approaching development from a unit test perspective, you'll likely be writing code that is easier to test - more modular, clear, standalone methods - this is better code.</li>
<li>Prevent future changes from breaking functionality.</li>
<li>They help you really understand the design of your code</li>
<li>They give you instant feedback, and that green tick when they all pass is so satisfying!</li>
<li>Faster to develop more robust code</li>
<li>They can help with code reuse</li>
<li>Forces better code documentation</li>
</ul>
<div>
Here are some more reasons why you should test, from the SO community:</div>
<div>
<a href="http://stackoverflow.com/questions/67299/is-unit-testing-worth-the-effort">http://stackoverflow.com/questions/67299/is-unit-testing-worth-the-effort</a></div>
<h3 style="text-align: left;">
Disadvantages of Unit Testing</h3>
<div>
<ul style="text-align: left;">
<li>When your just getting started, they can be time consuming while you get used to them. Ultimately they will save time in the long run, but it doesn't always feel like that.</li>
<li>Learning curve. Although the principle of unit testing is very simple, when you actually sit down to write unit tests for the first time, it is often hard to know that and how you should be testing each module. A solution to this is to look at example tests on the internet. For example all decent Node.js projects and modules on GitHub will have a test directory, that you can read or run.</li>
<li>Trying to implement unit tests to legacy code/ code not written nicely is sometimes close to impossible. The solution to this, is don't wirte bad code in the first place and write tests first or during development.</li>
</ul>
<div>
As you can see the advantages massively outweigh the very weak disadvantages. </div>
<div>
<br /></div>
<div style="text-align: center;">
<span style="color: magenta; font-family: Trebuchet MS, sans-serif;"><b>Unit testing confirms the code your writing is awesome!</b></span></div>
</div>
<div>
<br /></div>
<br />
<h3 style="text-align: left;">
A good unit test is:</h3>
<div>
<div>
<ul style="text-align: left;">
<li>Able to be fully automated</li>
<li>Has full control over all the pieces running (Use mocks or stubs to achieve this isolation when needed)</li>
<li>Can be run in any order if part of many other tests</li>
<li>Runs in memory (no DB or File access, for example)</li>
<li>Consistently returns the same result (You always run the same test, so no random numbers, for example. save those for integration or range tests)</li>
<li>Runs fast</li>
<li>Tests a single logical concept in the system</li>
<li>Readable</li>
<li>Maintainable</li>
<li>Trustworthy (when you see its result, you don’t need to debug the code just to be sure)</li>
</ul>
</div>
</div>
<div>
<br /></div>
<br />
<h3 style="text-align: left;">
Links for Further Reading</h3>
<div>
Unit testing in AngularJS</div>
<div>
<a href="https://docs.angularjs.org/guide/unit-testing">https://docs.angularjs.org/guide/unit-testing</a></div>
<div>
<br /></div>
<div>
Unit testing in PHP</div>
<div>
<a href="http://code.tutsplus.com/articles/the-beginners-guide-to-unit-testing-what-is-unit-testing--wp-25728">http://code.tutsplus.com/articles/the-beginners-guide-to-unit-testing-what-is-unit-testing--wp-25728</a></div>
<div>
<br /></div>
<div>
Unit testing in Android</div>
<div>
<a href="https://developer.android.com/training/activity-testing/activity-unit-testing.html">https://developer.android.com/training/activity-testing/activity-unit-testing.html</a></div>
<div>
<br /></div>
<div>
Unit testing in NodeJs</div>
<div>
<a href="http://www.clock.co.uk/blog/tools-for-unit-testing-and-quality-assurance-in-node-js">http://www.clock.co.uk/blog/tools-for-unit-testing-and-quality-assurance-in-node-js</a></div>
<div>
<br /></div>
<div>
Unit testing in Swift</div>
<div>
<a href="https://www.andrewcbancroft.com/2014/12/29/getting-started-unit-testing-swift/">https://www.andrewcbancroft.com/2014/12/29/getting-started-unit-testing-swift/</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0Newcastle upon Tyne, Tyne and Wear, UK54.978252 -1.617780000000038954.8325385 -1.9405035000000388 55.1239655 -1.2950565000000389tag:blogger.com,1999:blog-155796627847701144.post-54568551334443953862015-10-04T19:41:00.000+01:002015-10-04T19:41:00.495+01:00Coverage testing in Node.js with Istanbul<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="height: 0px;">
What is Coverage Testing?</h3>
<div>
Coverage testing determines what proportion of your source code is covered by your tests. </div>
<div>
<br /></div>
<div>
It's useful to be able to check this as your developing/writing tests/testing so that you can aim as close as possible for 100%</div>
<div>
<br /></div>
<h3 style="text-align: left;">
How do I use Coverage Testing in my Node.js / JavaScript application?</h3>
<div>
It is really easy to run coverage tests in your project, even easier if you are using a testing framework and have everything set up. </div>
<div>
<br /></div>
<div>
There is a Node module called Istanbul, which takes care of everything for you. </div>
<div>
Read more about Istanbul here: <a href="https://github.com/gotwarlost/istanbul">https://github.com/gotwarlost/istanbul</a></div>
<div>
<br /></div>
<b>1. Install Istanbul both globally and then add to your dev dependencies </b><br />
<div>
<span style="color: #005fd2;">npm</span><span style="background-color: white;"> </span><span style="color: #0000e6;">install</span><span style="background-color: white;"> </span><span style="color: #0000e6;">istanbul</span><span style="background-color: white;"> </span><span style="color: #0000e6;">--save-dev</span></div>
<div>
<span style="color: #005fd2;">npm</span><span style="background-color: white;"> </span><span style="color: #0000e6;">install</span><span style="background-color: white;"> </span><span style="color: #0000e6;">istanbul</span><span style="background-color: white;"> </span><span style="color: #0000e6;">--global</span></div>
<div>
<br /></div>
<div>
<b>2. Run a quick coverage test on one of your test files like so</b></div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">istanbul</span> <span style="color: #0000e6;">cover</span> <span style="color: #0000e6;">test/my-test.js</span></pre>
</div>
<div>
<br /></div>
<div>
<b>3. Add a script tag to your package.json to run a coverage command on ALL test's at once, easily </b></div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: maroon;">"</span><span style="color: #0000e6;">scripts</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: purple;">{</span>
<span style="color: maroon;">"</span><span style="color: #0000e6;">start</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: maroon;">"</span><span style="color: #0000e6;">node app.js</span><span style="color: maroon;">"</span><span style="color: #808030;">,</span>
<span style="color: maroon;">"</span><span style="color: #0000e6;">test</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: maroon;">"</span><span style="color: #0000e6;">mocha</span><span style="color: maroon;">"</span><span style="color: #808030;">,</span>
<span style="color: maroon;">"</span><span style="color: #0000e6;">cover</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: maroon;">"</span><span style="color: #0000e6;">istanbul cover node_modules/mocha/bin/_mocha --dir ./reports/coverage</span><span style="color: maroon;">"</span>
<span style="color: purple;">}</span></pre>
</div>
<div>
<br /></div>
<div>
(this works great for Mocha setup, and on Windows, may be slightly different for other testing frameworks)</div>
<div>
<br /></div>
<div>
<b>4. Run your coverage tests!</b></div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">run</span> <span style="color: #0000e6;">cover</span></pre>
</div>
<div>
<br /></div>
<div>
You should see a nice summary of your coverage in the console. </div>
<div>
Also check out the more detailed HTML report that Istanbul kindly created for you. </div>
<div>
Don't forget to add the reports directory to your .gitignore !</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-VD4Cvaw4tIU/VdtlQpMZt-I/AAAAAAAAzG8/ELRFu9QYRi0/s1600/bad-test1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="http://2.bp.blogspot.com/-VD4Cvaw4tIU/VdtlQpMZt-I/AAAAAAAAzG8/ELRFu9QYRi0/s640/bad-test1.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-QAZRK_m8CyA/VdtlQQ76uhI/AAAAAAAAzHA/J6ILXt8JcrA/s1600/better-test2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="http://1.bp.blogspot.com/-QAZRK_m8CyA/VdtlQQ76uhI/AAAAAAAAzHA/J6ILXt8JcrA/s640/better-test2.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-db9kuhdFPkE/VdtlQZxHLiI/AAAAAAAAzG4/oG7NCqwm7AI/s1600/better-test3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="382" src="http://2.bp.blogspot.com/-db9kuhdFPkE/VdtlQZxHLiI/AAAAAAAAzG4/oG7NCqwm7AI/s640/better-test3.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
Check out the example project on GitHub:</div>
<div>
<a href="https://github.com/Lissy93/quick-example-of-testing-in-nodejs">https://github.com/Lissy93/quick-example-of-testing-in-nodejs</a></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-31733432267641100472015-09-27T19:13:00.000+01:002015-09-27T19:13:00.135+01:00Setting up a unit testing environment in Node.js<div dir="ltr" style="text-align: left;" trbidi="on">
<h4>
Example Project</h4>
<div>
<a href="https://github.com/Lissy93/quick-example-of-testing-in-nodejs">https://github.com/Lissy93/quick-example-of-testing-in-nodejs</a></div>
<h4>
Introduction</h4>
<div>
In this post we'll go through the complete process of setting up your test environment in a Node.js app, and then write a few simple unit tests. Although I've aimed this for Node apps, you should be able to follow these steps for any JavaScript setup such as Ionic.</div>
<h4>
Before reading reading this article you should already know:</h4>
<ul style="text-align: left;">
<li>What unit testing is, follow the link below for more about general unit testing</li>
<ul>
<li><br /></li>
</ul>
<li>What TDD is, follow the link below for more about TDD </li>
<ul>
<li><a href="http://lissy93.blogspot.com/2015/09/introduction-to-test-driven-development.html">http://lissy93.blogspot.com/2015/09/introduction-to-test-driven-development.html</a> </li>
</ul>
</ul>
<h3 style="text-align: left;">
1. Setting up a Testing Framework</h3>
<div>
A testing framework will take care of the overall test structure for us and make it easy to run our tests and allow us to use additional plugins too if necissary (such as generating HTML test reports, or providing coverage test features). It is possible to do all this with vanilla JavaScript, but a lot more work</div>
<div>
<br /></div>
<div>
The two most popular test frameworks are Mocha and Jasmine. For this we will be using Mocha.</div>
<div>
<br /></div>
<div>
Since we will use the 'mocha' command, we must first install Mocha globally. If not you will get the error message 'mocha is not recognized as an internal or external command' (or mac equivalent).</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">install</span> <span style="color: #0000e6;">mocha</span> <span style="color: #0000e6;">--global</span></pre>
</div>
<div>
<br /></div>
<div>
If your using git, or have multiple developers working on the project you'll also want to add mocha to your package.json so others can just run npm install to populate their node_modules.</div>
<div>
First initialize your package.json (if you haven't already done so):</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">init</span></pre>
</div>
<div>
<br /></div>
<div>
Then add mocha to your devDepenencies and save in node_modules by running</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">install</span> <span style="color: #0000e6;">mocha</span> <span style="color: #0000e6;">--save-dev</span></pre>
</div>
<div>
<br /></div>
<div>
Next we need to create a directory to store our tests. By default mocha will look for a folder called 'test' inside the projects root, so we must use this name exactly.</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">mkdir</span> <span style="color: #0000e6;">test</span></pre>
</div>
<div>
<br /></div>
<h4>
Summary</h4>
<div>
The following commands can be used to setup mocha in a new project. (mac commands might be slightly different)</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">mkdir</span> <span style="color: #0000e6;">test-example</span> && <span style="color: #0000e6;">cd</span> <span style="color: #0000e6;">test-example</span> <span style="color: #0000e6;">::</span> <span style="color: #0000e6;">create</span> <span style="color: #0000e6;">new</span> <span style="color: #0000e6;">projet</span> <span style="color: #0000e6;">director</span>
<span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">i</span> <span style="color: #0000e6;">mocha</span> <span style="color: #074726;">-g</span> <span style="color: #0000e6;">::</span> <span style="color: #0000e6;">install</span> <span style="color: #0000e6;">mocha</span> <span style="color: #0000e6;">globally</span> <span style="color: #0000e6;">so</span> <span style="color: #0000e6;">the</span> <span style="color: #0000e6;">mocha</span> <span style="color: #0000e6;">command</span> <span style="color: #0000e6;">can</span> <span style="color: #0000e6;">be</span> <span style="color: #0000e6;">used</span>
<span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">init</span> <span style="color: #0000e6;">::</span> <span style="color: #0000e6;">initialise</span> <span style="color: #0000e6;">package.json</span>
<span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">i</span> <span style="color: #0000e6;">mocha</span> <span style="color: #074726;">-D</span> <span style="color: #0000e6;">::</span> <span style="color: #0000e6;">add</span> <span style="color: #0000e6;">mocha</span> <span style="color: #0000e6;">to</span> <span style="color: #0000e6;">your</span> <span style="color: #0000e6;">projects</span> <span style="color: #0000e6;">devDependancies</span>
<span style="color: #005fd2;">mkdir</span> <span style="color: #0000e6;">test</span> <span style="color: #0000e6;">::</span> <span style="color: #0000e6;">create</span> <span style="color: #0000e6;">new</span> <span style="color: #0000e6;">folder</span> <span style="color: #0000e6;">for</span> <span style="color: #0000e6;">tests</span></pre>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
2. Setting up an Assertion Library</h3>
<div>
Node does have some assertion test functionality built in, although it is quite basic, and not particularly nice to use. So instead we are going to use Chai as an assertion library - there several others out there, but chai is good and well established with good documentation.</div>
<div>
So first off we need to install chai to our project like we do with all node modules:</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">install</span> <span style="color: #0000e6;">chai</span> <span style="color: #0000e6;">--save-dev</span></pre>
</div>
<div>
<br /></div>
<div>
Next we are going to create a file to put our test in. Remember this should be inside the test directory. The file can be called what ever you like (but keep it relevant), and the extension should be .js (or .coffee if your writing your tests in CoffeeScript).<br />
<br />
Inside your new test file, the first step is, as usually done with node modules, to include the module in your file.<br />
<pre style="background: rgb(255, 255, 255);"><span style="color: maroon; font-weight: bold;">var</span> chai <span style="color: #808030;">=</span> require<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">chai</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<br />
If you visit the Chai website(<a href="http://chaijs.com/">http://chaijs.com/</a>) you will see that chai has three interfaces: <a href="http://chaijs.com/guide/styles/#should" target="_blank">Should</a>, <a href="http://chaijs.com/guide/styles/#expect" target="_blank">Expect </a>and <a href="http://chaijs.com/guide/styles/#assert" target="_blank">Assert</a>.<br />
<br />
It is up to you which one you use, and it's easily possible to use a combination. They all work in a similar way, with the only main difference being the syntax and the structure of the test blocks you write. Should is much more like English, and Assert is more like conventional JUnit comparisons, Expect is somewhere in between.<br />
<br /></div>
<div>
So if we were using expect, the fist thing we would need to do is define the expect method.<br />
<pre style="background: rgb(255, 255, 255);"><span style="color: maroon; font-weight: bold;">var</span> expect <span style="color: #808030;">=</span> chai<span style="color: #808030;">.</span>expect<span style="color: purple;">;</span></pre>
<br />
The format of your tests will have a describe block for what the code module should have been tested for, followed by a series of it's containing the Chai tests, in this format:<br />
<pre style="background: rgb(255, 255, 255);">describe<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">JavaScript example test</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span>
it<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">should return true in JavaScript</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span><span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span>
expect<span style="color: #808030;">(</span><span style="color: #0f4d75;">true</span><span style="color: #808030;">)</span><span style="color: #808030;">.</span>equal<span style="color: #808030;">(</span><span style="color: #0f4d75;">true</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<br />
<br />
The format of an expect method is like this:<br />
<pre style="background: rgb(255, 255, 255);">expect<span style="color: #808030;">(</span>foo<span style="color: #808030;">)</span><span style="color: #808030;">.</span>to<span style="color: #808030;">.</span>be<span style="color: #808030;">.</span>a<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">string</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
expect<span style="color: #808030;">(</span>foo<span style="color: #808030;">)</span><span style="color: #808030;">.</span>to<span style="color: #808030;">.</span>equal<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">bar</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
expect<span style="color: #808030;">(</span>foo<span style="color: #808030;">)</span><span style="color: #808030;">.</span>to<span style="color: #808030;">.</span>have<span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">length</span><span style="color: #808030;">(</span><span style="color: #008c00;">3</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
expect<span style="color: #808030;">(</span>tea<span style="color: #808030;">)</span><span style="color: #808030;">.</span>to<span style="color: #808030;">.</span>have<span style="color: #808030;">.</span>property<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">flavors</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">with</span><span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">length</span><span style="color: #808030;">(</span><span style="color: #008c00;">3</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<br />
Example from the Chai documentation, view more here: <a href="http://chaijs.com/guide/styles/#expect">http://chaijs.com/guide/styles/#expect</a><br />
<br />
<br />
<h3 style="text-align: left;">
3. Running Tests, and specifying additional options</h3>
<div>
Once you have a sample test, like above. You can run it to see the result.</div>
<div>
To run all tests in the command line, use the following command:</div>
<div>
<pre style="background: rgb(255, 255, 255);">mocha</pre>
</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Running tests from a single file</h4>
<div>
If you'd like to run just tests from a single file, you can type mocha followed by the path to the test file.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Specifying test path in package.json</h4>
<div>
It's good practice to specify a command to execute your tests in your package.json. </div>
<div>
This will allow other developers to run 'npm test' on any project whatever testing framework or setup is implemented.</div>
<div>
In the scripts section, where you've specified the entry point, add a test command:</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: maroon;">"</span><span style="color: #0000e6;">scripts</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: purple;">{</span>
<span style="color: maroon;">"</span><span style="color: #0000e6;">start</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: maroon;">"</span><span style="color: #0000e6;">node ./bin/www</span><span style="color: maroon;">"</span><span style="color: #808030;">,</span>
<span style="color: maroon;">"</span><span style="color: #0000e6;">test</span><span style="color: maroon;">"</span><span style="color: purple;">:</span> <span style="color: maroon;">"</span><span style="color: #0000e6;">mocha</span><span style="color: maroon;">"</span><span style="color: #808030;">,</span>
<span style="color: purple;">}</span></pre>
</div>
<div>
<br /></div>
<div>
This will mean you can run npm test and npm will run the mocha command.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Passing additional parameters to mocha</h4>
<div>
With mocha, it's possible to pass it additional parameters to specify options such as how tests are run. </div>
<div>
You can change things like, how results are displayed, what language you write your tests in (e.g coffee), whether it should look in sub-directories or not, the timeout etc......</div>
<div>
This can be done with the ordinary flag syntax, e.g.</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">mocha</span> <span style="color: #0000e6;">--reporter</span> <span style="color: #0000e6;">nyan</span> <span style="color: #0000e6;">--recursive</span></pre>
</div>
<br />
You can see a full list of flags here: <a href="https://docs.npmjs.com/misc/config">https://docs.npmjs.com/misc/config</a><br />
<br />
The above command will set the reporter (how results are displayed) to be Nyan cat (check it out, it's pretty cool), and the recursive flag will mean that mocha will also execute tests in sub-directories.<br />
<br />
But, it's a bit of a pain having to specify all those flags instead of just calling the mocha command. So you can instead create a file called 'mocha.opts' inside your test directory. In this file you can specify a list of flags. Then you can just run the mocha command, without typing any parameters in the command line.<br />
<br />
Put each flag on a new line, and use long flags rather than short-hand so that it's clear for other developers. Here is an example mocha.opts file:<br />
<a href="https://github.com/mochajs/mocha/blob/master/test/mocha.opts">https://github.com/mochajs/mocha/blob/master/test/mocha.opts</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://onsen.io/blog/content/images/2015/Aug/chaijs-mocha.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://onsen.io/blog/content/images/2015/Aug/chaijs-mocha.png" height="133" width="320" /></a></div>
<br />
<h3 style="text-align: left;">
4. Coverage Testing</h3>
<div>
See coverage testing confluence article here: </div>
<div>
<a href="http://lissy93.blogspot.com/2015/08/coverage-testing-in-nodejs-with-mocha.html">http://lissy93.blogspot.com/2015/08/coverage-testing-in-nodejs-with-mocha.html</a></div>
<br />
<br /></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com9tag:blogger.com,1999:blog-155796627847701144.post-7645109932196563582015-09-20T20:00:00.000+01:002015-09-20T20:00:00.431+01:00Introduction to Test Driven Development<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
First off, what do tests provide us with?</h3>
<div>
<ul style="text-align: left;">
<li>Documentation code</li>
<li>Catch future errors</li>
<li>Long-term time savings - because errors have been found before anythings been deployed to production</li>
</ul>
<div>
Although all the above are true, using tests like this is just a tool - not a process.</div>
</div>
<div>
<br /></div>
<h3 style="text-align: left;">
What is TDD?</h3>
<div>
In it's simplest form TDD comes down to the following process:</div>
<div>
<ul style="text-align: left;">
<li>Decide what the code will do</li>
<li>Write a test that will pass if the code does that thing</li>
<li>Run the test, to prove it will fail</li>
<li>Write the code</li>
<li>Run the test again, to see it pass</li>
</ul>
<div>
It's important to note that you must not write the code, until you've written the test.</div>
</div>
<div>
Also it is essential to ensure the test actually fails first, it is surprisingly easy to make a small mistake in your test case that means your test will always pass, and that's not the type of error that anyone likely to look into. It's also sometimes necessary to back-test, where you break the code to show that the test fails.</div>
<div>
This should be done for every couple of lines of code, every method.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-sgrBqZU3uf8/VdQ1x72MzeI/AAAAAAAAzE8/mgSruqRd6WA/s1600/tdd.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="532" src="http://1.bp.blogspot.com/-sgrBqZU3uf8/VdQ1x72MzeI/AAAAAAAAzE8/mgSruqRd6WA/s640/tdd.PNG" width="640" /></a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
What does TDD provide?</h3>
<div>
<ul style="text-align: left;">
<li>Design and plan before you code</li>
<li>Documenting your design before you build it</li>
<li>Proving that the code implements that design</li>
<li>Encouraging the design of testable code - very important!!</li>
</ul>
<div>
Testable code, is good code!</div>
</div>
<div>
This is because if you have long methods/ functions with loads of if statements and stuff, it's just not possible to write tests. If you write the tests first, you can't write the code that is too complicated.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Testable code is:</h3>
<div>
<ul style="text-align: left;">
<li>Modular, as we're forced to break things down so we can test them</li>
<li>Decoupled design, if our objects or methods are too tightly interwoven, we can't test them independantly.</li>
<li>Methods should have limited scope, and not trying to do too much in one place</li>
<li>etc... </li>
</ul>
</div>
<div>
Basically good testable code will have a much lower cyclomatic complexity. This is the measure of how many different paths there are through the code, so essentially every conditional statement you add, will give you another route and another set of tests.</div>
<div>
<br /></div>
<div>
If your finding the test complicated to write, then that's a code smell, your going about it the wrong way.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Result of TDD</h3>
<div>
Better code in less time *</div>
<div>
<br /></div>
<div>
*so it might not feel like it's going faster, because it's a process rather than just hacking. And processes feel tedious. Also it may take some practice to get up to speed, but it's fully worth it in the long run for speed and code quality.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Use your judgement about when to test</h3>
<div>
Although nearly all code should be tested thoroughly there are some exceptions:</div>
<div>
<ul style="text-align: left;">
<li>Some things are too hard to test - especially where external services are involved</li>
<li>Some tests are too trivial to be useful</li>
<li>Over-testing is possible </li>
<li>Exploritory codeing, whern your not sure how it's going to be used. SO not for production code.</li>
</ul>
</div>
<div>
<h3>
Links for learning more about TDD</h3>
<div>
<ul>
<li>A really clear explanation of what TDD is, and how to implement it. Quite long, but thourough and easy to understand. I'd recommend starting with this, if you know nothing about TDD. </li>
<ul>
<li><a href="http://code.tutsplus.com/tutorials/the-newbies-guide-to-test-driven-development--net-13835">http://code.tutsplus.com/tutorials/the-newbies-guide-to-test-driven-development--net-13835</a> (ignore the bits specific to PHP, the rest is quite generic)</li>
</ul>
</ul>
<ul>
<li>Good article if your using TDD withh JUnit in Java. </li>
<ul>
<li><a href="http://technologyconversations.com/2013/12/20/test-driven-development-tdd-example-walkthrough/">http://technologyconversations.com/2013/12/20/test-driven-development-tdd-example-walkthrough/</a></li>
</ul>
<li>Very short introduction to TDD with Node.js, using Mocha</li>
<ul>
<li><a href="http://webapplog.com/test-driven-development-in-node-js-with-mocha/">http://webapplog.com/test-driven-development-in-node-js-with-mocha/</a></li>
</ul>
<li>Not free unless you can use the trial, but this series is very complete from Lynda, and worth a look:</li>
<ul>
<li><a href="http://www.lynda.com/Node.js-tutorials/Test-Driven-Development-Node.js/383527-2.html">http://www.lynda.com/Node.js-tutorials/Test-Driven-Development-Node.js/383527-2.html</a></li>
</ul>
<li>Quite a long video explaining why TDD is so important to use</li>
<ul>
<li><a href="https://www.youtube.com/watch?v=3_UX8Kqb3aU">https://www.youtube.com/watch?v=3_UX8Kqb3aU</a></li>
</ul>
</ul>
</div>
<div>
<ul>
<li>If you want to learn the difference between TDD and BDD, then this video clearly explains it in 5 minutes</li>
<ul>
<li><a href="https://www.youtube.com/watch?v=mT8QDNNhExg">https://www.youtube.com/watch?v=mT8QDNNhExg</a></li>
</ul>
<li>When your PM finds out you didn't follow TDD:</li>
<ul>
<li><a href="https://www.youtube.com/watch?v=DodJQyHsmHI">https://www.youtube.com/watch?v=DodJQyHsmHI</a></li>
</ul>
</ul>
</div>
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0University of Oxford, Oxford, Oxfordshire, UK51.7566341 -1.254703699999936451.7173226 -1.3353846999999364 51.795945599999996 -1.1740226999999364tag:blogger.com,1999:blog-155796627847701144.post-81672432010013479672015-09-13T20:00:00.000+01:002015-09-13T20:00:00.664+01:00How to write a gulpfile<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Setting up a new project and getting it ready for Gulp</h2>
<div>
<div>
<b>Gulp is simple to set up. Presuming you have Node.js already installed:</b></div>
<div>
<ul style="text-align: left;">
<li>In the command line, navigate into the root of your project working directory</li>
<li>Install Gulp with <span style="font-family: Courier New, Courier, monospace;">npm install gulp --save-dev </span><span style="font-family: inherit;">what this will do will add gulp into your node_modules folder. The --save-dev part will add gulp to your devDependacies in your package.json file. It is similar to --save/-s only it's a </span>dependency<span style="font-family: inherit;"> that's only required for development of your app.</span></li>
<li><span style="font-family: inherit;">Create a new JavaScript file in your project root directory called </span><span style="font-family: Courier New, Courier, monospace;">gulpfile.js </span></li>
<li><span style="font-family: inherit;">This is the file where we will put all our build configuration in...</span></li>
</ul>
</div>
<br />
<h2 style="text-align: left;">
How to write the gulpfile.js</h2>
<div>
<h3 style="text-align: left;">
Install Plugins</h3>
</div>
<div>
Firstly you'll need to install and include the plugins you need. Every task in Gulp uses a plugin. For this example we'll be compiling sass. </div>
<div>
If you haven't already done so, in your console run:</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">install</span> <span style="color: #0000e6;">gulp </span><span style="color: #0000e6;">--save-dev</span></pre>
</div>
<br />
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial;"><span style="color: #005fd2;">npm</span> <span style="color: #0000e6;">install</span> <span style="color: #0000e6;">gulp-sass</span> <span style="color: #0000e6;">--save-dev</span></pre>
<br />
This will install both gulp and our first plugin in, gulp-sass. It will also add the dev dependency to our package.json<br />
<br />
<h3 style="text-align: left;">
Require Necessary Modules</h3>
Back to the gulpfile.js in the same way that you'd use any other node module we need to include it. So in the top of your gulpfile.js paste the following code:<br />
<pre style="background: rgb(255, 255, 255);"><span style="color: maroon; font-weight: bold;">var</span> gulp <span style="color: #808030;">=</span> require<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">gulp</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<div>
<br /></div>
<pre style="background: rgb(255, 255, 255);"><span style="color: maroon; font-weight: bold;">var</span> sass <span style="color: #808030;">=</span> require<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">gulp-sass</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<div>
<br /></div>
<h3 style="text-align: left;">
Creating a gulp task</h3>
<div>
Now we need to actually write the code to tell gulp what to do with this plugin.</div>
<div>
To do this we call the task method in gulp. This method takes to parameters, firstly a string which can be what ever you want to call your task (in this example I called is sass - seems to make sense). </div>
<div>
Secondly we pass it a function that does the work. The format of this function is:</div>
<div>
<ul>
<li>First pass is a glob of which files and folders to look for, this is done with the gulp.src method (in this example it's all files withing the scss folder with the file extension .scss).</li>
<li>Then we call gulp's pipe method on that file selection, where we pass it the plugin as a parameter.</li>
<li>Then finally we give gulp a destination location where the processed files should be saved. We do this using the gulp.dest method. </li>
</ul>
</div>
<div>
<br /></div>
<div>
<pre style="background: rgb(255, 255, 255);">gulp<span style="color: #808030;">.</span>task<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">sass</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span> <span style="color: purple;">{</span>
<span style="color: maroon; font-weight: bold;">return</span> gulp<span style="color: #808030;">.</span>src<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">scss/*.scss</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>sass<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>gulp<span style="color: #808030;">.</span>dest<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">css</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
</div>
<div>
<br /></div>
<br />
<h3 style="text-align: left;">
Running the Gulp task</h3>
<div>
Try testing out what we wrote above by running the following command in the console</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">gulp</span> <span style="color: #0000e6;">sass</span></pre>
</div>
<div>
This will look for the gulpfile.js in current directory, then look for the task called 'sass' and run it.</div>
<div>
What you should see is all your sass code inside the sccss directory is compiled to css and aved in your css directory.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Watching files for changes</h3>
<div>
Now what would be really good is if gulp could just wait until everytime we make a change to our sass and then compile it into CSS automatically. This is actually really easy to set up using gulp watch.</div>
<div>
<pre style="background: rgb(255, 255, 255);">gulp<span style="color: #808030;">.</span>task<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">watch</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span> <span style="color: purple;">{</span>
gulp<span style="color: #808030;">.</span>watch<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">scss/*.scss</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: #808030;">[</span><span style="color: maroon;">'</span><span style="color: #0000e6;">sass</span><span style="color: maroon;">'</span><span style="color: #808030;">]</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
</div>
<div>
<br /></div>
<div>
We have named this task 'watch', and what it is doing is watching for changes in .scss files inside the scss folder and then running the 'sass' task.</div>
<div>
If you also had a coffeescript task, you could just add another line inside this method looking something like this:</div>
<div>
<pre style="background: rgb(255, 255, 255);">gulp<span style="color: #808030;">.</span>watch<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">cscripts/*.coffee</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: #808030;">[</span><span style="color: maroon;">'</span><span style="color: #0000e6;">coffee</span><span style="color: maroon;">'</span><span style="color: #808030;">]</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Including Multiple Plugins in a single task</h3>
<div>
It's strait-forward to run multiple operations at once. For example process all your scripts in one task, or process all your images in another. e.g.</div>
<div>
<pre style="background: rgb(255, 255, 255);">gulp<span style="color: #808030;">.</span>task<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">scripts</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span> <span style="color: purple;">{</span>
<span style="color: maroon; font-weight: bold;">return</span> gulp<span style="color: #808030;">.</span>src<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">js/*.js</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">concat</span><span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">all.js</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>gulp<span style="color: #808030;">.</span>dest<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">dist</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>rename<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">all.min.js</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>uglify<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>gulp<span style="color: #808030;">.</span>dest<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">dist</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
</div>
<h4>
</h4>
<h3 style="text-align: left;">
Default Task</h3>
<div>
If we name a gulp task 'default' it becomes the default task and you can run it by simply running</div>
<div>
<pre style="background: rgb(255, 255, 255);"><span style="color: #005fd2;">gulp</span></pre>
</div>
<div>
(instead of <span style="color: #005fd2;">gulp</span><span style="background-color: white;"> </span><span style="color: #0000e6;">task-name</span>)</div>
<br />
We can set our default task to run several tasks for us. For example:<br />
<pre style="background: rgb(255, 255, 255);">gulp<span style="color: #808030;">.</span>task<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">default</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: #808030;">[</span><span style="color: maroon;">'</span><span style="color: #0000e6;">sass</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon;">'</span><span style="color: #0000e6;">lint</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon;">'</span><span style="color: #0000e6;">coffee</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: maroon;">'</span><span style="color: #0000e6;">watch</span><span style="color: maroon;">'</span><span style="color: #808030;">]</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<br />
(presuming you already have a 'sass', 'lint', 'coffee' and 'watch' task) it will run all the listed task.<br />
<br />
<h3 style="text-align: left;">
Prerequisite Tasks</h3>
In a similar way, you can set prerequisite tasks to run, by listing them after the task name.<br />
<pre style="background: rgb(255, 255, 255);">gulp<span style="color: #808030;">.</span>task<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">coffee</span><span style="color: maroon;">'</span><span style="color: #808030;">,</span> <span style="color: #808030;">[</span><span style="color: maroon;">'</span><span style="color: #0000e6;">coffee-lint</span><span style="color: maroon;">'</span><span style="color: #808030;">]</span><span style="color: #808030;">,</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span>
<span style="color: maroon; font-weight: bold;">return</span> gulp<span style="color: #808030;">.</span>src<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">cs/*.coffee</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>coffee<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span>
<span style="color: #808030;">.</span>pipe<span style="color: #808030;">(</span>gulp<span style="color: #808030;">.</span>dest<span style="color: #808030;">(</span><span style="color: maroon;">'</span><span style="color: #0000e6;">dist</span><span style="color: maroon;">'</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: purple;">;</span></pre>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-f4uH9kyq7ZM/VcZa0UUbmvI/AAAAAAAAzAc/ZdEUw08J-GI/s1600/gulpscripts.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="191" src="http://2.bp.blogspot.com/-f4uH9kyq7ZM/VcZa0UUbmvI/AAAAAAAAzAc/ZdEUw08J-GI/s200/gulpscripts.PNG" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br /></div>
<div>
<br />
<br />
<a href="https://gist.github.com/Lissy93/1eb7a804b7250d714e02" target="_blank">https://gist.github.com/Lissy93/1eb7a804b7250d714e02</a></div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<div style="margin: 0px;">
<br /></div>
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0Oxford, Oxford, UK51.7520209 -1.257726300000058551.594735899999996 -1.5804498000000584 51.9093059 -0.93500280000005853tag:blogger.com,1999:blog-155796627847701144.post-11411752810060672662015-09-06T08:00:00.000+01:002015-09-06T08:00:03.406+01:00Introduction to automating your tasks with the gulp.js build tool<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
What is Gulp?</h3>
<div>
<a href="https://avatars0.githubusercontent.com/u/6200624?v=3&s=400" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://avatars0.githubusercontent.com/u/6200624?v=3&s=400" width="200" /></a>Gulp.js is a streaming build system built on Node.js. This basically means that it can be configured to perform repetitive tasks and coding operations automatically during development. For example it can compile all your coffee scr<br />
ipt whenever your file changes, or it can minify your CSS, or maybe synchronize all your development browsers and constantly refresh them on file change. </div>
<div>
<br /></div>
<div>
Gulp uses a variety of plugins to do these tasks, and there is a plugin to do pretty much everything you'd need to do very easily. If you can't find one to do a particular operation, you can make your own ;)</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Why do I need to use a build system?</h3>
<div>
For all modern web applications (hybrid apps, sites, web backends...) there are certain tasks that are almost essential to ensure high quality. For example checking your JavaScript for errors, minifying it, concatenating it. There are also certain tasks that just make developing easier, like having your your app tested in every browser and screen size whenever your file changes or monitoring file sizes and network requests.</div>
<div>
<br /></div>
<div>
It is true that it is possible to do most of these tasks without a build system or tool in place, but using something like Gulp or Grunt is much more efficient, easy to use, fast and keeps development code to a minimum and all in one place. </div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<ol style="text-align: left;">
</ol>
</div>
<h3 style="text-align: left;">
Example Gulpfile for a typical Node.js Express app</h3>
<div>
I've created a Gulpfile for a typical Node Express project that uses coffee script and Less. It is just intended as a working example of how you can integrate everything together, so you can modify it to meet your specific project needs.</div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><a href="https://gist.github.com/Lissy93/1eb7a804b7250d714e02" target="_blank">Click here to view a (slightly over-commented) version of the above Gulpfile written in JavaScript.</a></span></div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
Setting up example project</h3>
</div>
<div>
<ol style="text-align: left;">
<li>Open the console and navigate into a new working directory</li>
<li>Run the command: <span style="color: #005fd2;">git</span><span style="background-color: white;"> </span><span style="color: #0000e6;">clone</span><span style="background-color: white;"> </span><span style="color: #0000e6;">https://github.com/Lissy93/gulp-example.git</span></li>
<li>Install the dependencies by running: <span style="color: #005fd2;">npm</span><span style="background-color: white;"> </span><span style="color: #0000e6;">install</span></li>
<li>Start the gulp script bu running: <span style="background-color: white; color: #005fd2;">gulp</span></li>
</ol>
<div>
So what the above steps should have done is: download the example project from GitHub, install all it's dependenceies found in the package.json and put them in the node_modules folder. Running gulp will then call the default task inside the gulpfile.js<br />
<br />
<h3 style="text-align: left;">
What this project does</h3>
<div>
If you look in the gulpfile.js you'll see there's a whole load of tasks that are being covered. Mainly around processing the CSS and JavaScript ready for production. You can view the full list of tasks in the readme.md for the Git repo.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Testing it out</h3>
<div>
So once you've run the above commands in the terminal, if everything worked as it should have done your web browser should have opened. If it didn't try visiting http://localhost:4000. (If there is nothing, then check the console for errors.)</div>
<div>
<br />
<h4 style="text-align: left;">
Browser Sync</h4>
</div>
<div>
If you open another browser and view the same URL you'll notice that the two browsers are in sync. So if you scroll down on one, the other will scroll, if you click a link on one all browsers will follow. This is really really useful testing your app out on a range of browsers and screen sizes all at once without having to even do any clicking, works better if you have a decent number of monitors ;) </div>
<div>
It's done using a gulp plugin called browser-sync.</div>
<div>
<br />
<h4 style="text-align: left;">
Nodemon</h4>
</div>
<div>
Secondly you'll notice if you make any changes to any of the jade templates or views it will update live, across all your browsers as you code. No refreshing needed :) (you do need to set your IDE to autosave on keyup though, which should be default if your using any half decent ide). This is done using nodemon in gulp.<br />
<br />
<h4 style="text-align: left;">
Linting, Compiling, Concatinating, Piping.... styles and scripts</h4>
</div>
<div>
Now for the coolest part, in your working directory open up the sources folder. If you edit any of the CSS, Less, JavaScript, CoffeeScript files you'll see that as it saves it creates a new version of the production code in your public directory, and refreshes the browsers accordingly. The code in the public directory is all minified and had everything else done to it to make it awesome and really efficient. Check the console for a list of all the tasks gulp has just done.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Exercises</h3>
<div>
<ol style="text-align: left;">
<li>Try creating and modifying the JavaScript and CoffeeScript files in the javascript source directory, then look in the public directry and see what they're looking like in production form.</li>
<li>In a similar way modify the CSS and Less file, you should see the changes in the browser</li>
<li>Have a read through gulpfile.js and modify the configuration to suit your project, then test it out.</li>
<li>Install a new gulp-plugin and set it up by seeing how the rest have been done</li>
<li>Try running some of the tasks individually, for example gulp clean should just clean the public directory and gulp-watch should just watch for changes and update files accordingly.</li>
</ol>
<div>
If the console freezes, cancel the process (Ctrl+C) and rerun gulp.</div>
</div>
<div>
<h3>
</h3>
</div>
</div>
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0Oxford, Oxford, UK51.7520209 -1.257726300000058551.594735899999996 -1.5804498000000584 51.9093059 -0.93500280000005853tag:blogger.com,1999:blog-155796627847701144.post-51588658574453218282015-06-22T10:56:00.000+01:002015-06-22T10:56:30.068+01:00Smart Depart App - AngelHack 2015 - HP Prize Winner<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://s3.amazonaws.com/hackathon.io/profiles/images/000/046/166/thumb/SD_Logo.png?1434892301" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://s3.amazonaws.com/hackathon.io/profiles/images/000/046/166/thumb/SD_Logo.png?1434892301" height="200" width="200" /></a></div>
Smart Depart is an app which monitors your predefined route into work, and will wake you up earlier if there are delays, ensuring your never late for meetings.<br />
<br />
<br />
Currently it is integrated with TFL, but we plan to start integrating it with National Rail, traffic and weather data too.<br />
<br />
The client is an iOS app written by Ollie, and links in with the backend which is written in Node.js<br />
Smart Depart is also integrated with HP OnDemand IDOL, where we used Sentimant analysis API.<br />
We used this tool to analyes multiple body's of Tweets, fetched from witin a given time frame and Tweeting about a particualr London Undergraound line. This enables us to determine whather the general attitude towards each undergraoud line is positive or negative and apply an extra layer of contextutal information to our application.<br />
<div>
<br /></div>
<div>
Smart Depart won 2nd overall at AngelHack and won the HP sponsor prize.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AGs1BQ7nVy8/VXQtOggpy_I/AAAAAAAAymI/4IqGYYjnrgk/s1600/download.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://3.bp.blogspot.com/-AGs1BQ7nVy8/VXQtOggpy_I/AAAAAAAAymI/4IqGYYjnrgk/s200/download.jpg" width="200" /></a></div>
</div>
<div>
<br /></div>
<div>
<div>
Hackathon.io page: <a href="http://www.hackathon.io/projects/7417">http://www.hackathon.io/projects/7417</a></div>
<div>
Trello story board: <a href="https://trello.com/b/DIE2RuFO/smart-depart">https://trello.com/b/DIE2RuFO/smart-depart</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>All the code written was open source:</b></div>
<div>
<div>
Backend: <a href="https://github.com/Lissy93/node-smart-depart">https://github.com/Lissy93/node-smart-depart</a></div>
<div>
iOS: <a href="https://github.com/OlliePoole/SmartDepart/tree/Development">https://github.com/OlliePoole/SmartDepart/tree/Development</a></div>
</div>
<div>
<br /></div>
<div>
<b>We created several open source node modules that we also published over the weekend too</b></div>
<div>
TFL Journey Planner: <a href="https://github.com/Lissy93/node-tfl-journey-planner">https://github.com/Lissy93/node-tfl-journey-planner</a></div>
<div>
Live TFL line sentiments: <a href="https://github.com/Lissy93/london-underground-live-sentiment-analysis">https://github.com/Lissy93/london-underground-live-sentiment-analysis</a></div>
<div>
<br /></div>
<div>
View web portal: <a href="http://smart-depart.herokuapp.com/">http://smart-depart.herokuapp.com/</a></div>
<div>
Sentiment Analysis: <a href="http://smart-depart.herokuapp.com/sentiment-analysis">http://smart-depart.herokuapp.com/sentiment-analysis</a></div>
<div>
<br /></div>
<div>
More about AngelHack Londno</div>
<div>
<a href="http://included.co/angelhackldn">http://included.co/angelhackldn</a></div>
<div>
<a href="http://angelhack.com/hackathon/london-2015/">http://angelhack.com/hackathon/london-2015/</a></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-nutZEU0u_VE/VYfbENKWlRI/AAAAAAAAytE/rckY11T-kiw/s1600/IMG_5673.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="213" src="http://2.bp.blogspot.com/-nutZEU0u_VE/VYfbENKWlRI/AAAAAAAAytE/rckY11T-kiw/s320/IMG_5673.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Ollie and I a few hours in</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-55026370496547703382015-06-18T19:38:00.000+01:002015-06-24T11:32:27.559+01:00Polymer and Moder Web API's<div dir="ltr" style="text-align: left;" trbidi="on">
Polymer is part of the web platform team, and it officially began 3 years ago - but last week Google announced that 1.0 has been released, and ready for production. Previously building web apps across multiple platforms and form factors was really challenging, different components are not always designed to work together - the answer to this is web components.<br />
<br />
<a href="http://2.bp.blogspot.com/-ZheSNEIxg1w/VYqHKUYCaSI/AAAAAAAAyt4/oOgpa-o6d08/s1600/download.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ZheSNEIxg1w/VYqHKUYCaSI/AAAAAAAAyt4/oOgpa-o6d08/s1600/download.jpg" /></a>Web components allow custom components to be used everywhere, and they are interoperable, meaning they add another layer of functionality above the platform but below other frameworks. Web components standardise everything.<br />
<br />
Polymer is the library for building web components, it makes it fast and easy to build web components that can be used everywhere. Polymer is not a framework - because web components are not a framework, web components with polymer are not replacing anything else, they can work with everything else.<br />
<br />
<h3>
Polymer 1.0</h3>
Polymer 1.0 is brand new, every line of code has been re-written in the past year, so that it is considerably faster, less-complex and generally and better than the previous 0.x versions. It is 3 times faster on Chrome (than previous versions), 4 times faster on mobile safari - and 30% less code overall. The whole thing is only (19kb - ) 42 kb, including all the polyfills...<br />
1.0 also has a lot of new features. Firstly shady dom which replaces the shadow polymer dom. It is simpler implementation.<br />
<br />
Another core new feature in 1.0 is teeming and styling with CSS custom properties. Web components introduced scoping and custom CSS selectors.<br />
<br />
<br />
<h3 style="text-align: left;">
Polymer Elements</h3>
<div>
Initially there were two main branches of components in polymer. The iron elements and the paper elements. Google have introduced three new branches.</div>
<div>
<br /></div>
<div>
Firstly, the Google web components. So ifc you need to add Google maps for example, use the Google Map tag. There are elements for all of Googles core web services introduced. It's a new Google SDK for the web created through these elements.</div>
<div>
<br /></div>
<div>
A second branch of elements introduced are the platinum elements, these bring together powerful features such as service workers. So dropping push notifications on to your page, or offline cashing, or anything like that - just put the approprieate element into your page.</div>
<div>
<br /></div>
<div>
The gold elements, these include mobile and web ecomerce and high quality check out processes. Such as verifying credit card details.</div>
<div>
<br /></div>
<div>
Google have also created a catalogue of polymer elements <a href="https://elements.polymer-project.org/">https://elements.polymer-project.org/</a></div>
<div>
<br />
<br />
<br />
<br />
<br />
Read Google's official blog announcement <a href="http://googledevelopers.blogspot.co.uk/2015/05/polymer-10-released.html">here</a></div>
<div>
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-49383211393690215832015-06-09T22:38:00.000+01:002015-06-22T13:56:32.109+01:00@suggest_movies Friction free social movie recommendations<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Send a tweet to @suggest_movies and receive a personalized movie recommendation back.<br />
<br />
@suggest_movies will analyse your public tweets from your Twitter profile and use personality insights powered by IBM Watson to create a profile of your character and determine what movie genre's you'd be interested in. It will then select a movie that it thinks you'd like and tweet it back to you along with a link of where you can watch it.<br />
<br />
There is also a cinema mode, so if you use the word showing, cinema, nearby.... it will use it's recommendations engine to choose you a film that is showing in a cinema near you, and also give you details and a link to book your ticket.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-BHhzDRqjBFY/VXQoPgMbbjI/AAAAAAAAylk/Q0AKmDPGLVc/s1600/mongodb-gui-tools.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a></div>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-BHhzDRqjBFY/VXQoPgMbbjI/AAAAAAAAylk/Q0AKmDPGLVc/s1600/mongodb-gui-tools.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="411" src="http://4.bp.blogspot.com/-BHhzDRqjBFY/VXQoPgMbbjI/AAAAAAAAylk/Q0AKmDPGLVc/s640/mongodb-gui-tools.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div class="separator" style="clear: both; text-align: center;">
<br /></div>
How it works</td></tr>
</tbody></table>
</div>
<br />
<div style="text-align: center;">
All the code is open source and available on GitHub <a href="https://github.com/matt-williams/suggest_movies/blob/master/bot.js">here</a></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><span style="clear: right; font-size: 13px; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><a href="https://github.com/matt-williams/suggest_movies/blob/master/bot.js" target="_blank"><img alt="Source code is on GitHub" border="0" height="200" src="http://3.bp.blogspot.com/-AGs1BQ7nVy8/VXQtOggpy_I/AAAAAAAAymE/gmw0oQ3ydEo/s200/download.jpg" width="200" /></a></span></td></tr>
<tr><td class="tr-caption" style="font-size: 13px; text-align: center;"><a href="https://github.com/matt-williams/suggest_movies/blob/master/bot.js" target="_blank">Source available on GitHub</a></td></tr>
</tbody></table>
<div style="text-align: center;">
<br /></div>
<br />
<br />
<a href="http://4.bp.blogspot.com/-MjQNtbbypyM/VXQobjGfAVI/AAAAAAAAyls/9TmRe0mD214/s1600/mongodb-gui-tools.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="113" src="http://4.bp.blogspot.com/-MjQNtbbypyM/VXQobjGfAVI/AAAAAAAAyls/9TmRe0mD214/s320/mongodb-gui-tools.png" width="320" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Oh yeah and we came second, winning way too many movies and a bit of money which was nice :)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-lmPFeL7NTIU/VYgFi5fHmvI/AAAAAAAAytU/rlw1RazFnaQ/s1600/18350247148_9b12b9d2b0_o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://4.bp.blogspot.com/-lmPFeL7NTIU/VYgFi5fHmvI/AAAAAAAAytU/rlw1RazFnaQ/s400/18350247148_9b12b9d2b0_o.jpg" width="400" /></a></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-f-kSi0YZwxc/VYgFtf1C47I/AAAAAAAAytk/8nqDiG7g7lQ/s1600/18012519303_d54d340014_o.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="http://4.bp.blogspot.com/-f-kSi0YZwxc/VYgFtf1C47I/AAAAAAAAytk/8nqDiG7g7lQ/s400/18012519303_d54d340014_o.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Presenting <complete id="goog_1323455505">@Suggest_Movies</complete></td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-N4DiNzVVt4k/VYgFqiYI2zI/AAAAAAAAytc/R4-jD-3Vc34/s1600/18635431731_f0fc6d84e9_o.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="http://3.bp.blogspot.com/-N4DiNzVVt4k/VYgFqiYI2zI/AAAAAAAAytc/R4-jD-3Vc34/s400/18635431731_f0fc6d84e9_o.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The live demo</td></tr>
</tbody></table>
<br />
<br />
<br />
<a class="twitter-timeline" data-widget-id="607507979072622592" href="https://twitter.com/suggest_movies">Tweets by @suggest_movies</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br />
<br />
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-69572703205955358512015-06-05T20:59:00.000+01:002015-06-05T21:00:45.020+01:00Chilton 100<div dir="ltr" style="text-align: left;" trbidi="on">
The Chilton 100 was a 122km /177km sportive in the Chilton Hills<br />
<a href="http://humanrace.co.uk/events/cycling/chiltern-100-sportive">http://humanrace.co.uk/events/cycling/chiltern-100-sportive</a><br />
<br />
<a href="http://4.bp.blogspot.com/-Bc-Xp_UrPmQ/VXH_IdkVwQI/AAAAAAAAyis/XRBF2A4mn2M/s1600/CHS15_CHB_008705.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="http://4.bp.blogspot.com/-Bc-Xp_UrPmQ/VXH_IdkVwQI/AAAAAAAAyis/XRBF2A4mn2M/s400/CHS15_CHB_008705.jpg" width="265" /></a><a href="https://2.bp.blogspot.com/-MJtmOn3EtQM/VXH_AdH4h9I/AAAAAAAAyik/zbR63OJVIBs/s1600/Untitled.png" imageanchor="1" style="clear: right; display: inline !important; margin-bottom: 1em; margin-left: 1em; text-align: center;"><img border="0" height="301" src="http://2.bp.blogspot.com/-MJtmOn3EtQM/VXH_AdH4h9I/AAAAAAAAyik/zbR63OJVIBs/s320/Untitled.png" width="320" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-W9_Ip_pc_3I/VXH_KKCkY8I/AAAAAAAAyi0/C9jFtv8VIr8/s1600/20150531_171208.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="225" src="http://3.bp.blogspot.com/-W9_Ip_pc_3I/VXH_KKCkY8I/AAAAAAAAyi0/C9jFtv8VIr8/s400/20150531_171208.jpg" width="400" /></a></div>
<br />
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-71097044424582451672015-05-31T21:00:00.000+01:002015-06-07T12:34:13.002+01:00Google IO - What's new in Android<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://4.bp.blogspot.com/-ZUIfUpTsPGw/VXQrz2OaY8I/AAAAAAAAyl4/7pjt9FDb_gQ/s1600/googleio2015-100567623-primary.idge.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="213" src="http://4.bp.blogspot.com/-ZUIfUpTsPGw/VXQrz2OaY8I/AAAAAAAAyl4/7pjt9FDb_gQ/s320/googleio2015-100567623-primary.idge.jpg" width="320" /></a>At Google IO 2015 some exciting new announcements were made about new features in the Android operating system for developers.<br />
<br />
Developers can now build apps for Android M by downloading the developer preview (API 22) and latest SDK. There will be a couple of versions of previews which will be improved before the final version is released.<br />
<br />
<h3 style="text-align: left;">
Permissions</h3>
<div>
In Android M run-time permissions have been introduced. What this means is that the user won't have to accept a wall of permissions when they first install and application, instead they'll be asked to grant permission to that app to access a specific feature only when it's needed, and of course it'll remember the users choice so they'll only have to do it once for each permission for each app.<br />
The user can also go into settings and view and adjust app permissions for all installed applications sorted both by app and also by a particular permission too which is handy. Basically everything users have ever wanted with permissions delivered. This will only be available for apps developed for Android M though. Legacy apps will remain the same, by asking all permissions up front on install, but they can still be adjusted from the phone settings. This means that your app must be tested in M to check all permissions work.<br />
<br />
<h3 style="text-align: left;">
Voice Interaction</h3>
<div>
VoiceInteractor allows you to interact with the voice input system - there was already the capability for the user to launch an intent and use voice, but now with the voice category intent filter, so creating voice interaction request is really easy</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Finger Printing</h3>
<div>
There is a new finger print manager in the API which allows for really easy integration of finger print authentication. Your app will still contain all the UI, and the API does all the work on the backend alternativley you can use the existing keyguard manager to show the lock screen to authenticate the user with their pin, code or whatever they set up.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Backup</h3>
<div>
In Android M by default all app data will be backed up to the users Google account. The user can opt out of this, as can the developer don't use the <full-backup> tags. Everything else related to user data was already backed up in previous versions of Android and will continue to be.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Google Play Services</h3>
<div>
Version 7,5 is out, one of the most exciting features of this is GCM network manager - this is every cool way of making sure that your network requests are going to be much more optimal for the device, even for older versions (unlike in L where the app had to have this explicitly written in). There's also a few more new features, like maps available for Android wear devices.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Power</h3>
<div>
Another focus on M is to improve battery life. A new feature called Doze has been implemented which uses the devices accelarometer to detect if the device has not been moved for a long period of time (like hours to days) and exponentially decreases the number of network requests and scheduled app processes until the device is moved. If there are real-time alarms or high priority tasks the device will be woken and they will have priority. As soon as the device is plugged in or moved Doze will turn off. Same will happen with apps you don't use (for a few days or weeks), less resources will be allocated to their background processes.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Data Binding</h3>
<div>
This idea obviously has been around on other platforms for a while but it's now being integrated with Android. Data binding is the ability to connect the data model to some of the UI elements in the application. Data binding is cool.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
UI Features</h3>
<div>
The Android design support library has been updated with the new material design, with emmbed better practices. And a f-a-b button so developers don't have to create their own circles with a shadow anymore. Updates to recycler view and web view.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Notications</h3>
<div>
Now notifications can contain a resource id for their icon, this is cool because for the first time you can use a bitmap, you no longer need a million assets for each possible condition, they can now be generated on the go, like downloading an asset from your web back-end.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Text</h3>
<div style="text-align: left;">
Better text selection, (use ActionMode.TYPE_FLOATING in your code) for a floating pallet of icons, that'll be easier for users. The improved ability to process text. Also better formatted text, finally.</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
App Links</h3>
<div>
In Android M will now be able to distinguish between app and web links made by the same developer securely. Very simple to set up in manifest and on server with auto verify certificates and app links, so links to those urls will open in your app. As with everything else in M the user can take controll and modify this in settings. </div>
<div>
<br /></div>
<h3 style="text-align: left;">
Direct Share</h3>
<div>
Allowing the user to share more easily. Provide information with intent filter, with a certain intent return list of possible targets</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Better Stylus Support</h3>
<div>
Stylus support has been around for a while, but it has been greatly improved in M. You can create a datastream to receive preasure and button data over BLE protocol Android can fuse this with touch data on the glass, what this means is you can build a bluetooth stylus that then records as a stylus on any app on M that supports stylus - no special hardware, no app modifications, no nothing complicated, so interrogating stylus data = very easy.</div>
<div>
There will also be some motion events added in M to help deal with stylus'es like ACTION_BUTTON_RELEASE , BUTTON_STYLUS_SECONDRY.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Graphics and Media</h3>
<div>
RenderScript Compute: </div>
<div>
BLAS intrinsics (... really big matrix'es) </div>
<div>
Allocationless launches (size of kernal seperate from data)</div>
<div>
ScriptGroup (more dependancy types, better compiler optimisations)</div>
<div>
<br /></div>
<div>
Also imporovements to camera API, even better flash light no longer linked to camera</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Alpha Optimisation</h3>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
MIDI</h3>
<div>
android.media.midi package has been introduced. You could already do MIDI, if you did it manualy. Now this new package will give the developer the bytestring that will be able to send and receive the not information.<br />
<br />
<h3 style="text-align: left;">
Higher Res Audio</h3>
</div>
<div>
Now single precision float (rather the 16-bit sample of before) Multil chanel UB digital audio</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Android Studio 1.3</h3>
<div>
Integrated testing support, tooling, new language support, more support for vector drawables, Android ndk development. Also Systray has been cleaned up.<br />
<br />
<br /></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<br /></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com1tag:blogger.com,1999:blog-155796627847701144.post-54167178665633511232015-05-25T13:37:00.001+01:002015-05-25T13:37:23.064+01:00Introduction to react.js<div dir="ltr" style="text-align: left;" trbidi="on">
React is a JavaScript framework built at Facebook, it was built to answer the question "How should we structure JavaScript applications".<br />
There are a lot of JavaScript frameworks that try to answer this question, most of them are MVC based (or MVVM or MVW) - basically they're all based around models - which are just observable objects that have some events api that allows you to subscribe to some changes on that object. So developers set up bi-directional data-binding that allow you to subscribe to changes on you r model, so whenever something changes you can mutate and update your view.<br />
<br />
React is a JavaScript library for building user interfaces, you get all the good parts of a complete render, but without the downsides such as performance and loss of data.<br />
<br />
At the heart of react is, declarative components - describing what components look at at any point in time<br />
<br />
<h3 style="text-align: left;">
Initial Render</h3>
There is no explicit data binding, in react we just define <b>one</b> render function, and the purpose of this render function is to describe what your view looks like in any point in time. It returns a representation of your view. We recursive call render to build up this hierarchy. When we want to generate the mark-up of this representation for the first time, we take the representation and iterate over it generate a string and inject it into the document. This does something called two-pass rendering which is generating the string, then later, after the string is injected into the document we attach the event handlers at the top-level, which exposes some really interesting opportunities, since your generating your string somewhere separate from where your hooking up your events, you can render on the server.<br />
<br />
<h3 style="text-align: left;">
Update Rendering</h3>
Instead of mutation for updating react uses a process called reconciliation, the purpose of this is to keep you UI up-to-date as your data changes, automatically updates your views and DOM. The render function that does the initial rendering and returns a string representation of what our components should look like at that point in time, and react <b>compares</b> that with the current DOM and finds all the differences, based on those differences creates some DOM representations of just the relevant parts and updates the view.<br />
<br />
<h3 style="text-align: left;">
Building DOM Representations</h3>
Since the HTML is defined in JavaScript it would get a bit hard to understand for larger pages with a lot of nesting, there would be curly braces everywhere, so for that reason JSX syntax is used to define the elements. This is very similar to other templating engines and uses ordinary HTML-type syntax.<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
This post is based on information given by Tom Occhino from Facebook on his series about react.js</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com28tag:blogger.com,1999:blog-155796627847701144.post-74695862480046024472015-05-25T10:49:00.001+01:002015-05-25T10:49:20.458+01:00How to create a web service to send emails for you Android, iOS or web application<div dir="ltr" style="text-align: left;" trbidi="on">
Since it's a common task to have to send emails from your app, this post outlines the quickest way to get a mail service up and running using server side JavaScript, Parse and Mandrill. No JavaScript or web coding experience is needed.<br />
<br />
<h3 style="text-align: left;">
Set up Parse</h3>
1. Go to <a href="http://parse.com/">parse.com</a> and create a cloud code app following the process<br />2. Download <a href="https://www.parse.com/downloads/windows/console/parse.zip">https://www.parse.com/downloads/windows/console/parse.zip</a><br />3. Extract the zip<br />4. Run parse console<br />5. cd into your working directory<br />6. run the command parse new <name-of-project><br />7. make changes to your code if you like<br />8. run the command parse deploy <br />done<br /><br /><br /><h3>
Set up Mandrill</h3>
<div style="text-align: left;">
Mandrill is a is an email infrastructure service by MailChimp. It's free to use up to a limit of 12,000 emails per month (and 250 per hour) and it's easy to set up.</div>
<div style="text-align: left;">
Head over to https://mandrill.com/ and sign up to get an API key.</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
The Code</h3>
<div>
Inside your new Parse project, there should be a folder called cloud, cd into that and create a file called main.js (if it doesn't already exist).</div>
<div>
Paste the following code into cloud/main.js</div>
<div>
<br /></div>
<div>
<pre>Parse.Cloud.define(<span style="color: #2a00ff;">"</span><span style="color: #2a00ff;">sendMail</span><span style="color: #2a00ff;">"</span>, <span style="color: #7f0055; font-weight: bold;">function</span>(request, response) {
<span style="color: #7f0055; font-weight: bold;">var</span> Mandrill = require(<span style="color: #2a00ff;">'</span><span style="color: #2a00ff;">mandrill</span><span style="color: #2a00ff;">'</span>);
Mandrill.initialize(<span style="color: #2a00ff;">'</span><span style="color: #2a00ff;"><Manddrill_api_key></span><span style="color: #2a00ff;">'</span>);
Mandrill.sendEmail({
message: {
text: request.params.text,
subject: request.params.subject,
from_email: request.params.fromEmail,
from_name: request.params.fromName,
to: [{
email: request.params.toEmail,
name: request.params.toName
}]
},
async: <span style="color: #7f0055; font-weight: bold;">true</span>
}, {
success: <span style="color: #7f0055; font-weight: bold;">function</span>(httpResponse) {
console.<span style="color: #7f0055; font-weight: bold;">log</span>(httpResponse);
response.success(<span style="color: #2a00ff;">"</span><span style="color: #2a00ff;">Email sent!</span><span style="color: #2a00ff;">"</span>);
},
error: <span style="color: #7f0055; font-weight: bold;">function</span>(httpResponse) {
console.error(httpResponse);
response.error(<span style="color: #2a00ff;">"</span><span style="color: #2a00ff;">ERROR - mail failed to send</span><span style="color: #2a00ff;">"</span>);
}
});
});</pre>
</div>
<div>
<br /></div>
<div>
And change the <api key> to your Mandrill API key (obviously withoiut the pointy brackets)</div>
<div>
Once this id done, run <span style="font-family: Courier New, Courier, monospace;">parse deploy</span> to push your work to parse.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Calling your service</h3>
<div>
Below is all the paramaters you'll need to send emails from your application.</div>
<div>
<br /></div>
<div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><b>URL:</b></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;">https://api.parse.com/1/functions/sendMail</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"> </span></span></div>
<table border="1" cellpadding="0" cellspacing="0" style="background-color: white; border-collapse: collapse; border-style: none; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px;"><tbody>
<tr><td style="background-color: #d9d9d9; border: 1pt solid windowtext; padding: 0px 5.4pt; width: 148.45pt;" valign="top" width="247"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-size: small;"><span style="font-size: 12pt;"><b>URL Parameter Key</b></span></span></span></span></div>
</td><td style="background-color: #d9d9d9; border-color: windowtext; border-style: solid solid solid none; border-width: 1pt; padding: 0px 5.4pt; width: 283.46pt;" valign="top" width="472"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-size: small;"><span style="font-size: 12pt;"><b>Value</b></span></span></span></span></div>
</td></tr>
<tr><td style="border-color: windowtext; border-style: none solid solid; border-width: 1pt; padding: 0px 5.4pt; width: 148.45pt;" valign="top" width="247"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"><u>Content-Type</u></span></span></span></div>
<div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> </span></span></span></div>
</td><td style="border-bottom-color: windowtext; border-bottom-width: 1pt; border-right-color: windowtext; border-right-width: 1pt; border-style: none solid solid none; padding: 0px 5.4pt; width: 283.46pt;" valign="top" width="472"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;">application/json</span></span></span></div>
<div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> </span></span></span></div>
</td></tr>
<tr><td style="border-color: windowtext; border-style: none solid solid; border-width: 1pt; padding: 0px 5.4pt; width: 148.45pt;" valign="top" width="247"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"><u>Accept</u></span></span></span></div>
<div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> </span></span></span></div>
</td><td style="border-bottom-color: windowtext; border-bottom-width: 1pt; border-right-color: windowtext; border-right-width: 1pt; border-style: none solid solid none; padding: 0px 5.4pt; width: 283.46pt;" valign="top" width="472"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;">application/json</span></span></span></div>
<div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> </span></span></span></div>
</td></tr>
<tr height="45" style="height: 27pt;"><td style="border-color: windowtext; border-style: none solid solid; border-width: 1pt; height: 27pt; padding: 0px 5.4pt; width: 148.45pt;" valign="top" width="247"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"><u>X-Parse-Application-Id</u></span></span></span></div>
</td><td style="border-bottom-color: windowtext; border-bottom-width: 1pt; border-right-color: windowtext; border-right-width: 1pt; border-style: none solid solid none; height: 27pt; padding: 0px 5.4pt; width: 283.46pt;" valign="top" width="472"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"><Your_parse_application_id></span></span></span></div>
</td></tr>
<tr height="45" style="height: 27.4pt;"><td style="border-color: windowtext; border-style: none solid solid; border-width: 1pt; height: 27.4pt; padding: 0px 5.4pt; width: 148.45pt;" valign="top" width="247"><div style="margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"><u>X-Parse-REST-API-Key</u></span></span></span></div>
</td><td style="border-bottom-color: windowtext; border-bottom-width: 1pt; border-right-color: windowtext; border-right-width: 1pt; border-style: none solid solid none; height: 27.4pt; padding: 0px 5.4pt; width: 283.46pt;" valign="top" width="472"><div style="margin: 0px;">
<span style="font-family: Courier New;"><span style="font-size: 14.6666669845581px;"><Your_parse_rest_api_key></span></span></div>
</td></tr>
</tbody></table>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"> </span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"> </span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><b>Raw JSON body:</b></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;">{ </span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> "toEmail":"someone@hotmail.com",</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> "toName":"jane doe",</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> "fromEmail":"someone_else@live.com",</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> "fromName":"john smith",</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> "text":"this is the email body for the main message",</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;"> "subject":"this is the email subject"</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"><span style="font-family: Courier New;">}</span></span></span></div>
<div style="background-color: white; color: #212121; font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; font-size: 15px; margin: 0px;">
<span style="font-family: Calibri,sans-serif; font-size: x-small;"><span style="font-size: 11pt;"> </span></span></div>
</div>
<div>
<br /></div>
<div>
You will probably want to test this out before you include it in your app. A good way to do this is to use the PostMan client availible free on the Chrome store (similar versions will be out there for Firefox and Safari). </div>
<div>
<br /></div>
<div>
Fill in the form so that it looks like the image below, and you should see your new email service working :)</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-pbWNdlgU-rk/VWLv_jhgt7I/AAAAAAAAx9I/eESZexvlGqY/s1600/image001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="536" src="http://2.bp.blogspot.com/-pbWNdlgU-rk/VWLv_jhgt7I/AAAAAAAAx9I/eESZexvlGqY/s640/image001.png" width="640" /></a></div>
<div>
<br /></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-24016055847499981602015-05-17T16:33:00.000+01:002015-05-17T16:38:11.976+01:00Vitality Run Hackney 2015 (21km)<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-sRXic5QDHv8/VVizk16rYpI/AAAAAAAAx4s/Fe8CozaK6NI/s1600/20150510_091205.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-sRXic5QDHv8/VVizk16rYpI/AAAAAAAAx4s/Fe8CozaK6NI/s320/20150510_091205.jpg" width="180" /> </a><a href="http://2.bp.blogspot.com/-LumPcikjkeA/VVizltRAEtI/AAAAAAAAx5E/2NubW-K3zgc/s1600/20150510_115031.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-LumPcikjkeA/VVizltRAEtI/AAAAAAAAx5E/2NubW-K3zgc/s320/20150510_115031.jpg" width="180" /><span style="text-align: left;"> </span></a><a href="https://2.bp.blogspot.com/-osZOGfXuerY/VViz3k0SuhI/AAAAAAAAx5U/dRLPMlxgXpQ/s1600/20150510_154031.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-osZOGfXuerY/VViz3k0SuhI/AAAAAAAAx5U/dRLPMlxgXpQ/s320/20150510_154031.jpg" width="180" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /><a href="http://2.bp.blogspot.com/-IGUm9WrWrSo/VVizk_PVtrI/AAAAAAAAx40/eTipwwHX65U/s1600/20150510_091142.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
A fast and flat half marathon through Hackney (East London), with 13,000 runners and a route including the Olympic park, Hackeny Empire and some of the green spaces of Hackeny marshes and Victoria park.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-RE6gHzrZT1g/VVizk_e6dkI/AAAAAAAAx4w/H7Y1PD5ds4A/s1600/20150510_085402.jpg" imageanchor="1" style="display: inline !important; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="180" src="http://4.bp.blogspot.com/-RE6gHzrZT1g/VVizk_e6dkI/AAAAAAAAx4w/H7Y1PD5ds4A/s320/20150510_085402.jpg" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0London Borough of Hackney, Greater London, UK51.551795299999988 -0.06464370000003327751.472802299999991 -0.22600520000003327 51.630788299999985 0.096717799999966714tag:blogger.com,1999:blog-155796627847701144.post-75461749906595446742015-05-14T15:03:00.000+01:002016-10-21T12:55:49.317+01:00Digital Bucket - Charity Donation Collection App<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://4.bp.blogspot.com/-ZS4O7ne2JW4/VYLPZ2z94YI/AAAAAAAAysY/1vj3ld_2jgQ/s1600/appicon_100.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-ZS4O7ne2JW4/VYLPZ2z94YI/AAAAAAAAysY/1vj3ld_2jgQ/s1600/appicon_100.png" /></a>During the weekend of BattleHack I worked in a team developing a Digital Bucket Solution, a simple application that allows people to donate to charity bucket collectors even when they don't have any loose change, using their smart phone.<br />
<br />
The backend was written in Node js and has an iOS client. It supports Apple Pay and all of BrainTree's services, it also uses iBeacons for detecting when you;v approached a charity collector.<br />
<br />
<h3 style="text-align: left;">
<a href="https://drive.google.com/open?id=0B7IJacUZIMLhc1B4ZTNLUlZTbXc&authuser=0" target="_blank">Source Code for back-end</a></h3>
<h3>
<a href="http://vast-crag-4177.herokuapp.com/" target="_blank">Web portal demo</a></h3>
<br />
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-77844244393648309672015-05-05T23:02:00.000+01:002015-05-05T23:02:00.487+01:00Built my first PC!<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-D3kaJe03U0M/VUabXqT5pwI/AAAAAAAAxuk/i4cFdnwNRyM/s1600/IMG_7181.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-D3kaJe03U0M/VUabXqT5pwI/AAAAAAAAxuk/i4cFdnwNRyM/s1600/IMG_7181.JPG" height="320" width="247" /></a><a href="http://1.bp.blogspot.com/-OPF27GKxMX8/VUabW7np1iI/AAAAAAAAxuc/GEnnRjkS9OQ/s1600/20150502_125852.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-OPF27GKxMX8/VUabW7np1iI/AAAAAAAAxuc/GEnnRjkS9OQ/s1600/20150502_125852.jpg" height="180" width="320" /></a></div>
<br />
<span style="background-color: white; color: #141823; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size: 13px; line-height: 18px;">I have finished building my computer!!!!</span><br />
<span style="background-color: white; color: #141823; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size: 13px; line-height: 18px;">Christopher's got the AMD FX-8350 8 core 4 GHz processor, 16 GB of DDR3 1866MHz RAM, 2TB HDD and 240GB SSD, 2GB graphics card ( the Asus AMD Radeon R7 250X) and the Asus M5A97 EVO R2.0 MB </span><br />
<span style="background-color: white; color: #141823; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size: 13px; line-height: 18px;">and LED lights because LED lights are COOL!!!</span><br />
<span style="background-color: white; color: #141823; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size: 13px; line-height: 18px;"><br /></span><span style="background-color: white; color: #141823; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-e5DmFiVgFr8/VUabW-Bl2bI/AAAAAAAAxuY/bEtYB4e2bkk/s1600/20150502_130158.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-e5DmFiVgFr8/VUabW-Bl2bI/AAAAAAAAxuY/bEtYB4e2bkk/s1600/20150502_130158.jpg" height="320" width="179" /></a></div>
<a href="http://3.bp.blogspot.com/-KXijmZSz1gU/VUabXXWoBvI/AAAAAAAAxuo/AycIRY_y5L4/s1600/IMG_7173.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-KXijmZSz1gU/VUabXXWoBvI/AAAAAAAAxuo/AycIRY_y5L4/s1600/IMG_7173.JPG" height="266" width="400" /></a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-PkhE1EjtGak/VUabZ2Xq7DI/AAAAAAAAxvA/E1E00GaulJo/s1600/IMG_7209.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-PkhE1EjtGak/VUabZ2Xq7DI/AAAAAAAAxvA/E1E00GaulJo/s1600/IMG_7209.JPG" height="400" width="266" /></a><a href="http://3.bp.blogspot.com/-mL4gQrpMn1E/VUabYAGVPXI/AAAAAAAAxu8/AV0tCxnyU7w/s1600/IMG_7192.JPG" imageanchor="1" style="clear: right; display: inline !important; margin-bottom: 1em; margin-left: 1em; text-align: left;"><img border="0" src="http://3.bp.blogspot.com/-mL4gQrpMn1E/VUabYAGVPXI/AAAAAAAAxu8/AV0tCxnyU7w/s1600/IMG_7192.JPG" height="400" width="276" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-VQxtjsSfGyo/VUabYz43XwI/AAAAAAAAxuw/Aptx2vyR7rw/s1600/IMG_7205.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-VQxtjsSfGyo/VUabYz43XwI/AAAAAAAAxuw/Aptx2vyR7rw/s1600/IMG_7205.JPG" height="400" width="266" /></a><a href="http://1.bp.blogspot.com/-bAHHXKtmrGg/VUabZDWllAI/AAAAAAAAxu4/Ol5vMBHzjDk/s1600/IMG_7206.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-bAHHXKtmrGg/VUabZDWllAI/AAAAAAAAxu4/Ol5vMBHzjDk/s1600/IMG_7206.JPG" height="400" width="266" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-mTMnCAuTsgs/VUabaP3LGPI/AAAAAAAAxvU/pqmGsSXiRMg/s1600/specs.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-mTMnCAuTsgs/VUabaP3LGPI/AAAAAAAAxvU/pqmGsSXiRMg/s1600/specs.PNG" height="72" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="twitter-tweet" lang="en">
<div dir="ltr" lang="en" style="text-align: center;">
Finished building my PC! <a href="http://t.co/tvI1JXqdM3">pic.twitter.com/tvI1JXqdM3</a></div>
<div style="text-align: center;">
— Alicia Sykes (@Lissy_Sykes) <a href="https://twitter.com/Lissy_Sykes/status/594607249055752193">May 2, 2015</a></div>
</blockquote>
<script async="" charset="utf-8" src="//platform.twitter.com/widgets.js"></script>
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://www.facebook.com/photo.php?fbid=10205238773501318&set=a.1011332436006.1882.1005849502&type=1&theater">https://www.facebook.com/photo.php?fbid=10205238773501318&set=a.1011332436006.1882.1005849502&type=1&theater</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-90221263930611076012015-05-03T23:01:00.001+01:002015-05-03T23:02:06.161+01:00Learn HTML5 in 40 minutes tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Since EVERYTHING front-end related on the web is coded in HTML and HTML5 has a bunch of new features to make your web content more interactive and semantic, it is the language you need to know before you can do anything else web-related.<br />
<br />
These videos should give you an overview of what HTML5 is and how you can use it to create web pages.<br />
<br />
There are 6 videos in the series....<br />
<br />
<br /></div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/videoseries?list=PLSsukFJd1LDh-nFgFeWMH3HDyf4qay7Tm" width="560"></iframe>
<br />
<br />
More resources relating to the videos above can be found at this URL:<br />
<a href="http://web-dev.as93.net/html5-introduction">http://web-dev.as93.net/html5-introduction</a><br />
<br />
Enjoy :)</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com1tag:blogger.com,1999:blog-155796627847701144.post-77952516630143966292015-05-03T22:56:00.004+01:002016-10-21T12:55:49.321+01:00BattleHack London 2015 @ Tobacco Docks<div dir="ltr" style="text-align: left;" trbidi="on">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-JVdrtoCq_W4/VUaYz4sYYMI/AAAAAAAAxt4/LJdhIuEaigA/s1600/11140094_10204252609422975_7467231814857241995_n.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-JVdrtoCq_W4/VUaYz4sYYMI/AAAAAAAAxt4/LJdhIuEaigA/s1600/11140094_10204252609422975_7467231814857241995_n.jpg" height="240" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">My team </td></tr>
</tbody></table>
BattleHack 2015 was the biggest London BattleHack so far, held at the Tobacco Docks.<br />
<br />
Was a great weekend, my only disappointment was that I did not win an axe :(<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-TZ5tcoJ-97M/VUaYz19RRpI/AAAAAAAAxuM/sUAtbmICygA/s1600/CDcBv7GWMAArxSR.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/-TZ5tcoJ-97M/VUaYz19RRpI/AAAAAAAAxuM/sUAtbmICygA/s1600/CDcBv7GWMAArxSR.jpg" height="320" width="240" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Swag</td></tr>
</tbody></table>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-9L6xYZnirF0/VUaY0l_IYyI/AAAAAAAAxt8/V7RnC494M2Y/s1600/CDgfkX6WoAApsHv.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-9L6xYZnirF0/VUaY0l_IYyI/AAAAAAAAxt8/V7RnC494M2Y/s1600/CDgfkX6WoAApsHv.jpg" height="180" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Stickers</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-qD5hgbbmrnk/VUaYzyipE_I/AAAAAAAAxt0/WtLeedaEiys/s1600/CDgckAFVEAIvKuB.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-qD5hgbbmrnk/VUaYzyipE_I/AAAAAAAAxt0/WtLeedaEiys/s1600/CDgckAFVEAIvKuB.jpg" height="320" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Caffiine</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://pbs.twimg.com/media/CDiYKF2WAAAhtuP.jpg:large" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://pbs.twimg.com/media/CDiYKF2WAAAhtuP.jpg:large" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The winners</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0tag:blogger.com,1999:blog-155796627847701144.post-11727841512419356022014-11-14T13:10:00.002+00:002016-10-21T12:55:49.304+01:00Apps World 2014<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://4.bp.blogspot.com/-ZgBmQ8mq7iI/VGT_Q8MQKPI/AAAAAAAAvHc/buPCHGuWGq0/s1600/B2V6wuUCQAA62MG.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="178" src="https://4.bp.blogspot.com/-ZgBmQ8mq7iI/VGT_Q8MQKPI/AAAAAAAAvHc/buPCHGuWGq0/s320/B2V6wuUCQAA62MG.jpg" width="320" /></a>Apps World 2014 in London was great this year, with over 1,600 attendees it was held at the ExCel, and had loads of good speakers and sponsors.<br />
<br />
My favourite talks from day 2 were: first a talk titled <i>responsive website or native app</i> which was given by Geoff Parkhurst who's the CTO of Lovehoney, he weighed up the advantages and disadvantages of each side very nicely. This I found particularly interesting since it's relevant to work at the moment.<br />
<br />
<a href="https://1.bp.blogspot.com/-xBImuRGkCv8/VGUBCnGp6aI/AAAAAAAAvIA/3eVLwHX6QEI/s1600/20141113_114709.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="225" src="https://1.bp.blogspot.com/-xBImuRGkCv8/VGUBCnGp6aI/AAAAAAAAvIA/3eVLwHX6QEI/s400/20141113_114709.jpg" width="400" /></a>Another great talk was given by Grant Allen from Google, on <i>extreme wearables</i>. This image (sorry for the bad quality photo) actually shows something really cool. the axis on the left is the % of people who are awake, the axis on the bottom is the time of night. As you can see, between 10pm and 1am, the % of people awake falls, since they've gone to bed, however at 3:30 AM, it suddenly rises, this was due to a huge earth quake that night. Each different coloured line is a different city, and this data could potentially be used to give a short warning to an earth quake to people in further away cities. This particular data came from JawBone, but any basic activity tracker would have recorded similar results, and would have the scope to implement this.<br />
<br />
I also attended several other very interesting talks seen <a href="https://www.apps-world.net/europe/agenda/tracks/html5-a-web-apps">here</a><br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-vk35-bg4mts/VGT--zaCvTI/AAAAAAAAvHU/azfTb3mjdkE/s1600/B17J8afIcAEvL3x.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://3.bp.blogspot.com/-vk35-bg4mts/VGT--zaCvTI/AAAAAAAAvHU/azfTb3mjdkE/s320/B17J8afIcAEvL3x.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-WtmjYgtZs-4/VGT_aITDwAI/AAAAAAAAvHs/nu4KTPNKDyE/s1600/20141112_122020.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://3.bp.blogspot.com/-WtmjYgtZs-4/VGT_aITDwAI/AAAAAAAAvHs/nu4KTPNKDyE/s320/20141112_122020.jpg" width="180" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-isIIGnTGlhI/VGT_aXRFsnI/AAAAAAAAvHo/u7vJtwlWh1Q/s1600/20141112_123850.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-isIIGnTGlhI/VGT_aXRFsnI/AAAAAAAAvHo/u7vJtwlWh1Q/s320/20141112_123850.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Kk0OFfBgJvU/VGT_aFmgfyI/AAAAAAAAvHk/KSU5IPGI_1s/s1600/B2VQfDHCAAA7ILq.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://4.bp.blogspot.com/-Kk0OFfBgJvU/VGT_aFmgfyI/AAAAAAAAvHk/KSU5IPGI_1s/s320/B2VQfDHCAAA7ILq.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0Excel London, London E16 1XL, UK51.506543099999988 0.03024949999996806630.966068099999987 -41.454125500000032 72.047018099999988 41.514624499999968tag:blogger.com,1999:blog-155796627847701144.post-19700966477635296242014-11-03T01:33:00.001+00:002016-10-21T12:55:49.307+01:00Study Time - Developed app to reduce distractions while studying<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="clear: both; text-align: left;">
Introduction</h3>
<div style="clear: both; text-align: center;">
<span style="text-align: left;"><b><span style="font-size: large;"><a href="https://play.google.com/store/apps/details?id=net.as93.studytime" target="_blank">Study Time</a> is an open source Android application to reduce distractions while studying</span></b>.</span></div>
<a href="http://2.bp.blogspot.com/-3bGY56DxD28/VFbZA6VlwgI/AAAAAAAAuxQ/cvEiHiykAgc/s1600/promo%2Bgraphic.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-3bGY56DxD28/VFbZA6VlwgI/AAAAAAAAuxQ/cvEiHiykAgc/s1600/promo%2Bgraphic.png" /></a>Any student will know that mobile phones are a massive distraction to studying, but also have some utilities that help you get your work done, such as calculator or Wikipedia. This weekend I developed an application that aims to reduce the distractions cause by your Android device.<br />
<br />
The interface is simple, you enter the amount of time you need to stay focused for, and press start. Study mode will mute all notifications and disable home and back buttons. It's not immediately easy to get out of the app once your in study mode, though you do still have access to core features such as emergency dialer, time... Once the timer reaches zero you once again have full access to your phone.<br />
<br />
<h3 style="text-align: left;">
Technical Details</h3>
<div>
The app is built as a launcher that temporarily overrides the users default launcher. This will ensure that if they press the home button they can not close the app easily. There is also a timer that will run once study mode is enabled.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Links</h3>
<div>
<a href="http://3.bp.blogspot.com/-fHnDzefz9Dk/VFbZHUaY9gI/AAAAAAAAuxY/EKt2BOiGxXk/s1600/hi-res-icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-fHnDzefz9Dk/VFbZHUaY9gI/AAAAAAAAuxY/EKt2BOiGxXk/s1600/hi-res-icon.png" height="200" width="200" /></a><a href="https://play.google.com/store/apps/details?id=net.as93.studytime" target="_blank"><b>Google Play</b></a> - the app is available to download for free from the Play store</div>
<div>
<b><a href="https://github.com/Lissy93/Study-Time" target="_blank">GitHub </a></b>- all code is open source and available on GitHub along with graphics</div>
<div>
Amazon App Store - [<i>coming soon to Amazon</i>]</div>
<div>
<b><a href="https://www.youtube.com/watch?v=uu9lfK4OvTk" target="_blank">YouTube </a></b>- promo video</div>
<div>
<b><a href="http://josephsykes.co.uk/Websites/Study%20Time/" target="_blank">Web page </a></b></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Screen Shots</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-O1KaXCO4CUA/VFbX0Ydm9AI/AAAAAAAAuwY/Kjw505PCN18/s1600/Screenshot_2014-11-02-21-17-51.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-O1KaXCO4CUA/VFbX0Ydm9AI/AAAAAAAAuwY/Kjw505PCN18/s1600/Screenshot_2014-11-02-21-17-51.png" height="400" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Start Screen</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-khK-lz09BG4/VFbX0dupYXI/AAAAAAAAuwU/imhgiaY_Yaw/s1600/Screenshot_2014-11-02-21-22-25.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" src="http://1.bp.blogspot.com/-khK-lz09BG4/VFbX0dupYXI/AAAAAAAAuwU/imhgiaY_Yaw/s1600/Screenshot_2014-11-02-21-22-25.png" height="400" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Timer Screen</td></tr>
</tbody></table>
<br />
Additional Views<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-IGGN-f818VQ/VFbYGlgvFYI/AAAAAAAAuwk/0r158btJTjs/s1600/Screenshot_2014-11-02-21-19-46.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-IGGN-f818VQ/VFbYGlgvFYI/AAAAAAAAuwk/0r158btJTjs/s1600/Screenshot_2014-11-02-21-19-46.png" height="200" width="112" /></a></div>
<a href="http://3.bp.blogspot.com/-cyqIbJx7qEU/VFbYGkLYLpI/AAAAAAAAuws/mDbFvGi8QhQ/s1600/Screenshot_2014-11-02-21-25-06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://3.bp.blogspot.com/-cyqIbJx7qEU/VFbYGkLYLpI/AAAAAAAAuws/mDbFvGi8QhQ/s1600/Screenshot_2014-11-02-21-25-06.png" height="200" width="112" /></a><a href="http://1.bp.blogspot.com/-UzKKyr1dvWg/VFbYGo-ykzI/AAAAAAAAuwo/7KvNyq8yVFk/s1600/Screenshot_2014-11-02-21-50-26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://1.bp.blogspot.com/-UzKKyr1dvWg/VFbYGo-ykzI/AAAAAAAAuwo/7KvNyq8yVFk/s1600/Screenshot_2014-11-02-21-50-26.png" height="200" width="112" /></a><br />
<br />
Tablet<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-CmXGye5YSkc/VFbYc6lYdDI/AAAAAAAAuw8/Z19K8uMk9Gc/s1600/Screenshot_2014-11-02-21-23-35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-CmXGye5YSkc/VFbYc6lYdDI/AAAAAAAAuw8/Z19K8uMk9Gc/s1600/Screenshot_2014-11-02-21-23-35.png" height="200" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-auTuH8x0chA/VFbYcz6bm2I/AAAAAAAAuxA/mVg3R1eWj-Q/s1600/Screenshot_2014-11-02-21-23-58.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-auTuH8x0chA/VFbYcz6bm2I/AAAAAAAAuxA/mVg3R1eWj-Q/s1600/Screenshot_2014-11-02-21-23-58.png" height="200" width="320" /></a></div>
<a href="http://3.bp.blogspot.com/-fHnDzefz9Dk/VFbZHUaY9gI/AAAAAAAAuxY/EKt2BOiGxXk/s1600/hi-res-icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a>
<br />
<h3 style="text-align: left;">
Design</h3>
<div>
The icons, video and site were done by <a href="http://josephsykes.co.uk/" target="_blank">Joe Sykes</a>. </div>
<br />
<br />
<br />
<div>
<br /></div>
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0Skills Matter, 116-120 Goswell Road, London EC1V 7DP, UK51.524558600000013 -0.09909630000004199231.096025600000011 -41.407690300000041 71.953091600000022 41.209497699999957tag:blogger.com,1999:blog-155796627847701144.post-60649818516555903782014-10-31T19:24:00.000+00:002016-10-21T12:55:49.311+01:00Droidcon Conference London 2014 <div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Droidcon London is a 2-day Android conference organised by Skills Matter</b>. </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Tt-TtBYtzjQ/VFPfcrMj44I/AAAAAAAAuqc/zxjar8OR-Ns/s1600/20141031_094955.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Tt-TtBYtzjQ/VFPfcrMj44I/AAAAAAAAuqc/zxjar8OR-Ns/s1600/20141031_094955.jpg" height="320" width="180" /></a></div>
The first day was a community-led barcamp and democamp with talks and discussions given by opensource Android developers. The second day was packed full of presentations given by the worlds leading Android experts, on a range of Android topics. There were 1,200 attendees and loads of great sponsors, as well as an open bar party in the evening and a hackathon the following weekend.<br />
<br />
<div style="text-align: left;">
I was a volunteer, so helped set up prior to the event, and in return was given a free ticket to attend both days :)</div>
<h3 style="text-align: left;">
<br /></h3>
<h3 style="text-align: left;">
Sponsors</h3>
<a href="http://4.bp.blogspot.com/-HtFlsqlX9ek/VFPfklwQm8I/AAAAAAAAuqk/gIpQ1xv4WT0/s1600/20141030_095923.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-HtFlsqlX9ek/VFPfklwQm8I/AAAAAAAAuqk/gIpQ1xv4WT0/s1600/20141030_095923.jpg" height="180" width="320" /></a>There was also a wide range of sponsors including Microsoft Azure, Sony, PayPal/ Braintree, Intel, Epson, AppConverter, Amazon App Store, Facebook, Badoo, ooVoo and Google Developers. As well as many other Bronze sponsors. Attendees were free to talk to the sponsors about their software, products and services and ask questions (and get a ton of free t-shirts and stash!).<br />
<br />
<br />
<h3 style="text-align: left;">
The Presentations</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-pD_JFvj_fDw/VFPfu_WaH9I/AAAAAAAAuqs/tNV35Pxv2V8/s1600/20141030_172753.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-pD_JFvj_fDw/VFPfu_WaH9I/AAAAAAAAuqs/tNV35Pxv2V8/s1600/20141030_172753.jpg" height="180" width="320" /></a></div>
<div>
Day 2 saw was filled with talks and presentations given by the worlds leading Android experts. It kicked of at 9 AM with Chet Haase from Google discussing what's new in Android Lollipop. From 10 AM - 17:30 there 7 talks going on simultaneously throughout the day (35 in total). Meaning it was impossible to attend them all, however they were all filmed and made available on the internet later on. </div>
<div>
<br /></div>
<h3 style="text-align: left;">
The Party</h3>
<div style="text-align: left;">
<a href="http://1.bp.blogspot.com/-xTlZYc5qRrc/VFPf0Uzy4cI/AAAAAAAAuq0/KsO4U4D8zfc/s1600/20141030_205506.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com/-xTlZYc5qRrc/VFPf0Uzy4cI/AAAAAAAAuq0/KsO4U4D8zfc/s1600/20141030_205506.jpg" height="112" width="200" /></a>On Thuresday night, there was a networking session and party at a pup a few minutes down the road at the Wenlock & Essex. There was a free bar paid for by ooVoo, and plenty of food and more stash. The music was picked by the attendees and was GREAT! </div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Setting Up</h3>
<div style="text-align: left;">
I volunteered to help set up the event the day before, and early the morning of the first day (it was the only way I could get a ticket, given the crazy high prices!). We arrived on Wednesday and Thursday at 06:30 AM and our time was put to good use packing 1200 goody bags, preparing flyers, folding thirsts and other general setting up jobs. </div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
A few photos</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-t9KUirGdGjg/VFPgGjsF04I/AAAAAAAAurE/Gx6-zycKQrk/s1600/20141030_174941.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-t9KUirGdGjg/VFPgGjsF04I/AAAAAAAAurE/Gx6-zycKQrk/s1600/20141030_174941.jpg" height="360" width="640" /></a></td></tr>
<tr><td class="tr-caption">Chet Haase - <i>Practicing Practical Best Practices for Software Development Practitioners</i></td></tr>
</tbody></table>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-l8E8JWvHRGY/VFPgGfA63eI/AAAAAAAAurA/gsPzfjVMa1M/s1600/20141031_135644.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-l8E8JWvHRGY/VFPgGfA63eI/AAAAAAAAurA/gsPzfjVMa1M/s1600/20141031_135644.jpg" height="225" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cyril Mottier - Android Wear</td></tr>
</tbody></table>
<a href="http://1.bp.blogspot.com/-dz39eLSDT2U/VFPgGThwRVI/AAAAAAAAurI/pmDN0UNyAQs/s1600/1414765137361.jpg" imageanchor="1" style="clear: right; display: inline !important; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com/-dz39eLSDT2U/VFPgGThwRVI/AAAAAAAAurI/pmDN0UNyAQs/s1600/1414765137361.jpg" height="320" width="178" /></a><br />
<div>
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
</div>
<iframe class="vine-embed" src="https://vine.co/v/OOBMaiOUZPQ/embed/simple" width="320" height="320" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
<br /><br />
<a class="twitter-timeline" href="https://twitter.com/hashtag/DroidconUK" data-widget-id="528266091449954304">#DroidconUK Tweets</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0London Borough of Islington, Greater London, UK51.5465063 -0.1058057999999846351.4670833 -0.26785429999998467 51.625929299999996 0.056242700000015383tag:blogger.com,1999:blog-155796627847701144.post-56605613157545782592014-10-21T15:53:00.000+01:002014-10-21T15:53:04.344+01:00Vitality Oxford Half Marathon 2014<div dir="ltr" style="text-align: left;" trbidi="on">
The Oxford half marathon is a 13.1 mile flat run though Oxford city, including Iffley Road, Cowely, the Mini Plant, the River Thames + Canal Path and this year the Iffley running track and a "<i>Banister Mile</i>" which was separately timed.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Kqp2DMkrNW0/VEECDXQGhzI/AAAAAAAAuaM/FX13yypq4ZU/s1600/OxfordHalfMARATHONx0001.JPG-pwrt2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-Kqp2DMkrNW0/VEECDXQGhzI/AAAAAAAAuaM/FX13yypq4ZU/s1600/OxfordHalfMARATHONx0001.JPG-pwrt2.jpg" height="213" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">the start</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-2fkwqRj5ZOM/VEECDRXT39I/AAAAAAAAuaA/HctRqoTLMAE/s1600/1888711_10152294206290378_1394694650238210876_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-2fkwqRj5ZOM/VEECDRXT39I/AAAAAAAAuaA/HctRqoTLMAE/s1600/1888711_10152294206290378_1394694650238210876_n.jpg" height="196" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">A not so great photo of me coming into the finish</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-JoTBR3LGLwU/VEECDWvODrI/AAAAAAAAuZ8/fbTaIL4P7vc/s1600/map_aliciasykes_runtastic.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/-JoTBR3LGLwU/VEECDWvODrI/AAAAAAAAuZ8/fbTaIL4P7vc/s1600/map_aliciasykes_runtastic.png" height="239" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Map of the route, tracked using Runtastic</td></tr>
</tbody></table>
I tracked my run (as always) with Runtastic, by far my favourite sports tracking app. Below is a link the the session, also the map below is from the same session.<br />
<a href="https://www.runtastic.com/en/users/Alicia-Sykes/sport-sessions/331596587">https://www.runtastic.com/en/users/Alicia-Sykes/sport-sessions/331596587</a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Alicia Sykeshttp://www.blogger.com/profile/05390290080419369274noreply@blogger.com0