Jonathan Camp https://jonathancamp.co.uk/ Maybe there's something here that you will find interesting... Sat, 04 Apr 2026 03:49:54 +0000 https://i.snap.as/yuf6EsUA.png Jonathan Camp https://jonathancamp.co.uk/ Best Gutenberg plugins for Wordpress https://jonathancamp.co.uk/best-gutenberg-plugins-for-wordpress?pk_campaign=rss-feed <![CDATA[]]> https://jonathancamp.co.uk/best-gutenberg-plugins-for-wordpress Wed, 03 Aug 2022 19:26:10 +0000 Markdown: Basics https://jonathancamp.co.uk/markdown-basics?pk_campaign=rss-feed <![CDATA[Getting the Gist of Markdown's Formatting Syntax This page offers a brief overview of what it's like to use Markdown. The \syntax page\] [s provides complete, detailed documentation for every feature, but Markdown should be very easy to pick up simply by looking at a few examples of it in action. The examples on this page are written in a before/after style, showing example syntax and the HTML output produced by Markdown. !--more-- It's also helpful to simply try Markdown out; the \Dingus\] [d is a web application that allows you type your own Markdown-formatted text and translate it to XHTML. Note: This document is itself written using Markdown; you can see the source for it by editing this tiddler. Paragraphs, Headers, Blockquotes A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line -- a line containing nothing but spaces or tabs is considered blank.) Normal paragraphs should not be indented with spaces or tabs. Markdown offers two styles of headers: Setext and atx. Setext-style headers for h1 and h2 are created by "underlining" with equal signs (=) and hyphens (-), respectively. To create an atx-style header, you put 1-6 hash marks (#) at the beginning of the line -- the number of hashes equals the resulting HTML header level. Blockquotes are indicated using email-style ' ' angle brackets. Markdown: A First Level Header A Second Level Header --------------------- Now is the time for all good men to come to the aid of their country. This is just a regular paragraph. The quick brown fox jumped over the lazy dog's back. Header 3 This is a blockquote. This is the second paragraph in the blockquote. ## This is an H2 in a blockquote Output: h1A First Level Header/h1 h2A Second Level Header/h2 pNow is the time for all good men to come to the aid of their country. This is just a regular paragraph./p pThe quick brown fox jumped over the lazy dog's back./p h3Header 3/h3 blockquote pThis is a blockquote./p pThis is the second paragraph in the blockquote./p h2This is an H2 in a blockquote/h2 /blockquote Phrase Emphasis Markdown uses asterisks and underscores to indicate spans of emphasis. Markdown: Some of these words are emphasized. Some of these words are emphasized also. Use two asterisks for strong emphasis. Or, if you prefer, use two underscores instead. Output: pSome of these words emare emphasized/em. Some of these words emare emphasized also/em./p pUse two asterisks for strongstrong emphasis/strong. Or, if you prefer, stronguse two underscores instead/strong./p Lists Unordered (bulleted) lists use asterisks, pluses, and hyphens (*, +, and -) as list markers. These three markers are interchangable; this: Candy. Gum. Booze. this: Candy. Gum. Booze. and this: Candy. Gum. Booze. all produce the same output: ul liCandy./li liGum./li liBooze./li /ul Ordered (numbered) lists use regular numbers, followed by periods, as list markers: Red Green Blue Output: ol liRed/li liGreen/li liBlue/li /ol If you put blank lines between items, you'll get p tags for the list item text. You can create multi-paragraph list items by indenting the paragraphs by 4 spaces or 1 tab: A list item. With multiple paragraphs. Another item in the list. Output: ul lipA list item./p pWith multiple paragraphs./p/li lipAnother item in the list./p/li /ul Links Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the text you want to turn into a link. Inline-style links use parentheses immediately after the link text. For example: This is an example link. Output: pThis is an a href="http://example.com/" example link/a./p Optionally, you may include a title attribute in the parentheses: This is an example link. Output: pThis is an a href="http://example.com/" title="With a Title" example link/a./p Reference-style links allow you to refer to your links by names, which you define elsewhere in your document: I get 10 times more traffic from Google than from Yahoo or MSN. [1]: http://google.com/ "Google" [2]: http://search.yahoo.com/ "Yahoo Search" [3]: http://search.msn.com/ "MSN Search" Output: pI get 10 times more traffic from <a href="http://google.com/" title="Google" Google/a than from <a href="http://search.yahoo.com/" title="Yahoo Search" Yahoo/a or <a href="http://search.msn.com/" title="MSN Search" MSN/a./p The title attribute is optional. Link names may contain letters, numbers and spaces, but are not case sensitive: I start my morning with a cup of coffee and The New York Times. [ny times]: http://www.nytimes.com/ Output: pI start my morning with a cup of coffee and a href="http://www.nytimes.com/"The New York Times/a./p Images Image syntax is very much like link syntax. Inline (titles are optional): alt text Reference-style: alt text [id]: /path/to/img.jpg "Title" Both of the above examples produce the same output: img src="/path/to/img.jpg" alt="alt text" title="Title" / Code In a regular paragraph, you can create code span by wrapping text in backtick quotes. Any ampersands (&) and angle brackets (< or ) will automatically be translated into HTML entities. This makes it easy to use Markdown to write about HTML example code: I strongly recommend against using any blink tags. I wish SmartyPants used named entities like &mdash; instead of decimal-encoded entites like &#8212;. Output: pI strongly recommend against using any code&lt;blink&gt;/code tags./p pI wish SmartyPants used named entities like code&amp;mdash;/code instead of decimal-encoded entites like code&amp;#8212;/code./p To specify an entire block of pre-formatted code, indent every line of the block by 4 spaces or 1 tab. Just like with code spans, &, <, and characters will be escaped automatically. Markdown: If you want your page to validate under XHTML 1.0 Strict, you've got to put paragraph tags in your blockquotes: blockquote pFor example./p /blockquote Output: pIf you want your page to validate under XHTML 1.0 Strict, you've got to put paragraph tags in your blockquotes:/p precode&lt;blockquote&gt; &lt;p&gt;For example.&lt;/p&gt; &lt;/blockquote&gt; /code/pre `]]> Getting the Gist of Markdown's Formatting Syntax

