Code Blog

Displaying 21-25 of 46 results.
2016/06/01 Programming,Xcode

After starting to use the new layout in Xcode I run into the “Frame for Button will be different at run time” warning. Not very obvious how to solve this, but after searching online I found this very useful tip:

This warning is displayed when the actual position of the element is different in your storyboard than while running the app.

You can select that element and then hit 'Option+Cmd+='.

This will update the position of the element in the storyboard and that warning will go away.

2016/06/01 OpenWRT

In order to keep the router in a stable condition I want to reboot it automatically every morning. This is a bit trickier than one would expect because the clock may get caught in an inifinite loop of reboots, see link below for more details. So the recommended way is to add a delay and update the clock before rebooting the router.

# Reboot at 4:30am every day
# Note: To avoid infinite reboot loop, wait 70 seconds
# and touch a file in /etc so clock will be set
# properly to 4:31 on reboot before cron starts.
30 4 * * * sleep 70 && touch /etc/banner && reboot

Good tips from: https://wiki.openwrt.org/doc/howto/cron

2016/04/28 CSS

I had some problems with image flicker when changing background images. Found this tips at stackoverflow how to preload images in CSS, works very well. Just add more urls to preload more images.

body:after
{ 
 display:none; 
 content: url(path/to/image.jpg) url(path/to/image2.jpg); 
}
2016/04/26 Javascript,Yii

I had read about how to do a parallax effect for my background image (so effectively 1 layer parallax effect). I means that the background image slowly moves along as I scroll the text on my blog. In my case the background moves with 1/5 of the speed of the web page scrolling.

However I ran into some troubles when I happened to write too long post (i.e. many photos in posts quickly adds up in height). I had added some margin by using a tall background image in order to avoid this, but that was just a quick hack, and finally that just didn't seem to be able to solve it. 

Actually I would like the image to wrap around once it runs out of pixels to cover the whole web page window. I guess the setting the CSS background property to "repeat-y" and then use a javascript call to update the height as I scroll should do the trick but I opted for another solution.

 I decided to create 2 images that are shifted half-way in Y direction and swap between them as I scroll down. 

Illustration of switching between the two background images. One good tips I found is to use the "offset" filter in Photoshop and enter a 50% vertical offset and then re-save the image.

.bg
{
  background-position: 50% 0;  
  position: fixed;
  width: 1000px;
  height: 2000px;
  bottom:0;
  top:0;
  left:0;
  z-index: -1;	
}

.bg1 
{
  background-image: url('images/bg1.jpg');
}

.bg2 
{
  background-image: url('images/bg2.jpg');
}

I added a div at the top of the web page: <div class="bg bg1"></div>

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  var imageheight = 2000;
  var bgscroll = scrolled*0.2 % imageheight;

  if ( bgscroll >= imageheight/2 ) {
  	$('.bg').removeClass('bg1').addClass('bg2');
  	$('.bg').css('top',imageheight/2-bgscroll+'px');
  } else {
  	$('.bg').removeClass('bg2').addClass('bg1');
  	$('.bg').css('top',-bgscroll+'px');
  }
}

I can then use the CSS class property to switch between background images for the bg div element.

When should the switch happen to the 2nd image? When half the first image has been scrolled up and out of sight. I therefore check for the background image scroll There is a half image height offset for the 2nd image. The image needs to be at least twice at high as the web browser window inner height (not incl toolbars/scrollbars). Please note the image dimension I have used is 1000 x 2000px for this example (width x height) and these values need to be changed for the code to work correctly with other dimensions.

2016/04/22 VPN,Hosting

How to set up Shadowsocks on AWS - This information available at many other websites, my purpose it just to make sure I have all the information collected in my code blog. So this is how to do it:

Log in to the AWS console. During the sign up for EC2 service you will need to confirm your phone number.

Launch instance

Select Ubuntu (I my case Ubuntu Server 14.04 LTS)

Select t2.micro -> Review and launch

Create security group

Configure security group - add rule for tcp 8000-8388 - only allow my ip

Step 7: Click Launch

Optional: Create billing alerts - warn if you pass over a limit 

Create elastic ip - assign to running instance

 

A good guide is available at https://www.vpndada.com/how-to-setup-shadowsocks-server-on-amazon-ec2/