Forced Messenger

Over the past few days, I’ve been noticing more and more how accessing messages from Facebook on my Android device is being pushed through to the Play Store. I’ve also been watching the number of downloads the Messenger app has been getting. Whilst the app may have some useful features, for those who talk a lot, for those like me, who pop by occasionally to say a quick “Hello” to a friend, or a “What time is the gig?” to a band goer, the “need” to install ‘another‘ heavy app on my device is a little off-putting, to say the least.

What actually happens when you click on the messages icon from the browser then?

image

As soon as the Mesages button is pressed, you are given this little “indication” that not everything is as it seems.

If you attempt to press the little ‘x’ in the top right hand corner, the screen refreshes for a couple of seconds and you’re told “No Internet Connection” or “Network Error”.

image

This is a lie. If you force the refresh on this page, you’re taken to your messages. But don’t be fooled, the moment you try and open one, you’re instantly directed to the Google Play Store, or equivalent, depending on your OS.

image

How do we get around this?

I had a little play with the Firefox Developer Consol and set up Event Triggers to see what was actually happening when the buttons are pressed. According to Facebook, this move to Messenger is going to happen “With or Without” your approval, but they’re going to make it as hard as possible to stay app free on Facebook.

Solution:

Whilst only a temporary solution, for me, and a few others I’ve told this to, this may benefit you in keeping another Over-heavy, Clunky, and Poorly Managed app off your device for a little longer.

image

image

On your browser type ‘mbasic.facebook.com’ and when it loads Bookmark the address. If you need to get into your messages, just start typing ‘mba’ and the bookmark will/should auto fill the rest. Click on your messages and message away as you normally would. When you want to return back to the free-flowing site, just type ‘m.facebook.com’ in the browser and it’ll take you back to the original site.

Note: Make sure when using the mbasic.facebook.com that the little padlock is present.

PaintShop and Clone

I’ve been asked a few hundred times how I make my unique images for websites. I’ve been known to build some really bizarre ones, like this:

caesars

or this:

boxing

With the ‘Clone Tool’ in Paint Shop Pro, I’ve built a simple manipulation of the character ‘Jean Luc Picard’ from one of my best childhood shows ‘Star Trek’, and taken a Guinea Pig from the collection at ‘Avalon Guinea Pig Rescue‘ and merged the two.

I usually start by checking if the two pictures will actually worked blended together. It saves time if I can discover this first before losing hours manipulating each section.

Here’s the video of this process, and the final picture.

 

jeanlucpigard

 

Building the new FMUK site

During the past few months I’ve been rebuilding a new working website for the Independent Fibromyalgia advice website ‘UK Fibromyalgia’. As a long-term sufferer of this illness, I know all too well how this illness has the potential to take everything good out of your life, and leave only a shell of your former self. I’ve been on the receiving end of working 2 jobs, enjoying life, and living to the fullest; then awaking in so much pain it feels like every bone in my body had been smashed with a hammer… repeatedly.

As I sit here now, in pain, as usual, I’ve begun reflecting the past few months of working on this immense site. I’ve dismantled every aspect of what was the old, out-dated, and slow website, I’ve changed the layouts, the forms, the general appearance, and reinvented this business website into joining a very fast world of constant improvements and enhancements in website design and development. So, what’s next? Well, I’m more concerned with what’s left. As the old website, http://www.camdevelopment.uk/archives/ukfm/ is now archived, I have now just finished the process of running everything through the validator to see if I’ve missed any loose ends (it happens to us all).

I did happen to find a wonderful link checking site, which to date, has provided very useful in fault finding. Whilst I do love https://validator.w3.org, this site just does link checking effortlessly. Check out http://www.deadlinkchecker.com

Once the Validation and Link Checking processes had been completed, it became the next lengthy job of building the CMS to run it all. Now, I’m not going to say I’m a huge fan of CMS’s, but they do do exactly what they say on their proverbial tin. For me, and more importantly, the client, having a CMS to run your website can take a huge load of stress off manually editing each page in HTML/PHP/CSS. The CMS I use varies depending on the site, and the one I’m using for the new UK Fibromyalgia website is definitely not well known. That is something that appeals to me, both from a security point of view, and from a versatility point of view.

Design

Before I began designing this monster of a site, I had a look at the previous one. One that has survived the test of time, and until recently did enough. However, with advancements in technology, more and more people are going to Mobile Responsive sites, if your business doesn’t or isn’t responsive, then your potential revenue can, at times, be halved, when people goes elsewhere.

The site: UKFibromyalgia.com had a simplistic design, but the one thing that irritated me the most was the 4 adverts that you instantly saw when entering the website. Whilst advertising has its benefits, completely taking over a website main page with an advert is actually an eyesore. This had to change.
I archived the previous website at www.camdevelopment.uk/archives/ukfm just for reference. This allowed me to jump in and out of the website whilst building a new one.

Bootstrap

bootstrap