This page offers a brief overview of what it's like to use Markdown. The [syntax page] s provides complete, detailed documentation for every feature, but Markdown should be very easy to pick up simply by looking at a few examples of it in action. The examples on this page are written in a before/after style, showing example syntax and the HTML output produced by Markdown.

It's also helpful to simply try Markdown out; the [Dingus] d is a web application that allows you type your own Markdown-formatted text and translate it to XHTML.

Note: This document is itself written using Markdown; you can see the source for it by editing this tiddler.

Paragraphs, Headers, Blockquotes

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line — a line containing nothing but spaces or tabs is considered blank.) Normal paragraphs should not be indented with spaces or tabs.

Markdown offers two styles of headers: Setext and atx. Setext-style headers for <h1> and <h2> are created by “underlining” with equal signs (=) and hyphens (-), respectively. To create an atx-style header, you put 1-6 hash marks (#) at the beginning of the line — the number of hashes equals the resulting HTML header level.

Blockquotes are indicated using email-style '>' angle brackets.

Markdown:

A First Level Header
====================

A Second Level Header
---------------------

Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.

The quick brown fox jumped over the lazy
dog's back.

### Header 3

> This is a blockquote.
>
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

Output:

<h1>A First Level Header</h1>

<h2>A Second Level Header</h2>

<p>Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.</p>

<p>The quick brown fox jumped over the lazy
dog's back.</p>

<h3>Header 3</h3>

<blockquote>
    <p>This is a blockquote.</p>

    <p>This is the second paragraph in the blockquote.</p>

    <h2>This is an H2 in a blockquote</h2>
</blockquote>

Phrase Emphasis

Markdown uses asterisks and underscores to indicate spans of emphasis.

Markdown:

Some of these words *are emphasized*.
Some of these words _are emphasized also_.

Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.

Output:

<p>Some of these words <em>are emphasized</em>.
Some of these words <em>are emphasized also</em>.</p>

<p>Use two asterisks for <strong>strong emphasis</strong>.
Or, if you prefer, <strong>use two underscores instead</strong>.</p>

Lists

Unordered (bulleted) lists use asterisks, pluses, and hyphens (*, +, and -) as list markers. These three markers are interchangable; this:

*   Candy.
*   Gum.
*   Booze.

this:

+   Candy.
+   Gum.
+   Booze.

and this:

-   Candy.
-   Gum.
-   Booze.

all produce the same output:

<ul>
<li>Candy.</li>
<li>Gum.</li>
<li>Booze.</li>
</ul>

Ordered (numbered) lists use regular numbers, followed by periods, as list markers:

1.  Red
2.  Green
3.  Blue

Output:

<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

If you put blank lines between items, you'll get <p> tags for the list item text. You can create multi-paragraph list items by indenting the paragraphs by 4 spaces or 1 tab:

*   A list item.

    With multiple paragraphs.

*   Another item in the list.

Output:

<ul>
<li><p>A list item.</p>
<p>With multiple paragraphs.</p></li>
<li><p>Another item in the list.</p></li>
</ul>

Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the text you want to turn into a link.

Inline-style links use parentheses immediately after the link text. For example:

This is an [example link](http://example.com/).

Output:

<p>This is an <a href="http://example.com/">
example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

This is an [example link](http://example.com/ "With a Title").

Output:

<p>This is an <a href="http://example.com/" title="With a Title">
example link</a>.</p>

Reference-style links allow you to refer to your links by names, which you define elsewhere in your document:

I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].

[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"

Output:

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from <a href="http://search.yahoo.com/"
title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters, numbers and spaces, but are not case sensitive:

I start my morning with a cup of coffee and
[The New York Times][NY Times].

[ny times]: http://www.nytimes.com/

Output:

<p>I start my morning with a cup of coffee and
<a href="http://www.nytimes.com/">The New York Times</a>.</p>

Images

Image syntax is very much like link syntax.

Inline (titles are optional):

![alt text](/path/to/img.jpg "Title")

Reference-style:

![alt text][id]

[id]: /path/to/img.jpg "Title"

Both of the above examples produce the same output:

<img src="/path/to/img.jpg" alt="alt text" title="Title" />

Code

In a regular paragraph, you can create code span by wrapping text in backtick quotes. Any ampersands (&) and angle brackets (< or >) will automatically be translated into HTML entities. This makes it easy to use Markdown to write about HTML example code:

I strongly recommend against using any `<blink>` tags.

I wish SmartyPants used named entities like `&mdash;`
instead of decimal-encoded entites like `&#8212;`.

Output:

<p>I strongly recommend against using any
<code>&lt;blink&gt;</code> tags.</p>

<p>I wish SmartyPants used named entities like
<code>&amp;mdash;</code> instead of decimal-encoded
entites like <code>&amp;#8212;</code>.</p>

To specify an entire block of pre-formatted code, indent every line of the block by 4 spaces or 1 tab. Just like with code spans, &, <, and > characters will be escaped automatically.

Markdown:

If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:

    <blockquote>
        <p>For example.</p>
    </blockquote>

Output:

<p>If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:</p>

<pre><code>&lt;blockquote&gt;
    &lt;p&gt;For example.&lt;/p&gt;
&lt;/blockquote&gt;
</code></pre>
]]> https://jonathancamp.co.uk/markdown-basics Thu, 10 Feb 2022 13:21:37 +0000 Top Youtube Wetplate Collodion Glass Photography https://jonathancamp.co.uk/top-youtube-wetplate-collodion-glass-photography?pk_campaign=rss-feed <![CDATA[Top Youtube Wetplate Collodion Glass Photography Something I am passionate about - Wet Plate Collodion Glass and Tintype photography. !--more-- https://www.youtube.com/c/NorthLightPress1 Bill Schwab is a great guy and I have his books. He runs workshops (in Canada!), but his videos are great. https://www.youtube.com/channel/UCkgsiPxixghd8xluKSs9eQ Lost Light Art. This guy is brilliant. A young lad who does everything himself. He produces dark slides and 'dry plates' that he sells on Etsy. He also shows how to make dry plates and just about everything else. He's from Slovenia and very pragmatic. I've emailed him several times and he always gets back with great info. He does not have that many videos (around 50) so easy to binge them all! Well worth it... https://www.youtube.com/channel/UCRev1DEDHyzhW8voY0Zg Shoot film like a boss. Great general B&W photography (with a slant on darkroom stuff). Roger is a great guy and does a lot of stuff in his darkroom shed. Very down to earth and easy to watch (no wet plate stuff though!) https://www.youtube.com/channel/UCta-8f4Qj-jzPb61Ua8D6Q Mat Marrash. This guy does mostly large format stuff. Not much Glass but a lot of other large format techniques and is totally passionate about large format photography. https://www.youtube.com/channel/UCQ1GkPjYYCUZlrN9ErWVxXQ Pictorial Planet. John Finch is a brilliant guy when it comes to creating your own developer and other chemicals. Again UK based in Scotland. I have bought his book purely because he knows so so much about the art of photography and explains how to manipulate film, push / pull, which developers work best with which films, how to create your own developers, fixes, etc. His technical knowledge has helped me so much to understand the theories behind films and developers. https://www.youtube.com/channel/UCSdp7piOb-t9AnfHKY_Qwg Martin Henson - yet another UK guy, this time 'up North'. He's a great photographer with a great knack of explaining stuff (just like john @Pictorial Planet above). He uses a lot of old equipment and explains in a very easy to understand way 'how' to use film properly. Very relaxed videos at a great pace... https://www.youtube.com/channel/UC54g9MyqUxjeeIgAnxHtzrw Markus Hofstatter. Great down to earth guy that does a LOT of wet plate stuff. Not so much on the tutorial side of things but is very passionate about his wet plate photography and very good at showing the process. https://www.youtube.com/channel/UCCjjZ-Qc43dF7xHBC92MAuA Borut Peterlin. Ok, now for the narcissist! Borut produces some really 'organic' videos on all things 'wet plate'. Again based in Slovenia. He has some wonderful, watchable videos of the process and 'feeling' of producing large format work, including Ambrotype, Tintypes, Albumen printing, Carbon printing and everything 1800's! His earlier videos were brilliant, then success hit him and being a person who, shall we say, fancies himself, started doing woodland photography around his cabin. With him as the star in various guises, doing wet plate, mostly naked. However, his videos are inspiring, passionate and full of interest to us wet plate people. https://www.youtube.com/user/brendanbarryphoto/featured Brendan Barry (of course!). He's one of the leads behind the Exeter studio and Exeter Uni. I've spoken to him a few times and would love to go out for a day with him and his 'camera caravan' over dartmoor. Just that concept of a ultra large lens, a darkroom camera obscura (building, caravan, etc.) and just crude gaffer tape to make wonderful images is mind blowing and worth watching. Some of note: https://www.youtube.com/watch?v=RwGoyDEgnzg, https://www.youtube.com/watch?v=w9HsnZ0-V8w, https://www.youtube.com/watch?v=lby69H2PJzE. #collodion #tintype #ambrotype #video #wetplate #photography]]> Top Youtube Wetplate Collodion Glass Photography

Something I am passionate about – Wet Plate Collodion Glass and Tintype photography.

  • https://www.youtube.com/c/NorthLightPress1 Bill Schwab is a great guy and I have his books. He runs workshops (in Canada!), but his videos are great.

  • https://www.youtube.com/channel/UCkgsi_Pxixghd8xluKSs9eQ Lost Light Art. This guy is brilliant. A young lad who does everything himself. He produces dark slides and 'dry plates' that he sells on Etsy. He also shows how to make dry plates and just about everything else. He's from Slovenia and very pragmatic. I've emailed him several times and he always gets back with great info. He does not have that many videos (around 50) so easy to binge them all! Well worth it...

  • https://www.youtube.com/channel/UCRev1D_EDHyzhW8_voY0Z_g Shoot film like a boss. Great general B&W photography (with a slant on darkroom stuff). Roger is a great guy and does a lot of stuff in his darkroom shed. Very down to earth and easy to watch (no wet plate stuff though!)

  • https://www.youtube.com/channel/UCta-8f4Qj-jzPb61Ua8D_6Q Mat Marrash. This guy does mostly large format stuff. Not much Glass but a lot of other large format techniques and is totally passionate about large format photography.

  • https://www.youtube.com/channel/UCQ1GkPjYYCUZlrN9ErWVxXQ Pictorial Planet. John Finch is a brilliant guy when it comes to creating your own developer and other chemicals. Again UK based in Scotland. I have bought his book purely because he knows so so much about the art of photography and explains how to manipulate film, push / pull, which developers work best with which films, how to create your own developers, fixes, etc. His technical knowledge has helped me so much to understand the theories behind films and developers.

  • https://www.youtube.com/channel/UCSdp7piOb-t9AnfHK_Y_Qwg Martin Henson – yet another UK guy, this time 'up North'. He's a great photographer with a great knack of explaining stuff (just like john @Pictorial Planet above). He uses a lot of old equipment and explains in a very easy to understand way 'how' to use film properly. Very relaxed videos at a great pace...

  • https://www.youtube.com/channel/UC54g9MyqUxjeeIgAnxHtzrw Markus Hofstatter. Great down to earth guy that does a LOT of wet plate stuff. Not so much on the tutorial side of things but is very passionate about his wet plate photography and very good at showing the process.

  • https://www.youtube.com/channel/UCCjjZ-Qc43dF7xHBC92MAuA Borut Peterlin. Ok, now for the narcissist! Borut produces some really 'organic' videos on all things 'wet plate'. Again based in Slovenia. He has some wonderful, watchable videos of the process and 'feeling' of producing large format work, including Ambrotype, Tintypes, Albumen printing, Carbon printing and everything 1800's! His earlier videos were brilliant, then success hit him and being a person who, shall we say, fancies himself, started doing woodland photography around his cabin. With him as the star in various guises, doing wet plate, mostly naked. However, his videos are inspiring, passionate and full of interest to us wet plate people.

  • https://www.youtube.com/user/brendanbarryphoto/featured Brendan Barry (of course!). He's one of the leads behind the Exeter studio and Exeter Uni. I've spoken to him a few times and would love to go out for a day with him and his 'camera caravan' over dartmoor. Just that concept of a ultra large lens, a darkroom camera obscura (building, caravan, etc.) and just crude gaffer tape to make wonderful images is mind blowing and worth watching.

Some of note: * https://www.youtube.com/watch?v=RwGoyDEgnzg, * https://www.youtube.com/watch?v=w9HsnZ0-V8w, * https://www.youtube.com/watch?v=lby69H2PJzE.

#collodion #tintype #ambrotype #video #wetplate #photography

]]> https://jonathancamp.co.uk/top-youtube-wetplate-collodion-glass-photography Tue, 01 Feb 2022 12:19:33 +0000 Using Screen casting tools to capture video https://jonathancamp.co.uk/using-screencasting-tools-to-capture-video?pk_campaign=rss-feed <![CDATA[What are the best tools to capture your screen for tutorials? In this article I look at the best tools I have used to capture the screen and edit / publish. !--more-- So, this is a work-in-progress post as there are literally so many out there. I use a mixture of free tools and paid for tools. I do not use 'premier pro' (or even the rip off version), mainly because I know there are lots of very good tools out there that are either free or from small independent authors. Here's the "top level" list of my video tools: Some of these tools both 'capture' screen video and allow you to edit the recorded video. Some better than others at editing. Record screen video WeVideo MovAvi Video Suite 22 Screencast-O-Matic IceCream Screen Recorder FREE/PAID Loom Recorder FREE ScreenToGif Edit video MovAvi Video Suite 22 FREE VLC Player Screencast-O-Matic IceCream Video Editor FREE VSDC Free Video Editor FREE OpenShot Video Editor FREE ShotCut Video Editor FREE ScreenToGif Web Cam for Pic in Pic FREE Webcam Viewer FREE HTML5 WebCam Recorder #videoeditor #editvideo #video #editors #screencasting #webcam ]]> What are the best tools to capture your screen for tutorials?

