2toria Web Links

2toria favourites – week ending 23/02/2014

Here are some of our favourtie web things from over the past week!  Enjoy!

Random

2toria favourites – week ending 16/03/2014

Here’s this weeks list of some stuff we’ve been enjoying at 2toria towers:-

Random

2toria favourites – week ending 09/03/2014

We’ve been enjoying some pretty good stuff on the web this week, here’s a few links (sorry for the small amount – more next week, I promise):-

Random

2toria favourites – week ending 02/03/2014

Not done this for some time, so I thought I’d start it up again.  Here are a few of the things we’ve been looking at, enjoying and favoriting on 2toria this week:-

2toria

No Years Resolutions

Resolutions, resolutions, resolutions.  They’re a pain in the arse, aren’t they?

Last year I promised myself (and you) that I would not procrastinate, that I would post at least twice a week, and lots of other false promises…  I did manage to get a few things done, but nowhere near as much as I’d planned at the beginning of the year (only 30 posts in 2014…poor effort).

So, I’m not doing that this year, at least not publicly.  I do have plans for the site and some other exciting projects during this year, but for now I’m keeping them in my head!!  In the meantime please keep on coming back, and I’ll try to keep you entertained more during 2014.

Happy New Year, by the way.

Tutorials Web

Getting to grips with Emmet – part two

Emmet is a useful bit of kit that allows you to quickly create HTML markup by using CSS-style abbreviations.  A couple of days ago I posted an introduction to the syntax of Emmet and asked you what the basic Emmet code would be for the following:-

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>

Did you get it in the end? The answer I came up with is this:-

div>h1+p+h2+p

Try it now in codepen, jsbin or jsfiddle and after typing press the tab key and the HTML markup should appear as shown earlier.

In today’s post I want to cover a couple more handy hints on using Emmet to speed up your HTML coding.  The first thing I want to cover is producing code like this:-

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Fairly straightforward using what we know already, isn’t it?

ul>li+li+li+li+li+li

BUT, it’s still a bit of a pain to type in, and counting those li elements is a bugger, too.  What if we had twenty list items, or thirty, or even more?  Turns out Emmet lets you do things in a much simpler way.  You just tell it how many elements you want using the multiplication symbol (*):-

ul>li*6

How simple is that?  Amazing, I say.  Using this technique you can easily create as many elements as you like!  Brilliant..

So, to make something like this:-

<div>
  <p></p>
  <p></p>
  <p></p>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

You can now write this:-

div>p*3+ul>li*3

Not too complicated at all, is it?

One more hint for today before I sign off.  How do you think you would do this?

<div>
  <p></p>
  <p></p>
</div>
<div>
  <p></p>
  <p></p>
</div>
<div>
  <p></p>
  <p></p>
</div>

It’s quite a tricky one and (as far as I’m aware) isn’t possible with the basics I’ve taught you so far, because all we really know at the moment is to nest items or make them siblings of each other.  What we can see from the example is that we are looking at three adjacent divs, each with two paragraphs in it.  To pull of something like this we need to group things together, and we do that using parentheses (brackets to you and I).

Grouping items means you can apply the same kind of syntax, but have things together as one.  Consider this:-

<div>
  <p></p>
</div>
<div>
  <p></p>
</div>

Using parentheses, you could do this:-

(div>p)+(div>p)

Try it now.  Magic eh?  This has said that we want the div>p to be grouped together and then made into a sibling of div>p.  The brackets bring the elements together so that Emmet treats them as individual.  Now, given that we know how to specify how many times an element is created, we can combine what we know into this to get the result we need:-

(div>p)*3

Again, magic!  Parentheses can be used to group items together, and can even be nested to make much more complex structures than we could at the start of this article.  Try the example below for size (after you’ve tried to figure out what the outcome will be):-

(div>p)+(div>ul>li*5)+((div>h2>p)*2)*3

(Ok, it’s overcomplicated, but you get the idea).  In part three of this series of articles I’ll be looking at some more hints, including adding id and class attributes to your elements.  Come back soon!

CSS Web Links

Tridiv – In-browser CSS 3D Editing

