www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Transmit application from Panic software fails

I switched from windows to as I was very happy with my iPad and saw many serious web developers using . Also on the blog front many of the screen shoots showed people using . Most tools for us web nerds appeared first on , and a good friend changed also to the Mac world with success. It seemed like a logical change for me, being a developer.

Mounting FTP servers as a drive

Sometimes I work on FTP based contents, like in a website. On windows you can easily mount a FTP connecting as a “drive”. That works very fine in a easy and fast way, on PC… On Mac I was surprised to discover that OSX not allows for a simular useful method. You can mount a drive on OS level, but it will be READ ONLY (!) making it far from useful.

What should I do? I “panicked” – that is people I trust said that I should simply use Transmit from Panic software – an application costing $34,00. I was happy to discover that a solution existed, and the prices was okay as it solved a basic need in my daily work…

In fact a lot of issues seemed to exist with Panic Transmit…

I now have version 4.4 of Panic Transmit and experience some basic fails from Transmit. I mount a FTP server as a drive and get errors like:

The file content is suffixed with several “nul” values:

Most files sometimes is suffixed with "Nul" values

Most files sometimes is suffixed with "Nul" values

Files are not always fetched 100%

Sometimes files are not fetched 100%, which has forced me to scroll down to the button of the file to try to see if all the file is there (so that I will not destroy the file when saving to FTP server).

Never let Panic Transmit stay connected during Mac Sleep

Never let your mac go to sleep while letting Transmit stay open – you never know which state your mounted drive is in when you wake your mac..

Sublime Text 2 gets slow when working on mounted drives

Slowing down my editor. My Sublime Text 2 is working very slow if I work on folders placed on a mounted drive.

Conclusion: Transmit makes me panic

All in all it is one of the few very bad experiences I have had after changing from windows to OSX. It is a major issue as I work on sites through FTP. I was happy when I heard about Panic Transmit being able to mount a FTP drive (as Mac OS fails to do so….). I was surprised to discover that OSX could not mount a FTP drive with Read/Write possibilities.

Anyone with suggestions for solutions? Like another application which not fails to deliver stable mounting of FTP drives.

Share

SVG is here – use it!

Back in the start of HTML Tim Berners-Lee defined the Hyper Text Markup Language something which gave the world a new layer for sharing content. Though it allowed for use of graphics – the IMG tag – it was not too strong on vector, scalable graphic.

A new project was born: VML to solve that need. It stands for Vector Markup Language and it has deep roots in the offline graphical language Post Script. Postscript is even today the basic of PDF, which I guess needs no explaining. We use it every day. Microsoft was the only company which started implementing VML and in fact even today Microsoft Internet Explorer supports it! Microsoft I guess needed the vector graphics ability for its “save to HTML” on all its office applications. I must say that it is too bad for Microsoft that people have not given them the credit for doing that…

Back in those days I wrote to W3C (which defined the rules of the web) about this brilliant VML. I got an answer that if I loved VML I would simply go crazy about the successor which were to replace VML. It were to be named SVG – Scalable Vector Graphics, and since then I have been waiting for SVG to become a standard. I guess that I can clap my little hands and cry out: SVG is here folks! Go and use it!

So what can SVG do? Well whatever you can draw, you can draw in a vector graphics program like Adobe Illustrator you can save as SVG and put inline in your HTML code! You can draw circles, rectangles, shapes, bitmaps, fonts and whatever you can think of drawing. You can animate it, you can let events control it, you can interact with it through say mouse movement, you can manipulate the elements in the SVG DOM (Document Object Model which represents the elements rendered as SVG) from javascript…

So people out there start adding SVG! Let me give you a very simple example which I made. Play around with and be amazed:

Check out this Pen!

Related content

 

Share

New on Mac: Copy File path service

I sometimes need a path to a file or folder working as a webdeveloper. It may be a CSS file path or say a image path. The feature to copy the file or folder path in Apple finder does not exist as standard. When I ran into the blog post “How to copy a file path in OS X” on cnet.com by Topher Kessler I has happy. I followed the instruction by Topher given in the post and voila here you are a service ready to install on your Mac OSX computer.

