<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tools Archives - Cube Websites</title>
	<atom:link href="https://cubewebsites.com/category/development/tools/feed/" rel="self" type="application/rss+xml" />
	<link>https://cubewebsites.com/category/development/tools/</link>
	<description>web design and development</description>
	<lastBuildDate>Tue, 03 Jan 2023 12:30:23 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://cubewebsites.com/wp-content/uploads/2019/04/cropped-favicon-32x32.png</url>
	<title>Tools Archives - Cube Websites</title>
	<link>https://cubewebsites.com/category/development/tools/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>How To: Check Which Docker Container Is Using A Port</title>
		<link>https://cubewebsites.com/guides/how-to-check-which-docker-container-is-using-a-port/</link>
					<comments>https://cubewebsites.com/guides/how-to-check-which-docker-container-is-using-a-port/#respond</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Tue, 03 Jan 2023 12:30:23 +0000</pubDate>
				<category><![CDATA[Guides]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[docker]]></category>
		<category><![CDATA[Hosting]]></category>
		<category><![CDATA[tools]]></category>
		<guid isPermaLink="false">https://cubewebsites.com/?p=1197</guid>

					<description><![CDATA[<p>This morning I had a Docker service fail to start. On inspection of the error, it turned out it was because the port was in use by another service. In this particular case, my Docker service was trying to use port 8029 so that&#8217;s what I&#8217;ve used in the examples below. This searches through your [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/guides/how-to-check-which-docker-container-is-using-a-port/">How To: Check Which Docker Container Is Using A Port</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">This morning I had a Docker service fail to start.  On inspection of the error, it turned out it was because the port was in use by another service.  In this particular case, my Docker service was trying to use port 8029 so that&#8217;s what I&#8217;ve used in the examples below.</p>



<pre class="wp-block-code"><code>docker ps | grep 8029</code></pre>



<p class="wp-block-paragraph">This searches through your docker containers, and finds any that are running on port 8029.  The output should look like this:</p>



<pre class="wp-block-code"><code>fec0c35f0b2d directus/directus:latest "docker-entrypoint.s…" 15 minutes ago Up 5 minutes 127.0.0.1:8029->8055/tcp directus-example</code></pre>



<p class="wp-block-paragraph">In the above example you can see that port 8029 was identified to be in use by the directus-example container.  It turns out I did a test install of Directus on that port, and then forgot to delete it.</p>



<p class="wp-block-paragraph">Stop the docker container:</p>



<pre class="wp-block-code"><code>docker stop fec0c35f0b2d</code></pre>



<p class="wp-block-paragraph">The container ID (<code>fec0c35f0b2d</code>) used above is from the first command which provided the container ID</p>



<p class="wp-block-paragraph">Delete the docker container. In my case I no longer needed this Directus container, so I deleted the container too.  If you need to keep your container, then just change its configuration to run on a different port that doesn&#8217;t clash.</p>



<pre class="wp-block-code"><code>docker rm fec0c35f0b2d</code></pre>



<p class="wp-block-paragraph">With this complete, I was able to start the Docker container that&#8217;s actually supposed to be running on port 8029 with no issues.</p>



<p class="wp-block-paragraph">In my case I knew that the port would be used by Docker because I use that port range for Docker only.  If you don&#8217;t know for sure that it&#8217;s Docker using the port, then you can use the following to check which service is using the port.  Note that you will need sudo access to run this.</p>



<pre class="wp-block-code"><code>sudo netstat -tulpn | grep 8029</code></pre>



<p class="wp-block-paragraph">The output from this should tell you which service is using that port.</p>
<p>The post <a href="https://cubewebsites.com/guides/how-to-check-which-docker-container-is-using-a-port/">How To: Check Which Docker Container Is Using A Port</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/guides/how-to-check-which-docker-container-is-using-a-port/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>FIX: Vagrant php-memcached error</title>
		<link>https://cubewebsites.com/development/fix-vagrant-php-memcached-error/</link>
					<comments>https://cubewebsites.com/development/fix-vagrant-php-memcached-error/#respond</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Thu, 14 Jan 2016 16:57:16 +0000</pubDate>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[vagrant]]></category>
		<guid isPermaLink="false">http://www.cubewebsites.com/blog/?p=450</guid>

					<description><![CDATA[<p>I normally use PuPHPet to configure my Vagrant boxes. On my latest box using CentOS 5.6 the setup worked normally, but when trying to run my application I was getting the Class &#8216;Memcache&#8217; not found error. Usually this is a simple fix, just go in and type: sudo yum install -y php-memcached However, this time [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/development/fix-vagrant-php-memcached-error/">FIX: Vagrant php-memcached error</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>I normally use PuPHPet to configure my Vagrant boxes.<br />
On my latest box using CentOS 5.6 the setup worked normally, but when trying to run my application I was getting the Class &#8216;Memcache&#8217; not found error.</p>
<p>Usually this is a simple fix, just go in and type:</p>
<p><code>sudo yum install -y php-memcached</code></p>
<p>However, this time round the above was giving me the following error:</p>
<p><code>Transaction Check Error:<br />
  file /usr/lib64/libhashkit.so.2.0.0 conflicts between attempted installs of libmemcached-last-libs-1.0.18-2.el6.remi.x86_64 and libmemcached10-1.0.16-1.ius.centos6.x86_64<br />
  file /usr/lib64/libmemcached.so.11.0.0 conflicts between attempted installs of libmemcached-last-libs-1.0.18-2.el6.remi.x86_64 and libmemcached10-1.0.16-1.ius.centos6.x86_64<br />
  file /usr/lib64/libmemcachedutil.so.2.0.0 conflicts between attempted installs of libmemcached-last-libs-1.0.18-2.el6.remi.x86_64 and libmemcached10-1.0.16-1.ius.centos6.x86_64</code></p>
<p>After smashing my head against the desk a few times during numerous attempts at installing the module, reprovisioning the vagrant box and anything else I could think of doing to fix it, I tried something that hadn&#8217;t occurred to me before; to install the dependency it was complaining about first.</p>
<p>Using the following commands fixed my issue, and should also work for you:<br />
<code><br />
sudo yum install -y libmemcached-last<br />
sudo yum install -y php-memcached<br />
sudo service php-fpm restart<br />
</code></p>
<p>Hope this helps!</p>
<p>The post <a href="https://cubewebsites.com/development/fix-vagrant-php-memcached-error/">FIX: Vagrant php-memcached error</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/development/fix-vagrant-php-memcached-error/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>FIX: Vagrant Pecl Error</title>
		<link>https://cubewebsites.com/development/tools/fix-vagrant-pecl-error/</link>
					<comments>https://cubewebsites.com/development/tools/fix-vagrant-pecl-error/#respond</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Wed, 05 Aug 2015 16:36:49 +0000</pubDate>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[puphpet]]></category>
		<category><![CDATA[vagrant]]></category>
		<guid isPermaLink="false">http://www.cubewebsites.com/blog/?p=445</guid>

					<description><![CDATA[<p>I just came across an issue where I updated my vagrant config and tried to provision the box, but it kept erroring out with the following error: ==&#62; default: Error: printf "\\n" &#124; pecl -d preferred_state=stable install pecl_http returned 1 instead of one of [0] ==&#62; default: Error: /Stage[main]/Puphpet_php/Puphpet::Php::Pecl[pecl_http]/Php::Pecl::Module[pecl_http]/Exec[pecl-pecl_http]/returns: change from notrun to 0 failed: [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/development/tools/fix-vagrant-pecl-error/">FIX: Vagrant Pecl Error</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>I just came across an issue where I updated my vagrant config and tried to provision the box, but it kept erroring out with the following error:</p>
<pre>==&gt; default: Error: printf "\\n" | pecl -d preferred_state=stable install pecl_http returned 1 instead of one of [0]
==&gt; default: Error: /Stage[main]/Puphpet_php/Puphpet::Php::Pecl[pecl_http]/Php::Pecl::Module[pecl_http]/Exec[pecl-pecl_http]/returns: change from notrun to 0 failed: printf "\\n" | pecl -d preferred_state=stable install pecl_http returned 1 instead of one of [0]
==&gt; default: Warning: /Stage[main]/Puphpet_php/Service[php5-fpm]: Skipping because of failed dependencies</pre>
<p>In order to fix this I logged into the server using SSH, and then manually ran the install pecl_http command that it was trying to run in the above error message.  In doing so I got a different error:</p>
<pre>$ sudo pecl -d preferred_state=stable install pecl_http</pre>
<pre>pecl/pecl_http requires package "pecl/raphf" (version &gt;= 1.1.0), installed version is 1.0.4
No valid packages found
install failed</pre>
<p>It turns out that a pecl dependency was out of date and so it couldn&#8217;t install the pecl_http package.  In order to fix it I just ran the pecl upgrade command.</p>
<pre>vagrant up
vagrant ssh
sudo pecl upgrade</pre>
<p>After running the above, I tried my vagrant provision again, and hey presto! Everything was working again as normal</p>
<p>The post <a href="https://cubewebsites.com/development/tools/fix-vagrant-pecl-error/">FIX: Vagrant Pecl Error</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/development/tools/fix-vagrant-pecl-error/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>jQuery UI Bootstrap &#8211; A Bootstrap-themed kickstart for jQuery UI widgets</title>
		<link>https://cubewebsites.com/development/javascript/jquery-ui-bootstrap-a-bootstrap-themed-kickstart-for-jquery-ui-widgets/</link>
					<comments>https://cubewebsites.com/development/javascript/jquery-ui-bootstrap-a-bootstrap-themed-kickstart-for-jquery-ui-widgets/#comments</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Sat, 31 Dec 2011 11:39:51 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[bootstrap]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[open-source]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[widgets]]></category>
		<guid isPermaLink="false">http://www.cubewebsites.com/blog/?p=333</guid>

					<description><![CDATA[<p>jQuery UI Bootstrap jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.&#160; It covers many of the widgets available on the jQuery UI website including: Accordion Tabs Buttons and Button Sets Horizontal slider Progress Bar Dialogs Icons Date Picker Whilst it’s still a work [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/development/javascript/jquery-ui-bootstrap-a-bootstrap-themed-kickstart-for-jquery-ui-widgets/">jQuery UI Bootstrap &#8211; A Bootstrap-themed kickstart for jQuery UI widgets</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><strong>jQuery UI Bootstrap</strong></p>
<p><a href="http://addyosmani.github.com/jquery-ui-bootstrap/" rel="nofollow" target="_blank">jQuery UI Bootstrap</a> is an open-source effort by <a href="http://twitter.com/addyosmani" target="_blank">@addyosmani</a> to introduce the <a href="http://twitter.github.com/bootstrap/" rel="nofollow" target="_blank">Bootstrap</a> styling into the standard <a href="http://jqueryui.com/" rel="nofollow" target="_blank">jQuery UI widgets</a>.&nbsp; It covers many of the widgets available on the jQuery UI website including:</p>
<ul>
<li><font color="#404040">Accordion</font>
<li><font color="#404040">Tabs</font>
<li><font color="#404040">Buttons and Button Sets</font>
<li><font color="#404040">Horizontal slider</font>
<li><font color="#404040">Progress Bar</font>
<li><font color="#404040">Dialogs</font>
<li><font color="#404040">Icons</font>
<li><font color="#404040">Date Picker</font></li>
</ul>
<p><img decoding="async" style="display: block; float: none; margin-left: auto; margin-right: auto" title="bootstrapui" alt="bootstrapui" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/bootstrapui3.jpg" width="700" height="666"></p>
<p>Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.&nbsp; It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.</p>
<p><strong>Bootstrap</strong></p>
<p>Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.</p>
<p><a href="http://twitter.github.com/bootstrap/" rel="nofollow">Bootstrap</a> is a prototyping framework introduced by Twitter in mid-2011.&nbsp; It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.&nbsp; It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.</p>
<p>Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:</p>
<ul>
<li><font color="#404040"><a href="http://www.concrete5.org/" rel="nofollow">Concrete5</a></font>
<li><font color="#404040"><a href="http://www.codecademy.com" rel="nofollow">CodeAcademy</a></font>
<li><font color="#404040"><a href="http://demo.whmcs.com/" rel="nofollow">WHMCS</a></font></li>
</ul>
<p>I’ve even used it on the Cube Websites website for the form elements and as a grid system.</p>
<p><strong>Get Started</strong></p>
<ul>
<li><a href="http://addyosmani.github.com/jquery-ui-bootstrap/" rel="nofollow" target="_blank">jQuery UI Bootstrap</a>
<li><a href="http://github.com/addyosmani/jquery-ui-bootstrap/" rel="nofollow" target="_blank">jQuery UI Bootstrap on GitHub</a>
<li><a href="http://twitter.github.com/bootstrap/#" rel="nofollow" target="_blank">Bootstrap</a></li>
</ul>
<p><font color="#737373">jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.&nbsp; I’ll definitely be trying it on my next project involving UI widgets.&nbsp; Whilst it looks fantastic already, I’d love to see where it goes from here.&nbsp; One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.</font></p>
<p>The post <a href="https://cubewebsites.com/development/javascript/jquery-ui-bootstrap-a-bootstrap-themed-kickstart-for-jquery-ui-widgets/">jQuery UI Bootstrap &#8211; A Bootstrap-themed kickstart for jQuery UI widgets</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/development/javascript/jquery-ui-bootstrap-a-bootstrap-themed-kickstart-for-jquery-ui-widgets/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>SimpLESS &#8211; A Free Open-Source LESS CSS Compiler</title>
		<link>https://cubewebsites.com/development/tools/simpless-a-free-open-source-less-css-compiler/</link>
					<comments>https://cubewebsites.com/development/tools/simpless-a-free-open-source-less-css-compiler/#respond</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Thu, 29 Dec 2011 17:10:13 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[less]]></category>
		<category><![CDATA[open-source]]></category>
		<category><![CDATA[simpless]]></category>
		<category><![CDATA[tools]]></category>
		<guid isPermaLink="false">http://www.cubewebsites.com/blog/?p=318</guid>

					<description><![CDATA[<p>Less CSS is a great way to develop your stylesheets for websites.  It lets you create nested rules, specify variables, functions and so much more. To use Less on a website you have 2 options: Use JavaScript to compile on-the-fly.  This isn&#8217;t really recommended as you&#8217;re now relying on JavaScript for your website to look [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/development/tools/simpless-a-free-open-source-less-css-compiler/">SimpLESS &#8211; A Free Open-Source LESS CSS Compiler</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><a href="http://lesscss.org/">Less CSS</a> is a great way to develop your stylesheets for websites.  It lets you create nested rules, specify variables, functions and so much more.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-319" title="less" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/less.jpg" alt="" width="391" height="282" srcset="https://cubewebsites.com/wp-content/uploads/2011/12/less.jpg 391w, https://cubewebsites.com/wp-content/uploads/2011/12/less-300x216.jpg 300w" sizes="(max-width: 391px) 100vw, 391px" /></p>
<p>To use Less on a website you have 2 options:</p>
<ol>
<li>Use JavaScript to compile on-the-fly.  This isn&#8217;t really recommended as you&#8217;re now relying on JavaScript for your website to look the way it should.  It also creates additional overhead as your page needs to load in the JS file, load your less stylesheet and finally render your stylesheet by parsing it through the Less Javascript library.</li>
<li>Compile your Less stylesheet into CSS, and include is as a normal stylesheet.</li>
</ol>
<p>The compilation method is obviously the best option as you get the benefits of using Less, and then using it as any other CSS stylesheet.</p>
<p>Whilst the compiled method might be great for when you&#8217;ve finished developing, during development you&#8217;d still have to use the Less JS method or compile your Less file into CSS each time you make modifications, which can easily become tedious.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-320" title="simpless" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/simpless.jpg" alt="" width="215" height="50" /></p>
<p>This is where SimpLESS comes in.  SimpLess is real-time Less compiler.  You simply drag and drop your less file(s) into the app, and it recompiles your Less file into a CSS file every time you save it.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-321" title="simpless-app" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/simpless-app.jpg" alt="" width="332" height="306" srcset="https://cubewebsites.com/wp-content/uploads/2011/12/simpless-app.jpg 332w, https://cubewebsites.com/wp-content/uploads/2011/12/simpless-app-300x276.jpg 300w, https://cubewebsites.com/wp-content/uploads/2011/12/simpless-app-325x300.jpg 325w" sizes="(max-width: 332px) 100vw, 332px" /></p>
<p>This app is totally free, open-source and available on Windows, Mac and Linux. As well as doing the compilation, it minifies your CSS too saving you precious bytes during HTTP requests.</p>
<p><a href="http://wearekiss.com/simpless">Download SimpLESS</a><br />
<a href="https://github.com/paratron/SimpLESS/">Fork SimpLESS on Github</a></p>
<p>The post <a href="https://cubewebsites.com/development/tools/simpless-a-free-open-source-less-css-compiler/">SimpLESS &#8211; A Free Open-Source LESS CSS Compiler</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/development/tools/simpless-a-free-open-source-less-css-compiler/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Font Library Comparison: Font Squirrel, Cufon, TypeKit and Google Web Font API</title>
		<link>https://cubewebsites.com/development/html/font-library-comparison-font-squirrel-cufon-typekit-and-google-web-font-api/</link>
					<comments>https://cubewebsites.com/development/html/font-library-comparison-font-squirrel-cufon-typekit-and-google-web-font-api/#comments</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Thu, 29 Dec 2011 15:31:13 +0000</pubDate>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[stylesheets]]></category>
		<guid isPermaLink="false">http://www.cubewebsites.com/blog/?p=309</guid>

					<description><![CDATA[<p>One the most common things I&#8217;m required to do on any website build is to use a custom font.  This post discusses the various libraries that I&#8217;ve tried and tested, and which library I prefer the most. Cufon Cufon was the first library I was recommended and blindy started using without researching into other options.  [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/development/html/font-library-comparison-font-squirrel-cufon-typekit-and-google-web-font-api/">Font Library Comparison: Font Squirrel, Cufon, TypeKit and Google Web Font API</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>One the most common things I&#8217;m required to do on any website build is to use a custom font.  This post discusses the various libraries that I&#8217;ve tried and tested, and which library I prefer the most.</p>
<p><a href="http://cufon.shoqolate.com/generate/"><strong>Cufon</strong></a></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-310" title="cufon" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/cufon.jpg" alt="" width="171" height="45" /></p>
<p>Cufon was the first library I was recommended and blindy started using without researching into other options.  It was dead simple to use &#8211; just include the Cufon library, convert the font file to a Cufon Script and include that too, call Cufon on the web page and away we go.</p>
<p>However, Cufon has a number of drawbacks, and the biggest issues for me were:</p>
<ol>
<li>Links in Internet Explorer.  As Cufon replaces text with images, instead of an entire block of text within a hyperlink being clickable, only the actual letters were clickable, and clicking anywhere inbetween wouldn&#8217;t trigger the click.</li>
<li>Hover states.  Cufon supports hover states via an additional option in the configuration.  However, there&#8217;s a slight delay when you hover as Cufon has to load in the hover states images whenever you hover.</li>
<li>Dynamic text.  If you&#8217;re loading in content via AJAX, and need Cufon applied to certain elements, then you need to reload Cufon whenever new content is loaded in.</li>
<li>Text-decoration.  I noticed in Internet Explorer that
<pre>text-decoration:underline;</pre>
<p>on hyperlinks wouldn&#8217;t work and the underline would never show.  The workaround was applying a bottom border instead.</li>
</ol>
<p>Due to all these issues, I set off on a hunt for an alternative to Cufon which wouldn&#8217;t cause me any of these issues.</p>
<p><a href="http://help.typekit.com/"><strong>TypeKit</strong></a></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-311" title="typekit-site-logo" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/typekit-site-logo.gif" alt="" width="95" height="25" /></p>
<p>I stumbled across TypeKit and did some research into after seeing a lot of popular sites using it.  However, I didn&#8217;t like the idea of having my fonts hosted externally and having to configure them on the TypeKit site rather than on my own.  Not to mention that TypeKit costs money, not much, but still it&#8217;s not free.  To be honest I didn&#8217;t give TypeKit much of a chance, but I really was looking for something JavaScript-free, something I could run on my own site and something that was free!</p>
<p><a href="http://code.google.com/apis/webfonts/"><strong>Google Web Font API</strong></a></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-312" title="google_web_fonts" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/google_web_fonts.gif" alt="" width="222" height="40" /></p>
<p>There&#8217;s Google Web Fonts API, which was launched early 2010.  I was really excited when I first heard the news about this, however, it turned out that it didn&#8217;t really have many fonts on offer at the time.  It seems that they&#8217;ve added a lot more fonts in the meantime, but once again I encountered font cross-browser compatibility issues on some fonts; Internet Explorer simply wouldn&#8217;t render it, or the line spacing would be wrong, the characters overlapped each other and various other issues which I just didn&#8217;t have the patience to fix.</p>
<p>The good thing about this library was that it didn&#8217;t rely on JavaScript.  You&#8217;d simple call in an additional stylesheet, which is hosted on Googles server.  This stylesheet returns the font, in different formats based on your browser.  In your CSS file you&#8217;d then use the font as any other font.</p>
<p><a href="http://www.fontsquirrel.com/"><strong>Font Squirrel</strong></a></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-313" title="font-squirrel" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/font-squirrel.jpg" alt="" width="225" height="119" /></p>
<p>As was about to rebuild the Cube Websites site this summer (2011) I decided to search again to see if a new font library had appeared, and it was then that I stumbled across Font Squirrel.</p>
<p>The first thing I spotted was the logo saying &#8220;100% free for commercial use&#8221;, and I was already off to a good start.  On their homepage, there was also a long list of fonts, all of which looked pretty impressive.</p>
<p>Next, I investigated their integration method; it was something called Font-Face Kits.  Basically you download a Kit for the font you want to use (or generate a kit for a font not on their website).  Each kit contains sample HTML code, the CSS you need and your font in various formats (each specific to a different browser).  Out of curiousity I downloaded a Font Kit and inspected the contents.  It contained 4 variations of my font file, a stylesheet and a sample HTML page to preview the font.</p>
<p>I ran the preview in all my browsers, and to my surprise the font rendered perfectly in all of them.  To use it on a website I just copied the font files into my site, copied across their CSS and I was good to go.</p>
<p>Font Squirrel is an absolute winner for me.  You have your own fonts, hosted on your own site.  It&#8217;s free to use.  It doesn&#8217;t rely on JavaScript, and can be used on hyperlinks without any issues with underlines, hover states and re-rendering delays.</p>
<p>If you&#8217;ve not tried Font Squirrel yet, I&#8217;d definitely recommend that you <a href="http://www.fontsquirrel.com/">give it a shot</a></p>
<p>The post <a href="https://cubewebsites.com/development/html/font-library-comparison-font-squirrel-cufon-typekit-and-google-web-font-api/">Font Library Comparison: Font Squirrel, Cufon, TypeKit and Google Web Font API</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/development/html/font-library-comparison-font-squirrel-cufon-typekit-and-google-web-font-api/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Twipsum &#8211; The Fresh/Relevant/Inappropriate Dummy Text Generator</title>
		<link>https://cubewebsites.com/development/tools/twipsum-the-freshrelevantinappropriate-dummy-text-generator/</link>
					<comments>https://cubewebsites.com/development/tools/twipsum-the-freshrelevantinappropriate-dummy-text-generator/#respond</comments>
		
		<dc:creator><![CDATA[Cube Websites]]></dc:creator>
		<pubDate>Wed, 28 Dec 2011 10:08:36 +0000</pubDate>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[dummy]]></category>
		<category><![CDATA[generator]]></category>
		<category><![CDATA[lipsum]]></category>
		<category><![CDATA[lorem ipsum]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[utilities]]></category>
		<guid isPermaLink="false">http://www.cubewebsites.com/blog/?p=300</guid>

					<description><![CDATA[<p>Most web developers are familiar with the default dummy text generator, lipsum.  However, today I discovered an alternative text generator which creates more unique content using Twitter. How It Works Twipsum allows you to enter a keyword, then it finds Tweets on Twitter based on that word and combines them into paragraphed text which you [&#8230;]</p>
<p>The post <a href="https://cubewebsites.com/development/tools/twipsum-the-freshrelevantinappropriate-dummy-text-generator/">Twipsum &#8211; The Fresh/Relevant/Inappropriate Dummy Text Generator</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Most web developers are familiar with the default dummy text generator, <a href="http://www.lipsum.com/">lipsum</a>.  However, today I discovered an alternative text generator which creates more unique content using Twitter.</p>
<p><a href="http://twipsum.org"><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-301" title="Twipsum" src="http://www.cubewebsites.com/blog/wp-content/uploads/2011/12/twipsum.png" alt="" width="653" height="141" srcset="https://cubewebsites.com/wp-content/uploads/2011/12/twipsum.png 653w, https://cubewebsites.com/wp-content/uploads/2011/12/twipsum-300x64.png 300w, https://cubewebsites.com/wp-content/uploads/2011/12/twipsum-500x107.png 500w" sizes="(max-width: 653px) 100vw, 653px" /></a></p>
<p><strong>How It Works</strong></p>
<p>Twipsum allows you to enter a keyword, then it finds Tweets on Twitter based on that word and combines them into paragraphed text which you can copy and paste into wherever you need it.</p>
<p>It&#8217;s a nice little spin on the default lorem ipsum text which we&#8217;re all probably sick of seeing.  However, bear in mind that some of the content may be a little inappropriate so it&#8217;s probably not the best idea to use it for populating a client website.</p>
<p><a href="http://twipsum.org">Visit Twipsum</a></p>
<p>The post <a href="https://cubewebsites.com/development/tools/twipsum-the-freshrelevantinappropriate-dummy-text-generator/">Twipsum &#8211; The Fresh/Relevant/Inappropriate Dummy Text Generator</a> appeared first on <a href="https://cubewebsites.com">Cube Websites</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://cubewebsites.com/development/tools/twipsum-the-freshrelevantinappropriate-dummy-text-generator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
