Building Ionic App for iOS [notes]

Error:

Creating ios project...
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
Cordova can only run in Xcode version 4.6 or greater.
Error: /Users/martin_adamko/.cordova/lib/npm_cache/cordova-ios/3.7.0/package/bin/create: Command failed with exit code 2
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:756:16)
    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

I have Xcode-Beta.app installed. Solution: http://stackoverflow.com/questions/17980759/xcode-select-active-developer-directory-error-on-osx-mavericks

$ sudo xcode-select -switch /Applications/Xcode-Beta.app/Contents/Developer
Creating ios project...
Running command: /Users/martin_adamko/apps/test/hooks/after_prepare/010_add_platform_class.js /Users/martin_adamko/apps/test
add to body class: platform-ios
Running command: /Users/martin_adamko/apps/test/hooks/after_prepare/020_remove_sass_from_platforms.js /Users/martin_adamko/apps/test
Installing "com.ionic.keyboard" for ios
Installing "org.apache.cordova.console" for ios
Installing "org.apache.cordova.device" for ios
Running command: /Users/martin_adamko/apps/test/hooks/after_platform_add/010_install_plugins.js /Users/martin_adamko/apps/test

Q: Should I add class to body?

$ ionic build ios

[...]

** BUILD SUCCEEDED **
$ ionic run ios
Running command: /Users/martin_adamko/apps/test/hooks/after_prepare/010_add_platform_class.js /Users/martin_adamko/apps/test
add to body class: platform-ios
Running command: /Users/martin_adamko/apps/test/hooks/after_prepare/020_remove_sass_from_platforms.js /Users/martin_adamko/apps/test
Running command: /Users/martin_adamko/apps/test/platforms/ios/cordova/run 
Error: ios-deploy was not found. Please download, build and install version 1.2.0 or greater from https://github.com/phonegap/ios-deploy into your path. Or 'npm install -g ios-deploy' using node.js: http://nodejs.org/
ERROR running one or more of the platforms: Error: /Users/martin_adamko/apps/test/platforms/ios/cordova/run: Command failed with exit code 1
You may not have the required environment or OS to run this project
$ npm install -g ios-deploy
[...]
npm ERR! Please try running this command again as root/Administrator.
$ sudo npm install -g ios-deploy

[...]

** BUILD FAILED **


The following build commands failed:
    Check dependencies
(1 failure)
ERROR running one or more of the platforms: Error: /Users/martin_adamko/Sites/hosts/faces/faces/platforms/ios/cordova/run: Command failed with exit code 65
You may not have the required environment or OS to run this project

Window > Devices Shows I’m running unsupported version of iOS:

Screen Shot 2015-02-17 at 20.23.20 Screen Shot 2015-02-17 at 20.22.31

To be continued…

Content-Type & Accept

Ingored Content-Type and Accept HTTP Headers

Only a while ago I’ve started to embrace the HTTP concepts, shortly after trying to build a simple REST engine. Not RESTfull, that would another story.

Most of CMSes, websites, well actually in general we, their authors, developers, simply ignore requests of the application requesting data. They provide always unified response as HTML. Even when implementing AJAX service, the requested accept format of the client application (not a browser) is ignored and is being served JSON on each response.

Let’s not forget: Web browsers are applications able to run applications within themselves – we are used to call them web apps. They can define Accept header different from the browser application. The web app might be written by you, but it might as well be written by other developer later.

There should be no assumption on the best communication format. JSON might be cool and speedy right now, but even now there are other compressed incompatible formats.

That’s why I believe the response of the server should be handled by injectable handler according to Accept header. Writing such handler would allow future extension yet provide clear application responsibilities separation e.g. as a module.

The (Fullscreen) Web App Markup with Status Bar Offset [iOS]

This article is unfinished work-in-progress and will probably change in the near future. If you find topic interesting, you can suggest changes by leaving a comment bellow.

In part 1, we’ve tackled down some of the culprits of positioning fixed header and footer elements. This is part 2 of series how to build a web-app ready boilerplate for a website where we’ll prepare a container for the website’s header, footer and content, which is pretty common.

Since this setup culd be pretty common, I am setting a GitHub Repository to maintain most of the code. The repository will be also compatible with the Publisher view.

Continue reading “The (Fullscreen) Web App Markup with Status Bar Offset [iOS]”

Hacking CSS position:fixed with position:absolute

