Posts

Upload a PDF and link to it from your blog

By Anonymous
Image
Sometimes you need to upload a printable document, such as a flyer, a newsletter, or an information sheet to your blog or website. The Blogger tool (unlike Google Sites) doesn't have the facility to attach documents. Fortunately, you can create a public folder for documents on Google Drive, and link to it from your blog. Here is a step-by-step guide to how to do that. Step-by-step guide: Creating a public folder You only need to do this once for any group of documents associated with a particular site or project. Open Google Drive and click on the NEW button. Select Folder   Give your folder a name and click CREATE Right-click on your newly-created folder and select Share... Click on Advanced  Click on Change... Select ' Public on the web ' and click SAVE , then DONE Uploading a file Next, you need to upload the file you wish to publish to your folder. You should avoid uploading Word documents for use as forms; use Google Forms instead. Open  Google Drive  ...
Post a Comment
Read more

jQuery 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 jQuery. The solution uses jStorage to store the user's preference between sessions, but you could use cookies instead. Here is the jQuery: $(document).ready(function () {     var myStyle = $.jStorage.get('myStyle', '');     if (myStyle !== '') {         $("#colors").attr("href", myStyle);     }     $('.styleswitch').on('click', function () {         $("#colors").attr("href", $(this).attr('resource'));         $.jStorage.set('myStyle', $(this).attr('resource'), { TTL: 28800000 });         return false;     }); }); Here is the HTML in the <head> section: <link rel="stylesheet" type="text/css" href="css/colors.css" id="colors"/> And h...
Post a Comment
Read more

Angular promises

By Anonymous
Image
I have been struggling to understand Angular promises for months, and I finally found an answer on Stack Overflow that explains them really well. There's also this really helpful cartoon which has a nice story explaining the fetching of data . However, the Stack Overflow answer was what really did it for me, and fully deserves its current status of 383 upvotes. The problem The problem that promises set out to solve is that when you make asynchronous calls to a server where the results of one call are dependent on another call, you need to return the results in the order of your dependencies, not in the random order that will happen depending on which server call returns its results first. Example Say I have a page where users can subscribe to or unsubscribe from email mailing lists and RSS feeds. The data displayed on the page is an amalgam of two different services fetching data from two different servers. The unsubscribe action and the subscribe action both send calls to the se...
Post a Comment
Read more

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