DEV Community: Steven Godson

5 things to consider when planning your business website

Steven Godson — Sun, 10 Oct 2021 13:07:35 +0000

As a business owner in this modern world of ours you want to be able to engage with as wide an audience as possible to maximise your potential revenue.

There are many ways in which you can achieve this but most, if not in reality all, rely on having an internet presence. So what should this presence be?

Social media is an obvious place to start. Huge audiences, ready built platforms, global reach etc. However, whilst social media platforms are superb for marketing and customer/client engagement, they are enhancements rather than a replacement for a website/app.

The benefits of your business having a dedicated website are;

bespoke styling and theme to match your businesses brand
having the User Experience (UX) that you need driven through the User Interface (UI) that you want
order lifecycle control from basket creation through to payment and order status management
integration with your payment service
you can share specialised content behind a secure login

So you have decided that your business deserves a website. What do you need to consider? the simple answer is "Lots!" but there are a number of key areas that will help get you started and ensure success. An overview of each of these areas and what they mean to you is summarised below.

Where should I host my site?

This decision very much depends on a number of factors.

how much control you want to have over the look and feel of your website?
do you want to build / maintain the website yourself or get a professional to do the work?
how much traffic are you expecting?
how frequently will your website structure or functionality, not content, be likely to change?
what technologies do I want my website built with?

The specifics of which hosting provider you ultimately go with is a decision between you and, assuming you are not self-building, your web developer. The two high level choices are;

Hosted Service

This is where you use a service such as Wix.com, GoDaddy.com, WordPress.com et, there are many to choose from, and build your website using their templates, 'wizards' etc.

These are a, relatively, painless approach to building a website, especially for the non-technical, and you can be up and running in a fairly short period of time.

There is, however, a trade off.

Using one of these services means you have less control over how and where your website/data is hosted, as well as having to live with the constraints that the service provider places upon you in terms of what can and cannot be achieved within their service.

This may be perfectly acceptable to you and your business, especially when starting out where you want something quick and easy, but be mindful of the future when your business is growing rapidly and you need to migrate to a more functionally rich solution.

Self Hosted

The title of this option is somewhat misleading in that you do not have to build your own data centre, networks etc, rather that you take responsibility, albeit sub-contracted out to cloud providers and professionals, for where and how your website/app is hosted as well as the maintenance of the solution.

This opens up a cornucopia of possibilities and technology choices which, as a business owner, you may not want to spend time on. This is absolutely fine as you can leave a lot of these decisions to your trusted professionals who should be able to guide you down the right path depending on what business outcomes you want to achieve.

There is, of course, a trade off. See what I did there...

By implementing your website/app in this way it is quite possible that it will be more expensive than using a Hosted Service.

However the benefits from this approach, which in my experience outweigh the costs, are;

flexibility
scaleability
speed of change
ability to try out new technologies
ability to swap out providers to get better prices or enhanced services

Domain name

So firstly "What is a domain name?"...

This is a key decision as the domain name you choose needs to be;

memorable - choose something that will stick in the memory,
meaningful - relate to your business name or what your business does,
available - you need to make sure that the domain name you want is available

It is also worth considering whether you want to register, although not necessarily use, multiple top level domains, such as, .com, .co.uk, .uk etc.

This is usually done to safeguard your business against competitors against trading under a similar web address and capitalising on your brand and hard work. These can be registered all together, some Registrars provide bulk discounts, or later on as your business grows.

The one thing to be mindful of is that domain name registration is an ongoing cost, frequency dependent on which Registrar you choose, and needs to be maintained otherwise you lose rights to the domain name(s) and your website will no longer be reachable.

SEO / Analytics - putting you on the map, and keeping you there

Search Engine Optimisation (SEO) is all about getting to Page 1 on a Google search (other search engines are apparently available) and can be seen as a form of wizardry at times.

There are many articles that can be found online that go into this subject in much greater depth than I would want to in this article. Suffice to say that there are a few key considerations that you need to give consideration to when thinking about website/app for your business.

Metadata - this is the, mostly, unseen content in you site that search engines look for and index for users to search against. the main three are;
- Title - the text that appears in your browser tab
- Description - tells search engines what your site or page is for
- Keywords - the words that you specifically would like search engines to include your site in searches for
Sitemaps and Robots.txt - these are files that need to be created and stored in the root directory of your website/app and are specifically there to help search engines by telling what content is important and what can be ignored