In this article I look at the best tools I have used to capture the screen and edit / publish.

So, this is a work-in-progress post as there are literally so many out there. I use a mixture of free tools and paid for tools. I do not use 'premier pro' (or even the rip off version), mainly because I know there are lots of very good tools out there that are either free or from small independent authors.

Here's the “top level” list of my video tools:

Some of these tools both 'capture' screen video and allow you to edit the recorded video. Some better than others at editing.

Record screen video

  • WeVideo
  • MovAvi Video Suite 22
  • Screencast-O-Matic
  • IceCream Screen Recorder
  • FREE/PAID Loom Recorder
  • FREE ScreenToGif

Edit video

Web Cam for Pic in Pic

  • FREE Webcam Viewer
  • FREE HTML5 WebCam Recorder

#videoeditor #editvideo #video #editors #screencasting #webcam

]]> https://jonathancamp.co.uk/using-screencasting-tools-to-capture-video Fri, 07 Jan 2022 11:41:44 +0000 Wordpress File and Folder permissions - what should they be? https://jonathancamp.co.uk/wordpress-file-and-folder-permissions-what-should-they-be?pk_campaign=rss-feed <![CDATA[It’s important to ensure that WordPress files and folders have the correct ownership and permissions. Not only does this allow WordPress to keep itself updated, it also prevents attackers from exploiting poor file security and taking control of your site. !--more-- WordPress folders should always have 0755 permissions, and WordPress files should always have 0644 permissions – although this can vary from host to host. If you’re getting errors when attempting to install plugins, or upload new media, don’t be tempted to set any folder permissions to 0777. Instead, work with your web host to ensure that PHP is run with the correct user, and that the folders are owned by the same user. If you’ve got shell access, you can run a few commands to ensure WordPress is secure: find /path/to/your/wordpress/install/ -type d -exec chmod 755 {} \; find /path/to/your/wordpress/install/ -type f -exec chmod 644 {} \; If you know the user and group that should have ownership of the WordPress files and folders, use: #wordpress #security]]> It’s important to ensure that WordPress files and folders have the correct ownership and permissions. Not only does this allow WordPress to keep itself updated, it also prevents attackers from exploiting poor file security and taking control of your site.