I generally write in Bootstrap, I love the versatility of it, and how well it runs within a mobile environment. I can manipulate every element of the sections to behave exactly as I need them to, and can get the code to respond to a series of short demands. I also work within a live environment, which means I can build, and edit, my websites in an environment which can perform tests over various networks and wifi streams. This also means I can use different operating systems and browsers to test the site before I pass it off to the client as a finished product.

If you’re new to Bootstrap, have a look at it Here

The Grid system in Bootstrap has so much versatility and ease of use, that asking a piece of html code to do the same thing, would, and did, take a long time. For example:

I can ask bootstrap to create a Grid, which responds over the different sizes of platform/screen.

<div class="row">
	<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

There’s a full explanation of it Here which I use quite a lot when building websites.

I had already decided that the new UKFibromyalgia website was going to be written in Bootstrap, but had to design a system for it. I have been using Animate CSS and WOW for a few years now, as I love the simplicity of them. You can add little touches to a grid and make everything so effortlessly fall into place.

Here’s an example taken from the Index page of the new FMUK website.

<div class="row">
	
<div class="col-sm-6 col-md-4">
<div style="visibility: hidden; animation-name: none;" class="media services-wrap3 wow fadeInDown">

To look at it may seem a little confusing at first, but if we remove the “col-sm-6 col-md-4” (The Grids from Bootstrap) as mentioned above, we’re left with

<div class="row">
	<div style="visibility: hidden; animation-name: none;" class="center wow fadeInDown">

Now all we need to do is strip away the “Visibility: hidden” & the animation-name, and we’re left with the:

<div class="row">
	"class="center wow fadeInDown">

“Center” is a small piece of CSS, written to align the text of the section. It is irrelevant here, but I’ve left it in to show how I would use it.

#body	
.center {
  text-align: center;
  padding-bottom: 15px;
}

The “wow fadeInDown” tells the section that I want the animation a gentle “FadeIn” on the grid.

For more info into CSS tricks, have a look at WOW and Animate CSS.

Structure

structure

Structure overall can be as easy or as complicated as you want it to be. For me, especially on this one, I wanted to make something that worked so simply, but looked incredible. The idea was to use sections that looked like each other, but animated slightly different, and with slightly bigger/smaller grids. I had planned to have animated backgrounds which changed depending on screensize, but a CSS conflict caused me 2 days of stress, so I threw that one out the window (and at times almost my laptop too).

I wrote up a CSS sheet for the main content, one that would have a list of objects, each one pointing to another page. For the main icons I used the ever popular Font Awesome and will continue to do it this way for some time to come. Make sure you get the latest library if you download it, as a few icons have vanished since the last edition.

Content

Content was a worry for me. I had a look at some of the massive 3-4 page long articles on this website, and knew they had to be truncated somehow, but wasn’t sure where.
A few years ago I wrote the Avalon Guinea Pig Website, and had to use a similar system there.

I used a little script here called “ReadMore” which allows you to hide part of the text from loading immediately on the site. This has a major effect on load performance times, and can save a site from potentially crashing.

Support Map

map

The support map came to me in a dream, honestly. I had been trying to figure out how best to put a wide range of services all over the UK into one place, which was in turn, easy to navigate, and easy to access. I had thought about building an interactive map type system, with Google maps controlling each directory, and hundreds of markers everywhere; However, when it came to writing that, the code structure for each marker would’ve killed this website before it even loaded.

I opted for a page that has each Region (UK), or Country, on display, which then in turn takes you to a custom built page which shows you every known service for that particular area. I also had to make it so it could be easily accessed when I transfer it to the CMS, but I’ll get to that.

The Support Map is one of my personal favourite things on this website, and one I may build on in the future.

Advertising

The Adverts from the previous site had me up in arms at times. I had to come up with a solution that would both benefit not only the website owner, but also the companies paying for advertising. Whilst static adverts can be annoying, they do have some promise that others don’t. For one, adblockers cannot remove them. The other was to rebuild and insert a working Adsense advert. Again, this had to be responsive, otherwise the entire structure would be thrown to the lions.

Adsense itself isn’t over-complicated as a platform. It has some readily-available templates to create any type of advert you require for your website. The only thing you need to do is write up some CSS for it.

Here’s an example of CSS for an advert

#advert {
  background: #fff;
  width: auto;
  padding-top: 3px; 
  padding-bottom: 3px;
  text-align: center; 
}>

The “width: auto” element is imperative if you want the advert to respond to your mobile friendly website. Without it, the advert will force all the div elements on the website to adjust to the size of the advert itself. Adsense doesn’t have any CSS examples for resolving this, so I had to write one.

The HTML for the advert is quite simple too. Based on the above CSS:

<div class="advert">
<script async src="[Google Script]"></script>
<!-- Advert Name -->
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="[advert ID]"
    data-ad-slot="[Unique code]"
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

These two in turn will display a Google advert on your page (depending on where you put it).

Static Adverts

The static adverts were built by modifying an existing piece of code I’d already written for displaying images. When using:

<a href="[location]"><img src="[image Loctaion]"  alt="alt name" class="img-responsive"></a><p>
			</div>

“img-responsive” will force the image to not only remain fixed, but behave in a mobile environment.

Twitter

