A sample of programming and code I've created for various projects, and tech excercises
GitHub JSON-P Query
A skills test with the following requirements:
- You can only edit app.js, you cannot touch index.html. jQuery is provided.
- index.html contains two elements: one for the search term and one for the results.
- The results should show as a list with each item in an "owner/name" format.
- When a result is clicked, display an alert with the repo's
- The search term should be cached so duplicate searches do not trigger further requests.
- Solution does not need to support older browsers.
- Call a search after 300ms from keyup in the search box. That's the optimum time for such a delay and gives the best UX. It strikes a balance between the user feeling searches are "instant" and from not flooding the server with requests.
- Throughout the process, utilized the console to check the search term, returned array length, and cached status
- Cached searches using Local Storage
- Simple unordered list to display results given the requirements
- Linked the alert boxes to the list item's index position, to make other values relative
- Encountered one alert box while testing that overflowed my screen with a very long description. So I made a check to see if description length > 300, if so, then extract just the first 300 characters
For raw code, see the files on GitHub at https://github.com/jpostdesign/code_samples/tree/master/google_maps
A working, interactive example of the resulting map, is on my website. I simulated a date of March 28th to show open vs closed markets, and links have been replaced with dummy placeholders for example purposes. See it at: http://jpost-design.com/#interactive-map
A Responsive Images approach that you can use today that mimics the proposed picture element using
spans, for safety sake.
- Originating Author: Scott Jehl (c) 2012
- License: MIT/GPLv2
Forked original library by Scott Jehl and opened pull request for improvement. Pull request details at https://github.com/scottjehl/picturefill/pull/115
Picurefill ver2 could not apply classes, ID, or titles to child img elements. This caused issues with combining Picturefill and the Bootstrap framework due to dependencies on img element level classes like "img-responsive" and "img-circle".
Add a class in top parent span that will be added to all span tags with "data-class"
Add specific classes based on child spans with "class"
<span data-class="parentClassApplied"> <span class="specificClassOne" ...etc... ></span> <span class="specificClassTwo" ...etc... ></span> </span>
Add titles with "data-title" and ID with with "data-id"
You can combine top parent class names with specific names too. The script adds them with a space in the middle. From the preceding example, the complete class added to the first image span would be class="parentClassApplied specificClassOne"
From an example on my site at http://jpost-design.com/Picturefill.html you can see how the parent data-class in the span combines with the child span class for each image element.
For the "large" image for browser min-width 800px, for example, the resulting code is:
<span class="specificSpan-lrg" data-media="(min-width: 800px)" data-src="Picturefill_files/large.jpg"> <img class="parentSpanClass specificSpan-lrg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia" title="Statue at The Bayon temple in Cambodia" src="Picturefill_files/large.jpg"></img>
Here the class "specificSpan-lrg" is applied directly to the img element, and so is the class "parentSpanClass".
This incorporates DRY fundamentals so you Don't Repeat Yourself.
A proof of concept, jQuery and Bootstrap based simluated chat for a tech exercise for Monitise. Colors and graphics soley for demo. Branding to be done at a later time.
- Improve UX
- Give customer feedback that agent is replying
- Smooth interaction/animation
- Responsive design to adapt to multiple screen sizes
- Completed over one weekend
- Hand-coded jQuery
- SVG "profile photo" graphics exported from Illustrator
- Automatic scroll and animated fade-in of new messages
- Sample robot script written in array
- Randomized auto-reply to help simulate proof of concept
- Prevents empty input, or "blank" messages