All this is great but unless you pro-actively monitoring your performance and adjusting accordingly your website is unlikely to rise to the heady heights of Page 1.

There are many, free and paid for, services and tools that will help you do this. My recommendation is that you start off with a free one, such as Google Analytics, and see how you get on before progressing to a paid tool.

If you are time poor, understandable as you are building the next mega corporation, then outsourcing this to a professional who will do the monitoring and maintenance for you is a great way to take the stress away.

Images - stock vs owned

Depending on what your business does or is trying to market with a website then you will need to consider where your images come from and whether you want to pay a license fee or provide your own images, assuming you own the rights to use them, and have these on the site.

I always look at it like this.

Am I showing a proprietary product or service that I want to have specific images of on my website?

If YES, then either hire a professional photographer to take the images you want (make sure the price includes you owning the right to own/use) or, if you are a budding photographer, take the images yourself and store them securely.

If NO, then using stock images, from services such as Getty or Unsplash, is a great way to go. Just make sure you read the licensing terms and understand whether you need to add a 'credit' against each image or somewhere on your website.

Content / Copy

Similar to images the written content on your website/app also needs to be considered and either outsourced to professionals or, if you have the experience necessary qualifications / experience / skills, do the job yourself.

Consideration should be given to bringing in professionals for the following areas;

Legal and Commercial
Sales and Marketing
Technical Writing
Content creation e.g. articles or blogs

Summary

All of this can seen quite daunting, especially if you don't come from a technical background.

That is why I started Xenos-Design Ltd, as I wanted to provide high quality services and use my decades of technical and service delivery experience to take the weight of your shoulders.

I am always happy to have a chat, whether to offer advice or to discuss a project that you would like to undertake, and can be reached at steven@xenos-design.co.uk

Introduction to RegEx

Steven Godson — Sun, 10 Oct 2021 12:51:20 +0000

So I thought it about time I did some discovery and learning around the use of RegEx what it can bring to a project.

To ensure that I got a structured introduction I undertook the course called REGULAR EXPRESSIONS FOR BEGINNERS – UNIVERSAL on Udemy by Edwin Diaz, which I thoroughly recommend as Edwin is great at boiling the essence of a topic down into something that is easily understood.

The following are the notes that I took while working through the course along with some worked out examples, some which were derived from the course and some which I’ve implemented in other projects.

Hopefully this will be of some use to you and give you a broad understanding of RegEx.

I recommend that you use an online tool for working through this as it will help bring it to life. Personally I use https://RegEx101.com/ as it will work with a number of languages, has a dictionary of syntax and will actually explain to you what you expression is doing as you write it out.

REGEX OPTIONS

In its most basic form RegEx will match against a specified set of characters within a target string:

Example:

/car/g

will search for every instance of the string “car” within a target string of text.

/car/gi

will do the same as the above but will be case insensitive.

/car/gim

will do the same as above but will search across multiple lines of text.

/car/s

will search within a single line using a full stop/period to identify the end of the line.

/car/imgu

will be case insensitive, search across multiple lines, will search globally and look at Unicode characters.

It is important that you get the setting of these options correct in your expressions to ensure that your matching against exactly what you want.

META CHARACTERS

/c.r/i

adding a full stop/period anywhere in your string is essentially adding a wildcard. This means that, under this example, the expression will match against anything that starts with the letter c and ends with the letter r. It will not care if there is a letter or a symbol in between them, so be careful if you specifically want to search for an actual full stop/period.

ESCAPING

/c\.r/g

so if you want to search specifically for full stop/period, or if your search string includes something like a “/” because you are searching a URL for example, then you will need to escape that particular character. This is done by adding a “**” in front of the character so as you will see an example the expression of only return matches to “c.r**”

some language engines will automatically escape characters so RTFD…

MORE CHARACTERS

escaping can also be used to match against a whole host of different characters or actions within your RegEx expression for example

/C\n\t\R/

will specifically look for C, then a new line, then a tab and then an R.

But be mindful that the characters work in different ways depending on what language engine you are working with e.g. JavaScript or.net or PHP et cetera so refer to the documentation.

RANGES

[car]

treats this as a range of letters to search for and will return every instance of each individual letter.