I’m a sucker for clever web things, and today’s link is no exception.  Tridiv is an interface where you can create 3D shapes in CSS, and all without knowing how to make 3D shapes using CSS at all.

tridiv main

The interface is extremely cleverly put together, and literally allows the user to create 3D objects as they might be used to in some other 3D editing interfaces.  There’s a top, front and side elevation, and a handy window for you to move and rotate your newly created object.

tridiv interface

Basic primitive shapes are included in the mix (cuboid, cylinder, prism and pyramid), which you can add to the scene, after which you can rotate, enlarge, and move to your hearts content.  Colors and opacity can be manipulated too, giving you the means to make some pretty spectacular 3D shapes if you wish.  Lighting, shadows and images can also be added to your creations, giving you the ability to make some pretty impressive things.

Once done, you can save for use elsewhere, or even export to Codepen to share with others.

Some have criticised the project based on its practicality, but I personally think it’s a fun little tool that really demonstrates how far the web has come along.  And it was made by just one person!

Only downside is that it currently only works in Chrome, but Julian Garner has claimed he is working on versions for other browsers soon.

To really see what could be done with it, check out this demo on Codepen, created by the developer himself!

Tutorials Web

Getting to grips with Emmet – part one

Quicker (and clever) ways of doing things always impress me.

HTML can be a bit of a pain to write out, especially if you’re building the skeleton for a webpage or website.  Emmet is a very handy tool that makes building the basic framework of HTML an easier, quicker task.  This is the first of a number of tutorials the basics of what it is and how to use it.  There’s actually quite a lot to Emmet and how it works, so I’m going to start with the basics.

emmetlogo

Emmet is ‘a web-developer’s toolkit that can greatly improve your HTML & CSS workflow’, to quote the developers website.  It exists as a plugin to text editors, and can also be found on some of the online web editors (such as jsfiddle, codepen and jsbin).  In the examples that follow I’m going to use codepen, but it’s up to you which you want to use.  You could use your own IDE, but installing, configuring and using can differ, so for now if you’re new I’d suggest following along in one of the web-based editors so that the series makes sense.  I’ll cover using it as a plugin at some point in the future.

So, how does it work?

Take the following HTML structure as a simple example:-

  <body>
    <div>
      <p></p>
    </div>
  </body>

Emmet lets you specify HTML structure in an quick, abbreviated and simplified way,  and automatically expands to the full HTML structure. It’s kind of like using code snippets if you’ve used them before, only very quick and very cool.

Using Emmet abbreviations, the code above would look like this:-

body>div>p

Let’s try it now.  Open up codepen and in the HTML section type the code directly above and press the tab key.  As if by magic your HTML structure will appear, indented and everything.  Isn’t it cool?

Now, try this:-

body>div>ul>li+li+li+li

Once again, press the tab key directly after.  You should now get this:-

<body>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
</body>

Great, isn’t it?  But what exactly is going on?  Let me explain.  If you know advanced CSS selectors, you might already have figured it out, but here goes.

The examples so far use two symbols, > and +.  The greater than symbol denotes nesting (and the parent/child relationship), so in this example:-

div>p

We are saying we want a paragraph element within a div.  This:-

div>ul>li

says we would like a div, which contains a unordered list, which in turn contains a list item.

Simple so far?  Now for the plus symbol, which asks that the elements surrounding it are adjacent to (or siblings of) each other, so:-

li+li+li+li

would give you

<li></li>
<li></li>
<li></li>
<li></li>

And the following:-

div>h1+p+div>ul>li

Would give you:

<div>
  <h1></h1>
  <p></p>
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
</div>

Does that make sense?  This is the most basic of Emmet syntax, and that’s where I’m going to leave you for today.  Try it out in codepen and see what you can come up with.

Next time around I’ll go into more detail on more advanced markup you can create with this handy little tool.  Until then, as a challenge try and come up with the Emmet syntax for the structure below:

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>
Web Development Web Links

Beautiful parallax effects

Parallax effects on webpages can be awesome if done well.   I’m still pretty new to js and web development in the grand scheme of things, so haven’t figured out how to do them yet (I will though), but I think they’re very cool.

