Posts

Showing posts from 2016

AngularJS style switcher

By Anonymous
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...
Post a Comment
Read more

Useful websites for developers

By Anonymous
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.
Post a Comment
Read more

Useful tools for developers

By Anonymous
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 an...
Post a Comment
Read more

Curvy wrapping with CSS Shapes

By Anonymous
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 .
Post a Comment
Read more

Inclusive Design

By Anonymous
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 m...
Post a Comment
Read more

How to embed a Google Doc in Blogger

By Anonymous
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 viewing Click View, then Full Screen Copy the URL of the Google Document from the address bar of your browser Go to Blogger, create a new blgopost or edit an existing one Switch to HTML view Paste 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. < iframe   src =" 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.
Post a Comment
Read more

How to embed a Google Presentation in Blogger

By Anonymous
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 viewing Select Publish to the web Click on Embed  Select "Small (480x299)" under slide size and "every 5 seconds" under Auto-advance slides. Click Publish Select 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
Post a Comment
Read more

Using FontAwesome in Moodle

By Anonymous
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: <i class= "fa fa-tree" aria-hidden= "true" ></i> If it has a semantic meaning, use this code: <i class= "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...
Post a Comment
Read more

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

By Anonymous
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 --> <script type = "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 rig...
Post a Comment
Read more

Getting multiple Angular modals to work with http response data

By Anonymous
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 <script src = "scripts/angular.min.js" ></script> <script src = "scripts/ui-bootstrap.js" ></script> <script src = "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 <div role = "main" id = "main" class = "ui-content scroll" ng-app = "myApp" > <!--MODAL WINDOW for item details --> <script type = "text/ng-template" id = "itemM...
Post a Comment
Read more