[a-z]

search for every alphabetical letter and return every match. This is case sensitive so example only search for lowercase letters whereas [A-Z] will only search for uppercase. They can both be combined in the same range. [0-9] will also do the same thing, but for the range of numbers zero and nine. The ranges do not have to start or finish as stated above just as easily be [b-f] for example.

[abdq]werty

search for all of the letters within the range as well as anything that matches “werty”.

the range, start and end point can bhe anything you want it to be as long as it is separated by a [-] within square brackets.

NEGATION

negation is when you tell the expression to exclude something and which is done using the ^ symbol (shift + 6 on Windows keyboard). An example of this would be [^cat] which would tell your expression to ignore any of the letters within the range.

SHORTHAND

so shorthand is, and don’t shout at me for this, a bit like a macro or short name function as you can type in \ followed by a specific character or letter and it will produce the equivalent of typing out a longer expression range. I have added a couple of examples below but for full details refer to the documentation language engine;

\s - looks for any whitespace character.

\S - looks for any non-whitespace character.

\d - looks for any digit.

\D - looks for any non-digit.

\w - looks for any word character.

and the list goes on. What is good about this is that you combine them within ranges and negation to make your code shorter.

But be mindful as some of them produce slightly odd results such as \b which looks at the boundary of what it considers to be a word but will include digits e.g. it would match against all of Lettuce468.

These can also be used to create a pattern against which to match if you need to be very specific, for example;

/[\w\w\w\w\w\w@xenos\-design\.co\.uk]/

would match against my email address, or any email address under the same domain where the word in front of the @ symbol is six characters long.

REPETITION

Quantifiers – these are meta characters when added tell you expression to select varying amounts of the character that proceeds it, for example;

a? - will match zero or one of a, where a represents what you want to match against.

a* - will look for from 0 to more of a. I have also seen as described as the Greedy quantify because it will match as many times as possible.

a+ - will look for one or more of a.

a{x} - will look for the specified number of a where x equals a number.

a{x,} - will look for xc or more of a where x is a number.

a{x,y} - will look for the number of a’s between x and y.

a*? - This will match a from zero or more times, but as few times as possible. This is known as a lazy or reluctant quantifier.

These can be combined to create an expression that will search for a pattern, an example of this would be

/\d {5}-\d {4}/

would match any set of values that look like this 12345-6789 an obvious use case for this could be if you’re searching for telephone numbers in a dataset where there is a specified format. The same could obviously be done for text strings as well or indeed combinations of both.

GROUPING

must be done outside of the character/range set otherwise parentheses will just be escaped, however, characters set/range can be put inside grouping so ([0-9]) will work but [()] will not.

An example of how this would work is save(d)? which makes ‘d’ optional and therefore would match against both ‘save’ and ‘saved’.

ALTERNATION

the use of the pipe symbol ‘|’ (shift + \ on a windows keyboard) effectively works as an OR statement. However some nuances of it are;

- whatever is written on the left takes precedence.

- global needs to be switched on for it to work.

- it can be used as many times as needed.

a more effective way to use this is to include grouping i.e. (Bat|Super)man will return against both ‘Superman’ and ‘Batman’.

Example to work in – (\w+|file\d {3}_export. sql) file201_export.sql remember that the right of the pipe sign takes precedence and will be classed as an eager function as is looking for all words so would return against an underscore but not a hyphen or a full stop.

Alternation can also be used in a nested group i.e. (soup (bowl|spoon)) will return against ‘soup bowl’ and ‘soup spoon’, be mindful of the spacing as this is quite key to a working.

ANCHORS

^s - will look for the first ‘s’ in a string e.g. it has to be at the beginning of the string.

s$ - as above but at the end of the string.

^[a-z] - will look for any texturing that starts with a lowercase letter.

WORD BOUNDARIES

\b - this will match up to the boundary of each word or word character.

\B - this will match twin non-word boundary, which is somewhat confusing, as it will not match on any string of less than three word characters but on a string of more than three characters it will match as follows ‘t*es*t’ as it treats the beginning and end characters as the boundaries themselves rather than the spaces around them as the boundary.

BACK REFERENCES

is a way of referring to the string of text or digits within a grouping.

