This Week in JavaScript - 20 April 2015

JavaScript
1

Hello and welcome to This Week in JavaScript—a lovingly curated collection of links relating to what’s new and exciting in the world of JS. The complete list is tagged jsweekly. (Don’t forget to check out our weekly .Net roundup too!)

###Aurelia.io
Let’s kick off this week with a look at Aurelia—a forward thinking (written with ES6 and ES7), powerful JavaScript framework. Over on SitePoint Brad Barrow looked at using Aurelia to create a reddit client, then Vildan Softic looked at how to extend HTML the Aurelia way. Elsewhere Rob Eisenberg (the creator of Aurelia) hosted a live web cast focussing on what Aurelia is and how you can use it in your projects. He also dropped in on the Web Platform podcast to discuss the ‘spiritual successor’ to his Durandal project. Finally, this is a high-level view of the Aurelia framework by one dev who went looking for Angular 2—but ended up finding something else. I know we’ve mentioned framework fatigue in the past, but Aurelia.io is one to keep an eye on …

##jquery
Last week Paul featured the original jQuery source code, annotated by John Resig. Well, hot on the tail of that we now have eleven things you might not know about jQuery. Meanwhile Lea Verou considers jQuery to be harmful and is proposing a site that lists vanilla JS alternatives to jQuery plugins. Not convinced? In that case here are 26 modern jQuery plugins to make your website better and a great jQuery cheatsheet/API reference I discovered recently.

##learning
Addy Osmani recently outlined how to automatically apply style guide rules to your JS code using JSCS and SublimeText3 (this is great if you are working on a team). Here’s a brief guide to concatenation in JavaScript. Brain bleeding JavaScript obfuscation is the subject of this article, where the author attempts to reverse engineer code involved in a banking trojan. This is a JavaScript app that (based on a number of preset values) will calculate the CSS rules to center any element on a page. Here are a bunch of tips for unit testing services, controllers and providers in AngularJS. And finally, BooJS allows you to execute JavaScript in the command line as if you were in a browser. Pretty nifty!

###Looking forward
Here’s a great piece on ES6 arrow functions, syntax and lexical scoping. Here’s a look at new number and math features in ES6. Not strictly a JS link, but if maths is your thing, check out this maths problem from Singapore which recently went viral. On SitePoint Christian Johansen (author of Sinon.JS) looked at tight coupling of JS code to the DOM and what we can do to avoid it. Whilst elsewhere we learned that npm wants to push JavaScript developers to make Lego-Like web apps (this is part of their new initiative is called Private Modules) and Firefox Developer Edition 39 was released, bringing with it drag elements, console history, and more.

I hope you’ve enjoyed working through these links. Before I leave you, might I remind you to check out SitePoint’s official JavaScript newsletter which you can subscribe to here: http://www.sitepoint.com/newsletter/

Please PM us if you have anything of interest for the next issue or if there is anything you would like to see featured.Paul and Pullo.

2 Likes
2

No it won’t :smile:

Good attempt but the code falls short in some cases. This is what it gave me for unknown height and width content.

<div style="display:table-cell;vertical-align:middle;">
  <div style="margin-left:auto;margin-right:auto;"></div>
</div>

That just won’t work and margin auto on width-less div is useless…

Centering in CSS isn’t that difficult these days once you understand the rules but I admit it can be confusing for beginners.

2 Likes
3

Ha! Well-spotted, Paul.
Did you consider filing an issue on the GitHub page?

4

No I didn’t. I assumed that the code was expecting a dynamic width or height to be added at runtime as the label isn’t clear.

Unknown
The height is not known until runtime, or needs to be set dynamically.

‘Unknown’ usually means that the width/height is dependent on content and not some dynamically added values because that would be the same as the element having width and height to start with.

5

Oh, I see,
So, using just CSS, is it possible to center an element which doesn’t have either an explicit width or height?

6

Depends on the context of the page and the whether the element needs to be in the flow, etc.

7

Yes, as long as its all set up correctly.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0;
}
.wrap {
	display:table;
	width:100%;
	height:100%;
}
.inner {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.box {
	vertical-align:middle;
	display:inline-block;
	border:1px solid red;
	padding:10px;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="inner">
				<div class="box">I am as long as the longest text<br>and as tall as the content<br>pushes me</div>
		</div>
</div>
</body>
</html>

There are other ways depending on circumstance. Flexbox also handles this quite easily.

8

That’s nice. Before I figured that out I would have been tempted to use JS.

Really? I just asked it to generate the CSS necessary to center a <div> of unknown width and height in a container of unknown width and height.

<div style="display:table-cell;">
  <div style="margin-left:auto;margin-right:auto;"></div>
</div>

Which doesn’t work, as it presumably needs width and height declarations (as you say, set dynamically).
I think it would be much more useful if it output something akin your code.
Fancy making an app?

9

Yes that snippet of code it supplies is virtually useless. All it will do is create an element in the top left of the browser with no height or discernible width. A table cell is shrink to fit unless a display:table parent is present and that parent has a width defined (or strangely enough if you give the table-cell a width of 1% it stretches 100% wide but width:100% makes it shrink to fit).

I’m game :smile: (time allowing).

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.