small-business

Why Small Businesses Need Web Presence

Small businesses rely on local trade, advertisement and word of mouth. They rely on the time old strategy that if they give a quality product or service, people will tell others, and that will generate new business leads.

I’m here to tell you that this approach misses some fundamentals of business strategy.

Here’s why:

 

1. Your brand can’t be interpreted and described 100% by others.

If you rely on others to transmit the message of your brand, they will interpret you and what you stand for in their own unique way. Sometimes this might be beneficial, for instance if someone sees something in you that you didn’t yourself.

Mostly this won’t be the case. People will inevitably reduce their interpretation of you via cost and time. They did good work and it was a reasonable price.

Do you want this to represent you and your unique business?

I didn’t think so.

Your clients will miss some key aspects of who you are and what your business represents. Ultimately you should decide who you are marketing to, and generate the right type of clients for your business.

Of course word of mouth will generate new business, but an online presence will present the image you choose for yourself and your business and put you in control of what clients you get.

 

2. Relying on word of mouth reduces the spread of your business, both in distance and time.

If you have one client, who refers you to five people, great! These five come to you, then refer five others, you then have twenty six clients right?

It doesn’t work that way. People struggle to explain your business and might not have your contact details to hand when this referral takes place.

This will limit your business to the local area, but why settle for that? If your business is location dependent, then you will have to consider travel, but so many are not.

What if you had a constant referral online that people could log on to. Your referrer then just quotes your business name for people to Google. Clients can find you all over the country, continent, or planet and hire you for your services. Simple.

Of course you will need someone who knows about Search Engine Optimisation and getting your site noticed on the first page of Google. Why not contact me for more information?

 

3. Traditional print media advertising costs more and has barriers to production.

If you are still relying on local print media, think of the cost and effort that goes into it. Also think of the reduced client base you have as more people move their reading to online materials.

You can write your own media online. For free! I founded Peak Studios to specialise in helping you to create your own online content for your business that people can tap into, with modern social media channelling to get clients to see you and your unique brand. I can help you target the clients you want, and generate new business with your own personal content. The best part is, when you have your website set up, you can do all this for yourself for free! Have a look at our starter packages here for more information.

 

4. Your physical social network can’t grow like an online network can.

Every time a client refers you, they reach one person. How likely are they to reach more than one person at a time? If that person speaks at events, or writes an article for you, then great, but most of your clients are pressed for time just as much as you are.

What if someone with a click of a button can share your website with hundreds of people? I can make that easier for you, one click sharing of your website on Facebook, Twitter, and Instagram as well as social sharing of any content you write yourself. If each share reaches four hundred people, and then just 5% of these people share your content, you have reached 420 people. With just one click of a button!

 

5. You reduce the ability of people to find your business and learn about your work.

If a potential client is thinking about the service you provide, they will instantly Google the service and their location to see what is available. You’re missing out on this key part.

99% of people will click on the first result on Google that they find, and most will continue to purchase the services from this provider. Remember, people no longer have the time to shop around, they want to find someone quickly.

Do you want to be the first on Google? Do you want to get those 99% of potential clients looking for your service right now?

Of course you do. I want to help you achieve this.

 
I founded Peak Studios to take the difficulties out of starting your own website. I make it for you, with your designs and specifications, and provide training on how to add content yourself. I can help you create social media channels that market themselves and develop advertising strategies with Facebook and Google to spread the word.
 
Your business needs to be online to compete with others out there. It doesn’t have to cost a fortune and it doesn’t need you to learn anything to do with the internet. I take that out of your hands and give you back a responsive elegant web presence that truly markets your skills.

coding

A Beginners Guide to Browserify

There are so many frameworks and tools for developers now that some have been complaining of “JavaScript frameworks fatigue”. It has caused a lot of buzz among JS developers.

 

As someone who only started learning to code 4 months ago, these tools have seemed daunting, but after the learning curve I have come to see just how useful they are. Browserify has solved some major headaches.

 