Installing it is easy

Download the file “Copy Path as Text.zip” and uncompress the Zip pile. Inside it you will find the workflow to install.

Using it is even simpler!

When you have installed it you are ready to go:

  • Open finder
  • Mark the file(s) and folder(s) you want a file path to
  • Right click on them and choose the service “Copy Path as Text”
  • Mac tutsplus have a range of blog posts about automator.
You are done – the paths are now on your clipboard, ready to be pasted in where you need them.

Related content and information

Share

Umbraco newbie notes: Standard values

I am a newbie on the Umbraco CMS and wants to share my experiences during my learning curve period. Feel free to comment on by posts: Am I doing something wrong, should I use another methodes, do you have other experiences – do share with me and the other readers.

The building blocks of Umbraco

Every CMS builds on some sort of items. An item is the content container, it contains a number of properties (fields) in which you can add content. In Umbraco everything is an item. Other CMS systems operates with predefined types like “Page” or “Paragraph” (Dynamicweb CMS), Ubraco leaves it up to you, the developer to define which “Document types” there should exist on a given website.

In Umbraco one of the very strong features is the way you can easily create your content holders, your “Document types”. Each Document type consists of a number of fields which each is of a given “Data type”:

  • Document Type (found under settings)
    • Data Type (found under developer)
    • Data Type (found under developer)

So you can create any kind of content using those basic building blocks. You have a number of Ubmraco predefined Data types like when you start a new Umbraco solution. Let me show how it looks like inside the Umbraco dashboard.

Umbraco Document Type – “Person”

The dialogue box for creating a new document type in Umbraco

The dialogue box for creating a new document type in Umbraco

This is the dialogue box you see when you create a new Document Type. The document type, when created, can be used by the editor of the website to add content to the website. Lets create a document type “Person” to hold name and age.

Umbraco document property – a container field

Creating a property on a document type in Umbraco

Creating a property on a document type in Umbraco

This is the dialogue box you see when you create a new property on a Document type. You can see some of the types in the dropdown box. The list shows the defined Data types on the current website. If you cannot find an appropiate data type you can define your own easily.

The fields of the document property are easy to understand, I will not go into dept here explaning them.

  • We create at document property named “Name” and select type “text string”.
  • Also we create a property called “age” and select type “Numeric”

With that done our new Document Type “Person” is ready to use.

We will add the new Person item under another document type, and first we need to tell the system that our Person document type can be inserted under the base document type – the “root” in our content tree.

Tell the system that you should be able to add Person types to the content structure

Open the base document type in the “settings > document types” section. Find the tab “Structure” and check the “Person” in the list of document types. That will tell the system that the “base” type can contain “Person” types.

Setting up allowed child document types for a document type in Umbraco

Setting up allowed child document types for a document type in Umbraco

Create a Person item

Creating an item in Umbraco

Creating an item in Umbraco

I have right clicked in the content structure of my website and in the dialogue box I have entered “Sten” as the name and choosen the “Person” document type. That will create an item which is called Sten and is of the type Person.
I now should enter values in the item:

Adding content to the fields of item in Umbraco

Adding content to the fields of item in Umbraco

The values for “Sten” is “Sten Hougaard” as name and in the age field I enter “48″. I click either the Save or the “Save and publish” icon and I am done.

Default values – or standard values

To make it even easier to create content I want to add the option to the system to have “Default values” – or standard values for my Document types. In Umbraco that is not a standard feature, but with the package system of Umbraco it only takes a few minutes to add the feature to the system.

Open the “Developer > Packages > Umbraco package Repository”

The Umbraco package Repository is a place like an “app store” known from your smartphone or tablet. It contains a number of extra features you can use to extend your Umbraco system.

In the Search box enter: “standard values”:

The Umbraco package repository - search for standard values

