Posts

Showing posts from December, 2016

AngularJS style switcher

It's often the case that you want to provide more than one CSS stylesheet for your app or website. You can do this by including a style switching function in your app. Here's how to do it in AngularJS.



In the HTML, create a button for each stylesheet that you want to switch between, and pass in the filename of the stylesheet as a variable:
<button ng-click="changeStyle('colors.css')" id="pink">Brookes Pink</button><br />
<button ng-click="changeStyle('colors-lime.css')" id="lime">Brookes Lime</button><br />
<button ng-click="changeStyle('colors-muted.css')" id="muted">Muted colours</button><br />
<button ng-click="changeStyle('colors-dark.css')" id="dark">Dark colours</button>You will also need to put the ng-app attribute in the <html> element, and an angular variable in the path to the…

Useful websites for developers

There are some amazing learning resources on the web, in every area of development, design, mobile, responsive, UX, and more. Here are some of my favourites.



24 ways
The advent calendar for web geeks. For twenty-four days each December they publish a daily dose of web design and development goodness to bring everyone a little Christmas cheer.

A List Apart
Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

The Agile Manifesto
The core ideas and principles behind agile development.

CSS Tricks
Nifty things you can do with CSS, like making interesting shapes, or speech bubbles, or pull-out quotes.

Meyerweb.com
The website and blog of Eric Meyer, CSS guru and web consultant.

Boagworld
The website and blog of Paul Boag, user experience guru and web consultant.

Useful tools for developers

There are some amazing tools available for developers on the web, from pretty-printing your code to validating it, from colour palettes for visual impairments to tools for testing APIs. Here are some of my favourites.


Stack Overflow
This is the go-to site for questions and answers about coding. It has questions and answers on just about every programming language that you can think of - PHP, Python, Java, Ruby, JavaScript, jQuery, Angular, and more. And every environment you can think of - Windows, iOS, Android, and so on. And every mark-up and styling language - HTML, XML, CSS, and Sass. Stack Overflow has an awesome community of people willing to help complete strangers, which I think is amazing. I have learnt so much from reading Stack Overflow, and I haven't asked that many questions on there, because many of the common questions have already been asked and answered.