Typically most engines let you save up to 9 back references, shown as follows day(light) \1 with the ‘\1’ being the reference to the “variable”. This would only match if the texturing it is searching is written as follows daylight light.

Example:

<p id="para">Steven Godson</p>

var para = document.getElementById('para').innerHTML;

var pattern = /(\w+)\s(\w+)/;

var newString = para.replace(pattern, "$2");

console.log(newString);

so you can add this to an HTML file, then run it in a browser and look at the console to see that all that has been console logged is the second part of my name e.g. “Godson” as the JavaScript will get the inner HTML from the paragraph element apply the pattern over it which was essentially searching for a ‘word space word’ pattern and assigning the variables $1 and $2 to the two groupings.

Then the variable newString will be assigned the value of $2 which is then console logged.

NON-CAPTURING GROUP

this example we see yet another way a ‘?’ can be used to do something different within your expression.

/(food) and (?:travel) and \1/

will match against “food and travel and food” because is repeating the first variable, whereas

/(?:food) and (travel) and \2/

will match against “food and travel and travel” because it is repeating the second variable which is travel.

Using the “?:” switches off that variable.

POSITIVE AND NEGATIVE ASSERTIONS

/[A-Za-z]+(?=,)/

this will search for any upper or lowercase letter that is followed by a comma.

/[A-Za-z]+(?!,)/

this literally does the reverse (if != ,) e.g. does not equal comma and so will match every string of upper and lowercase letters that do not end with a comma.

POSITIVE AND NEGATIVE LOOK AHEAD

/[A-Za-z]+(?<=,)/

very similar to the previous section except that by adding the “<” you’re telling the expression to look at what comes before e.g. under this example it would look for every texturing that is preceded by a comma.

/[A-Za-z]+(?<!,)/

again, literally the reverse, where you are looking for everything that is not preceded by comma.

MULTILANGUAGE SYMBOL SUPPORT

RegEx includes support for Unicode, so no matter what language you are searching against you will be able to use Unicode to create a match in your expression.

You can find the full Unicode listings at https://home.unicode.org/.

If it is to be included it in your ReEex expression as follows \u2022 using the “\” to escape the u so that it is turned into the Unicode character.

EXAMPLES

Password Validation – the following is an example of an expression that could be used to validate against contents of the users chosen password to ensure that it matches against the policy in place on our project.

/^(?=.\*[A-Z])(?=.\*[a-z])(?=.\*\d)(?=.\*[!$£#])\S{5,20}$/gm

(?=.*[A-Z]) – this validates against the password having at least one upper case character.

(?=.*[a-z]) – this validates against the password having at least one lowercase character.

(?=.*\d) – this validates against the password having at least one number.

(?=.*[!$£#]) – this validates against password having at least one of the identified symbols within the square brackets.

\S{5,20} – this validates him the password being a minimum of 5 and a maximum of 20 characters.

Pretty URLs – the following example is something that I have deployed myself and is commonly seen on websites to make the URL in the browser more human readable. This example is specific to PHP running on an Apache server.

Step One – ensure your Apache server has the rewrite engine switched on.

Step Two – create a new file called .htaccess in your website’s root directory.

Step Three – opening with your code editor and add the following:

RewriteEngine on

the switches the rewrite engine on*

RewriteRule /^post/(\d+)$ post.php?p_id=$1/ [NC,L]

this tells the server to replace anything with a post.php?p_id=$1, where $1 equals the number identified in the group, and replaces it with post/post number e.g. domainname.com/posts/178, with the NC denoting that it is case insensitive and the L denoting but this is the last rule that should be processed.

SUMMARY

Hopefully this brief introduction to RegEx has sparked your interest to go and explore more for yourself and understand how this very powerful tool could be used in your projects.

I’ve enjoyed learning about something that seemed to be quite daunting before, but now seems quite simple once you understand the syntax.

I have added some references below to language specific documentation and a couple of tools that I found useful during this learning process.

REFERENCES AND RESOURCES

.net - https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference#:~:text=A%20regular%20expression%20is%20a,For%20a%20brief%20introduction%2C%20see%20.

JS - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

PHP - https://www.php.net/manual/en/reference.pcre.pattern.syntax.php

Java - https://www.w3schools.com/java/java_RegEx.asp

Golang - https://golang.org/pkg/RegExp/syntax/

Online Tool - https://RegEx101.com/