The Umbraco package repository - search for standard values

You can see the first search result is called “Standard Values in Umbraco”, click on it and you will get more information about the package. Click on the Install package and you are home free, ready to go! You may have to logout and login before the functionality will be active.

Goto “Settings > Standard values”

When you open the Standard values you will see a list of the defined Document types defined in your system. The idea is that you locate the type, enter some (default) values and save the item.

In future when you create a new item, it will have the values pre defined as standard (default) values on your new item. Very usefull!

Happy implementing! And do give me feedback either as a comment or by rating this post, thank you.

Links

Share

Become a millionaire – write a great webapp!

Today I wrote my first “Initial impressions”. It is about a eBook which dives into AngularJS. A framework from Google offering great features for webapp developers.

The future wil undoubtedly contain lots of web based apps. I expect that it may will be an importent supplement for app store based native apps. We are not there yet, but HTML/CSS/Javascript based browser apps are getting stronger and stronger by the day. Things like accessing the hardware of say the phone are offered through . You can for instance access the webcam and manipulate the live video, doing things like “Chroma key” (“green curtain”) overlaying elements on the video from the webapp. All done using only and javascript!

Webapps run anywhere only a browser is required. The days of plugins in the browser are long gone! Many devices today share the rendering engine used to convert then HTML markup, the CSS styling and the javascript into a webpage, they use an open source engine: WebKit. For instance Google Chrome, Apple Safari and Opera desktop browsers all use webkit. Other devices like Apple iPhone and modern Samsung TVs also use it – so we are getting closer to a write-once-use-everywhere scenarie, and that is great!

When someone wants to offer an online service it makes great sense to choose a platform which have a wide use. The cost of developing such services are lower when you can write-once-use-everywhere. Maintenance costs are lower and it will all lead to more services for us users.

It also makes it much easier to develop in such a setup cause as many discover the power of webapps we will see more developers blog and share their experiences with the HTML5 based webapps. It is a positive development which we all enjoy.

A great example from history with environments that works is the Microsoft Visual Basic script. It was the fundament of many of the initial applications developed for the Microsoft Window operating system. Thousands of “apps” were developed by many people. Many of the apps were dead after some years, but as so many “seeds” were planted the number of surviving apps were larger, and many of the software houses developing for Windows today have root in that area of time. It also was the reason for many people to choose windows.

Apple iOS saw the same development, and today many people choose iOS instead of say Google Android because of the fact iOS have more apps.

With webapps we may finally have the chance to run our beloved app anywhere – choose whatever platform you desire, just be sure it has a great browser! Also we may see even cheeper apps because we dont have to pay a percent to the hosting app store as we sell the app.

This takes me back to where I started: I wrote my initial impressions on an eBook which is about AngularJS. AngularJS is a framework which will let people write great webapps – who knows if YOUR webapp will attract so much attention that you become a millionaire? :-) Let your hope drive you life, go for realising your dreams! And perhaps one of those dreams can be realized through a webapp, written in AngularJS, something that this book is an example of :-)

Initial impressions from the ebook “instant AngularJS (starter)”

Share

Initial impressions from the eBook “Instant AngularJS Starter”

Instant AngularJS Starter [Instant]
Instant AngularJS Starter [Instant] by Dan Menard

The book by Dan Menard is a introduction to programmers who are looking
at or using Google AngularJS. If you are building webapps you
may consider using the MVC based AngularJS framework from Google. It enjoys a wide support on the web with great online resources, blog posts, tutorials, videos and as it is popular with many hits on Google.

This eBook costing only 4.24 pounds (a special offer ending on the 30th of March 2013, normally 4.99 pounds) is a fine example of the support that AngularJS is seeing on the web.

The book

It starts up explaining about MVC starting with the often used “helloWorld”
AngularJS app. I would love to see some more illustrations showing the
basic AngularJS setup here – but as the target is programmer, the missing illustrations is not a big issue.