This post will outline what Browserify is, how it can be used, and also hint at some extra tools to streamline its use.

 

What is Browserify?

 

If you’re  new to Nodejs – you should know this before we start. In NodeJS you can use different scripts known as “modules” as long as you require them within the script you are currently working on. For example if I wanted to use a popular library, React, in NodeJS, I could write the following (as long as I had installed React beforehand):

 

var React = require("react");

 

I can then use this throughout my script referencing React to use its properties and methods.

 

You can also reference your own Javascript files as modules. For example:

 

var MyJS = require("./myJS.js")

 

You can then use what you have exported from this file in a different file altogether! Wow!

 

Browserify takes this functionality and adds it to the browser. This means that you can reference external modules and your own to use everything on the Client Side of your application.

 

Let’s take an example. Say I want to use JQuery on the client but I have forgotten my CDN link for some bizarre and fortunate reason for this tutorial. I do however have Browserify installed….. so I can simply do this in my client side JS file (as long as I have installed JQuery first):

 

var $ = require("jquery")

 

I can then use the $ as I would normally use ($.getJSON() e.t.c.).

 

Why is this useful?

 

The first obvious reason is that you can use popular libraries in your client side which reduces having to reinvent the wheel. Say I need to parse a date, I can use MomentJS in the browser.

 

The big reason for me is that you can separate your scripts into easily manageable files. How often have you have you had  files hundreds of lines long on the client side and found it hard to debug? Now you can easily separate out your main functions and require them when needed. For example, say I need ajax functions regularly and for some reason I don’t want to use JQuery. I could create a file like this:

var ajaxFunctions = {
ready: function ready (fn) {
if (typeof fn !== 'function') {
return;
}
if (document.readyState === 'complete') {
return fn();
}
document.addEventListener('DOMContentLoaded', fn, false);
},
ajaxRequest: function ajaxRequest (method, url, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
callback(xmlhttp.response);
}
};
xmlhttp.open(method, url, true);
xmlhttp.send();
}
};
module.exports= ajaxFunctions;

 

Now in another file, instead of writing out an Ajax function from scratch, I can reference this script, and use one of its methods to create an ajax request with very little code.

 

var ajaxFunctions = require("./ajaxFunctions.js")

 

ajaxFunctions.ajaxRequest("GET", "example URL", console.log(data))

 

What’s going on here? I am exporting my ajaxFunctions code as an object, which then is required as a variable in a different file. I can then reference the methods of this object and use the ajaxRequest function that was declared originally. This is heaven for KISS and DRY principles as you do not have to repeat your code at all.

 

How does it work?

 

Browserify takes the scripts you declare to it and joins them together into one file. Anything that is required will also be pulled in, say if you required an external library for use on the client side.

 

You can name this file whatever you want but most docs aptly call it bundle.js. You then reference this one JS file in your HTML or template and you’re ready to go! That’s right, only one file in your HTML – not lots – that’s a major positive for understanding your code and debugging.

 

How can you get up and running?

 

First of all, install Browserify using:

 

npm install Browserify -g --save;

 

Now you need to bundle your scripts:

 

browserify script1.js script2.js  -o bundle.js

 

Make sure you include the file destinations and put the bundle.js file where you want relative to where you are running the command.

 

That should be it but of course there are always issues! If you have any feel free to send me a message and I will respond quickly – I wish I had had someone to ask…

 

Extensions – Watchify!

 

Yes, I know what you’re thinking. I have to compose this bundle.js file every time I want to make a change…… No! You can install Watchify which will recompose the bundle.js file whenever you make a change to a JS file. If you use Nodemon this functionality should be familiar to you. Install like so:

 

npm install Watchify -g --save;

 

Use like so:

 

browserify script1.js script2.js  -o bundle.js

 

When this is running you will be able to see changes in action. Make sure it is running though, otherwise any changes you are making in your JS files will not be composed into the bundle.js and you will start scratching your head as to why nothing is working….. (I am of course speaking from experience….)

 

