They are basically the same thing. A CTE has you doing a select AS and defining a variable holding the selection instead of just nesting a select inside of parenthesis.
Monday, October 26, 2015
Sunday, October 25, 2015
Tweetbot disenchantment
Today Tweetbot just stopped working on my iPhone 4S running iOS 8.1.3 (12B466). It failed to connect to Twitter and started telling me that I needed to update to version 4. Supposedly (or so it said) I could go into the app store and go to "Updates" and then to "Purchased" to finally click on Tweetbot 3 to upgrade it, but when I do all that the app store just spins and spins, struggling. Grrr. I could just buy version 4 for five dollars, but who cares? I don't see why I can't just use Twitter's mobile-friendly web site at my iPhone instead of Tweetbot. Tweetbot is no TweetDeck after all. (I miss you TweetDeck.) You know, I work with someone who has a Windows Phone and when I've asked him about dealing with the lack of apps for Windows Phone he has just sort of shrugged as though it were not a problem and responded by saying "I just go to the web" or something similar. I'm starting to know how he feels. Who cares about smartphone apps? Open your eyes Tom.
Saturday, October 24, 2015
CSS tabbing misadventure
I tried to rewrite this such that I didn't have to have styles for specific tabs and that I could instead have a stylesheet applicable to all tabs. The best I could do was:
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<style type="text/css" media="all">
body {
background-color: #DDEEEE;
}
#innerWrapper {
height: 37px;
width: 190px;
margin: -37px 0 0 10px;
border-left: 1px solid #000000;
}
#innerWrapper section {
float: left;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
height: 30px;
padding: 5px 5px 0 5px;
background-color: #F2F2F2;
}
#innerWrapper section article {
display: none;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked + section {
background-color: #FFFFFF !important;
border-bottom: 1px solid #FFFFFF !important;
}
input[type=radio]:checked + section article {
display: block !important;
width: 180px;
position: absolute;
left: 40px;
margin-top: 20px;
}
label {
cursor: pointer;
}
#outerWrapper {
margin: 71px 20px 20px 20px;
border: 1px solid #000000;
background-color: #FFFFFF;
height: 80px;
width: 200px;
}
</style>
</head>
<body>
blood stains, ball gowns, trashin' the hotel room...
<div id="outerWrapper">
<div id="innerWrapper">
<input name="tab" id="foo" type="radio" checked />
<section>
<label for="foo">foo</label>
<article>My friends and I, we've cracked the code.</article>
</section>
<input name="tab" id="bar" type="radio" />
<section>
<label for="bar">bar</label>
<article>We count our dollars on the train to the party.</article>
</section>
<input name="tab" id="baz" type="radio" />
<section>
<label for="baz">baz</label>
<article>And, everyone who knows us knows that we're fine with this.
</article>
</section>
<input name="tab" id="qux" type="radio" />
<section>
<label for="qux">qux</label>
<article>We didn't come from money.</article>
</section>
</div>
</div>
...jet planes, islands, tigers on a gold leash
</body>
</html>
There are a couple things that are bad about this. First of all, the absolute positioning unfortunately brings with it an inability for the content to push the bottom of the content box downwards on the page. The content thus can only be as tall as I've set the faked content box to be or it will run beyond it. Honestly, this isn't the end of the world as one could just slap a vertical scrollbar on the content if need be. However, the use of "left" is really, really bad. This isn't going to work well in modern web sites wherein all of the content sits inside of a centered div. One could, I suppose, put all of this stuff inside of an iFrame and then summon it into a centered page but if you are going to the lengths of undertaking such a hack you might as well just call out the tabs by id in CSS, you know? If you don't know how many tabs there will be and thus find yourself struggling to write some CSS for it you could make the CSS bubble up inside of style tag inside of the rendered HTML. That way the styles could be calculated on the server side and bubble up to the markup the same way the number of tabs might. You'd number the ids as tab01, tab02, etc. in this paradigm. Anyways, my flawed mess above looks like so:
Addendum 10/25/2015: I slept on it and realized that one could approach the "left" problem like so:
left: calc(50% - 13px);
The fifty definitely needs to be a fifty in the name of centering off the center edge but the thirteen should be replaced with whatever number suits your purposes for positioning. You probably would need an offset. I checked and this worked in three of the four browsers shown above. The outlier was the Safari browser (for PC) which hasn't been updated since 2012.
Xui
As mentioned, I went to this tech talk and learned of this GitHub project, Xui! (You won't be likely able to follow that link. It's private.) Interesting things to say about Xui (pronounced ex you eye) are:
- The team develops using JetBrains WebStorm as the IDE. Again, all of the work is AngularJS frontend work, only touching the backed through ASP.NET Web API calls for data marshalling (which may be easily mocked/stubbed in testing), so there is not an immediate need for Visual Studio though all of the team members, who have C# backgrounds, found WebStorm easy to pick up and warm up to. A beta of WebStorm 11 is available.
- The team embraces TypeScript, now on version 1.6, in the name of gleaning insights from compilation errors. The team's build process first runs a task that compiles the TypeScript to JavaScript and then follows up with a task that minimizes the JavaScript. GruntTS is a task that compiles TypeScript to JavaScript. It is recommended that you filter d.ts files out. Source Maps in TypeScript are simple files which may be generated with your JavaScript-from-TypeScript JavaScript which allow you to, when debugging JavaScript, figure out what line of TypeScript is responsible for creating a particular, questionable line of JavaScript. This allows you to debug TypeScript in a roundabout way. Yes, you may also just debug it directly with Visual Studio 2015.
- This is an AngularJS project! Angular 2.0 will be built on TypeScript. I remember hearing that there was a memory leak in the two-way binding in Angular and that, thus, the Angular team was just going to pull it out of version 2.0, but apparently it will remain. Instead of memory just being kept in $scope, the data will make its way back to the controller when applicable. Also, there is just now a maturing understanding in this space that you don't want to just two-way data bind everything. In a ridiculous example, if you had a form with one thousand form fields, you would want to cherry pick what really needs to be two-way databound. A better alternative to making a form with one thousands field though is to break the content up into a wizard format. That too helps with the two-way databinding data manipulations. (Some of what I offer in these notes comes not directly from the speaker giving the talk but instead from chitchat I had with others in the audience before the talk began.) Directives will not exist in Angular 2.0. The framework moves to a purely component-based model. Angular Materials seems immature. The team needs its own thing to keep reusable components and it has to be downwards compatible to IE9 and not just one browser version less than the current version which seems to be the trend across similar projects. The lack of IE9 support in similar existing tools (AngularUI Bootstrap is an example) puts the Xui team in a situation where they have to roll their own animal, namely Xui itself.
- Bootstrap is also used for layouts, grids, and responsiveness.
- Bower, kinda like NuGet in that it pulls dependencies, is used to pull dependencies from GitHub repositories. You may specify what particular versions to pull from the GitHub repositories with Bower so that new stuff doesn't surprise/sabotage you.
- NodeJS is used mildly in that it runs Grunt scripts. (I learned that WebPack is an alternative JS build tool. Er, I suppose I learned as much for a second time that is.)
- A lot of core concerns that are used over and over in the team's apps have become components in Xui. Diagnostics, dialogs, UI notifications, and even just a button are examples. You don't want a button looking six different ways across six different forms rights? Each component has basically three parts:
- a .html file
- a .less file (LESS is compiled to CSS)
- a .ts file (the TypeScript is referred to as the "code behind" in their paradigm)
- Unit tests are the fourth of the three pieces. They sit in the same folder with the rest of the code side by side with everything else. Protractor is used for end-to-end testing, yes, but in these cases, Jasmine is used for the unit tests. Karma runs the Jamine tests.
...is an example of how one of the components would be called out to in markup. grunt-ngdocs is a Grunt task that builds the components (and this tool is also used by the Angular team itself to do their documentation). Like AngularUI Bootstrap, this framework handles the "maybe for mobile" possibility by being responsive design-friendly. - What are Angular watches? Angular has a loop for dirty checking. This loop is always going on in the back of your AngularJS app. (Always monitor your watches.) The Xui guys rewrote the loop for each component and now they have their own, independent watches.
- Plunker is a website that allows you to test and run JavaScript. The team has developers play with their components here before putting them into applications and grunt-ngdocs pushes to Plunker.
- grunt-html-to-js is going to crawl all the .html files and put routes to them in a .js file. This is a template cache.
- Jenkins is used for build facilitation. Source files are uploaded to it and it builds to a GitHub repository.
Abstract away the object prep work.
It occurs to me that a good use for the factory pattern might be to serve for building out go-to wrappers around the instantiation of objects of third party libraries a developing team does not control itself, and especially so if these objects need to be prepped a little bit after instantiation. Example: I make a Foo and then set the Bar getsetter on it in a second line of code immediately after. Maybe you don't want something like that sprinkled all over your code. Maybe it should be driven from one place.
Subscribe to:
Posts (Atom)