WordPress folders should always have 0755 permissions, and WordPress files should always have 0644 permissions – although this can vary from host to host.

If you’re getting errors when attempting to install plugins, or upload new media, don’t be tempted to set any folder permissions to 0777. Instead, work with your web host to ensure that PHP is run with the correct user, and that the folders are owned by the same user.

If you’ve got shell access, you can run a few commands to ensure WordPress is secure:

find /path/to/your/wordpress/install/ -type d -exec chmod 755 {} \;
find /path/to/your/wordpress/install/ -type f -exec chmod 644 {} \;

If you know the user and group that should have ownership of the WordPress files and folders, use:

sudo chown -R username:group /path/to/your/wordpress/install

#wordpress #security

]]> https://jonathancamp.co.uk/wordpress-file-and-folder-permissions-what-should-they-be Fri, 07 Jan 2022 10:24:27 +0000 Framework7 - the lightweight, full featured iOS, Android, Desktop app framework https://jonathancamp.co.uk/framework7-the-lightweight-full-featured-ios-android-desktop-app-framework?pk_campaign=rss-feed <![CDATA[Uses only using HTML, CSS and Javascript Framework7 is a mature development framework that includes components to create mobile applications. If you like; mobile first web development. The framework7 framework is FREE and Open Source, but none the less allows you to develop mobile, desktop or web apps with a look and feel of the native apps on the various app stores. !--more-- If you know HTML, CSS and a bit of javascript you can be up and running in no time, creating mobile first apps. The beauty of this framework is your app looks the same on the desktop, or mobile device and is always up to date. Take a look at the mobile emulator on the framework7.io home page or view it directly on your desktop - it will give you a good idea of the native components available, plus a good overview. What can you use Framework7 for Prototyping apps Developing web based apps (Progressive Web Apps - PWA's) Paired with other tools such as Electron allows you build native desktop apps In addition to the vanilla JS library included, framework7 comes with Vue.js, React and Svelte components. Ready to use ICONS for dialogues, actions, popups, lists, tabs, panels, etc. Examples are provided (I use the FEEDS Plugin to create a Mobile RSS reader easily) and templates Pop over to their Github and download the core framework7 framework and give it a go :) You can do a manual install as simply as: Looking for more? What about components for building Tailwind with Konsta UI, Mobile touch sliders with slider.js and much more. There are plenty of framework7 video and online tutorials on the site plus a very active framework7 community #development #mobileapps #pwa #frameworks]]> Uses only using HTML, CSS and Javascript