Summing it Up

 

Browserify solves the problems of having too many JS files referenced in your HTML, inability to use Node modules in the browser, and inability to reference your own modules in your own code.

 

Watchify streamlines the process of bundling your files and will make a change everytime you change a JS file in your project.

 

My next article will be on configuring Browserify and ReactJS  for creating components in separate files that work seamlessly in the browser.

 

I hope you found this useful. As always, these tools are hard to get your head around but once you do they can open a lot of doors.

social-login

How to Add Social Login Buttons To Your App

After using PassportJS to create different authentication strategies for some of my latest projects, I came across a little barrier: I was having to create all my social login buttons from scratch!

 

Do not despair, you do not have to align your images, css up your buttons, and get your site looking right all at once, there’s a library for it. It comes with colours correct for the social login you are interested in and the ability to use all of bootstrap’s other classes to style/position your buttons as you see fit.

 

Getting Started With  “Social Buttons for Bootstrap”

 

First of all you need to make sure you have Bootstrap, FontAwesome and Social Buttons for Bootstrap referenced on your html page. I can help you here:

 


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.css" rel="stylesheet" type="text/css">

 

 

Then to create your individually styled buttons choose your provider and enter the following html making sure to replace provider with your chosen social provider (twitter, github, e.t.c.):


<a class="btn btn-social btn-PROVIDER" href="">
<span class="fa fa-PROVIDER"></span> Sign in with PROVIDER
</a>

Here is an example of the twitter button created from the following HTML:


<a class="btn btn-social btn-twitter" href="/auth/twitter">
<span class="fa fa-twitter"></span> Sign in with Twitter
</a>

twitter social button

 

This will make your life easier and standardise all your buttons so you get a nice clean image to your app which requires social login.

 

Stay tuned for more tutorials on PassportJS and authentication in the future!

 

slider2

Make A Custom Quote Slider using HTML, CSS, and JQuery

How many JS plugins are available for an interactive timed slider?

I had a look, there are thousands. I figure if you’re going to use someone’s code, you need to know how it works, and sometimes just writing your own is a better learning experience.

So I decided to make my own. I thought I’d share the experience so that people can learn from it.

 

The HTML

 

First you start with your HTML markup with some classes to work with, here you go:

<div class=”slider”>
<div class=”slidercontainer”>
<div class=”sliderspot spot1″> </div>
<ul id=”sliderul”>
<li class=”slidercontent”> “The first quotation.”
<span> This first author. </span> </li>
<li class=”slidercontent”> “The second quotation.” <span> The second author. </span> </li>
</ul>
<div class=”sliderspot spot2″> </div>
</div>
</div>

You can see that we have a div for the whole slider, a container to help with spacing, two spots that will be used as buttons, and an unordered list with our content.

 

The CSS

 

Let’s add some CSS to this to make it look ok, at least on a large screen. (you will need to add some media queries to make this more responsive.) Here you go:

.slider {
width: 100%;
background-color: lightgray;
margin: 10px auto;
height: 200px;
}

.slidercontainer {
width: 85%;
height: 200px;
margin: 0px auto;
}

.sliderspot {
width: 15px;
height: 15px;
border-radius: 100%;
background-color: gray;
display: inline;
cursor: pointer;
cursor: hand;
}

.sliderspot:hover {
background-color: black;
}

.spot1 {
margin: 85px 30px;
float: left;
}

.spot2 {
margin: 85px 30px;
float: right;
}

#sliderul {
list-style-type: none;
margin-left: 4%;
width: 75%;
text-align: center;
height: 150px;
padding: 10px;
line-height: 30px;
display: inline-block;
}

.slidercontent {
margin-top: 20px;
font-size: 20px;
color: #1D1F20;
}

.slidercontent span {
font-size: 18px;
display: block;
margin-top: 10px;
color: #343436;
}

This is going to make our slider look something like this (my content added):

slider2

