Piece of code

Wednesday, July 23, 2014

jQuery's .show() doesn't always show

If you want to show or hide some DOM element, you probably use jQuery functions show() and hide().

Let's have this piece of code:

$.ajaxSetup({
beforeSend: function (xhr) {
ajaxCount++;
$("#loading-indicator").show();
},
complete: function () {
ajaxCount--;
if (ajaxCount < 1) {
$("#loading-indicator").hide();
}
}
});

which will show or hide an loading indicator.
The problem is that not always the indicator gets hidden though the counter reaches 0 and the condition is true in the complete callback.

The "secret" is that the jQuery show/hide functions have animation enabled by default with the duration set to 400 milliseconds.

In cases like this you should use:

$("#loading-indicator").show({ duration: 0 });

and

$("#loading-indicator").hide({ duration: 0 });

and everything should work fine.

Friday, April 5, 2013

How to revert a git reset --hard

If you ever did a
git reset --hard <SHA>
by mistake, there is hope to recover your work, even if you didn't push your changes to remote before the reset.

Type the following in terminal:

git reflog
- this will show a list of the last places where the HEAD were; you'll see your reset command(s) too

git reset --hard <SHA>
- here you'll write the SHA corresponding with the line just before the reset command(s)

Here you go, your work magically appears.

Tuesday, May 8, 2012

Do you want August to be part of a year or not?

Run this code

<html>
  <head>
    <script type="text/javascript">
      function getMonth() {
        var splittedDate = document.getElementById('inputDate').value.split('/');
        document.getElementById('parseInt1').innerHTML = 'parseInt(month) = ' + parseInt(splittedDate[1]);
        document.getElementById('parseInt2').innerHTML = 'parseInt(month, 10) = ' + parseInt(splittedDate[1], 10);
      }
    </script>
  </head>
  <body onload="getMonth()">
    <input type="text" value="2012/08/24" id="inputDate">
    <p>
      <div id="parseInt1"></div>
    </p>
    <p>
      <div id="parseInt2"></div>
    </p>
  </body>
</html>

and see the results. Passing to parseInt the string '08' without specifying the second parameter will result in undesired integer.

parseInt(string, radix)

When radix is omitted then strings which start with '0' will be parsed in octal and the ones which start with '0x' will be parsed in hexadecimal.

Per Standard ECMA-262 5.1 edition:

15.1.2.2: The specification of the function parseInt no longer allows implementations to treat Strings beginning with a 0 character as octal values.

Make yourself a habit to pass the second parameter too to that function even if you are sure about the value of the first parameter.

Wednesday, November 30, 2011

iTunes sync app and getting 0x8003FFE error

I encountered this error when I tried to install an .ipa file to iTunes and sync it to a device.
Until now there are 2 cases when this error occurs:

A. when the user installed a new firmware on device, and the solution is to follow these steps on the device:
1. Go to Settings
2. Go to General
3. Go to Restrictions(4-digit passcode may be needed)
4. Turn on "Installing Apps"
5. Resync your iPhone and the application should install just fine.

B. when you build your ipa with Xcode > 4.2 and the user has an iPhone 1, iPhone 3G, iPod touch 1 or iPod touch 2:
The reason is that those devices are on armv6 architecture and this was silently removed from default build settings of Xcode.

The solution is to manually add this option under Architectures section of Build settings.

https://discussions.apple.com/thread/2475567?start=0&tstart=0

http://en.wikipedia.org/wiki/List_of_iOS_devices#Features

http://stackoverflow.com/questions/7488657/how-to-build-for-armv6-and-armv7-architectures-with-ios-5

Wednesday, April 20, 2011

Sproutcore: StackedView is stacking content

If you developed in Sproutcore you used for sure the ListView component. And of course you’ve encountered the long lines problem that it gets cut and you wondered how can you make the lines to have height accordingly with the content inside. Don’t hit your head of the walls anymore, Sproutcore has StackedView component which makes all that magic.

