Bootstrap, other javascript tools/ frameworks and keeping up with appearances

25. January 2013 14:28 by Chris in dev  //  Tags:   //   Comments (0)

Bootstrap, other Javascript Tools/ Frameworks and Keeping Up With Appearances

I don't know about other developers but I have this 'technical development topics list' ... products/ technologies/ concepts I've come across in passing but don't seem to consistently manage to dig into. This is particularly an issue currently as ... 

a) there is just so much "stuff" to learn about in the (Microsoft) web software development space. 10 years ago it was far easier to keep abreast of the main development technologies. Now it's not possible for one person to cover all the bases and specialisation is required, at least if you are going to dig into anything in any depth

b) closely related is the changing landscape of devices and development for those devices, which increases the aforementioned complexity still further; native vs cross platform/ device anyone?

Anyway, in an attempt to facilitate making some personal headway I thought if I try and blog about some of these topics, once a week say. A laudible idea but let's see how this goes. Not well so far as this post has been sitting here unfinished for a month!

 

The New Way

A few years ago the ASP.NET web dev picture was different in several ways, including that life for the developer was simpler. We had ASP.NET web forms with postbacks, server controls and associated viewstate. Those server controls gradually got better in terms of user experience. People complained about how the web forms approach didn't facilitate unit testing and about the clunkiness of the state management. Ajax became more popular and this didn't fit that well into the Web forms way. Similarly Javascript, particularly in the form of jQuery became more popular as processing moved to the client in the drive for the more responsive UX. RESTful services are becoming the order of the day.

The "cutting edge developer" called for a more testable framework with less 'plumbing' and more control. Now we have ASP.NET MVC (as well as Microsoft web pages) which seems a better fit with this new Javascript-centric world than web forms. Of course there is then the option of dumping Microsoft/ Visual Studio completely for client development, and there is increasingly the option to continue this at the server side with technologies such as node.js.