Nice and simple for now, later you can make it look a little fancier, but I quite like my stuff to look pretty basic when I’m going to start adding interactivity. I don’t want anything to fancy just yet.

 

The Interactivity 

 

On to the JQuery/ JS.

1. Make all content disappear, then fadeIn just the first quote.

$(“.slidercontent”).hide();

$(“.slidercontent:nth-child(1)”).fadeIn(“slow”);

2. Create some variables to control which child we are going to access. We’ll start at one, and define max as the number of children +1. I’ll explain the add 1 below.

var current = 1;
var max = $( “li” ).length +1;

3. Create a function that will hide all slider li’s and then show the sibling of the previous li shown. We do this by adding 1 to our current value, and showing that child. If the child reaches the last one, then it will reset to 1 and start again from the beginning.

function changeUp() {
$(“.slidercontent”).hide();
current += 1;
if (current === max) {
current = 1;
}
$(“.slidercontent:nth-child(” + current + “)”).fadeIn(“slow”);
}

4. Create a very similar function to change down. I’ll let you work this one out yourself.

function changeDown() {
$(“.slidercontent”).hide();
current -= 1;

if (current === 0) {
current = max – 1;
}

$(“.slidercontent:nth-child(” + current + “)”).fadeIn(“slow”);
}

5. Use click event handlers to attach these to our “spots” that will then navigate up and down our quotes.

$(“.sliderspot2”).click(function() {
changeUp();
});

$(“.sliderspot”).click(function() {
changeDown();
});

If you’re feeling good, add some automatic timing.

Make the changeUp function happen every 10 seconds, and wrap this in a function to call it when you want.

function startChange() {
changeIt = setInterval(function(){
changeUp();
}, 10000);
};

Next let’s make a function to stop the automatic change so we can call it when we want.

function stopChange() {
clearInterval(changeIt);
}

Now all you have to do to get it working is call the startChange() function at the beginning of your code so when the document loads, it starts changing.

Some added extras for UI

The problem now is that if a user changes the quote, it might stay for just a few seconds before the automatic timing kicks in and changes the quote. So, lets modify our click handlers to stop the automatic timing, change the quote, then restart the automatic timing so it stays for 10 seconds.

$(“.sliderspot2”).click(function() {
stopChange();
changeUp();
startChange();
});

$(“.sliderspot”).click(function() {
stopChange();
changeDown();
startChange();
});

 

All Done!

 

Tadaa……. You just made a JQuery slider all by yourself. You can see it at the codepen here, or a nice example with some testimonials on my portfolio page here.

9ML7MMR8T5

FreeCodeCamp Might Help You Live Longer

Since starting my web development journey with FreeCodeCamp I’ve felt more awake, alert, and able to process information at greater speeds. What I didn’t know is that their curriculum might actually help me live longer too….

There have been a lot of studies into dementia and Alzheimer’s specifically regarding keeping one’s brain active and learning other languages, which coding can certainly contribute to. The primary term is “cognitive reserve”; the ability for your brain to compensate functionally to degeneration.

Research indicates that people who have solid stores of cognitive reserve are generally less likely to exhibit the classic signs of dementia—short-term memory loss, difficulty multitasking. “

So how could you improve cognitive reserve with coding?

  1. Problem solving: Coding challenges your brain in different ways, forcing it to open new neural pathways. It increases efficiency, and improves our brain’s ability to work under challenging conditions. This means that if we suffer a brain injury, degenerative or otherwise, our brains are more likely to be able to function at a higher level afterwards.
  2. Creativity: I have noticed a dramatic rise in my creativity and originality since starting to code. This creativity is not just stuck in my OS, I am actually discussing more original ideas with friends and coders. One study showed there was a link between “verbal creativity” and an increase in cognitive reserve.
  3. Opening new possibilities: Coding has opened my mind to what is possible through coding. The options are literally endless. The process is similar to when I studied my degree in anthropology and realised that the representations of culture around the world are infinitely varied. So too, are the possibilities with code. This is opening up parts of my brain that I haven’t used for a long time, and could be improving my cognitive reserve.