Framework7 is a mature development framework that includes components to create mobile applications. If you like; mobile first web development.

The framework7 framework is FREE and Open Source, but none the less allows you to develop mobile, desktop or web apps with a look and feel of the native apps on the various app stores.

If you know HTML, CSS and a bit of javascript you can be up and running in no time, creating mobile first apps. The beauty of this framework is your app looks the same on the desktop, or mobile device and is always up to date.

Take a look at the mobile emulator on the framework7.io home page or view it directly on your desktop – it will give you a good idea of the native components available, plus a good overview.

What can you use Framework7 for

  • Prototyping apps
  • Developing web based apps (Progressive Web Apps – PWA's)
  • Paired with other tools such as Electron allows you build native desktop apps
  • In addition to the vanilla JS library included, framework7 comes with Vue.js, React and Svelte components.
  • Ready to use ICONS for dialogues, actions, popups, lists, tabs, panels, etc.
  • Examples are provided (I use the FEEDS Plugin to create a Mobile RSS reader easily) and templates

Pop over to their Github and download the core framework7 framework and give it a go :)

You can do a manual install as simply as:

$ npm install framework7

Looking for more?

What about components for building Tailwind with Konsta UI, Mobile touch sliders with slider.js and much more.

There are plenty of framework7 video and online tutorials on the site plus a very active framework7 community

