Posts Tagged ‘web’

If you have installed an SSL certificate and appears to work fine in the browser, but does not work on places like the W3 feeds validator or iTunes Connect, a good way to debug it is to use cURL from the command line.

You may get back an “unable to get local issuer certificate” error.

$ curl https://www.your-domain.com/
curl: (60) SSL certificate problem: unable to get local issuer certificate
More details here: https://curl.haxx.se/docs/sslcerts.html

If so, this means that you have successfully installed your SSL certificate, but you have not included the intermediate certificates. These form an essential part of the chain up to the root certificate and need to be included when you install it.

They are typically distributed in .bundle files that come with your .crt file.

I’ve read Douglas Crockford’s book on JavaScript several time before, but it is always goof to have a refresher. It’s super-helpful and so short that you can easily get through it in a day if you try. I think the appendices are actually bigger than the text.

Having worked on a lot of different projects at a lot of different companies over the years, there are some issues that recur time after time. These are problems that maybe we just don’t have satisfactory patterns for, or developers have a blind spot for. But whatever the reason, they certainly merit more attention in order to reduce how frequently they arise.

Below, I’ve listed three with some suggestions as to how to help mitigate them.

Caching

Caching is essential to good performance in most applications. Remember your ABC – Always Be Caching. Indeed, if you ever want to sound clever in a discussion about system architecture, say “have you thought about caching that?”. Caching is the solution to almost everything. But causes some problems too.

For the non-technical, caching is storing information in short term memory so it can be delivered faster. It’s like remembering things. You probably have a big pile of books at home, and you can’t remember most of them, so for most facts you have to look them up in a book. But you can remember a few things, so for the questions you get asked most, you memorise the facts so you can say them quicker. That’s basically what caching is.

The problem is that when you update something, the cache can end up serving the old content, rather than the new. This results in data being out of date and often results in web applications not appearing correctly because the HTML has updated, but the CSS and JavaScript happens.

Here are a few tips to help mitigate such problems:

• Have scripts to clear out your various caches. Make sure you know what/where the cache layers are.
• Understand what cache headers you are serving via you sending via your web server.
• Have a mechanism for changing files such as stylesheets and JavaScript when you release a new version.
• Turning caching off on dev environments is fine, but make sure you have it turned on on your staging/pre-production environment so you can spot potential problems.

Timezones

While Britain insisted that time starts and stops in Greenwich, we did allow the rest of the world to make adjustments at hourly (or even half-hourly) intervals based on where they are in the world. This has caused no end of headaches for software developers. Even within one country, one problem that comes up time after time is that systems go wrong when the clocks are changed for daylight savings.

Every six months it all goes wrong every six months and we promise to fix it by the next time the clocks change, but usually never do. Even Apple got it wrong on their iPhone alarm – twice!

Here are a few tips to help mitigate such problems:

• Set your servers to GMT/UTC and leave them there, regardless of where you are in the world and where DST is in effect or not.
• Use prper DateTime objects, and specify the timezone.
• When sending a DateTime string, use an ISO standard and be explicit as to what TimeZone it is in.
• Unit test DST changes, using a mock system time if required.
• Perform manual testing on the DST switch.

Load balancing

As systems scale, they inevitably need to spread across multiple processes, applications and bits of hardware. This brings a whole new layer of complexity, though, having to keep everything in sync. It’s very easy to lose consistency and that almost always ends in one thing – say it with me everyone, “race conditions”!

There are two common problems we find in this situation. The first is that one node stops working but the other one is working fine, or maybe something as simple as one node having old code on it. You get intermittent problems but when you try it it works fine or at least works fine 50% of the time. It could be that it is hitting the working node but at other times is hitting the other.

Here are a few tips to help mitigate such problems:

• Ensure you can (and ideally do automatically) test individual nodes.
• Use a tool like Chef or Puppet to make sure all your nodes are consistent.
• Have the ability to easily take out nodes that are not working.
• Aggregate your logging where possible so you don’t have to tail them on each individual node.

The second is race conditions. This is particularly prevalent when using a master and slave database setup. You will write the update to the master than query for it the results – but because your second query is a read, it will be passed to the slave, which may nor may not have updated yet with the new information.

Here are a few tips to help mitigate such problems:

• Have the ability to manually specify master or slave so time critical reads can be pointed at the master.
• Ensuring your staging/pre-production environment load balances everywhere your production environment does so you can spot potential issues.
• Where possible, rely on one server for the time as different machines can become slightly out of sync.