Lets see if it does that:
First we check the documentation for StackedView component
“A StackedView is a CollectionView that expects its content to use static
layout to stack vertically. This type of collection view is not designed
for use with large size collections, but it can be very useful for
collections with complex displays and variable heights such as comments or
small notification queues...
This view makes no attempt to size or position your child views.
It assumes you are using StaticLayout for your child views...”
and more on that we see that it extends the SC.CollectionView. The next steps is:

- to look at the SC.StaticContentView’s content property:
“The HTML content you wish to display. This will be inserted directly into the DOM, so ensure that any user-generated content has been escaped … @type String”
and keep that in mind;

- to look at the SC.CollectionView:
“... The view will create instances of exampleView to render the array ...”
and further more on exampleView which is SC.ListItemView type and continue with SC.ListItemView:

“The content object the list item will display... @type SC.Object”

So we want our exampleView to be SC.StaticContentView type, in fact this is the recommendation for StackedView. But what will happen with content, it will be String or SC.Object and how the components will manage that?

If we write our code to extract some information from content:

testStackedView: SC.StackedView.design({
  contentBinding: 'arrangedObjects from our controller with data',
  selectionBinding: 'selection from our controller with data',
  layout: { top: 0, bottom: 0, left: 0, right: 0},
  exampleView: SC.StaticContentView.design({
    staticHtml: function() {
      var content = this.get('content'), html = '';

      if (!SC.none(content)) {
        html += '' + content.get('someProperty') + '';
      }
      return html;
    }.property('content').cacheable(),
    contentBinding: 'staticHtml'
  })
...

we will get errors like that
Uncaught TypeError: Object [object DOMWindow] has no method 'getPath'
and that’s because our content in fact is content from exampleView which is string.
We need to overwrite the render method like this to make things work:

testStackedView: SC.StackedView.design({
  contentBinding: 'arrangedObjects from our controller with data',
  selectionBinding: 'selection from our controller with data',
  layout: { top: 0, bottom: 0, left: 0, right: 0},
  exampleView: SC.StaticContentView.design({
    render: function(context, firstTime) {
      var content = this.get('content'), html = '';
  
      if (!SC.none(content)) {
        html += '' + content.get('someProperty') + '';
        context.push(html);
      }
    }
  })
...

Now we see the difference and our StackedView now works just fine.

That was my piece of code.

Friday, March 18, 2011

Invalid byte sequence in UTF-8

If you ever encountered this error when you are running your Sproutcore application:

ArgumentError at /yourapp
invalid byte sequence in UTF-8

you should check your comments in files for characters like © that are not valid UTF-8.

http://en.wikipedia.org/wiki/UTF-8#Codepage_layout

If your preferred editor has a setting regarding file encoding, you should set that on UTF-8 and the problems are solved.

That was my piece of code.

Creating a reusable theme in SproutCore

The first step is to open a terminal window and go to the app directory.

Type and run the following command:

sc-gen theme app_theme

and make sure that the name of theme is not the same with the app name because will generate conflict.

If all went ok, you will see these messages:

~ Created directory at themes/app_theme
~ Created directory at themes/app_theme/resources
~ Created file at themes/app_theme/resources/theme_styles.css

You could check that the above mentioned structure has been created in your app folder. After that you need to create the theme.js file in the apps/app folder with the following content:

SC.Apptheme = SC.BaseTheme.create({
 name: "app_theme",
 description: "The default theme for my application"
});

SC.Theme.addTheme(SC.Apptheme);
SC.defaultTheme = 'app_theme';

Make sure that the name and defaultTheme properties match the name you gave when you generated the theme.

The last step is to edit the Buildfile and add the theme property to the application configuration:

, :theme => 'app_theme'

Now you can start using your new theme. You can put all the CSS and image files that you need in the new resources folder.

NOTE: If you encounter the following error: ArgumentError: invalid byte sequence in UTF-8, please check this.

You can even use SCSS extension

For example, for getting another background color for the SC.ButtonView, put this piece of code in a CSS file under the new resource folder:

$theme.button {
  background-color: #000000;
  &.active {
    background-color: #c0c0c0;
  }
}

References:

http://guides.sproutcore.com/theming_app.html#styling-a-button

Ideas/Reviews/Thanks:

Piotr Steininger, Alex Percsi (Twitter: poolshark25)

That was my piece of code.