Bilingualism

There have been a multitude of studies showing that bilingualism can increase cognitive reserve.  When processing a new language, older languages become activated to some degree in order to process new ones. This functional interaction produces more grey and white matter in the brain, leading to increased cognitive reserve. But can we assume that coding languages are the same?

A study from the University of Passau showed that brain scans on 17 volunteers when reading source code might shed some light. It was found that programming languages and natural languages activated the same parts of the brain in similar ways.

So the more languages, the more interactions, the better. Next time I’m trying to understand a loop in PHP by comparing it to one on JavaScript, I’ll be less frustrated. I’ll realise that this could be giving me 5 more years of life!

 

It’s not just coding, it’s not just Alzheimer’s

It’s not just your problem solving or multilingualism that will increase cognitive reserve though. You must work on your social, physical and intellectual capacities in order to increase it. This means going to social events, perhaps coding meetups, and both talking and listening to complex ideas. It also means exercising, which I am a strong proponent of, and actually think improves your coding too.

T3JL9DM56G

Get some exercise to improve health…..

VQXYE2ZEHC

..and go to a code meetup to share ideas.

 

 

 

 

 

 

 

It’s also not just Alzheimer’s and dementia either, an increase in cognitive reserve has been shown to have an effect on incidence of vascular injury, Parkinson’s disease, traumatic brain injury, HIV, and multiple sclerosis. You’re not just stopping dementia by coding, you are having an effect on many other ailments.

 

Why FreeCodeCamp?

So why have I specifically referenced FreeCodeCamp? I feel that their open source curriculum is more independent than any other I have tried, which simply leads me to use more brain matter than others, hopefully increasing my cognitive reserve more. I am not watching a video and doing small irrelevant challenges, I’m creating whole projects with FCC, like my Weather App that I recently built and am really proud of.

So next time you’re struggling, beavering away at another coding language, or simply learning some new grammar or syntax in your first, don’t dismay. It could save your life.

 

 

human_brain_picture_165499

Refactoring Code is Essential for Improving Your Skills

There is more than one way to solve a problem.

In fact, there are hundreds.

There are diluted and ill-thought out ways. There are clear and concise ways.

Refactoring code is a process of reviewing your code, taking things out that aren’t necessary and reducing it to its most basic functional form. It aims to take you to clarity.

I have finished my day by working on Pig Latin, a JS challenge from FreeCodeCamp.

The aim is to convert any string to PigLatin which is explained by FreeCodeCamp clearly like so:

Pig Latin takes the first consonant (or consonant cluster) of an English word, moves it to the end of the word and suffixes an “ay”.

If a word begins with a vowel you just add “way” to the end.

This challenge has been a really interesting process that I wanted to share. My code underwent 2 main revisions, and I’m sure it can be done better. (Let me know how!)

The first dealt mechanically with the consonant cluser problem with numerous if functions checking to see how many consonants were in the consonant cluster in the first three letters. My 20 line solution:

function translate(str) {
var vowels = [‘a’,’e’,’i’,’o’,’u’];
var first;
var strArray = str.split(“”);
if (vowels.indexOf(str.charAt(0)) >= 0) {
return str + “way”;
}
else if (vowels.indexOf(str.charAt(0)) < 0 && vowels.indexOf(str.charAt(1)) && vowels.indexOf(str.charAt(2)) < 0) {
first = strArray.splice(0,3);
return strArray.join(“”) + first.join(“”) + “ay”;
}
else if (vowels.indexOf(str.charAt(0)) < 0 && vowels.indexOf(str.charAt(1)) < 0) {
first = strArray.splice(0,2);
return strArray.join(“”) + first.join(“”) + “ay”;
}
else if (vowels.indexOf(str.charAt(0)) < 0) {
first = strArray.splice(0,1);
return strArray.join(“”) + first.join(“”) + “ay”;
}
}
translate(“glove”);