A lot has changed since I wrote my first line of CSS – which is probably going on a decade ago now. Other things have been there all along, but have sometimes been overlooked or neglected. Below is a collection of CSS that it is easy to forget exists.

Selectors

Obviously you can use . # * etc, but there are actually far more options. As well as chaining them (p, div) and specifying them being inside each other (p div) you can also specify they must be the parent (p > div) or immediately after one another (p+div).

As well as checking attributes (input[type=text]) you can also do contains (input[title~=something]) and starting with (input[type|=something]).

We’re probably all familiar with :visited and :hover states, but there are actually dozens you can use – :focus, :first-letter, :first-line, :first-of-type, :last-of-type, :only-child, :empty, :enabled and “checked just to name a few.

Sizing in rem

It’s good practice to use em sizing to make everything relative – that way if a user scales up the page then everything stays in proportion (though modern browsers tend to handle this well anyway). But isn’t it annoying that it stacks? A 2em value inside a 2em value will give you a font size of 4.

You can solve this by using rem. Specifying 2rem will make it 2 x the root (html) element of the document – so you can make it all relevant to that and not worry about nesting.

Gradients

You can add gradients as backgrounds and even create complex patterns with multiple colours starting and stopping at different points.

background-image: linear-gradient(bottom, #22E7D2 12%, #3EFFFC 56%, #2FAB24 100%);

Shadows

It’s simple to add a drop shadow to an element.

box-shadow: 10px 10px 5px #888;

You can add it to text as well.

text-shadow: 2px 2px #ff0000;

Box sizing

Tired of having to work out what width you want something to be, then taking off the padding and the border? Sometimes maybe you don’t even have the option to do that because you want it to be 100% wide. Box sizing to the rescue. Set the box sizing to border and it will calculate the width factoring these properties in.

box-sizing: border-box;

Border radius

Want some nice rounded corners? Easy.

border-radius: 5px;
border-top-left-radius: 3px;
border-bottom-right-radius: 10px;

Clipping

You probably shouldn’t clip as it means you’re sending an image to the browser that is too big and then cutting it down. However, the functionality to do it does exist within CSS>

position:absolute;
clip:rect(0px,70px,100px,0px);

There is a background-clip property too.

Columns

Want to present your text in a series of columns? Theres a property for that.

column-count: 3;
column-gap: 5px;

Having heard another talk about the BBC’s technology side on Sunday, I’ve come to the conclusion that it must be a pretty awesome place to work.

While they don’t perhaps have the funds that private sector organisations do, I guess I assumed that being a public institution that would be large and lumbering, risk adverse and slow to react.

Nothing could be further from the truth.

For example, they use Scrum. Scrum is an agile methodology used for developing software in the real world (ie, a world where the client is always changing their mind). But they don’t just use it for software – they use it for managing projects right across the business.

Secondly, they’re really up on technology. The speaker on Sunday was telling me about how they had developed an open source project for parsing Gherkin – a lot of software developers might not even know what Gherkin is!

They’ve also previously developed their own JavaScript library, which was a contender alongside jQuery and Prototype (you know, before everyone accepted jQuery was the best, but then everyone realised you could actually just use selectors and not load any library at all).

Not to mention the pioneering work with iPlayer. They launched iPlayer in 2007 – that is five years ago! I can’t really remember a time before iPlayer now, but I don’t think there was many other people doing it at the time. Not to mention that they also have iOS and Android apps available for it too.

In reality, the BBC is no lumbering institution at all – it’s an fast moving, agile, technology-savvy organisation that must be amazing to work at.

CSS stands for Cascading Style Sheets.

CSS Styles are used to define how to display HTML elements. Styles are normally stored in internet or external style sheets. Styles were added to HTML 4.0 because developers disliked having to define every bit of text using tags like <font>. External CSS files are stored using the .css extention though they can be saved in HTML format. Multiple style definitions will cascade into one,

External style sheets can save you a lot of time, as you can change the look of the page, just by changing the external file. CSS Style Sheets are supported by both Nescape 4.0 and Internet Explorer 4.0.

CSS cascades

You may have multiple style sheets saying different things in your document. In this case they will be ordered in priority as follows:

1) Inline Style Sheets (inside an element)
2) Internal Style Sheets (inside the head tag)
3) External Style Sheets
4) Browser Default

So for instance an inline style tag would overrule and internal style sheet, but a browser default would not overrule an external style sheet.

You can call JavaScript functions from your flash movie. This tutorial will show you how to call a pop up window opener function from your movie when a user clicks a button. You can create the html page in any text editor.