#development #mobileapps #pwa #frameworks

]]> https://jonathancamp.co.uk/framework7-the-lightweight-full-featured-ios-android-desktop-app-framework Thu, 06 Jan 2022 15:32:41 +0000 Extensions for write.as (in Chrome store) https://jonathancamp.co.uk/extensions-for-write-as-in-chrome?pk_campaign=rss-feed <![CDATA[A couple of useful Chrome extensions for write.as !--more-- Write.as for Chrome Upload to Snap.as (needs a pro account) Snap.as extension The snap.as extension looks useful. Instead of going into snap.as, uploading an image and then getting the url and adding to your post to show an image, you can just drag and drop onto the extension popup and it will upload to snap.as and return the url for write.as. "A quick way to upload your photos to Snap.as — a simple photo sharing service — made especially for writers publishing on Write.as. Just open the extension, drag a photo in, and the Markdown will be copied to your clipboard. Then, simply paste it in any Markdown-enabled editor." Write.as extension This extension is also on Github, but has not been updated for several years (6 at last look...). Github I'd check out the other write.as repo's for write.as as Matt is pretty busy supporting these great platforms. A lot of stuff is written in the language "GO" so if you are not familiar with GO - look into it! #write.as #extensions]]> A couple of useful Chrome extensions for write.as

  1. Write.as for Chrome
  2. Upload to Snap.as (needs a pro account)

Snap.as extension

The snap.as extension looks useful. Instead of going into snap.as, uploading an image and then getting the url and adding to your post to show an image, you can just drag and drop onto the extension popup and it will upload to snap.as and return the url for write.as.

“A quick way to upload your photos to Snap.as — a simple photo sharing service — made especially for writers publishing on Write.as. Just open the extension, drag a photo in, and the Markdown will be copied to your clipboard. Then, simply paste it in any Markdown-enabled editor.”

Write.as extension

This extension is also on Github, but has not been updated for several years (6 at last look...).

Github

I'd check out the other write.as repo's for write.as as Matt is pretty busy supporting these great platforms. A lot of stuff is written in the language “GO” so if you are not familiar with GO – look into it!

#write.as #extensions

]]> https://jonathancamp.co.uk/extensions-for-write-as-in-chrome Tue, 04 Jan 2022 15:36:38 +0000 Backing up phone images using Google Photos https://jonathancamp.co.uk/backing-up-phone-images-using-google-photos?pk_campaign=rss-feed <![CDATA[Backing up phone images using Google Photos So, I'm using Google Photos to backup my phone. Have done for a long time. !--more-- Why Google Photos Well it's easy and quick. Works in the back ground and means I can access all my photos in one place, online on any device. Google Photos - Great right? Sort of... the thing is Google stores photo's in a format called HEIC which is fine but of course not perfect. HEIC format images and video are very effecient - which is great; just not very common. Generally this means that when I want to download some images to my local PC and then either use on the web or anything else I have to go through another process to convert the images to .jpg or other format. What about HEIC format files? You can convert HEIC to JPG by importing into your favourite image editor (perhaps Photoshop) and then exporting in whichever format you want. On the PC (or MAC) there are plenty of programs to do this in bulk, by selecting files, right clicking and then converting. One thing to remember with Google Photos, is to go into your Google Settings and make sure you select: Upload Size: Original Quality. This will stop Google down sampling your images to save space (as the itunes backup does!). Speaking of iTunes... Why do I use Google Photos rather than iTunes? Reasons I like using Google Photos: Easier to use and setup Does not down sample images (see above re: settings) Very easy to share with friends and family Very easy to edit online Works 'out of the box' with all phones Easy to backup if you need ALL your photos Auto albums and memories Photos are easy to print and created printed albums Storage with Google is CHEAP! I guess iTunes does the albums and sorting 'thing' - just not as good a Google.]]> Backing up phone images using Google Photos

So, I'm using Google Photos to backup my phone. Have done for a long time.

Why Google Photos

Well it's easy and quick. Works in the back ground and means I can access all my photos in one place, online on any device.

Google Photos – Great right?

Sort of... the thing is Google stores photo's in a format called HEIC which is fine but of course not perfect. HEIC format images and video are very effecient – which is great; just not very common.

Generally this means that when I want to download some images to my local PC and then either use on the web or anything else I have to go through another process to convert the images to .jpg or other format.

What about HEIC format files?