A more complex app is designed and a step-by-step approach takes
the reader gently from helloWorld to a Guidebook webapp. The author
moves relative faste into some of the advanced parts of AnguarJS,
like the routing part of AngularJS.

Routing in AngularJS

The routing part of AnguarJS is the part handling the loading of controlers and templates based on the URL. A very useful part to understand – which I myself had some trouble understanding before I read this eBook about AngujarJS.

Example: The routing part is important for webapps as often the state of the
webapp is reflected in the URL – the author notes about routes:

Routes contain more features than we’ve covered here. For example, the samples above are perfectly valid when accessed directly (this behavior is called deep linking). Routes also support back/forward navigation, meaning if the user hits a browser’s back or forward button, AngularJS will return to the most recent internal URL instead of exiting the application altogether.

The code examples which you get with the book together with the eBook gives you a chance to dive into AngularJS.

It gave me some fundament into AngularJS and I look forward to reading all the book! With this book you get a chance to dive into AnguarJS through a not-too-complex example – a great start when learning AngularJS.

Conclusion

If you are seeking to get a better understanding of AngularJS and you prefer (e)books, this eBook Instant AngularJS Starter [Instant] by Dan Menard
can be recomended. I apreciate people who share their knowledge on the web, be it through a blog, twitter, facebook or as Dan through a eBook, so go ahead and buy this eBook to get some of the AngularJS knowledge of Dan.

Pro:

  • Code examples can be downloaded
  • Dan heads directly into practical example
  • Price is fair

Cons:

  • Missing illustrations
  • I would like to get links to editors which are perfect for developing AngualarJS, like Sublime Text

Suggestions for improvements to the book:

Store the code examples somewhere on the net, like in http://codepen.io so that the readers can see the code live online.

Links

Share

Great site: “CSS FRONTEND FRAMEWORKS”

CSS Frontend Frameworks

CSS Frameworks

Building content for the web you start up with some skeletons, like the fundament on a house. Many such skeletons – or frameworks – exists, each of them offers many building blocks allowing you to build your website.

The part of a webpage which is used to style or layout websites is called CSS: Cascading Style Sheet. Some of them require a minimum version of a given browser to work. Like Microsoft Internet Explorer 8 or Firefox 3.

This page CSS FRONTEND FRAMEWORKS offers you an overview of the different frameworks around, so go visit this site to see some of the features and requirements for many CSS frameworks.

Share

The perfect tool for reference search and snippets?

Development involves using a lot of tools, apis, methods and documentation for such items is often found using your friend Google Search. Today I have seen a very cool tool for Mac . Its called Dash, and its a free app found in the App store.

The cute logo of the Dash app

The cute logo of the Dash app

You can install the Dash app from the App store.
It is free but has a “Full version” which cost around
$ 5,- which I think is a very fair price!
You may also download it from the developer website.

What is it that Dash offers?

I must admit that my experience with Dash is sparse, and this blog post is only an introduction to the app. It does search in a lot of the wide spread apis from anywhere in your Mac OSX. It has – to mention a few – HTML 5, css,  javascript, , UI, , , Perl, Ruby, NodeJS…

In the image below I have opened a document in my preferred editor “Sublime Text 2“. I want more information about the tag “section”, and as I have set up the short-cut “Shift+Cmd+$” in the OSX global short cut settings I simply mark the tag and press that key combination. Voila! Dash opens and have found some nice HTML5 documentation for the section tag, cool!

Dash offers integration to any Mac OSX app

Dash offers integration to any Mac OSX app

Snippets – cross app too!

It also offers snippets, which I have tried only a little. It seems very cool as it works anywhere allowing you to add “abbreviations”  for each snippet. So say you have a HTML5 boilerplate which you use a lot, simply paste the boilerplate into Dash, add some variables or an date place field (which will automatically insert current date when executed) and define say “html5bp. Every time you type that abbreviation it will be replaced with the snippet!

If you have any comments or experiences related to Dash please share through a comment here on this blog post.

