Panorama across harbour of Sydney CBD

Web Design Group

This Group meets at 2:00pm - 3rd Saturday each month at Sydney Mechanics' School of Arts, 280 Pitt Street. Visitors are welcome

Check out the Group's   ►   ►   ►   "Active Construction Site"   ◄   ◄   ◄

uBlock Origin stops the ads you don't want.

uBlock logouBlock Origin is a free and open-source browser extension for content filtering, including ad blocking. The extension is available for Chrome, Chromium, Edge, Firefox, Opera and versions of Safari prior to 13. The primary goal of uBlock Origin is to provide people with protection against the ever-increasing invasion of privacy online.

The developers call it a “wide-spectrum content blocker” rather than simply an ad blocker, and for a good reason. uBlock Origin is one of the most advanced and versatile options for increasing your privacy online with minimal cost to your CPU or memory usage. You can find it here.

Meet the Advanced Perceptual Contrast Algorithim (APCA)

a perfect score
For the content of a webpage to be clearly visable to visitors, a certain level of colour contrast is needed between different web elements. Visual contrast means the perceived difference between two colors displayed on a computer monitor, such as the color of the text against the color of the background.
Our perception of contrast and its effect on readability is an important aspect of our vision system which includes brain as well as the eye. Use this excellent "text on background colour contrast tester" from Myndex Technologies to achieve a Level 4 pass for various font sizes.

Enrich your web-pages with <STYLE>

The HTML <style> element can be used in 3 ways:
Inline - by using style attributes inside HTML elements. (Used in the <"h2"> above and in this <"div">)
Internal - by using a <style> element in the <head> section. (Unusual)
External - by using a <link> element to link to an external CSS file. (Most common)

Our "style": <"div style="margin-top:5px;border: 1px solid rgb(136, 33, 33);border-radius: 6px;padding: 10px;background-color:#a1ff6b; font-family:Georgia, 'Times New Roman', Times, serif;">

Discover the Targeting "POWER" of  <SPAN> 

The HTML <span> element is a very useful “inline container” for styling "targeted content" within block elements including <div>, <p> and <img>. To use the span element, simply enclose the content E.g. a word, paragraph or image within opening and closing <span> tags as shown in the following image of the above styled h2 heading.
new code The first span element around “POWER” uses ”style” to colour it blue plus a red border, while the second span element calls on an existing CSS animated class named “blinks” within a styled green border. As shown, the span element is ideal for adding emphasise to words, phrases and images using bright colours, animation plus much more and is completely open to your prolific imagination.
Note: Keyboard angle brackets are necessarily swapped for the ascci characters & #60; and & #62; shown.

Common Myths about Private Browsing

spy mask There are plenty of reasons why you might want to keep something you are doing on the web to yourself. That’s where Private Browsing mode comes in handy. However, before we extol its significant beneficial features we need to disclose some of the misconceptions about Private Browsing.

One of the most common myths about Private Browsing (in any major web browser) is that it makes you anonymous on the Internet - not true. Now, to learn more about how different Private Browsing features can help conceal your browsing activities, be sure to check out this site.

Visual Studio Code is a powerful free code editor

Brackets web editor logo Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Learning to code can be intimidating, so set yourself up for success with a tool built for you. Visual Studio Code helps you to start coding quickly. Use it to code in any programming language, without switching editors. Ready to get started? Check out these introductory videos or check out our coding packs for Java, Python, and .NET.

An introduction to QR code

Quick Response example With the wide spread use of QR codes becoming so important during the current pandemic, their use is now very familiar to many people. In particular, they have been used for Covid-19 virus tracing where people enter public buildings and business premises are required to login using an app on their mobile phones.

Another important benefit is that doctors can produce electronic prescriptions during consultations that are created as a QR code and sent to the patient as an SMS or email. Patients simply provide the QR code to the pharmacist to enable dispense and supply of the medicines.

However, QR (Quick Response) codes have been used since the late last century for a range of purposes including displaying multimedia content, mobile operating systems, QR payment (widely used in Asia and India), website login, restaurant ordering, joining a Wi Fi network, video games and lots more. Create your own free QR code here now.
The included QR code displays “Welcome to our Web Design page.” Try it now with your smart-phone! 😃

The girl with a pearl/CSS earring

Css only portrait projectCSS art that looks like an oil painting of a woman This is stunning, by Louise. I absolutely love this sort of CSS art and I know that this took them ages to put together. It was well worth the effort though, as it’s up there with some of the best CSS art I’ve ever seen.
Source: Piccalilli Newsletter - Issue #52 - Published on the 4th of August 2020