parallax

Parallax.js by Matthew Wagerfield is a ‘simple, lightweight parallax engine that reacts to the orientation of a smart device’, and, based on the demo here, it’s pretty impressive.  The graphics and animation used are beautiful and if you run it on your iPad or iPhone and move it about, the effects are pretty spectacular.  Do follow the link, as the picture above doesn’t do justice.  If you don’t have a mobile device you can move your mouse about to get an idea of the kind of effects you’ll get with motion.  It kind of reminds me of the effects in Little Big Planet.

I’d love to put something together like this one day.  The project GitHub page is here.

Development Internet

Making the jump from Classic ASP to ASP.Net – Which language to choose?

I’ve been developing using some flavour of VB/VBA/VBScript for about ten years, and I’m very used to the way it works, but I’m realising it’s time to move on.  Technologies have changed, and even though my Classic ASP applications perform perfectly well, they don’t fit in with the direction my organisation wants to move in.  I’ve been putting things off way too long, and it’s time I moved on, too, before I find myself way too behind the times.

So, with that in mind, I’ve explored a little and found I have two options (from a Microsoft and ASP.Net point of view) – to go with VB.NET or shift over to C#.  In this article I want to discuss my decision and why I came to it.

Coming from a generally VB-based background, the obvious draw for me is to move across to VB.Net.  I know it’s nothing like what I’m used to, but it’s pretty close and probably not that much of a learning curve (apart from being better at OOP stuff), but is it the right decision to make?

Turns out it possibly isn’t.

Do a search on StackOverflow.com for questions asked about C# and VB.Net and here’s what you get:-

csharp

for C#, as opposed to a similar search for VB.Net:-

vbnet

Wow.  I mean, wow…  That’s ten times the amount of questions about C# than about VB.Net.  Now, what does that mean?  Does it mean C# is ten times more difficult than good ol’ VB?  I don’t think so.  Look at the amount of followers for each.  Here’s the number of followers on StackOverflow for C#:-

csharpfollows

And here’s the same statistic for VB.Net:-

vbnetfollows

Again, ten times the number of C# followers.  To me that says how many people are interested in the technology and want to read about it.

I decided to do more research, so I jumped to GitHub and looked at their language specific pages.  I started with C#.  It’s worth noting here that on the languages pages it doesn’t mention the number of repositories, but it does tell you where the chosen language sits in terms of popularity.  I digress, here is the result for C#:-

c#git

And here’s the result for VB (unfortunately, Github doesn’t seem to split VB into sub-languages, but in this case it doesn’t matter):-

vbgitHmmm…speaks for itself again, doesn’t it?  Let’s try something else though, as I’m still not convinced.  What jobs are out there?  I opted to look at Monster.co.uk and search for both ‘C#’ and ‘vb.net’.  Here’s what I got for C#:-

c#jobs

And for VB.Net?

vbjobs

Finally, following a search on programmer salaries, I came across a very simple looking search on Indeed.com where you can search by keyword and you get an average salary (in dollars) for jobs matching that keyword.  I couldn’t resist.  Here’s the result for c#:-

csharpsalary

and the salary for VB.Net:-

vbnetsalary

Not a massive difference, but the results still speak for themselves, I think.

Still not completely convinced about the overwhelming evidence provided to me by my ‘scientific’ research, I spoke to a seasoned developer colleague of mine yesterday and asked him which I should go for, and his reaction was along the lines of “you know how Classic ASP is now?  That’s what VB.Net will be in about 5 years..”.

Now I know that might be a somewhat subjective statement (the  guy develops using C#), but I got the point…

Based on these findings, I’ve decided to try to learn C#.  From both a personal and professional standpoint, I think it’s the right thing to do. I know it’s going to be a challenge,  especially moving from a scripting/procedural language like VBScript to a more Object Oriented language such as C#.

I’ve started today, and hope to post more on my experiences as I go on.

I’d be interested to see what you guys think about my decision, and my rather non-scientific methodologies in reaching that decision.  I’m also aware there are other web technologies out there, but my hand is somewhat forced by the organisation I’m working in.  I still intend to learn some PHP at some point, but not yet.