My small notes – updates

  • I would love to get “fuzzy search” like in Sublime Text 2
  • Seems that you cannot easily share found directly to say twitter, pity

Related information

Share

Wish for 2013: Let there be more HTML5 apps

One the things I hope for 2013 is to see more based apps. As evolves I hope that the features found in based apps will make the developers prefer more than native apps.

A little history – the Flash epoch

I have never been a fan of Flash but I acknowledge that many very innovative and functional apps were created using Flash. Flash made it easy to develop cross platform apps which would run here there and everywhere. As I have not really developed in Flash I can only share my thoughts about why it “suddenly” turned into something not fancy.

Apple did not let Flash into its IOS for mobile devices must have been one of the major reasons. I guess that Apple did not like that powerful applications could be build on there app store based devices. Apple is receiving a lot of money through the percentage they get when people sell apps through the app store. If developers could develop apps which were as powerful as native IOS apps it would be a thread towards their business model for IOS, I guess… Also they would have no control over how apps were distributed (sold).

Another angle is that the only way to develop apps in Flash would be using the tool from one company: Adobe. It would be a closed system controlled by one company – not good.

Native apps

Today we are seeing a lot of native apps which are coded to run on a specific OS. You can develop them using many development tools and also cross compile them so that they run on more than one OS, but often it is a relative low level language like C++ or JAVA. You will have to register and pay to gain access to get your app distributed for each OS. I think that it is okay that people have to pay for the handling and distribution of apps, as it involves some work doing that. Of cause you can discuss if the percent the distributer (Apple, Google and Microsoft) are charging could pay for this work, but I think that it is okay.

When you buy an app

Talking about smaller apps like those you can run on a mobile device like at phone or a tablet you normally can only use the bought app on that device. Like when I bought an iPad – I bought some apps which I really liked. At a later state I bought an Apple Mac Mini computer and discovered that the apps for the small mobile iPad were not available for my much stronger based device! Why? Because the apps were written in a low level language for the mobile iOS! What? Can it be true?

HTML5, javascript and CSS3 apps, now!

That is why I hope to see developers go for modern HTML5, javascript and CSS3 based apps! Easy to develop, thousand of tools, millions of people know about those “languages” and it is cross device, cross platform apps! They run on smart phones, computers, modern TVs, tablets and many other places.

They are easy distributed, easy updated and with open source browser engines like webkit (which is implemented to run even in your TV) they run on so many devices.

As a front-end developer it also extends the areas where I can make a difference. The audience of my code is broadened and I can work developing on many other places than “just” websites. I could develop a TV app for the local community (which would also run any other place which understands HTML5, javascript and CSS3).

For now I have “invested” in a developer license for the Windows 8 market. Cause they accept HTML based apps! The apps will run on any device which runs Windows 8. That is actually also something I hope that the other players, Google and Apple will go for: Cross device thinking – no more: Just iPad or just OSX! Please!

Share

XSLT transformation on Mac OSX

The startup screen of Transform

As I am now on Mac I am on a constant search for the tools I miss from my time on Windows. I do some offline transformation as I implement websites in for instance Dynamicweb CMS.

I often get the XML from the CMS, download it and build the XSLT to transform the raw XML into HTML. Back in the old days where I used Visual Studio every day on Windows I could do XML transformation in there, I could also single step and more nice stuff.

On Mac I use Sublime Text which I have found such an option for – so I tried to search the Apple App store for a tool to help me. I discovered “Transform” by Niel Ang which has it advantages. I will update this blog post with more notes about the product as I discover them. For now I have discovered this:

* Works dynamically and reacts to file changes
* Works with files, so it can be used with any editor
* Has a preview option (of transform result), I have not yet found out how to do this, which is due to my rather thin knowledge about running a web server on my mac.
* As with other purchased apps you may use it on more than one device

You can find information about the product here: http://neilang.com/transformapp/ where there is also a link to appstore. I find the price 32 DKK / 5 $ an okay price.

Share