Original: Girl with a Pearl Earring is an oil painting by Dutch Golden Age painter Johannes Vermeer, circa 1665 - Location‎: Mauritshuis, The Hague, Netherlands.
Movie: The Girl with a Pearl Earring is also a 2003 drama film available for paid viewing.

An "Inaccessible" site with a perfect Lighthouse score

a perfect score
Google's built-in testing tool Lighthouse judges the accessibility of our websites with a score between 0 and 100. It’s laudable to try to get a high grading, but a score of 100 doesn’t mean that the site is perfectly accessible. To prove that I carried out a little experiment. See it here now.

Css demonstrationsDiscover special effects available with:

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. Radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

Use this excellent live Mozilla demo site to discover how "border-radius" can be used to jazz up any website. Also see what happens if you add or remove the "/" within the radius values.

🐨 Make your pages cheerful with Emojis 🐰

Inserting Emojis on a webpage can add interest or draw attention to an important message or text. You can easily add some as decorations or else just to make it cheerful. A quick search of this Emoji List will help find many fascinating characters.

Click to select your emoji and you have two ways to insert an emoji into your HTML page. The easy way is to click the Copy button and Paste it (Ctrl + V) directly into your HTML code 😃. The other way is to scroll down and copy the emoji's Codepoints unicode number Eg. U+1F603, replace U+ with "😃" and Paste it into your HTML page. Have Fun 😃.

Flow text around an image with CSS Shapes

By using CSS Shapes, we allow ourselves the freedom to specify various coordinates that will create a custom path, and eventually create our custom shape. There are two main CSS properties that we will use to achieve the desired effect; Clip-path and Shape-Outside.

When used together, these two properties compose the foundation properties of CSS Shapes. Shape-outside and clip-path take many different vales, but the three I will focus on are circle(), ellipse(), and polygon(). While circle() and ellipse() will namely create a circle or ellipse respectively, the polygon() function is able to take an unlimited set of coordinates, that when connected, will create your desired shape. Like with most things in life, we learn by example and by actually doing it.
» Enjoy the full tutorial at Medium

Overview of Microsoft DevTools

The Lighthouse logo The latest Microsoft Edge browser comes with built-in web development tools, called Microsoft Edge DevTools. DevTools is a set of web development tools that appears next to a rendered webpage in the browser. DevTools provides a powerful way to inspect and debug webpages and web apps. You can even edit source files and create website projects, all within the DevTools environment.

With DevTools, you can do the following:

  • Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including .html, .css, .js, and .png file formats.
  • Emulate how your website behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems.
  • Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps.
  • Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found.
  • Use a development environment to sync changes in DevTools with the file system and from the web.

Here's a helpful guide if you're not quite sure how to manually check for accessibility issues:

Brackets web editor logoAdobe's Brackets Web Editor has much to offer

Brackets is a modern open-sourced web site editor that enables quick editing of HTML, CSS and Javascript files. It's available as a free download for all operating systems with installation as easy as point and click.

The Brackets editor has everything you need for working with files and directories along with creating new files. The code completion - parsing and hints - features allows you to quickly assemble applications without knowing exact syntax. An ever growing selection of useful extensions are included, any of which can be easily activated using the Extension Manager. Also, the helpful online documentation plus features like Quick Edit is what has made Brackets so popular. » More info and download Brackets here.

The Sydney PC & Technology User Site Incorporates - Responsive Web Design

Selection of mobile screens Responsive Web Design is about creating webpages that look great when viewed on any device and screen size. Whether viewed on a TV, desktop, tablet or smart phone, web pages should provide an enjoyable, visitor friendly experience for everyone.

One way this can be achieved is to set the page content to automatically respond to each visitor's device “viewport” (screen) width. This has the advantage of the website content being re-arranged to display correctly on every viewing device.
Another method is by adding special "media queries" to the responsive site's style sheet. Media queries then automatically adjust and re-arrange the content of a website to suit the specific screen width of the device being used by each visitor.

To illustrate how Sydney PC & Technology User Group HOME page layout and content is automatically re-sized, open this responsive page using any of the latest desktop browsers, then grab the edge of the browser window and slowly drag it narrower or wider. You will see the layout automatically adjust itself to fit the new width of the browser, even if you make the page as narrow as a mobile phone.

Vodien logoWebcity who provided hosting for our website for many years were incorporated as part of Vodien who now host our website following a smooth transfer in 2019.

You are safe