You can convert HEIC to JPG by importing into your favourite image editor (perhaps Photoshop) and then exporting in whichever format you want. On the PC (or MAC) there are plenty of programs to do this in bulk, by selecting files, right clicking and then converting.

One thing to remember with Google Photos, is to go into your Google Settings and make sure you select: Upload Size: Original Quality. This will stop Google down sampling your images to save space (as the itunes backup does!).

Speaking of iTunes... Why do I use Google Photos rather than iTunes?

Reasons I like using Google Photos:

  1. Easier to use and setup
  2. Does not down sample images (see above re: settings)
  3. Very easy to share with friends and family
  4. Very easy to edit online
  5. Works 'out of the box' with all phones
  6. Easy to backup if you need ALL your photos
  7. Auto albums and memories
  8. Photos are easy to print and created printed albums
  9. Storage with Google is CHEAP!

I guess iTunes does the albums and sorting 'thing' – just not as good a Google.

]]> https://jonathancamp.co.uk/backing-up-phone-images-using-google-photos Tue, 04 Jan 2022 15:04:07 +0000 Google - Local SEO top tips https://jonathancamp.co.uk/google-local-seo-top-tips?pk_campaign=rss-feed <![CDATA[Google - Local SEO top tips Here's quick list of factors that will help your business rank as a "Local Business" with Google. These are all important points that will help you rank at the top with Google local searches. !--more-- Click here to read more Local SEO articles General What are customers looking for? Use Long tail keyword expressions along with Keyphrases Avoid Jargon Create posts for questions asked locally Check what your competition are doing What is your users' intent? What is the purpose of their search term? Informational Intent - just more information Navigational Intent - user wants to get to your site quickly (e.g. contact page) Purchase Intent - Looking for pricing and comparisons Transactional Intent - Ready to Buy! Make sure you page offers purchase Website Check your "user experience" scores with Google Put your name, address and telephone on your footer (every page) Hyperlink logo to home page Create easy navigation - what are people looking for? Other links in the footer Sliders are 'old school' and no longer useful - AVOID them! Contact information is easy to find in multiple places Put contact link in main navigation Include google map Add visual elements (images, videos, etc.) - optimise for mobile devices Make sure your "Meta Description" (describe the page) and "Title Tag" are optimised on every page for relevance to the content on the page Keep title tag to under 60 characters and no keyword stuffing Do not use company name in title tag (waste of space!) Break up posts and pages with Headings (H1 - H4) Break up posts and pages into small paragraphs Add Call to Actions Add meta data to images and videos (titles, alt tag, etc.) - describe the image and do not keyword stuff Link Building Get backlinks from quality websites (Quality is better than quantity) Focus on related content websites Get backlinks from suppliers, contractors, etc. Offer to write an online testimonial for a backlink Check backlinks that go to competitors Build relationships with other businesses that rank with Google on page 1 Setup "Google Alerts" for your company mention Write press articles / releases Search "Your full business name" -site:yourwebsite.com - see which other businesses are linking to you and reach out to them for backlinks User Experience Make sure your website is "mobile first" and responsive - check with google tools - https://search.google.com/test/mobile-friendly Make sure you have an SSL certificate Make sure you website loads quickly - Chrome Browser Lighthouse test and report Add 'Schema' markup to your website (or get your web developer to ensure that your site is optimised for Schema). GMB Google my business Google My Business profile Make sure you have your business name, address, telephone number correct Get Reviews from customers - ASK! Reply to ALL reviews Add review link to your email signature Setup your GMB "shortname" (@ name) Make sure reviews are created away from your address Make sure profile is up to date with GMB Find local search expressions for your services Use some "Long tail" search terms Directories / Citations Find best directory services for your business What directories are your competition using Claim your business and setup key accouns Make sure your address / Tel is consistent Apple maps Facebook profile Linkedin business profile BrightLocal Build Authority Try guest blogging for non competitive websites Link back to your website Be a "guest" on top ranking podcasts - make sure your BIO is up to date Make sure they issue show notes Follow and build relationship Find a topic you want a back link for Mention keyword phrases and your location in the podcast Talk about posts on your website and links Promote when the podcast is broadcast Tag podcast and the hosts Expert roundup post - get answers to questions from experts in your area Curation - related content from experts and add snippets - make sure you have their permission and give them credit Expert Q&A - reach out with questions in your area and publish - add their backlinks Tools LSIGraph: https://lsigraph.com/ – affordable and easy-to-use keyword research tool keywordtool.io (free tool - https://keywordtool.io/) Link Assistant Backlink Checker: https://www.link-assistant.com/seo-spyglass/free-backlinkchecker- tool.html AnswerThePublic: https://answerthepublic.com/ – Find keywords and questions people are asking about a particular topic Google! Google Ads Keyword Planner: https://ads.google.com/ Google Guide to Using Google Ads Keyword Planner: https://ads.google.com/home/resources/using-google-ads-keyword-planner/ Google My Business Signup/Dashboard: https://business.google.com Guidelines for Representing Your Business on Google: https://support.google.com/business/answer/3038177?hl=en Google My Business Help Forum: https://support.google.com/business/community?hl=en Google Maps: https://www.google.com/maps Google Marketing kit: https://marketingkit.withgoogle.com/intl/en-GB/r/GB PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/ Google Alerts: https://www. google.com/alerts Google SEO Starter Guide: https://developers.google.com/search/docs/beginner/seo-starter-guide.com #seo #tipstricks]]> Google – Local SEO top tips

