Posts

Posted on

Animations

I like digging into CSS and JavaScript Animations, especially to create small functional UI Animations that can make that Error Message, Button or Sign Up Form “pop” a little bit more. I also find it as a good way to learn web development, since it often involves a mix of concepts, but it also pushes me to design stuff, which isn’t my strongest skill :-)

Here are some examples of stuff I’ve created. Some are only available on my local machine, which is why I’ve uploaded them as video files. But for the ones available online I’ve also included a link to a live demo and code.

Bouncing Buttons

CSS Animations, and a tiny bit of JS

Code

Submit Buttons

CSS Animation

Code

Loader

CSS Animation

Code

Error Message

CSS Animation, and a tiny bit of JS

One more Animated Loader

CSS Animation

Code

Posted on

Today I learned …

… that a whitespace within a div tag is considered a node, at least in Safari, Firefox, Chrome, and Edge but not in IE as it seems. I encountered this when I was debugging an if Statement which executed a block of code even though the specified condition, as I interpreted it, was false.

Here’s a simple example:

HTML

<div id="testdiv"> </div>

Notice the space between the opening and closing div tag

CSS

#testdiv {
  width: 100px;
  height: 100px;
  background: #ccc;
}

JavaScript

  function nodeOrNot() {


    var div = document.getElementById("testdiv");


    if (div.hasChildNodes()) {
      alert("The whitespace is a node");
    }

  }

 nodeOrNot();

Live demo

What the block of code does is to look if the <div> contains a node, and if it does, it alerts the message. In Safari, Firefox, Chrome and Edge the alert is executed, but not in IE.

If you want to read about how whitespaces are handled in browsers, then this is a good resource

Posted on

Web Animation API

Last week WebKit announced that they, with the 13.1 release, now supports the Web Animation API, which means that all the major browsers now support the API in some kind of way. I experimented with the API back in 2014, so when I read the news, I had to see if my two demos now worked in Safari, and they did :)

A pen which lets you ‘Play’ and ‘Revert’ and animation.

See the Pen box.animate by Christofer Vilander (@c_vilander) on CodePen.

And here, just like above, I’m using the element.animate method to rotate the box on :hover

See the Pen element.animate() function by Christofer Vilander (@c_vilander) on CodePen.

Posted on

Productive Weekend

It’s been a productive weekend with a lot of programming and a nice 11K run in mixed terrain. The programming language of choice was HTML and CSS and as usual with CSS it’s the “easiest” things that gets you stuck. What got me scratching my head this time was trying to figure out how to center a text both horizontally and vertically on a page (stackoverflow to the rescue!). I also had to dig into best practice for adding contact info to a web page without drawing attention to spambots.

One trick I found was writing the email adress backwards then using CSS and the text-direction attribute to change (yes you guessed it) the text direction. It’s most probably not a super good solution but I like the creative touch of it :)

Posted on

From HTTP to HTTPS 🔒

The content on this site is now served over HTTPS, meaning that all communication between your browser and this website should be encrypted, using Rapid SSL as certificate provider.

The switch was fairly easy since a lot of the setup was automatically handled by my web hotel, but some things needed manual work, like updating internal links and moving the media library from a subdomain to /wp-content/uploads/

I used a tool called SSL Check by JitBit to crawl the site, making sure all images, scripts and CSS files are retrieved over HTTPS.

Except bumping up the security, the switch should also give the site a minor ranking boost on Google. I’ll keep an extra eye on the Search Console and GA and report back if I see any changes and maybe you can report back if you find any broken links or other errors breaking the SSL-certificate?

Thank you!

Posted on

Timezones, sessions and GA

Maybe I’m the last one realizing this, but it was actually recently I learnt that a session in Google Analytics that spans over multiple dates, for example 23:55 – 00:05, will be split into two sessions. Good to know if you for example work with conversion funnels.

Posted on

AMP (Accelerated Mobile Pages)

There’s been a lot of buzz around the AMP Project lately, especially outside the development community. One reason for this is the news that Google will prioritize AMP pages over mobile apps in mobile search results. Site owners, SEO experts, digital marketers and so on are all trying figure out how to approach this. Me included. So I do what I usually do when I want to understand something technical related – I get my “hands dirty”, which in this case means building a web site using the AMP approach.

Web Site
www.spaghetticode.se

There is not much to see at the moment (2016-09-30). So far it’s a basic AMP page, with some basic styling and analytics. Most of it is pretty straight forward, except that external stylesheets are not permitted and adding Google Analytics is a bit different to the usual approach. You can’t for example just copy and paste the tracking code – it requires a different set up.

I won’t go into any more details, instead I’ve added a bunch of useful link if you are interested in learning more.

AMP Project
AMP in Mobile Search Results
AMP Analytics

Posted on

iOS Development Part 2

I’ve spent the last couple of weeks working my way through the ‘Swift Collections and Control Flow’ course over at Treehouse, and besides that I’ve worked on my app. Basically just to put my knowledge into practise.

The app is still very simple and I haven’t added any new features really, other than it now uses a TableView to present the items and the delete button is gone. Instead, I’ve added functionality that lets you swipe to delete an item.

The app might be simple, but I can’t say that its been simple to build. One thing that had me lost was figuring out the difference in using a UITableView within a UIViewController instead of just a UITableViewController. And to answer that question I’ll make it simple by linking to this thread over at Stack Overflow.

Another issue I had was that the text that I entered never showed up in the list. I could see that they got stored in the array, but for some reason they wouldn’t show up. But the solution wasn’t far away. I solved it by reloading the UITableView each time an item was added. 

    @IBAction func addTask(sender: AnyObject) {
        
        toDoList.append(task.text!)
        print(toDoList)
        table.reloadData()
    }

And last but not least. During the development process I experienced the iOS Simulator to be slow, really slow. I didn’t understand why, and my first guess was that I was running to many programs at a time and that my computer couldn’t cope. But after some searches on google it turned out that I’ve mistakenly hit cmd-t which apparently enabled slow-motion animations. :)

Posted on

Short post …

The bounce rate on this post will most probably be at 100%. Why? Well, I have nothing to say. I just wanted to try WP from my iPhone …

Posted on

iOS Development Part 1

There hasn’t been much coding lately, there’s basically been too much other things todo. But I haven’t been completely away from the text editor, or too be more specific, the IDE. As you may know I’ve been working myself through the JavaScript courses over at treehouse.com, but since a couple of month back, I took a break from JavaScript and switched focus to some iOS development instead. Xcode (the IDE) and Swift (the language) is a completely new environment for me, so it’s been challenging.

So far I’ve only scratched the surface and I haven’t been able to create anything of value other than a really simple todo-list app.

todolist
My first ever iOS App in production.

Next step is to dive into the Swift 2.0 course and then try to add some features to the todo list app.