1. Create a simple button in Flash. You could also just drag one out of the shared library. You then need to open up the actions menu and insert the following code:

on (release) {
getURL("JavaScript:popup();");
}

This code will call the JavaScript when a user clicks on the button. Once this is done goto File > Publish and publish your movie. Make sure the publish settings are set to publish the file with a html document.

2. Now you need the code for the JavaScript function.

<script language="JavaScript">
function popup() {
window.open('http://www.hardwaretutorials.com/','','toolbar=no,location=no,directories=no,status=no,menubar=no,
scrollbars=yes,resizable=yes,width=400,height=400,left=0,top=0');
}
</script>

This code can be modified. The first section is the page URI. The second section is your options such as do you want to make it resizable and have scrollbars. The first section has width, height and location from left and top in. Make sure the “window.open” line and the line below are on the same line.

3. Now open your text editor and find the html file generated when you published your movie. Open it and insert the JavaScript function just below the tag. Now save the page.

4. Open the file in your browser. Clicking the button should now open up the pop up window.

Making your movies transparent allows you to see the background on bits where there is nothing in the movie. However this is actually nothing to do with the settings in Flash when publishing movies. The trick is in the html file that the movie is added into.

Transparency in movies will only work in Internet Explorer 4+ and won’t work in Netscape.

To make your movies transparent, simply paste this code in between the HTML Object tags.

<param NAME="wmode" Value="transparent"

And so, the embedding code for the SWF file for the second example (transparent) is as follows:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ID="himalayas" WIDTH="250" HEIGHT="100">
<param NAME="movie" VALUE="himalayas.swf">
<param NAME="quality" VALUE="high">
<param NAME="wmode" Value="Transparent">
<embed src="himalayas.swf" quality="high" bgcolor="#FFFFFF"
WIDTH="250" HEIGHT="100" TYPE="application/x-shockwave-flash">
</object>

Note: the above source file doesn’t include some key information like the Base Code URL due to the text width limitations.

Limitations

The transparency (as well as any other cool new technology) doesn’t work in Netscape at all. Use Internet Explorer to be able to view transparent Flash Content.

For the transparency effect to work as desired, don’t add a filler background element to your movies. Many developers add a large, white rectangular box, etc. to simulate white color. Make sure the drawing area behind the main movie is clear of any unwanted colours, etc (it will show up in the final animation).

Bored of ordinary links? Then try using buttons. This can work well if there are a series of them lined up in a navigation bar especially if you using image backgrounds or CSS styles to make them look good.

First of all, there is the script that goes into the head of your page.

<script language="JavaScript">
<!--
function goToURL() { window.location = "http://www.hardwaretutorials.com/"; }
-->
</script>

Amazingly simple. Your normal JavaScript tags with a link function. Now for the button which goes in your pages body tag:

<input type=button value="New JavaScripts" onClick="goToURL()" />

Of course, you should never use buttons, or JavaScript links, because they create usability problems. Also, this is also invalid HTML. But it will work in almost all browsers.

In this tutorial I’m going to show you how to create a pop up window using java script. There are many tools to do this but most of them create pop up windows that open when a page loads. These are fine for pop up ads but what do you do when you want to open up a pop up window when a user clicks a link? This tutorial will show you how to write a function to do this.

This will be a function and it will be embedded in a standard java script tag.

<script LANGUAGE="JavaScript">
</script>

Now before we start lets look at the whole source code, then I will explain it all

function launch(){
jim=window.open("http://www.hardwaretutorials.com/","Hardware Tutorials","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")}

Thats the function in full. Lets start at the beginning. The variable name is ‘Jim.’ Inside the window.open part there are all the configurable components of the pop up window. Lets start with the address. In our example I used http://www.microsoft.com but you could relace this with ‘www.yoursite.com’ or ‘information/popuppage.htm’.

The name for the window (the name that will appear before the title appears) for my example is Microsoft. Now is the window settings. You can set the width and the height as well as the top and left margin. You can also choose whether the window is resizable, scrollbars, a menu bar, a tool bar, a status bar and a location bar.

Once you have configured these just put them in a standard tag, in either the body or head tag.

<script LANGUAGE="JavaScript">
function launch(){
jim=window.open("http://www.microsoft.com","microsoft","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")} 
</script>

Thats the full code. Now all you need to do is create a link ‘javascript:launch().’ If you want to change the java script to ‘function whatever()’ instead of function launch(). You must do this if you have more than one pop up scripts on one page as you will need each hyperlink to activate a different pop up script.