User Experience
This is the equivalent site to Stack Overflow for asking user experience questions (usability and a…

Curvy wrapping with CSS Shapes

Image
I thought it was pretty impressive when CSS styles were developed that let you make a shape or a photo with curves on the corners, or a circle.

Eric Meyer discusses how to implement and use CSS Shapes in a responsive layout over at A List Apart, in an article entitled A Redesign with CSS Shapes.

Now there's a feature that lets you wrap the text around your circular object. It's called CSS Shapes. At the moment it is only supported by WebKit browsers, but you can still display your text using old-style wrapping in non-WebKit browsers.



Here's the CSS:
img.bubble.left {

float: left; margin: 0 40px 0 0 ;
shape-outside: circle(150px at 130px 130px); }
img.bubble.right {

float: right; margin: 0 0 0 40px;
shape-outside: circle(150px at 170px 130px); }Here are some more examples of CSS Shapes on CodePen.

Inclusive Design

Image
The season of advent is well underway over at 24 ways, with a daily article on an aspect of web development. One title that leaped out at me was What the heck is Inclusive Design? by Heydon Pickering, who is the accessibility editor for Smashing Magazine and works with The Paciello Group as an accessibility and UX consultant. He is the author of a book on Inclusive Design Patterns which should probably be on your wish list.


Inclusive design is a new name for the idea that web accessibility and good user experience benefits everyone, including (but not limited to) people with recognised and registered disabilities. Good readability and well organised content is good for dyslexic users, but also for busy people who don't have time to trawl through your unreadable and badly-organised website.
In short, inclusive design means designing things for people who aren’t you, in your situation. In my experience, mainstream UX isn’t very good at that. By bolting accessibility onto mainstream UX…

How to embed a Google Doc in Blogger

So you have a Google document that you want to display on your Blogger blog or website.

It's actually fairly simple to embed Google Documents in a Blogger blogpost or page.


How to embed a Google Document Open your Google Document for viewingClick View, then Full ScreenCopy the URL of the Google Document from the address bar of your browserGo to Blogger, create a new blgopost or edit an existing oneSwitch to HTML viewPaste the URL that you copied in Step 3 anywhere in the code (this is only temporary)Copy the following code, and paste it into your HTML where you want the document to be embedded.
<iframesrc="https://docs.google.com/document/d/1GVBowL69OnrHbNLwnFGJDiNuoS1Fs712tpdQkfu9DDc/" width="480" height="520"></iframe>Replace the highlighted URL above with the URL that you copied in step 3.

How to embed a Google Presentation in Blogger

Image
So you have a Google presentation that you want to display on your Blogger blog or website.

It's actually fairly simple to embed Google Slides in a Blogger blogpost or page.


How to embed a Google Presentation Open your Google Presentation for viewingSelect Publish to the web
Click on Embed Select "Small (480x299)" under slide size and "every 5 seconds" under Auto-advance slides.Click PublishSelect the HTML code in the text box and press Ctrl C on the keyboard to copy it.Go to Blogger and create a new post, or open an existing post for editing.Switch to HTML view.Paste the code you copied above into the blogpost.Save and publish your blogpost.Example of an embedded presentation

Using FontAwesome in Moodle

Image
FontAwesome is a nifty icon set that you can use anywhere that you can edit HTML.

For example, you can use it in Moodle to display a symbol.




Step 1. Go to edit mode and find the text region you want to edit.

Step 2. Click on the first button on the toolbar (to show more buttons)


Step 3. Click on the HTML edit mode button <>

Step 4. Go to FontAwesome icons and click on the one you want to use

If your icon is purely for decorative purposes, use this code:

<iclass="fa fa-tree"aria-hidden="true"></i>If it has a semantic meaning, use this code:

<iclass="fa fa-tree"></i>
To improve web accessibility, FontAwesome recommend using aria-hidden="true" to hide icons used purely for decoration.

Step 5. Paste the HTML into the Moodle text box
Step 6. Turn off HTML editing (click on the HTML edit mode button <> again) Now you have a tree in your text box! Need to make it bigger? Go back to HTML edit mode and paste in one of these example…

Submit a post request from an Angular modal and refresh the main page

I have a main controller with some data (fetched by $http.get), and when you click on one item, it pops up a modal with more details.

In my modal, there is a button to modify the data (sent by $http.post) which then closes the modal and needs to tell the parent controller to refresh the data, because it has been modified by the event in the modal.



NB: if you use my solution - don't forget to add Angular UI bootstrap to your main controller as follows:

var myApp = angular.module('myApp', ['ui.bootstrap']);HTML <!--MODAL WINDOW for item details -->
<scripttype="text/ng-template"id="itemModalContent.html">
<div class="modal-dialog ng-hide="hidden">
<div class="modal-content">
<div class="modal-header">
<button type="button"class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-clos…

Getting multiple Angular modals to work with http response data

Your app will undoubtedly have more than one modal (pop-up div), and it can be hard to see how to get more than one of them working in Angular. Here's a step-by-step guide to how to do it.

Step 1. Put the required script tags in your HTML <scriptsrc="scripts/angular.min.js"></script>
<scriptsrc="scripts/ui-bootstrap.js"></script>
<scriptsrc="scripts/ui-bootstrap-tpls.min.js"></script>angular.min.js is the main Angular library; ui-bootstrap.js is the Angular UI bootstrap library; ui-bootstrap-tpls.min.js is the Angular templating script to make the modal template display properly. Step 2. Put the modal template in your HTML, inside your ng-app div <divrole="main"id="main"class="ui-content scroll"ng-app="myApp">
<!--MODAL WINDOW for item details -->
<scripttype="text/ng-template"id="itemModalContent.html">
<div class="modal-dialog">
&l…