Here's quick list of factors that will help your business rank as a “Local Business” with Google. These are all important points that will help you rank at the top with Google local searches.

Click here to read more Local SEO articles

General

  • What are customers looking for?
  • Use Long tail keyword expressions along with Keyphrases
  • Avoid Jargon
  • Create posts for questions asked locally
  • Check what your competition are doing
  • What is your users' intent? What is the purpose of their search term?
    • Informational Intent – just more information
    • Navigational Intent – user wants to get to your site quickly (e.g. contact page)
    • Purchase Intent – Looking for pricing and comparisons
    • Transactional Intent – Ready to Buy! Make sure you page offers purchase

Website

  • Check your “user experience” scores with Google
  • Put your name, address and telephone on your footer (every page)
  • Hyperlink logo to home page
  • Create easy navigation – what are people looking for?
  • Other links in the footer
  • Sliders are 'old school' and no longer useful – AVOID them!
  • Contact information is easy to find in multiple places
  • Put contact link in main navigation
  • Include google map
  • Add visual elements (images, videos, etc.) – optimise for mobile devices
  • Make sure your “Meta Description” (describe the page) and “Title Tag” are optimised on every page for relevance to the content on the page
  • Keep title tag to under 60 characters and no keyword stuffing
  • Do not use company name in title tag (waste of space!)
  • Break up posts and pages with Headings (H1 – H4)
  • Break up posts and pages into small paragraphs
  • Add Call to Actions
  • Add meta data to images and videos (titles, alt tag, etc.) – describe the image and do not keyword stuff
  • Get backlinks from quality websites (Quality is better than quantity)
  • Focus on related content websites
  • Get backlinks from suppliers, contractors, etc.
  • Offer to write an online testimonial for a backlink
  • Check backlinks that go to competitors
  • Build relationships with other businesses that rank with Google on page 1
  • Setup “Google Alerts” for your company mention
  • Write press articles / releases
  • Search “Your full business name” -site:yourwebsite.com – see which other businesses are linking to you and reach out to them for backlinks

User Experience

  • Make sure your website is “mobile first” and responsive – check with google tools – https://search.google.com/test/mobile-friendly
  • Make sure you have an SSL certificate
  • Make sure you website loads quickly – Chrome Browser Lighthouse test and report
  • Add 'Schema' markup to your website (or get your web developer to ensure that your site is optimised for Schema).

GMB Google my business

  • Google My Business profile
  • Make sure you have your business name, address, telephone number correct
  • Get Reviews from customers – ASK!
  • Reply to ALL reviews
  • Add review link to your email signature
  • Setup your GMB “shortname” (@ name)
  • Make sure reviews are created away from your address
  • Make sure profile is up to date with GMB
  • Find local search expressions for your services
  • Use some “Long tail” search terms

Directories / Citations

  • Find best directory services for your business
  • What directories are your competition using
  • Claim your business and setup key accouns
  • Make sure your address / Tel is consistent
  • Apple maps
  • Facebook profile
  • Linkedin business profile
  • BrightLocal

Build Authority

  • Try guest blogging for non competitive websites
  • Link back to your website
  • Be a “guest” on top ranking podcasts – make sure your BIO is up to date
    • Make sure they issue show notes
    • Follow and build relationship
    • Find a topic you want a back link for
    • Mention keyword phrases and your location in the podcast
    • Talk about posts on your website and links
    • Promote when the podcast is broadcast
    • Tag podcast and the hosts
  • Expert roundup post – get answers to questions from experts in your area
  • Curation – related content from experts and add snippets – make sure you have their permission and give them credit
  • Expert Q&A – reach out with questions in your area and publish – add their backlinks

Tools

#seo #tipstricks

]]> https://jonathancamp.co.uk/google-local-seo-top-tips Fri, 31 Dec 2021 16:39:53 +0000 Checking HTTP headers returned from website https://jonathancamp.co.uk/checking-http-headers-returned-from-website?pk_campaign=rss-feed <![CDATA[Checking HTTP headers returned from website If you want to check your headers returned on your website (perhaps if you are optimising your site using Google Lighthouse) - use CURL Run this from the cmd prompt. It will return the whole website page - so redirect the output to a file to just see the header: This will output your website page to a file but show the header info on the screen. Check the headers for things like 'cache-control', HTTP/x version, Compression, etc.]]> Checking HTTP headers returned from website

If you want to check your headers returned on your website (perhaps if you are optimising your site using Google Lighthouse) – use CURL

CURL -v https://yourwebsite.com

Run this from the cmd prompt. It will return the whole website page – so redirect the output to a file to just see the header:

CURL -v https://yourwebsite.com >mywebsite.info.txt

This will output your website page to a file but show the header info on the screen. Check the headers for things like 'cache-control', HTTP/x version, Compression, etc.

]]> https://jonathancamp.co.uk/checking-http-headers-returned-from-website Thu, 30 Dec 2021 11:28:23 +0000