Objective: Create a fixed position header and footer while maintain the scrolling functionality cross-browser.

Looking at tables for position:fixed support you can notice, the support is fairly good these days. Still I meet people with Android running version Android < v3 and (maybe fewer) iPhones running version of iOS <5.

Point of having a website, not an app is to be accessible as much as possible. But what if you still want to have cutting edge design, even just to wow your customers.

Continue reading “Hacking CSS position:fixed with position:absolute”

My struggles with Composer

Minimum stability, dev-master, tagging. Sigh. I got my head around semantic versioning and most of the packages work as expected.

Using Gists as micropackages

I use gists to “remember” some extra functions. And I thought to myself I might add composer.jsom to load them when required using Composer.

Well, not so fast. Everything works as expected, unless I load function gist package with the root composer.json, but fails when required only by the subpackage. So it works, but not recursively.

I search for recursive gist loading

So far no luck. I have already tried:

There is an article about not loading recursively by design. Might be affected by it…

I might consider tagging gists, but… Gists are quick when used from web. To tag a commit, there’s need to clone, tag and push gist’s repository. Not bad, but there’s but (not-so-elegant).

Another thing: when you edit composer.json from the web, you’ll be surprised that:

[Composer\Repository\InvalidRepositoryException]                                                                                 
  No valid composer.json was found in any branch or tag of https://gist.github.com/XXXXXXX.git, could not load a package from it.

So when you need to change something, still you’ll end up reseting master with keeping changes and amending them back onto first commit.

To be continued…

Thought on process of designing websites

Last year I gave a presentation on my process of designing websites in inDesign on the WordCamp Slovensko 2013. Yes, as you can see I use a tool for print purposes for designing webs. Here are my reasons:

  1. Website is content, lot’s of content, Google loves it and iD handles content very well
  2. Designing is a process, a lengthy one:
    • multiple pages layout for more variations, iterations, experimenting
    • masters to try various layouts on same data
    • continuos improvement (start with basics and add details on the go)
  3. Websites use CSS, sort of inheritance in definitions of styles and so does iD
  4. Recolouring using swatches is a must
  5. Simulation of web box model is achievable using iD.

Sad fact is, there’s not much mention about me on the official site, but there is a presentation and a video.

My speach is in Slovak, presentation too, but you might get the point from the pictures. My speach is not perfect as I get nervous in front of people, but hope get best out of it.

Time’s changing (maybe)

When the Google Webdesigner came out I was rethinking I might stop using inDesign. Well, I still use it, obviously something went wrong. My expectation did not meet reality.

I gave the app a try. It didn’t feel right from the first time and I still don’t.

Designing happens in absolute positions, and since you are editing the .html file by itself, that is the result after you quit the Webdesigner. In this point you might argue, that inDesing is absolutely positioned too and it’s export to .html is far from usable. Yes. But it helps me building subpages using multipage layout and masters.

I might have misunderstood the point of this app, and maybe there’s a hack for using external .css to work on multiple pages in once, but that just doesn’t feel like it was meant to be used that way.

Time might be changing for real

There are some new kids on the block:

  • Macaw.co – aimed for a designers’ tool
  • Mixture – static site generator tool

Questions left

  • How can a CSS bootstrap (TWBS, Foundation, PureCSS from Yahoo!, Topcoat from Adobe, ionic or any other, or even your own) be implemented and used with these apps?
  • Is there any chance of exporting usable templates (like Mustache or, silly as it seams, but even .php e.g. for WordPress)?
  • What about the desining states like when implementatin Modernizr?

… maybe some others will pop up.

Unfinished

Building web sites from pieces

Modularity might be the answer to addressing the DRY principle in web development. I write maybe, because this is just my initial research into these prototypes. None of them might be the answer.

BEM – Block, Element, Modifier

Your markup might look like this:

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="head"></div>
    </body>
</html>

Atomic Design

Again, nice philosophy. Not so much of science around. See the presentation, it speaks for itself.

First thoughts

As much as I like the philosophy and all the russian science glow around the BEM project, well… I’m not a big fan of using underscores in CSS classes. Not because I just don’t like it, it’t because it’s hard to jump from word to word using keyboard shortcuts. And eventually, you will need to fire up some favourite editor of yours to edit that .css file.

I am more inclining to the Atomic way, but my feelings are irrelevant right now.

Let’s see where it goes.