Back to the client. With increased use of Javascript/ reduced use of Microsoft plumbing code have come a host of competing "frameworks" to supposedly make life easier for the developer. If you don't spend half your life trying to work out which framework you should be using for a given project that is. K.Scott Allen (check out his Pluralsight videos) was on DotNetRocks recently and one of his hopes for the year was that the web dev landscape simplified. I agree ... if we could go a little way back to it being more obvious which frameworks to use, and when, whilst also maintaining the benefits of this "brave new world" this would surely be a happier situation. So, Scott rattled of a few technologies/ projects/ frameworks during that show so let's very briefly cover those and I'll plan to return to cover more of them, and probably other new ones that have popped up in the interim, in subsequent posts. Oh, and these are from my notes from the show to follow up on so I may have also added one or two more than were originally stated! Some of the headline descriptions provided by the tools' sites are not very useful but ...

  • Knockout (http://knockoutjs.com/) - 'simplify dynamic JavaScript UIs by applying the MVVM pattern'
  • Backbone (http://backbonejs.org/) - 'Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.'
  • Spine (http://spinejs.com/) - 'Build Awesome JavaScript MVC Applications' - useful overview description right there!
  • Angular (http://angularjs.org/) - 'HTML enhanced for web apps!' - ditto.
  • Masonry (http://masonry.desandro.com/) - 'A dynamic layout plugin for jQuery'
  • Modernizr (http://modernizr.com/) - 'A JavaScript library that detects HTML5 and CSS3 features in the user’s browser'
  • Bootstrap (http://twitter.github.com/bootstrap/) - 'Sleek, intuitive, and powerful front-end framework for faster and easier web development'
  • CoffeeScript (http://coffeescript.org/) - 'CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. '
  • Typescript (http://www.typescriptlang.org/) - 'TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. '
  • Skeleton - I used for my own website and elsewhere (http://www.getskeleton.com)  'A Beautiful Boilerplate for Responsive, Mobile-Friendly Development'. See also this tutorial I found useful.
  • LESS (http://lesscss.org/) - 'LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.'
  • Further, though perhaps a little different intended scope, Telerik's KendoUI has also caught my eye.

A little more on Bootstrap

So, lots of interesting play things in the arena of client web technologies, likely to help/ confuse us poor web developers but let's have a little closer look at Bootstrap. Of the above it is most similar to Skeleton but whereas Skeleton has specifically targeted CSS support for a 12 column 960px grid system with supporting media queries and a few extras in the form of consistent styling of buttons, forms and typography the scope of Bootstrap is a little larger, seemingly a superset including: 

  • Scaffolding Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
  • Base CSS Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
  • Components Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
  • JavaScript plugins Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

 And that's enough for now. I hope to have a play shortly and report back further.

 

A Welsh learner typing tip

21. January 2013 21:17 by Chris in Welsh  //  Tags:   //   Comments (0)

From http://desktoppub.about.com/cs/finetypography/ht/circumflex.htm 

Under Windows hold down ALT while typing the appropriate number code on your numeric keypad to create characters with circumflex accent marks e.g. â 0226, ô 0244

In Word: Ctrl-Shft-^ then the letter ... but this is word specific and won't work generally in Windows.

Staying with Word, if you want a ë it's CTRL-':'m i.e CTRL-SHIFT ';' then the 'e' or another character. You can get at this generally in Windows with ALT-137, a different scheme from above (see http://www.edu.dudley.gov.uk/ict/software/word/accents.htm). I'll get to investigating the difference between the two schemes.

 

18/05/2-13

In Welsh the circumflex is known as hirnod 'long sign', acen grom 'crooked accent' and also colloquially as to bach 'little roof'. It lengthens a vowel (a, e, i, o, u, w, y), and is used particularly to differentiate between homographs; e.g. tan and tân, ffon and ffôn, gem and gêm, cyn and cŷn, or gwn and gŵn. I add this as I needed 'ŷ' (the code in this case is 0177) as the standard way to insert a circumflex, Ctrl-Shift-6, then 'y', didn't work, so you type the code then ALT-X. Note this is different from the general Windows approach above.

Note also that while â, ê, î, ô and and û will work with the CTRL-Shift approach ŵ as well as ŷ won't, the code for the former being 0175.

P.S. you can always also Insert-Symbol as well!

Shame it can't all be easier in this day and age!

References

http://en.wikipedia.org/wiki/Circumflex

http://www.fileformat.info/info/unicode/char/177/browsertest.htm

http://www.200words-a-day.com/typing-welsh-characters.html

 

 

Welsh Learner Resources

21. January 2013 19:33 by Chris in Welsh  //  Tags:   //   Comments (0)

Following up my translation resources posts, here are som other resources for Welsh learners (work in progress).

 

S4C

Hwb

BBC - try the 'BBC vocab' to help read some Welsh

http://www.bbc.co.uk/cymru/dysgu/ - http://www.bbc.co.uk/cymru/dysgu/dysgucymraeg/ 

Catchphrase

Pigion http://www.bbc.co.uk/radiocymru/safle/pigion/ - seem to have been budget cuts as doesn't offer the supporting information that it used to

Grammar including all lessons as a PDF

SSIW http://www.saysomethinginwelsh.com

Also their wiki, http://ssiw.pbworks.com, e.g. http://ssiw.pbworks.com/w/page/36027266/Fiction%20and%20Poetry 

 

Clic Clonc http://www.telesgop.co.uk/clicclonc/

Facebook

http://www.facebook.com/#!/learnwelshlanguage

http://www.facebook.com/#!/LearnWelsh 

 http://www.unilang.org/course.php?res=84

 

Old Articles

9. January 2013 16:53 by Chris in dev  //  Tags:   //   Comments (0)

I've started adding my old technical articles to this blog ascribed the dates they were originally published but I'll list the articles here as well though some apparently weren't permalinks so may have to remember/ dig out the originals of these. Somewhat surprisingly given many articles date back to 2003 the vast majority are still relevant to varying degrees. Italics and/ or italicised comments indicate those which have suffered with the passage of time, e.g. mobile development has moved on apace and exams have a habit of being deprecated.

If you do link through there seems to be no rhyme nor reason as to what ratign an article gets, as far as I can see anyway!

 

Welsh Online Dictionary Resources

7. January 2013 17:22 by Chris in Welsh  //  Tags:   //   Comments (1)

I'm learning Welsh - Dysgwr Cymraeg ydw i! It does seem a bit of a slog but, stating the obvious, learning a language is difficult. In my 6th year now of evening classes I recently attended a 2 day intensive new year revision course at Cardiff University motivated by the new year and accompanying resolutions. I even made it to my first Clonc Yn Y Cwtsh. This week I had better do some homework.

Intensive/ immersive is the way to go I think if you want to develop the skills quickly and efficiently, and if you have the time, admittedly for a little longer than the two days I managed and those were tiring enough! The tutors were very good and it was also good to meet more fellow Welsh learners. The primary feeling at the end of the two days however was exasperation that I hadn't had the opportunity to learn Welsh in school when it would have been much, much easier! At least this angle seems to be covered in Wales now. Saying this, I would probably have been one of those individuals who 'lost' the language after school and had to come back to study again anyway when their interest was renewed, as was the case with some of my course peers.

Anway, below are a few resources I find/ have found useful. I wanted to tie these together for my own reference and as we seem to be lacking any decent portal for Welsh learners centralising such information:

  • Cysill Ar-lein (http://www.cysgliad.com/cysill/arlein/)  - I've only had a quick play but looks great for the experienced learner or fluent speaker as it allows you to check whole chunks of text. This from the Language Technologies Unit of Canolfan Bedwyr - Bangor University's centre for Welsh language services, which seems to be the dominant such establishment in Wales. There is also an offline application for purchase (Cysgliad), though there is no indication of price on the website/ no ability to order online. A quick google indicated a price of £40 for Windows and that the Mac version was available for free(!).
  • Porth Termau/ Terminology Portal (http://ap.termau.org/) which provides a simple web interface to the underlying databases
  • The BBC Welsh dictionary (http://www.bbc.co.uk/wales/welshdictionary/en-cy/) which again is a web view on the Bangor database(s). Also see their other resources, e.g. Pigion and Catchphrase. I may well return to more general resources like these, Hwb, SSIW, Yr Bont, etc. in another post. 03/02/13 (thanks to Esyllt): also available via the dictionary pages the BBC's online verb conjugator.
  • Google translate (http://translate.google.co.uk) - which I use often and seems pretty good, albeit I'm only Canolradd so my judgement might be questionable. It has some nice tools not available on other solutions. It's also embedded into Google's Chrome browser - it will recognise the language and offer to translate whole pages should you use this browser. There are a number of other web browser plugin tools which I may return to at a later date, though I don't tend to use them.
  • Geriadur.net (http://www.geiriadur.net) - the dictionary from Trinity Saint David. I haven't used it much but know of others who prefer it.
  • 'Ap Geiriaduron' (http://www.bangor.ac.uk/canolfanbedwyr/ap_geiriaduron.php.en) All the above are online resources ... no good in the Kymin in Penarth during my lessons as connectivity is non-existent. For offline apps best served are Android and Apple users with 'Ap Geiriaduron'. Hopefully this will make it to other platforms as well in the not too distant future.
  • Geiriadur yr Academi 03/02/13 (thanks to Esyllt): another from Canolfan Bedwyr, though not listed in the Language Technologies Unit Websites page.

In summary, Canolfan Bedwyr seems to be dominating the market! Personally I used to use the BBC view on the database(s) but after buying a Nexus 7 this has largely been replaced with 'Ap Geiriaduron' and I also frequently use Google Translate. I should also, I think, give Cysill Ar-lein more of a go in terms of a learning aid.

Digon ar hyn o bryd. I may return with a list of some more general resources at a later date. Feel free to suggest some and I will collate. Similarly if I have missed any dictionary resources you like, please leave a comment via the below. Or if you know of any good web portals for Welsh learners as I've struggled to find one. So maybe I'll make one.

Chris.

Additional:

21/01/13: Glosbe - the multilingual online dictionary (http://glosbe.com/); also I've been using Google translate and it's not quite as good as I thought - gets a bit confused with the more complex ...

17/04/13: Gweiadur - I haven't delved into much and there a few 'inconsistencies' in this beta site, but looks to be an interesting project.

17/06/13: Just spotted Eurfa which also includes a downloadable dictionary.

 

About the author

I am Dr Christopher Sully (MCPD, MCSD) and I am a Cardiff, UK based IT Consultant/ Developer and have been involved in the industry since 1996 though I started programming considerably earlier than that. During the intervening period I've worked mainly on web application projects utilising Microsoft products and technologies: principally ASP.NET and SQL Server and working on all phases of the project lifecycle. If you might like to utilise some of the aforementioned experience I would strongly recommend that you contact me. I am also trying to improve my Welsh so am likely to blog about this as well as IT matters.

Month List