As you can see, there’s a lot of repetition there. So I decided that I would make a for loop that would count the number of consonants first. This was quite tricky as I had to break the loop if it meant a vowel, but I got there in the end. This made the code better in my opinion as it dealt with less of a mechanical human approach and used the tools that JS has. However it was longer with 21 lines!

function translate(str) {
var vowels = [‘a’,’e’,’i’,’o’,’u’];
var three = str.substr(0,3);
var consonantNumber = 0;
var strArray = str.split(“”);
var first;
for (i=0;i<three.length;i++) {
if (vowels.indexOf(three[i]) >= 0) {
break;
}
else {
consonantNumber += 1 ;
}}
if (consonantNumber === 0) {
return str + “way”;
}
else {
first = strArray.splice(0,consonantNumber);
return strArray.join(“”) + first.join(“”) + “ay”;
}
}
translate(“glove”);

I then noticed I had lots of variables that were taking up way too much room. I realised that instead of splitting the string into an array and splicing,  I could use .replace() and substr() to make it simpler, using the consonantNumber variable I had produced in my for loop to declare the length of the substring. This reduced the code to 18 lines:

function translate(str) {
var vowels = [‘a’,’e’,’i’,’o’,’u’];
var consonantNumber = 0;
var three = str.substr(0,3);
for (i=0;i<three.length;i++) {
if (vowels.indexOf(three[i]) >= 0) {
break;
}
else {
consonantNumber += 1 ;
}}
if (consonantNumber === 0) {
return str + “way”;
}
else {
return str.replace(str.substr(0,consonantNumber), “”) + str.substr(0,consonantNumber) + “ay”;
}
}
translate(“glove”);

As you can see, the code only reduced in length slightly with each revision. However, by the last revision, I think it became clearer and much better in terms of using the right tools for the job.

So what did I learn?

  1. There are many ways of solving problems. Not all are created equal.
  2. Refactoring code can mean decreasing size, but that’s not the main reason to do it.
  3. Refactoring code is a process by which you make your code simpler to read, using the most that the language you are using and your knowledge base have to offer.
  4. Refactoring forces you to think from different angles and makes you a better programmer. It makes you learn new methods that will help you with other, potentially more complex, problems in the future.
  5. Refactoring is a lot of fun!

Tomorrow I will continue on with the challenges, today I completed 3. If you have any feedback on my code, please get in touch!

happyunhappy

How to Use Javascript Media Queries

Responsive design is everything in web development. I think all entry level developers have a decent understanding of responsive design through using media queries, frameworks like bootstrap, or a combination of the two.

However, what if you need some functionality in your Javascript that you only need on certain devices. You could start changing CSS and getting in a mess to hide/show what you need to, but there is a simpler way. The window.matchMedia  object in JS.

 

window.matchMedia(mediaQueryString)

 

You can use a nice if function using this that will disable certain functionality on different devices. The simplest form example is below:

 

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

 

Choose your device width, add the code that you want to run in the relevant section, and hey presto!

I did this for an overlay I had on my main portfolio site that would appear when clicking on a portfolio item.

Overlay Example

This looked horrible on smaller devices and would not fit properly. I could have changed the sizing using CSS but felt it would be clearer without the overlay for UX.

The code I added worked with a .preventDefault() code snippet which stopped the link going to the portfolio description and instead opens up an overlay.  I simply added a query that only enabled the default prevention code on smaller devices so that they linked directly to the portfolio description page. Awesome!

 

if (window.matchMedia(“(min-width: 700px)”).matches) {
event.preventDefault();
}

 

I got most of the information I needed straight from the Mozilla Development Network, and adapted it to what I needed.

I feel like using this could be useful for so many things, especially if you have a very interactive desktop website and need to switch off some functionality to improve the UX on mobile devices.

Welcome to Peak Studios


Please get in touch if you would like to speak to me at any time about your web needs.