The Twitter API is possibly once of the most annoying little pieces of scripting going. I say this, not because it doesn’t work, not at all, it’s great, but because HTML5 really doesn’t like when you add a “width” and “height” set of rules outside of CSS.

If we look at my Twitter timeline you’ll see the “height=”300”. Twitter does this automatically, but it can be modified from Twitter itself.  I’ve found that writing up a piece of CSS outside of Twitter actually works better, and overall allows you to remove the Height element from the HTML.

<li><div class="twitter"><a class="twitter-timeline"  href="https://twitter.com/c4md3v" height="300" data-widget-id="4871788733">Tweets by @c4md3v</a></div></li>

When cleaning up a website I tend to use the W3 Validator and it really does not like the “height” element that Twitter uses. I have pre-written CSS for this, but it really depends on the website you’re building.

Final thoughts

The Uk Fibromyalgia website has been a fun website to not only build, but to design, and fault find. It’s been an interesting few months, and at times stressful, when a piece of code doesn’t play ball. Many nights have been had arguing with bits of code, scribbling tiny fragments of code on ‘Stick it’ notes, and plastering them around my house. I’ve used a wonderful PHP mail form, which I prefer to use over my sites, because of its security and versatility.

I was left with the long task of building this entire website into a CMS (which I completed a few days before the new site went live). This is not WordPress or any other “Well known” CMS, but one, which, unless we work together, I’ll keep very quiet about.

Security first and all that.

Thanks for reading.


All the work I do is done completely free of charge, and relies on your donations. All the scripts and code I use, and write, are completely free to use and share without licence or aknowledgement.

If you want to donate, please click here, so I can continue giving people the best I can.




You can read more about why I do this on http://www.camdevelopment.uk/givealittle.html

Which CMS to use – Part 1?

As long as I can remember, people have been looking for solutions to take control over their own lives, which includes (but not limited to) their own websites, and why not, after all, a website should be unique to you and your needs. A website should give you the chance to show your life, your product, your voice, without restriction.
With many platforms giving the client a “Simple” and “Affordable” take on building a website, some fail to include what it really costs in the long run. I’m going to break down some of the myths surrounding some of the more popular sites, and how they work for those who really don’t need additional stress in their lives.

Let’s start with WordPress.

wordpress

WordPress, over the years, has evolved into one of the giants of hosting a complete management system. It has thousands of user-friendly templates, used by millions of people, and can be modified and accessed by even the most absolute beginner.

It primarily has 2 flavours:

  1. WordPress.com
  2. WordPress.org

WordPress.com is more commonly associated with blogs and blogging websites. It is hosted within WordPress, and whilst you can buy out the domain through WordPress, you are still using the WordPress nameservers.

For example: If I have a blog called ‘somewhere.wordpress.com’, and want to turn it into ‘somewhere.com’ but keep all my blog posts and the cms platform, I can approach WordPress via the settings and buy the domain. There’s a great section about the domain process Here I could count the millions of websites out there that have done this, but I won’t; Besides, it’s very easy to tell when you’re on a wordpress site (I write about that later).

On the other hand, we have the WordPress.org, and whilst similar to it’s counterpart ‘.com’, this version downloads to your computer in a small zip file. You can modify the php files, change the css, and edit all the features you wish it to display. You also have the options to add, or make, custom widgets for your website. The only major difference here is that you’ll need your own host to upload these files to. WordPress.com is quite limited with what they will allow on the blogging platform, and quite rightly so (especially with security), WordPress.org opens up the platform to be as much or as little as your mind can create.

    Security

With WordPress being one of the biggest CMS platforms in the world, security is a must. People every day build new blogs, or simply share content between social networks, and this means security needs to be at it’s strongest. It is said, for every update or patch released, someone will be trying to break it. Vulnerabilities in software can mean the difference between having a secure website, and having an insecure one. Would you hand your credit card and PIN number to a random person in the street? Probably not, so why would you set up a shop or selling site on a platform and use insecure widgets, links, redirects?
There are many companies offering to advise and even sell you “Complete Secure Packages” to “Protect” you online, and whilst some of them do work, many of them don’t, and don’t in a drastic way. Continue reading Which CMS to use – Part 1?

Back To Top

Ever found yourself pondering on how big a page can be? I know, especially on a mobile device, it becomes scary how much content can be displayed. We can get hooked into a tiny bit of gentle reading, and before long, we’ve fell down the rabbit hole and are venturing into space unknown.

I therefore use this little script, written for my own enjoyment, and first used on one of my early sites: https://www.avalonguineapigrescue.com

Feel free to modify or use at your leisure.

 

Read More, or Less

When building large websites, I have become accustomed to using the common “Read More” buttons for displaying large amounts of content. It not only makes life simpler for the visitor, but it takes some load stress off the overall performance of the website.

The original script, by Jed Foster served me well for some time, but like many things, I keep adapting it depending on the task at hand.

Below is one of the modifiable scripts I’ve used throughout many of my sites. All elements are customisable.

 

 

Be sure to check out the developer of this script: http://jedfoster.com/Readmore.js/

One Small Step