? What the Site Does Well	? What the Site Can Improve
Search is consistent and works with or without CSS.	A “skip” link for would help with keyboard browsing.
The content hierarchy makes content easy to read and search results a clean experience.	Non-link items in the “Settings” menu should be headings for separate unordered lists so there is a clear hierarchy for how the options are grouped.
Good use of a homepage link at the top of the search results page.	Some content is either duplicated or repeated because the site relies on conditionally showing and hiding content.
	Make sure that all calls to action render as links instead of plain text.
	Use a fallback solution to filter the types of search results to prevent items stacking and help control hefty page weight.

Kerning in Typography, everything you need to know

April 24th, 2019 admin No comments

In order for messages to be clearly transmitted, many factors play an important role. Depending on the type of communication, factors such as stuttering, poor grammar, bad alignment of letters, incorrect use of punctuation marks, mumbling, and others set apart unclear and clear messages. In oral speech, diction, proper intonation, a calm tempo of spoken words, the intensity of the voice are all skills that anyone who wants to be a good communicator has to achieve. In written speech, readable caligraphy, correct alignment of letters, words, sentences, and paragraphs, will make any text accessible to the reader.

Why are all these important? Designers have a major responsibility to make the latter type of communication possible without any obstacle. There are a few notions any designer should be familiar and able to work with: Kerning, Leading, and Tracking.

What is Kerning?

Kerning: Definition

Kerning is the stylistic process that made you read the first word of this sentence “KERNING” and not “KEMING”. You’ve probably already guessed it. Kerning is the act of adjusting the space between two letters in order to avoid the irregular flow of the words and to improve legibility.

Kerning: Meaning

Back in the good old days, people used to use

Categories: Designing, Others Tags:

That Time I Tried Browsing the Web Without CSS

April 24th, 2019 admin No comments

tags rather than getting lost as CSS backgrounds.

A WebAIM survey from 2018 reported that 12.5% of users who rely on any sort of assisted technology browse the web with custom stylesheets, which can include doing away with every CSS declaration across a site. And, if we’re talking about slow internet connections, ditching CSS could be one way to consume content faster. There’s also the chance that CSS is disabled for reasons outside our immediate control, like when a server has hiccups of fails to load assets.

As an experiment, I used five websites and a web app without CSS, and this post will cover my experiences. It wound up being a rather eye-opening adventure for me personally, but has also informed me professionally as a developer in ways I hope you’ll see as well.

But first, here’s how to disable CSS

You’re absolutely welcome to live vicariously through me in the form of this post. But for those of you who are feeling up to the task and want to experience a style-less web, here’s how to disable CSS in various browsers:

Chrome: There’s actually no setting in Chrome to disable CSS, so we have to resort to an extension, like disable-HTML.
Firefox: View > Page Style > No Style
Safari: Safari > Preferences... > Show Develop menu in menu bar. Then go to the Develop dropdown and select the “Disable Styles” option.
Opera: Like Chrome, we need an extension, and Web Developer fits the bill.
Internet Explorer 11: View > Style > No style

I couldn’t find a documented way to disable CSS in Edge, but we can remove CSS from it and any other browser programmatically via the CSS Object Model API in the DevTools console:

var d = document;

for (var s in S = d.styleSheets)
    S[s].disabled = true;

for (var i in I = d.querySelectorAll("[style]"))
    I[i].style = "";

The first loop disables all external and internal styles (in and ), and the second eliminates any inline styles. The caveat here, however, is that elements can still dynamically be given new inline styles. To instantly erase them, the best workaround is adding a timer. Something like this:

(f = function(){
    // Remove CSS
    ...

    setTimeout(f, 20);
})();

Alternatively, there are text-only browsers — such as the ancient Lynx — but expect to be living without video, images (including SVGs), and JavaScript.

Through the style-less looking glass…

For each site I surfed without CSS — Amazon, DuckDuckGo, GitHub, Stack Overflow, Wikipedia and contrast checker called Hex Naw — I’ll share my first impressions and put some suggestions out there that might help with the experience.

Get ready, because things might get a bit… appalling. ?

Website 1: Amazon.com

The Amazon.com homepage with and without CSS

CSS is what gives every website its design. Websites sure aren’t very fun and friendly without it! I’ve read about somebody going a week without JavaScript and how the experience resulted in websites that were faster, though certain aspects of them would not function as expected.

But CSS. Turning off CSS while browsing the web wouldn’t exactly make the web far less usable… right? Or, like JavaScript, would some features not work as expected? Out of curiosity, I decided to give it a whirl and rip the CSS flesh off the HTML skeleton while browsing a few sites.

Why, you might ask? Are there any non-masochistic reasons for turning off CSS? Heydon Pickering once tweeted that disabling CSS is a good way to check some accessibility standards:

Common elements like headings, lists, and form controls are semantic and still look good.
A visual hierarchy is still established with default styles.
The content can still be read in a logical order.
Images still exist as tags rather than getting lost as CSS backgrounds.

But first, here’s how to disable CSS

Chrome: There’s actually no setting in Chrome to disable CSS, so we have to resort to an extension, like disable-HTML.
Firefox: View > Page Style > No Style
Safari: Safari > Preferences... > Show Develop menu in menu bar. Then go to the Develop dropdown and select the “Disable Styles” option.
Opera: Like Chrome, we need an extension, and Web Developer fits the bill.
Internet Explorer 11: View > Style > No style

I couldn’t find a documented way to disable CSS in Edge, but we can remove CSS from it and any other browser programmatically via the CSS Object Model API in the DevTools console:

var d = document;

for (var s in S = d.styleSheets)
    S[s].disabled = true;

for (var i in I = d.querySelectorAll("[style]"))
    I[i].style = "";

(f = function(){
    // Remove CSS
    ...

    setTimeout(f, 20);
})();

Alternatively, there are text-only browsers — such as the ancient Lynx — but expect to be living without video, images (including SVGs), and JavaScript.

Through the style-less looking glass…

Get ready, because things might get a bit… appalling. ?

Website 1: Amazon.com

There’s no real need for an introduction here. Not only is Amazon a household staple for so many of us, it also powers a huge chunk of the web, thanks to their ubiquitous Amazon Web Services platform.

There’s a vast number of things going on here, so I’ll explore the style-less stuff that gets in my path while finding a product and pretending to purchase it.

The Amazon.com results for a “mac mini” search query.

On the homepage, I immediately see a sprite sheet used by the site. It’s really in place of where the logo could be, thus making it tough to know whether or not those images are intended to be there. Each sprite contains multiple versions of the logo, and even if I could see the “Amazon” word mark in it, it’s surprisingly that it’s not the global home link. If you’re curious where the home link really is, it’s this structure of spans where the logo is served up as background image… in CSS:

<a href="/ref=nav_logo" class="nav-logo-link" aria-label="Amazon" tabindex="6">
  <span class="nav-sprite nav-logo-base"></span>
  <span class="nav-sprite nav-logo-ext"></span>
  <span class="nav-sprite nav-logo-locale"></span>
</a>

The next problem that arises is that the “Skip to main content” link doesn’t look like a typical skip link, yet it works like one. It turns out to be an element without an href, and JavaScript (yes, I did leave that enabled) is used to mimic anchor functionality.

When I start a search, I have to look further below the “Get started” link to see the suggestions. Under the “Your Lists” and “Your Account” items, it becomes difficult to tell the links apart. They appear all strung together as if they were one super long mega link. I believe it would have been more effective to use a semantic unordered list in this scenario to maintain a sense of hierarchy.

Under all those search suggestions, however, the account and navigation links are easier to read since they’re separated by some space.

Interestingly, the carousel lower down the page is still somewhat functional. If I click the “Previous page” or “Next page” options, the order of the images is changed. However, hopping between those options required me to scroll.

A split view of the carousel on the amazon.com homepage. First is initial state, second shows previous page on top, and third shows next page on top. — The carousel appears with its pages stack on top of another. The previous or next page shows up on top.

Skipping down a bit further, there’s an advertisement element. It contains an “Ad feedback” string that looks static just like what we saw with the “Skip to main content” link earlier. Well, I clicked it anyway and it revealed a form for sharing feedback on the advertisement relevance.

Blue curvy arrow showing destination to ad feedback form when clicking Ad Feedback text under ad — To make the call to action clearer, “Ad feedback” should be a link or button.

You may have missed it, but there’s a blank button above the two groups of form labels and the radios buttons are out of place. The structure is confusing because I don’t know which labels belong to which radio buttons. I mean, I guess I could assume that the first label goes with the first radio input, but that’s exactly what it is: a guess.

What’s also confusing is that there are Submit buttons between the “Close Window,” “Cancel,” and “Send Feedback” options at the bottom of the form. If I press any of these, I’m taken back to the ad. Now, suppose I were blind and using a screen reader to navigate this same part, even with the presence of CSS. I would be told “Submit, button” for two of the buttons and would therefore have zero clue what to do without guessing. It’s another good reminder about the importance of semantics when handling markup (button labels in this case) and being mindful of how much reliance is placed on JavaScript to override web defaults.

Doing a search — let’s say for “Mac Minis” — I can still access and understand the product ratings since they are displayed as text (instead of the tooltips they are otherwise) in place of stars. This is a good example of using a solid textual fallback when an image is used as visual content, but is served as a background image in CSS.

Messy results page displaying sponsored products on top of normal products — The page required me to scroll a while to get to the actual search results. Notice that ginormous overlay of a sponsored product.

Having chosen the Mac Mini with Intel Core i3, I’m greeted by other Mac products above the product I’ve selected and have to navigate beyond them to select the quantity I want to purchase.

Part of product page showing Amazon Prime membership info — The product page displays Amazon Prime membership info slapped between the quantity selection and purchase buttons.

Scroll down, and an “Add to Cart” button is displayed next to a label bearing the same content. That’s redundant and probably unnecessary since a

? What the Site Does Well	? What the Site Can Improve
Carousels are functional even without styling.	The logo relies on a background image, obscuring the path back home.
The content hierarchy is still generally helpful for knowing where we are on a page.	Many links and anchors rely on JavaScript and do not appear to be interactive.
The order of elements remains roughly in tact.	Links often bump up against each other or are placed outside where they would be relevant.
Great use of fallbacks for product rating that rely on background images.	Button labels are either misleading or repetitive.
	Form elements fail to align themselves properly.
	There’s a rough journey to check out.

Website 2: DuckDuckGo

The DuckDuckGo homepage with and without CSS — The DuckDuckGo homepage with CSS (left) and without CSS (right).

Have you used DuckDuckGo before? I assume many folks reading CSS-Tricks have, but for those who may be hearing of it for the first time, it’s an alternative to Google search with an emphasis on user privacy.

So, getting started with this is a little misleading because the DuckDuckGo homepage is super simple. Not much can go wrong there, right? Well, it’s a little more involved than that since we’re dealing with search results, content hierarchy and relevance once we get into making search queries.

Right off the bat, what I’m greeted with is a lot more content than I would have expected for such a simple lander. At it’s not totally clear what website this is by scanning the website. The first mention of the product name is the fourth item in the first unordered list and it’s a call to action to “Spread DuckDuckGo.” The logo is totally missing, which obviously means it’s used as a background… in CSS.

Speaking of that unordered list, I assume what I’m seeing belongs in the header, and there’s no skip navigation. We have a triple arrow icon (is that a mobile menu or a menu to hide the least important items, or something else?), followed by privacy-related content, social media links, something that looks like one link but is actually two links for “About DuckDuckGo” and “Learn More.”

Finally, toward the very bottom is where the primary use case for the site actually comes up: the search bar. I assume the “S” label means “Search” and the “X” label is shorthand to clear the search field.

Alright, onto performing a search. It’s super cool that I can still see auto-suggestions and use the up and down arrow keys to highlight each one. Clearing the field though, the suggestions don’t disappear until after I refresh the page.

Performing a search and checking out the auto-suggestions.

Everything in the Settings menu are items in a list including what should be headings — “Settings,” “Privacy Essentials,” “Why Privacy,” “Who We Are,” and “Keep in Touch.” These are very likely part of a mobile men if CSS was enabled, perhaps triggered by that triple arrow link thing at the top. In that menu, I see four blank bullet points between “Settings” and “More Themes.”

Orange arrows pointing to run-on links, unclear button labels, and empty list items — The DuckDuckGo homepage exposed a few glaring usability issues right off the bat.

Coming here as a new user, I have no idea what those empty list items are, but the bullets I highlighted in the screenshot above are actually the theme buttons. To clarify the intent, some fallback text would be helpful, and these should be radio or normal buttons instead of list items (considering their functionality).

Every block of content with an “X” — including the “Settings” — cannot be dismissed; however, clicking the “X” above an image of a hiker image does cause a chunk of content to clear off the screen — thanks to JavaScript still being enabled. What I really find awkward is the redundant numeration in the ordered list under “Switch to DuckDuckGo…” We see this:

1. 1We don't store your personal info
2. 2We don't follow you around with ads
3. 3We don't track you. Ever.

Looks like some mixed use case of semantic markup with some other way to display list item numbers.

Clicking each X to find that only the third has functionality — The third “X” down has functionality.

There’s a colossal amount of white space under the hiker image until the first

element. Assuming they’re either links or buttons, clicking every instance of “Add DuckDuckGo to [browser]” does nothing. Each section’s illustration causes some unnecessary horizontal scrolling, which is a common issue we’ll see in the other sites we look at.

Scrolling through white space between hiker image and first-level heading. Wheee!

After those sections, there’s a blank box and I have no idea what it is.

A blank box that appears to have no purpose.

I cracked open DevTools and it turns out to be a element in an that holds only JavaScript for something related to `POST` requests. It might as well be one of those elements we should leave alone.

Following that, I see two repeated instances of “Set as Default Search Engine” wrapped around a “Set as Homepage” section.

The instructions in Safari to set the search engine as your default or your homepage. Instructions may differ from one browser to another.

These must have been the instructions that popped up when I clicked the “Add DuckDuckGo…” actions, but it shows the impact hiding and showing content can have when we’re dealing with straight markup. Instead of repeating content, the corresponding links or buttons should point to one instance. That would cut the redundancy here.

OK, time to finally get into search. The first thing I see in the search results is an empty box with an instruction to ignore the box. Okey-dokey then.

DuckDuckGo wants me to ignore a box.

Moving on, did you see that DuckDuckGo link? That must be the logo, and I wonder why this was not on the homepage. Seems like low-hanging fruit for improvement.

The search bar still functions normally with the exception of the “S” and “X” buttons that have swapped places from where they were on the homepage.

Onto the search results. I could easily distinguish one result from another. What I found quite unnecessary, yet funny, is that the “Your browser indicates if you’ve visited this link” messaging that’s located at the end of each page title. That would be super annoying from a screen reading perspective. Imagine hearing that repeated at the end of every page title. That messaging is there to be displayed alongside checkmarks that contain tooltips that hold that messaging. But, with CSS disabled, well, no checkmarks and no tooltips. As a result, all I get is an extra long heading.

Search results on DuckDuckGo are still well structured with CSS disabled, but notice the messaging that is appended to each result title.

The navigation bar that is normally displayed as tabs to filter by different types of results (e.g. Images) seems to do nothing at this point because it’s hard to tell that they are filters without styling. But if I click on the Images filter, the image results are actually loaded lower down onto the page, piled right on top of the Web results, and the page becomes mega long as a result. Oh, and you might think that scrolling all the way back up (and it’s a long way up) then clicking another filter, say Videos, would replace the images, but that simply inserts video thumbnail images below the images making an already mega long page a super mega long page. Imagine the page weight of all those assets!

Well, you don’t have to. According to DevTools, images alone account for 831 requests and a total weight of 23.7 MB. Hefty!

The real kicker is that it’s not immediately clear that all those images have loaded visually.

The last couple of items are worth noting. Clicking the “Send feedback” link apparently does nothing. Maybe that triggered a modal with CSS? And, although the “All Regions” link does not resemble a link and I could’ve easily ignored it, I was curious enough to click it and was taken to an anchor point of a list of countries. The last two links just made their corresponding contents appear under the list country options.

The “All Regions” option is secretly acting as an anchor.

There’s a lot going on here and there are clearly opportunities for improvement. For example, there are calls to action that display as normal text that should be either be links or buttons instead. Also, we’d think the performance of a site would get better with CSS disabled, but all those loaded assets in the search results are prohibitive. That said, the search experience isn’t painful at all… that is, unless you’re digging into images or videos while doing it.

? What the Site Does Well ? What the Site Can Improve

Search is consistent and works with or without CSS. A “skip” link for would help with keyboard browsing.

The content hierarchy makes content easy to read and search results a clean experience. Non-link items in the “Settings” menu should be headings for separate unordered lists so there is a clear hierarchy for how the options are grouped.

Good use of a homepage link at the top of the search results page. Some content is either duplicated or repeated because the site relies on conditionally showing and hiding content.

Make sure that all calls to action render as links instead of plain text.

Use a fallback solution to filter the types of search results to prevent items stacking and help control hefty page weight.

Website 3: GitHub

The GitHub homepage with and without CSS — The GitHub homepage with CSS (left) and without CSS (right).

Hey, here’s a site many of us are well familiar with! Well, many of us are used to being logged into it all the time, but I’m going to surf it while logged out.

Already, there’s a skip link (yay). There’s also a mobile navigation icon that I expect will do nothing, and am proven right when I try.

Wide gap after Why GitHub? dropdown — That big gap of white? It’s an SVG icon with a white fill, according to DevTools.

Between some of the navigation items, there are unnecessarily giant gaps. If you click on these, they still function as dropdown menus. They are

and

elements… but something feels semantically wrong. It is nice that the menu items are actually unordered list items and that native browser functionality can still take place by using a semantic way to expand content. But that SVG icon messes with me.

Before typing anything into the field, I see three instances of “Search All GitHub” and “Jump to” links. I have no idea which to click, but if I do a search, the keyword shows up in the third group.

Orange outline boxes around groups of search links — There is no clear connection between the search input and the three groups of links.

Everything else on the homepage seems fine except for a number of overly large images horizontally overflowing the window.

Scrolling down to see large images overflowing the browser window.

Let’s go back to the search bar and navigate to any repo we can find. Right under the Search button, we have two nearly identical secondary navigation bars that return the repository counts, code, commits, and other meta. Without looking at the source, I have no clue what the purpose is for having two of these.

Search results for a “javascript tips” query.

Repository pages still have an easy-to-follow structure and a logical hierarchy for the most part. While logged out and having my cache cleared before coming, the “Dismiss” button for the “Join GitHub today” block still performs as I’d expect. Like we saw earlier on Amazon, the tag links are difficult to tell apart because they run together as a single line.

A repository page in a logged out state.

The next two buttons — “JavaScript” and “New Pull Request” — don’t seem to do anything when I click them. I’d imagine the pull request button should be disabled while viewing as a guest since, unless it’s intended to take a user to a log in screen first… but even that doesn’t feel right. Turns out that the button is indeed disabled when CSS is active, though. Then the rest of the page is fairly easy to understand.

If you’re here mainly for managing, contributing to, or checking out repositories, you won’t face a whole lot of friction since the hierarchy plays out well. You’ll experience pretty much the same elsewhere, whether you’re looking at pull requests, issues, or individual files. Most of the hurdles live in less prominent pages on the site.

? What the Site Does Well	? What the Site Can Improve
The hierarchy and structure of many pages are really easy to follow and make logical sense.	Use the height and width attributes on elements and SVGs to prevent them from blowing up.
Most of the SVG icons embedded on the page are appropriately sized.	Watch for empty list items.
Nice use of a skip link in the header.	Ensure that button labels use full words.
	Make sure links have whitespace or line breaks between them to prevent run-ons.

Website 4: Hex Naw

The Hex Naw tool with and without CSS — The Hex Naw homepage with CSS (left) and without CSS (right).

This next site is an online tool I use often to check color contrasts for accessibility. And for a site that is so big on color, there’ s probably a lot happening here with CSS, so it should get interesting.

There’s immediately a large amount of space above the navigation and no skip links. The hamburger and close buttons for the mobile layout and “X” buttons next to each color to test are oversized.

Scrolling to find missing skip links and excessive space above the navigtion — We’re missing skip links and there is excessive space above the navigation.

Oh, and check out this giant gap between the “Test Colors” button and the next section of content.

Scrolling to show large gap between Test Colors button and “yeah” and “naw” counters — It would be nice to close this gap so the “yeah” and “naw” counters are visible in the test.

One of the many nice features of this site is a checkbox that allows you to see only the colors that passed the test, rather than viewing all of the tested colors. Unfortunately, that button does nothing with CSS disabled. However, I can still see which colors work and get the definitions for contrast ratio, large text, and small text directly in the result table.

Test result section showing “Show passing colors” checked, legend for C, L, and S letters, table of results, and feedback for all failed colors

Hiding and showing the terms is probably what the button does with CSS. The bummer is that I won’t know the purpose of those single letters (e.g. S and R) after the table headers. It’s also both ironic and confusing to see that message for all failing colors after the table because, well, there are passing colors in this list. What could be done is have hide it by default but conditionally inject it later if all the colors in a single test fail.

Pulling out DevTools, it turns out some of the white space at the top is the Hex Naw logo as a SVG file. The space above that is associated with other SVG symbols used for the page. By using a default color of black for the logo, this would help reduce some of the space. I made that quick change in DevTools and it makes a noticeable difference.

The size of the mobile menu and “X” icons can easily be reduced and be proportional to their viewBox attributes.

The menu and X icons given a width and height of 44 pixels using the attributes — Here’s one way to reduce the size of the mobile menu and “X” icons.

The second gap of space is caused by an SVG loader that appears while calculating color contrasts. This could be helped by specifying a much smaller, yet proportional, width and height exactly like the mobile menu and “X” icons.

SVG loader icon resized to 25px by 25px — I was able to reveal and resize the SVG loader icon in DevTools.

Adding an initial width and height to each SVG would definitely reduce the need to scroll. This is also what we can do to fix the gaps we saw in GitHub’s navigation as well.

Ultimately, Hex Naw remains pretty useful without CSS. I can still test colors, get passing and failing color results, and navigate around the page. It’s just too bad I wasn’t able to work with actual colors and had to work around those extra large SVG icons.

? What the Site Does Well	? What the Site Can Improve
The site maintains good content hierarchy throughout the site.	SVGs should be use a fallback fill color and use the height and width attributes.
All of the elements are written semantically.	Feedback for all failing colors could be dynamically added and removed to prevent awkward messaging.
The tests themselves function properly with the exception of being able to show or hide information.	Consider an alternative way to display color for the values being tested, like table cells with the background color attribute.

Website 5: Stack Overflow

The Stack Overflow homepage with and without CSS — The Stack Overflow homepage with CSS (left) and without CSS (right).

Like GitHub, Stack Overflow is one of those resources that many (if not most) of us keep in our back pocket because it helps find whether someone has already asked a development question and the answers to them.

On the page to ask a question, I see a bunch of blank bullet points above the main </code> element. I have no idea why those empty list items are there. I don’t see any of the formatting buttons either, but after messing around a bit, I found that they happen to be nothing more than blank list items. Perhaps fallback text or an SVG icon for each item would help identify what these are and do. They should be turned into real buttons as well.</p> <p>It’s also still possible to get a list of similar questions while entering text into the title field. Every works here as expected, which is nice. Although, it is strange that the vote counts for each suggested question appears twice, once above the title as a link and again next to the title without being linked.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730705520_stackoverflow2.png" alt="The “Ask a Question” page showing blank bullets and questions that may already have an answer. Strong tag tooltip is displayed for one of the bullets."><figcaption>The “Ask a Question” page has a little awkward formatting, but the overall functionality is in tact and the page is relatively easy to navigate.</figcaption></figure> <p>One of the key elements we all look for when landing on a Stack Overflow question page is that big green checkmark that indicates the correct answer out of all the submitted answers. But with CSS turned off, it’s hard to tell which answer was accepted because each answer in the list has a black checkmark. Even if the accepted answer is always at the top, there’s still no alternative or fallback indication without having to interact with the page. Additionally, there’s no indication if you have already up voted or down voted the question or any of the answers.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730735369_stackoverflow3.png" alt="Answered question with black checkmarks next to an accepted answer and other answers"><figcaption>The question (left) next to the list of provided answers (right). We lose a lot of hierarchy when styles are taken away.</figcaption></figure> <p>To sum up my experience on Stack Overflow, I was able to accomplish what I normally come to the site for: finding answers to a programming problem. That said, there were indeed a few opportunities for improvement and this site is a prime example of how design often relies on color to indicate hierarchy or value on a page, which was sorely missing from the question pages in this experiment.</p> <table> <thead> <tr> <th>? What the Site Does Well </th> <th>? What the Site Can Improve</th> </tr> </thead> <tbody> <tr> <td>Almost every element is written semantically.</td> <td>Use clear controls to identify editing tools while asking or answering questions.</td> </tr> <tr> <td>SVG icons use the width and height attributes.</td> <td>Consider a visual icon to distinguish the accepted answer from any other answers to a question.</td> </tr> <tr> <td>Lists of answers are clear and easy to scan.</td> <td>Consider a different method to indicate an up vote or a down vote besides color alone.</td> </tr> </tbody> </table> </details> <details> <summary>Website 6: Wikipedia</summary> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_601945040BCA3610D759145A4442799C97B904D9A9F8326DD30FDF0CF48A96B7_1555363400264_wikipedia-compare.jpg" alt="The Wikipedia homepage with and without CSS"><figcaption>The Wikipedia homepage with CSS (left) and without CSS (right).</figcaption></figure> <p>Wikipedia, the web’s primary point of reference! It’s an online staple and one of its appealing qualities is a sort of <em>lack</em> of design. This should make for an interesting test.</p> <p>A few links down, we have a skip navigation option for the real navigation and search. The homepage header containing the globe image maintains its two column layout, and you may have guessed why: this is a table layout. While it may not be a usability issue, we know it isn’t semantic to rely on tables to create a layout. That was a relic of the way past when we didn’t have floats, flexbox, grid or any other way to handle content placement. That said, there are no noticeable usability issues or confusing elements on the page.</p> <p>Let’s move on to what many of us spend the most time on in Wikipedia: an article entry. This is often the entry point to Wikipedia, especially for those of us that start by typing something into a search engine, then click on the Wikipedia search result.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/wikipedia6.png" alt="Top of Wikipedia article"><figcaption>Notice how similar the style-less page is to the styled page, even though it becomes a single column.</figcaption></figure> <p>The bottom line is that this page is still extremely usable and hierarchical with CSS disabled. The layout goes down to a single column, but the content still flows in a logical order and even maintains bits of styling, thanks again to a reliance on tables and inline table properties.</p> <p>One issue I bumped up against is the navigation. There is a “Jump to navigation” link in the header which indeed drops me down to the navigation when I click it. In case you’re wondering, the navigation is contained in the footer, which is the reason for needing to jump to it.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730905005_wikipedia2.png" alt="Navigation menu with stranded checkboxes above “Variants” and “More”"><figcaption>Navigation menu with stranded checkboxes above “Variants” and “More.”</figcaption></figure> <p>There are seemingly random checkboxes above a couple of the navigation headings (specifically for “Variants” and “More”) and they appear to serve no purpose, although the checkbox above “More” becomes displays at a certain viewport width when CSS is enabled.</p> <p>There actually is one odd thing in the navigation, and it’s a label-less button between the “In other projects” and “Languages” headings.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730926350_wikipedia3.png" alt="Part of navigation showing blank button with “Language settings” tooltip and some of the languages"><figcaption>Hovering over the button provides a hint that it’s for language settings, but the button should at least have a title to make that clear up front.</figcaption></figure> <p>Clicking that button, I’m still able to access the language settings, and it mostly works as expected. For example, the layout maintains a tabbed layout which is super functional.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/wikipedia7.gif" alt="The CSS-less possibility of switching back and forth between Display and Input tabs"></figure> <p>In the Display tab, however, the “Language” and “Fonts” buttons do nothing. They probably are tabs as well, but at least I can see what they offer. Beside those buttons are two empty select menus that do absolutely nothing (the first one does become populated with ComicNeue, OpenDyslexic, and System font options when you check the checkbox). Looking at the “Input” tab, the writing language buttons still happen to function as tabs. I’m still able to select options other than English, Spanish, and Chinese.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730969400_wikipedia4.png" alt="Blue arrow pointing out the jump to a list of languages at the top of the page when pressing the [...] button"><figcaption>Pressing the […] button takes me to a list of languages at the top of the page.</figcaption></figure> <p>The articles aren’t difficult to read at all without CSS and that’s because nearly every element is semantically correct and follows a consistent document hierarchy. One thing I did wonder was where the “Show/Hide” button that’s normally in the table of contents went. It turns out to be a lone checkbox, and the label is fake — it uses the <code>content</code> property on a pseudo-element in CSS to display the label.</p> <p>Another issue in articles is that you have to spend time hunting images down when previewing them. Normally, clicking an image in the article sidebar will trigger a full-screen modal that contains a carousel of images. Without CSS, that carousel is gone and, in its place, is the image with a row of unlabeled buttons above it. That’s a bummer, but would be perfectly OK if the carousel wasn’t all the way down the page, opposite of where the clicked image is at the top of the page without an ability to jump down to it.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/s_601945040BCA3610D759145A4442799C97B904D9A9F8326DD30FDF0CF48A96B7_1555370569228_wikipedia-article-carousel.jpg" alt="Orange arrow pointing to blank buttons above carousel, which are the controls"><figcaption>The image carousel is no longer contained in a modal, but at the end of the page. </figcaption></figure> <p>I’d be careless if I didn’t mention that the Wikipedia logo was nowhere to be found on the article! It’s not even a white SVG on white. The link contains actually nothing:</p> <pre><code><a class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"></a></code></pre> <p>Thankfully, the “Main page” link under “Navigation” is the another way back home without pressing the browser Back button. But, still feels odd to have no branding on the page when it does such a great job of it on the homepage.</p> <p>Wikipedia’s HTML issues exist mostly in features I expect to be less often used rather than articles. They never hampered my reading experience in the long run.</p> <table> <thead> <tr> <th>? What the Site Does Well</th> <th>? What the Site Can Improve</th> </tr> </thead> <tbody> <tr> <td>The site maintains a clean structure and hierarchy.</td> <td>The logo placement could be moved (or added, in some cases) to the top of the page without a CSS background image.</td> </tr> <tr> <td>Skip links are used effectively for search and navigation.</td> <td>Buttons should include labels.</td> </tr> <tr> <td>The article content is semantic and easy to read.</td> <td>The image carousel on pages could load where the trigger occurs and use proper button labels for the controls.</td> </tr> </tbody> </table> </details> <hr> <h3>Ways to make CSS-less a better experience</h3> <p>CSS is a key component to the modern web. As we’ve seen up to this point, there are a number of sites that become next to un-unusable without it — and we’re counting some of the most recognizable and used sites in that mix. What we’ve seen is that, at best, the primary purpose for a site can still be accomplished, but there are hurdles along the way. Things like:</p> <ul> <li>missing or semantically incorrect skip links</li> <li>links that run together</li> <li>oversized images that require additional scrolling</li> <li>empty elements, like list items and button labels</li> </ul> <p>Let’s see if we can compile these into a sort of list of best practices to consider for situations where CSS might be disabled or even unavailable.</p> <details> <summary>Include a skip navigation link at the top of the document</summary> <p>Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.</p> <p>The most basic HTML example I’ve seen is an anchor link that targets an ID where the main content begins.</p> <pre><code><a href="#main">Skip to main content</a>  <main id="main"></main></code></pre> <p>And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.</p> <pre><code>.skip-navigation { border: 0; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; padding: 0; position: absolute; height: 1px; width: 1px; } /* Bonus points for adding :focus styles */</code></pre> </details> <details> <summary>Leave whitespaces where they make sense</summary> <p>Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That’s either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:</p> <pre><code><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a></code></pre> <p>We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default. </p> <p>If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:</p> <p> <span>See the Pen <a target="_blank" href="https://codepen.io/jkantner/pen/gEBaqJ/"><br /> Handling Links in HTML Separated by Spaces or Line Breaks</a> by Jon Kantner (<a target="_blank" href="https://codepen.io/jkantner">@jkantner</a>)<br /> on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span> </p> </details> <details> <summary>Use width and height attributes liberally</summary> <p>The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.</p> <p>The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.</p> <pre><code><img src="/path/to-image.jpg" width="40" height="40" /> <svg width="40px" height="40px" viewBox="0 0 200 200"> <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80" /> </svg></code></pre> </details> <details> <summary>Prepare SVGs for a white background</summary> <p>Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.</p> <p>So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like <code>fill</code> and <code>fill-rule</code> as attributes will work here.</p> <pre><code> <svg viewBox="-241 243 16 16" width="100px" fill="#ff0000"> <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"/> </svg></code></pre> <pre><code>/* ...and it's still red when CSS is enabled */ svg { fill: #ff0000; }</code></pre> <p> <span>See the Pen <a target="_blank" href="https://codepen.io/geoffgraham/pen/VNyzRa/"><br /> Define SVG Width Attribute</a> by Geoff Graham (<a target="_blank" href="https://codepen.io/geoffgraham">@geoffgraham</a>)<br /> on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span> </p> </details> <details> <summary>Label those buttons!</summary> <p>Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add <code>aria-hidden="true"</code> so it doesn’t sound like the screen reader is reading the button label twice (e.g. VoiceOver says, “Add button Add” instead).</p> <pre><code><button class="btn-icon" title="Add"> <span class="btn-label" aria-hidden="true">Add</span> </button></code></pre> <p>Then the CSS can be something like this:</p> <pre><code>.btn-icon { background: url(path/to/icon.svg) 0 0 / 100% 100%; height: 40px; width: 40px; } .btn-label { display: block; overflow: hidden; height: 0; }</code></pre> <p>If there are <code></p> <li></code> elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.</p> <p>Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using <code>aria-labelledby</code> and assigning the <code>id</code> to the title.</p> <pre><code><button> <svg width="40px" height="40px" viewBox="0 0 200 200" aria-labelledby="btn-title"> <title id="btn-title">Add</title> <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80" /> </svg> </button></code></pre> </details> <hr> <h3>Conclusion</h3> <p>It can be easy to either forget or be afraid to check how a site appears when CSS isn’t available to make the <abbr title="User Interface">UI</abbr> look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.</p> <p>And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it’s not around to do its magic. We’ve seen the same be true of sites that lean too heavily on JavaScript. This isn’t to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.</p> <p>Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.</p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/">That Time I Tried Browsing the Web Without CSS</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2236587"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/24/preload-prefetch-and-other-link-tags/" rel="bookmark">Preload, prefetch and other link tags</a></h2> <div class="info"> <span class="date">April 24th, 2019</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/24/preload-prefetch-and-other-link-tags/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>Ivan Akulov has collected a whole bunch of information and know-how on making things load a bit more quickly with <code>preload</code> and <code>prefetch</code>. That’s great in and of itself, but he also points to something new to me – the <code>as</code> attribute: </p> <pre><code><link rel="preload" href="/style.css" as="style" /></code></pre> <p>Supposedly, this helps browsers prioritize when to download assets and which assets to load.</p> <p>My favorite part of this post is Ivan’s quick summary at the end which clearly defines what all these different tags can be used for:</p> <blockquote> <p> <code></code> – when you’ll need a resource in a few seconds<br /><code></code> – when you’ll need a resource on a next page<br /><code></code> – when you know you’ll need a resource soon, but you don’t know its full url yet</p> </blockquote> <p>Make sure to check out our own post on the matter of <a target="_blank" href="https://css-tricks.com/prefetching-preloading-prebrowsing/">prefetching, preloading, and prebrowsing</a>, too. Adding these things to our links can make significant performance improvements and so check it out to add more resources to your performance toolbox.</p> <p><a target="_blank" href="https://3perf.com/blog/link-rels/" title="Direct link to featured article">Direct Link to Article</a> — <a target="_blank" href="https://css-tricks.com/preload-prefetch-and-other-link-tags/">Permalink</a></p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/preload-prefetch-and-other-link-tags/">Preload, prefetch and other link tags</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2238105"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/24/its-here-meet-art-direction-for-the-web-a-new-smashing-book/" rel="bookmark">It’s Here! Meet “Art Direction For The Web,” A New Smashing Book</a></h2> <div class="info"> <span class="date">April 24th, 2019</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/24/its-here-meet-art-direction-for-the-web-a-new-smashing-book/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/_A3XkYRnodk/"><img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a621dd56-a2bb-4b3b-9177-7c8b36ddda89/6-art-direction-for-the-web-extras-01-main-2.jpg" alt="The new Smashing book, ‘Art Direction for the Web' written by Andy Clarke"></a></div> <p> <title>It’s Here! Meet “Art Direction For The Web,” A New Smashing Book</title></p> <article> <header> <h1>It’s Here! Meet “Art Direction For The Web,” A New Smashing Book</h1> <address>Vitaly Friedman</address> <p> 2019-04-24T16:00:02+02:002019-04-25T07:34:04+00:00</header> <p>In contrast to the world of print design, our creative process has often been constrained by what is possible with our limited tools. It also has been made more difficult by the unique challenges of designing for the web, such as ensuring that our sites cater well to a diverse range of devices and browsers.</p> <p>Now, the web isn’t print of course, and we can’t take concepts from sturdy print and apply them blindly to the fluid web. However, we can study the once uncharted territory of <strong>layout, type treatment and composition</strong> that print designers have skillfully and meticulously conquered, and explore which lessons from print we could bring to our web experiences today.</p> <p>We can do that by looking at our work through the lens of <strong>art direction</strong>, a strategy for achieving more compelling, enchanting and engaging experiences. With the advent of front-end technologies such as Flexbox, <strong>CSS Grid</strong> and Shapes, our creative shackles can come off. It’s time to explore what it actually means.</p> <p><strong>Download a sample</strong>: <a target="_blank" href="https://smashed.by/artdirectionexcerpt" rel="noopener">PDF</a>, <a target="_blank" href="http://provide.smashingmagazine.com/eBooks/art-direction-for-the-web-excerpt.epub" rel="noopener">ePUB</a>, <a target="_blank" href="http://provide.smashingmagazine.com/eBooks/art-direction-for-the-web-excerpt.mobi" rel="noopener">Amazon Kindle</a>.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a621dd56-a2bb-4b3b-9177-7c8b36ddda89/6-art-direction-for-the-web-extras-01-main-2.jpg"><img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a621dd56-a2bb-4b3b-9177-7c8b36ddda89/6-art-direction-for-the-web-extras-01-main-2.jpg" alt="The new Smashing book, ‘Art Direction for the Web' written by Andy Clarke"></a></figure> <div> <nav> <ul> <li> <button>eBook</button> </li> <li> <button>Hardcover</button> </li> </ul> </nav> <div> <h3><span>eBook</span></h3> <p><span>$19</span><a target="_blank" href="https://www.smashingmagazine.com/ebooks/art-direction-for-the-web-ebook/">Get the eBook</a></p> <p>PDF, ePUB, Kindle.<br />Free for <a target="_blank" href="https://www.smashingmagazine.com/membership">Smashing Members</a>.</p> </p></div> <div> <h3><span>Hardcover</span></h3> <p><span><span>$39</span></span><a target="_blank" href="https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/">Get Print + eBook</a></p> <p>Printed, quality hardcover.<br />Free airmail worldwide shipping.</p> </p></div> </div> <h3>About The Book</h3> <p><em>Art Direction For The Web</em> exists because we wanted to explore how we could break out of soulless, generic experiences on the web. It isn’t a book about trends, nor is it a book about design patterns or “ready-to-use”-solutions for your work. No, it’s about original compositions, unexpected layouts and <strong>critical design thinking</strong>. It’s about how to use technical possibilities we have today to their fullest extent to create something that stands out.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5af2ec91-b9ac-4670-b328-62c0fbabb9b4/02-art-direction-for-the-web.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5af2ec91-b9ac-4670-b328-62c0fbabb9b4/02-art-direction-for-the-web.jpg" alt="Our new book explores how we can apply lessons learned from print design to the fluid and unpredictable web. That's a book that will make you think, explore and bypass boundaries and conventions."></a><figcaption> Our new book explores how we can apply lessons learned from print design to the fluid and unpredictable web. That’s a book that will make you think, explore and bypass boundaries and conventions. (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5af2ec91-b9ac-4670-b328-62c0fbabb9b4/02-art-direction-for-the-web.jpg">Large preview</a>)<br /> </figcaption></figure> <p>It’s a <strong>book for designers and front-end developers</strong>; a book that’s supposed to <strong>make you think</strong>, explore and bypass boundaries and conventions, to try out something new — while keeping accessibility and usability a priority.</p> <p>To achieve this, the book applies the concept of <strong>art direction</strong> — a staple of print design for over a hundred years — to examine a new approach to designing for the web starting from the story you want to tell with your design and building to a finished product that perfectly suits your brand.</p> <p>Of course, the eBook is free of charge for <a target="_blank" href="https://smashingmagazine.com/membership">Smashing Members</a>, and Members save off the regular price, too.</p> <p><em>Written by Andy Clarke. Reviewed by Rachel Andrew. Foreword by Trent Walton. Published in April 2019.</em></p> <p><strong>Download a sample</strong>: <a target="_blank" href="https://smashed.by/artdirectionexcerpt" rel="noopener">PDF</a>, <a target="_blank" href="http://provide.smashingmagazine.com/eBooks/art-direction-for-the-web-excerpt.epub" rel="noopener">ePUB</a>, <a target="_blank" href="http://provide.smashingmagazine.com/eBooks/art-direction-for-the-web-excerpt.mobi" rel="noopener">Amazon Kindle</a>.</p> <h3>Technical Details</h3> <ul> <li><span>344</span> pages, <span>14</span> × <span>21</span> cm (<span>5.5</span> × <span>8.25</span> inches)<br />ISBN: <span>978-3-945749-76-0</span> (print)</li> <li>Quality print hardcover with stitched binding and a ribbon page marker.</li> <li><strong>Free worldwide airmail shipping</strong> from Germany.</li> <li>You can <a target="_blank" href="https://www.smashingmagazine.com/delivery-times/">check your book delivery times</a>.</li> <li>The eBook is available in PDF, ePUB, Amazon Kindle.</li> <li>Shipping now as <a target="_blank" href="https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/">printed, quality hardcover</a> and <a target="_blank" href="https://www.smashingmagazine.com/ebooks/art-direction-for-the-web-ebook/">eBook</a>.</li> </ul> <h3>Table Of Contents</h3> <p>The possibilities of art direction on the web go far beyond responsive images. The book explores how to create art-directed experiences with modern <strong>front-end</strong> techniques.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a3b1b13f-2ffd-47ec-9d89-a012915d44a7/2-toc-art-direction-for-the-web.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a3b1b13f-2ffd-47ec-9d89-a012915d44a7/2-toc-art-direction-for-the-web.jpg" alt="Table of contents showing 12 insightful chapters"></a><figcaption> The book includes 12 chapters, covering type treatment, composition, layout and grid — and most pages are art directed as well. (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a3b1b13f-2ffd-47ec-9d89-a012915d44a7/2-toc-art-direction-for-the-web.jpg">Large preview</a>)<br /> </figcaption></figure> <div> <dl> <dt> <div> <div>1. What Art Direction Means</div> </div> <div><span>+</span></div> </dt> <dd> <div>Ask what art direction means to developers, and they might answer: using the <code>picture</code> element or <code>sizes</code> attribute in HTML for responsive images; presenting alternative crops, orientations, or sizes at various screen sizes. But there’s more to it.</div> </dd> <dt> <div> <div>2.One Hundred Years Of Art Direction</div> </div> <div><span>+</span></div> </dt> <dd> <div>Bradley, Brodovitch, Brody, and Feitler — together, their names sound like a Mad Men-era advertising agency. In this chapter, we’ll take a look at their iconic works, from the 1930’s to the 1980’s.</div> </dd> <dt> <div> <div>3. Art-Directing Experiences</div> </div> <div><span>+</span></div> </dt> <dd> <div>Whether we write fact or fiction, sell or make products, the way to engage people, create desire, make them happy, and encourage them to stay that way, is by creating narratives. So what do we need to consider when doing so?</div> </dd> <dt> <div> <div>4. Art Direction And Creative Teams</div> </div> <div><span>+</span></div> </dt> <dd> <div>Let’s take a look at how we can embrace collaboration and form teams who follow strategies built around common goals.</div> </dd> <dt> <div> <div>5. Principles Of Design</div> </div> <div><span>+</span></div> </dt> <dd> <div>Are the principles which have guided design in other media for generations relevant to the world of digital products and websites? Of course! In this chapter, we’ll explore the principles of symmetry, asymmetry, ratios, and scale.</div> </dd> <dt> <div> <div>6. Directing Grids</div> </div> <div><span>+</span></div> </dt> <dd> <div>Grids have a long and varied history in design, from the earliest books, through movements like constructivism right up to the present-day popularity of grids in frameworks like Bootstrap and material design. This chapter explains grid anatomy and terminology and how to use modular and compound grids.</div> </dd> <dt> <div> <div>7. Directing Type</div> </div> <div><span>+</span></div> </dt> <dd> <div>White space, typographic scale, and creative uses of type are the focus in this chapter.</div> </dd> <dt> <div> <div>8. Directing Pictures</div> </div> <div><span>+</span></div> </dt> <dd> <div>Images and how we display them have an enormous impact on how people perceive our designs, whether that be on a commercial or editorial website, or inside a product. In this chapter, you’ll learn how to position and arrange images to direct the eye.</div> </dd> <dt> <div> <div>9. Developing Layouts With CSS Grids</div> </div> <div><span>+</span></div> </dt> <dd> <div>CSS Grid plus thoughtful, art-directed content offers us the best chance yet of making websites which are better at communicating with our audiences. In this chapter, Andy explains properties and techniques which are most appropriate for art direction.</div> </dd> <dt> <div> <div>10. Developing Components With Flexbox</div> </div> <div><span>+</span></div> </dt> <dd> <div>While Grid is ideal for implementing art-directed layouts, Flexbox is often better suited to developing molecules and organisms such as navigation links, images, captions, search inputs, and buttons. This chapter explores how to make use of it.</div> </dd> <dt> <div> <div>11. Developing Typography</div> </div> <div><span>+</span></div> </dt> <dd> <div>From multi-column layout and arranging type with writing modes to text orientation and decorative typography, this chapter dives deep into the code side of type.</div> </dd> <dt> <div> <div>12. Developing With Images</div> </div> <div><span>+</span></div> </dt> <dd> <div>How do you fit your art-directed images to a user’s viewport? And what do CSS shapes and paths have in store for your design? Let’s find out in this final chapter.</div> </dd> </dl> </div> <p>In his book, Andy shows the importance and effectiveness of designs which reinforce the message of their content, how to use design elements to <strong>effectively convey a message and evoke emotion</strong>, and how to use the very latest web technologies to make beautifully art directed websites a reality. It goes beyond the theory to teach you techniques which you can use every day and will change the way you approach design for the web.</p> <p>The book is illustrated with <strong>examples of classic art direction</strong> from adverts and magazines from innovative art directors like Alexey Brodovitch, Bea Feitler, and Neville Brody. It also features modern examples of art direction on the web from sites like <em>ProPublica</em>, as well as an evocative fictitious brand which demonstrates the principles being taught.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/500abe7e-ffac-4cfc-8988-aa323e69280d/6-art-direction-for-the-web-extras-01-cover.jpg"><img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/500abe7e-ffac-4cfc-8988-aa323e69280d/6-art-direction-for-the-web-extras-01-cover.jpg" alt="Art Direction for the Web front cover"></a></figure> <div> <nav> <ul> <li> <button>eBook</button> </li> <li> <button>Hardcover</button> </li> </ul> </nav> <div> <h3><span>eBook</span></h3> <p><span>$19</span><a target="_blank" href="https://www.smashingmagazine.com/ebooks/art-direction-for-the-web-ebook/">Get the eBook</a></p> <p>PDF, ePUB, Kindle.<br />Free for <a target="_blank" href="https://www.smashingmagazine.com/membership">Smashing Members</a>.</p> </p></div> <div> <h3><span>Hardcover</span></h3> <p><span><span>$39</span></span><a target="_blank" href="https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/">Get Print + eBook</a></p> <p>Printed, quality hardcover.<br />Free airmail worldwide shipping.</p> </p></div> </div> <h3>Part 1, “Explaining Art Direction”</h3> <p><em>Art Direction for the Web</em> begins by introducing the concept of art direction, its history, and how it is as relevant to modern web design as it ever been in other media. In Part 1, “Explaining Art Direction”, Andy shows you how to start thinking about all aspects of your design through the lens of art direction.</p> <p>You will learn how design can <strong>evoke emotion</strong>, <strong>influence our subconscious perception</strong> of what we are reading, and <strong>leave a lasting impression</strong> on us. You will also learn the history of art direction, beginning with the earliest examples as a central component of magazine design and showing how the core philosophies of art direction persist through an incredible range of visual styles and ensure that the design always feels appropriate to the content.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e833aa25-005b-478a-b094-de058478962f/3-art-direction-for-the-web-inside-05.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e833aa25-005b-478a-b094-de058478962f/3-art-direction-for-the-web-inside-05.jpg" alt="A sneak peek into Chapter 5 in which Andy Clarke explains angles and diagonals among other principles of design"></a><figcaption> We can’t control the shape of users’ browsers, but the principles of symmetry and asymmetry are relevant for every screen size. Chapter 5 includes dives deep into principles of great design. (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e833aa25-005b-478a-b094-de058478962f/3-art-direction-for-the-web-inside-05.jpg">Large preview</a>)<br /> </figcaption></figure> <p>As art direction is often about ensuring the visual design fits the narrative of your content, this section will also give you the practical skills to <strong>identify the stories behind your projects</strong>, even when they appear hard to uncover.</p> <p>Finally, this part will teach you that art direction is a process that we can all be involved with, no matter our role in our projects. Strong brand values communicated through codified principles ensure that everyone on your team speaks with the same voice to reinforce your brand’s messaging through art direction.</p> <h3>Part 2, “Designing For Art Direction”</h3> <p>In Part 2, “Designing For Art Direction,” covers how to use design elements and layout to achieve visual effects which complement your content. You will learn principles of design such as balance, symmetry, contrast and scale to help you understand the design fundamentals from which art direction is based. You will also learn how to create interesting and unique layouts using <strong>advanced grid systems with uneven columns</strong>, compound and stacked grids, and modular grids.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba2f107f-f064-40e6-8ff6-3f9b5c176ece/4-art-direction-for-the-web-inside.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba2f107f-f064-40e6-8ff6-3f9b5c176ece/4-art-direction-for-the-web-inside.jpg" alt="A peak of Chapter 7 which goes into detail regarding space and type"></a><figcaption> It’s important to understand the impact negative space can make. Chapter 7 focusses on white space, typographic scale, and creative uses of type. (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba2f107f-f064-40e6-8ff6-3f9b5c176ece/4-art-direction-for-the-web-inside.jpg">Large preview</a>)<br /> </figcaption></figure> <p>This book also covers <strong>how to use typography creatively</strong> to craft the voice with which your brand will speak. In addition to a study on how to create readable and attractive body text, this section also explores how to be truly <strong>expressive</strong> with type to make beautiful headings, stand-firsts, drop-caps, quotes, and numerals.</p> <p>You will also learn how to make full of use of images in your designs — even while the dimensions of the page change — to create impactful designs that lead the eye into your content and keep your readers engaged.</p> <h3>Part 3, “Developing For Art Direction”</h3> <p>The final part of Art Direction for the Web, “Developing For Art Direction,” teaches you the latest web design tools to unshackle your creativity and help you start applying what you have learned to your own projects.</p> <p>You will learn how to use <strong>CSS Grid to create interesting responsive layouts</strong> and how Flexbox can be used to design elements which wrap, scale and deform to fit their containers.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa6735aa-d5b8-4714-853b-2ebd296f8c86/art-direction-for-the-web-inside-preview.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa6735aa-d5b8-4714-853b-2ebd296f8c86/art-direction-for-the-web-inside-preview.jpg" alt="Images have an enormous impact on how our customers perceive our designs. Chapter 8 covers grids and how you can use them for more than merely aligning content to the edges of columns."></a><figcaption> Images have an enormous impact on how our customers perceive our designs. Chapter 8 covers grids and how you can use them for more than merely aligning content to the edges of columns. (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa6735aa-d5b8-4714-853b-2ebd296f8c86/art-direction-for-the-web-inside-preview.jpg">Large preview</a>)<br /> </figcaption></figure> <p>This third part will also explore how to use <strong>CSS columns</strong>, transforms, and <strong>CSS Grid</strong> to create beautiful typography. You will also learn how viewport units, <code>background-size</code>, <code>object-position</code>, and CSS shapes can create engaging images that are tailored for every device or window width.</p> <p>Throughout the book, Andy has showcased <strong>how art direction can be applied to any design project</strong>, whether you are designing for a magazine, a store front, or a digital product.</p> <h3>Testimonials</h3> <blockquote><p>“On the web, art direction has been a dream deferred. “The medium wasn’t meant for that,’ we said. We told ourselves screens and browsers are too unreliable, pages too shape-shifty, production schedules too merciless to let us give our readers and users the kind of thoughtful art directional experiences they crave. But no longer. Andy Clarke’s “Art Direction for the Web” should <strong>usher in a new age of creative web design</strong>.”</p> <p>— <a target="_blank" href="https://twitter.com/zeldman">Jeffrey Zeldman</a>, Creative Director at Automattic</p></blockquote> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cfb5ed7-96aa-40bb-a4b4-099d40c5879f/art-direction-for-the-web-book-details-opened.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cfb5ed7-96aa-40bb-a4b4-099d40c5879f/art-direction-for-the-web-book-details-opened.jpg" alt="The new Smashing book, ‘Art Direction for the Web' written by Andy Clarke"></a><figcaption> (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cfb5ed7-96aa-40bb-a4b4-099d40c5879f/art-direction-for-the-web-book-details-opened.jpg">Large preview</a>)<br /> </figcaption></figure> <blockquote><p>“Andy shows how art direction can elevate your website to a new level through a positive experience, and how to execute these design principles and techniques into your designs. This book is filled with <strong>tons of well-explained practical examples</strong> using the most up-to-date CSS technologies. It’ll spin your brain towards more creative thinking and give your pages a soul.”</p> <p>— <a target="_blank" href="https://twitter.com/vpieters">Veerle Pieters</a>, Belgian graphic/web designer</p></blockquote> <h3>About The Author</h3> <p>Andy Clarke is a well-known designer, design consultant, and mentor. With his wonderful wife, Sue, Andy founded <a target="_blank" href="https://stuffandnonsense.co.uk/">Stuff & Nonsense</a> in 1998. They’ve helped companies around the world to improve their designs by providing consulting and design expertise.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35625e96-7f38-4d1f-8797-07cb5c39796b/6-art-direction-for-the-web-extras-author.jpg"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35625e96-7f38-4d1f-8797-07cb5c39796b/6-art-direction-for-the-web-extras-author.jpg" alt="The back cover of the book"></a><figcaption> Back cover (Image credit: <a target="_blank" href="https://www.flickr.com/photos/marcthiele/">Marc Thiele</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35625e96-7f38-4d1f-8797-07cb5c39796b/6-art-direction-for-the-web-extras-author.jpg">Large preview</a>)<br /> </figcaption></figure> <p>Andy has written several popular books on website design and development, including <em>Hardboiled Web Design: Fifth Anniversary Edition</em>, <em>Hardboiled Web Design</em>, and <em>Transcending CSS: The Fine Art Of Web Design</em>. He’s a popular speaker and gives talks about art direction and design-related topics all over the world.</p> <h3>Why This Book Is For You</h3> <p>The book goes beyond teaching how to use the new technologies on the web. It delves deeply into how the craft of art direction could be applied to every project we work on.</p> <ol> <li>Perfect <strong>for designers and front-end developers</strong> who want to challenge themselves and break out of the box,</li> <li>Show how to use art direction for digital products without being slowed down by its intricacies,</li> <li>Features <strong>examples of classic art direction</strong> from adverts and magazines from innovative art directors like Alexey Brodovitch, Bea Feitler, and Neville Brody.</li> <li>Shows how to use type, composition, images and grids to create compelling responsive designs,</li> <li>Illustrates how to <strong>create impact</strong>, stand out, be memorable and improve conversions,</li> <li>Explains how to maintain brand values and design principles by connecting touch points across marketing, product design, and websites.</li> <li><em>Packed</em> with practical examples using CSS Grid, CSS Shapes and good ol’ Flexbox,</li> <li>Explains how to <strong>integrate art direction into your workflow</strong> without massive cost and time overhead.</li> </ol> <p>Art direction matters to the stories we tell and the products we create, and with <em>Art Direction for the Web</em>, Andy shows that the only remaining limit to our creativity on the web is our own imagination.</p> <p><strong>Download a sample</strong>: <a target="_blank" href="https://smashed.by/artdirectionexcerpt" rel="noopener">PDF</a>, <a target="_blank" href="http://provide.smashingmagazine.com/eBooks/art-direction-for-the-web-excerpt.epub" rel="noopener">ePUB</a>, <a target="_blank" href="http://provide.smashingmagazine.com/eBooks/art-direction-for-the-web-excerpt.mobi" rel="noopener">Amazon Kindle</a>.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/506ac601-f948-453c-873c-47706142ff00/6-art-direction-for-the-web-extras.jpg"><img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/506ac601-f948-453c-873c-47706142ff00/6-art-direction-for-the-web-extras.jpg" alt="The new Smashing book, ‘Art Direction for the Web' written by Andy Clarke"></a></figure> <div> <nav> <ul> <li> <button>eBook</button> </li> <li> <button>Hardcover</button> </li> </ul> </nav> <div> <h3><span>eBook</span></h3> <p><span>$19</span><a target="_blank" href="https://www.smashingmagazine.com/ebooks/art-direction-for-the-web-ebook/">Get the eBook</a></p> <p>PDF, ePUB, Kindle.<br />Free for <a target="_blank" href="https://www.smashingmagazine.com/membership">Smashing Members</a>.</p> </p></div> <div> <h3><span>Hardcover</span></h3> <p><span><span>$39</span></span><a target="_blank" href="https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/">Get Print + eBook</a></p> <p>Printed, quality hardcover.<br />Free airmail worldwide shipping.</p> </p></div> </div> <h3>Happy Reading, Everyone!</h3> <p>We hope you love the book as much as we do. Of course it’s art-directed, and it took us months to arrange the composition for every single page. We kindly thank Natalie Smith for wonderful illustrations, Alex Clarke and Markus Seyfferth for typesetting, Rachel Andrew for technical editing, Andy Clarke for his art direction and patience, and Owen Gregory for impeccable editing.</p> <p>We can’t wait to hear your stories of how the book will you design experiences that stand out. Even if after reading this book, you’ll <strong>create something that will stand the test of a few years</strong>, that’s an aim that the book was worth writing for. <em>Happy reading, everyone!</em></p> <div> <span>(vf, il, ms, cm, ac)</span> </div> </article> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2235972"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/24/5-steps-for-successfully-offboarding-web-design-projects/" rel="bookmark">5 Steps for Successfully Offboarding Web Design Projects</a></h2> <div class="info"> <span class="date">April 24th, 2019</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/24/5-steps-for-successfully-offboarding-web-design-projects/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://www.webdesignerdepot.com/2019/04/5-steps-for-successfully-offboarding-web-design-projects/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/AND-CO.jpg" title="" alt=""></a></div> <p> As you draw closer to the finish line with a website, does your client see it just as clearly as you do? Or are they still wavering on design and copy choices even while you’re in the final stages of QA, or talking about additional features they’ll want to add to the site “some day”?</p> <p>Unless you are getting paid — and paid well — for every single hour you put into a website, you have to be willing to enforce a final stopping point. If you don’t, your client will undoubtedly play the “What about this? Or this?” game for as long as you allow them to.</p> <p>And you can’t afford to do that. You have other clients whose websites deserve your attention.</p> <p>Just as you have created an <a target="_blank" href="https://www.webdesignerdepot.com/2019/04/7-steps-to-successfully-onboarding-design-clients/">onboarding process</a> to smoothly kick off a new website project, you must do the same with an offboarding process.</p> <h1>Step 1: Collect Your Final Payment</h1> <p>Once the client has given you the approval on the finished website, you push it live. After some light testing to confirm that all is well on the live domain, it’s time to initiate the offboarding process.</p> <p>You’ll do this by sending along the last invoice. Better yet, your invoicing software should automatically be configured to do this upon reaching the final project milestone.</p> <p>My favorite tool to do this with is <a target="_blank" href="https://app.and.co/invoices">AND CO</a>.</p> </p> <p>That’s because you can do everything in here:</p> <ul> <li>Create a proposal;</li> <li>Send the contract;</li> <li>Track your time;</li> <li>Send invoices.</li> </ul> <p>Because each of these elements exist within the same place, setting up and scheduling invoices based on your project’s milestones (including the launch date) is really easy to do.</p> <p>Don’t move on to the next steps until you collect the payment due though. Letting a client go any more than seven days after the project’s end without final payment simply invites them to ask you to do more work.</p> <h1>Step 2: Send the Wrap-up Email</h1> <p>Upon confirming receipt of payment, send your client a wrap-up email.</p> <p>This doesn’t have to be lengthy. The goal is to get them to schedule the closing call as soon as possible. Something like this should work:</p> <p><i>Greetings, [client name]!<br /></i><i>I wanted to thank you for the opportunity to build this website for [company name]. I hope you’re just as pleased with it as I am!<br /></i><i>I know you’re excited to put this website to work for you now that you have it, but I have just a few things I want to show you as we wrap up.<br /></i><i>When you have a moment, please go to my </i><i>Calendly</i><i> and schedule a 15-minute Wrap-Up Session for some time this week. <br /></i><i>During this call, I’ll give you a behind-the-scenes tour of your website and show you how to edit your content. Afterwards, I will send along the login credentials you need to manage your website along with all of your design assets.<br /></i><i>Talk soon.</i></p> <p>As I mentioned in the message above, <a target="_blank" href="https://calendly.com/">Calendly</a> is the tool I use to simplify my scheduling with clients.</p> <p><a target="_blank" href="https://calendly.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/Calendly.jpg" width="650" title="" alt=""></a></p> <p>All you have to do is create an event (like “Client Offboarding” or “Client Onboarding”), set up your availability, and then send the link to your clients to pick a time when you’re free. It makes life so much easier.</p> <h1>Step 3: Do the Wrap-Up Video Call</h1> <p>This final call with your client needs to be done over video or, at the very least, a screen-share. For this, I’d suggest using <a target="_blank" href="https://zoom.us/">Zoom</a>.</p> <p><a target="_blank" href="https://zoom.us/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/Zoom.png" width="650" title="" alt=""></a></p> <p>The above example is how I used to do my offboarding calls with WordPress clients.</p> <p>I’d log into their website and then give them an orientation of all of the key areas they needed to know. I’d show them how to create a post, how to create a page, and explain the difference between the two. I’d also show them important areas like the Media folder, the area to manage Users, and maybe a few other things.</p> <p>This “training” call is yours to do with as you like. Just make sure the client walks away feeling confident in taking the reins over from you.</p> <h1>Step 4: Deliver the Remaining Pieces</h1> <p>The website is done, you’ve collected the payment, and you’ve had the final call with your client. Now, it’s time to deliver the remaining pieces you owe them.</p> <p><b>Logins</b> – If you created any accounts from-scratch (e.g. WordPress, web hosting, social media, etc.), send along the login credentials.</p> <p><b>Style guide</b> – Did you create a style guide for the client? Package it up in a professional-looking PDF and send it over in case they decide to work with another designer in the future.</p> <p><b>Design assets</b> – Again, on the off chance they work with someone else, you’ll want to send along the design assets you created in their native formats.</p> <p><b>Licenses</b> – You may have licensed certain assets during this project, like stock photos or <a target="_blank" href="https://www.webdesignerdepot.com/2019/01/the-right-wrong-way-to-use-templates/">design templates</a>. If that’s the case, you’ll need to bill them for the licenses (if you haven’t already) and transfer ownership to them now.</p> <p>While you could send these along before the wrap-up call, you run the risk of the clients taking the materials and running away… Only to show up months later wanting to know what all this stuff is, what they’re supposed to do with it, and wondering if you’ll have time to walk them through the website <i>now</i>.</p> <p>Or they don’t open any of it and then message you months down the line, urgently demanding access to their site, files, etc. To avoid this from happening, clearly label everything and send it along in a shared <a target="_blank" href="https://www.dropbox.com/">Dropbox</a> folder.</p> <p><a target="_blank" href="https://www.dropbox.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/Dropbox.jpg" width="650" title="" alt=""></a></p> <p>Even if they lose the link to the Dropbox folder at any point, you don’t have to repackage up all their stuff again. You can simply grab the link from your end and resend.</p> <h1>Step 5: Follow Up in 60 Days</h1> <p>Set a reminder in your <a target="_blank" href="https://www.webdesignerdepot.com/2018/10/project-management-templates-the-key-to-improving-your-workflow/">project management template</a> to follow up with website clients 60 days after the wrap-up. This will give them enough time to sit with the website and either:</p> <ul> <li>Become really comfortable using it;</li> <li>Realize it’s too much work.</li> </ul> <p>Either way, it’s a good idea to check in.</p> <p><b>If they’re taking good care of the website</b> and using it to promote their business, that’s great. This email will simply serve as a reminder that you remain their trusted ally and you’re here if they ever need anything.</p> <p><b>And if they’re not taking care of it</b>, this is an excellent opportunity to offer your assistance in providing (paid) <a target="_blank" href="https://www.webdesignerdepot.com/2018/10/should-you-sell-website-support-or-maintenance-services/">support and maintenance</a>.</p> <h1>Bringing Projects to a Close with an Offboarding Process</h1> <p>If you’ve done a good job of <a target="_blank" href="https://www.webdesignerdepot.com/2019/03/6-things-to-discuss-with-your-web-developer-before-kickoff/">setting expectations with your client</a> from the start, bringing a project to a close should be no problem.</p> <p>Then again, you know how clients can get. They’re so excited to actually have a website now that they can’t stop imagining the possibilities. So long as you’ve delivered what they paid for, though, you are under no obligation to keep this project open to entertain those ideas unless they start a new contract with you.</p> <p>Use this offboarding checklist to ensure you give each of your web design projects as strong and <i>final</i> a close as possible.</p> </p> <p><em>Featured image <a target="_blank" href="https://unsplash.com/photos/FSFfEQkd1sc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">via Unsplash</a>.</em></p> <table width="100%"> <tr> <td valign="center"> <a target="_blank" href="https://www.mightydeals.com/deal/sketchit.html?ref=inwidget"><b>Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!</b></a> </td> <td width="90"> <a target="_blank" href="http://www.mightydeals.com/?ref=inwidget"><br /><img decoding="async" loading="lazy" src="https://mightydeals.com/web/images/widget-logo.png" height="40" width="90" border="0" title="" alt=""><br /></a> </td> </tr> </table> <p><a target="_blank" href="https://www.webdesignerdepot.com/2019/04/5-steps-for-successfully-offboarding-web-design-projects/">Source</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2235663"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/24/ai-fintech-are-these-prone-to-cybersecurity-threats/" rel="bookmark">AI & Fintech: Are these prone to cybersecurity threats?</a></h2> <div class="info"> <span class="date">April 24th, 2019</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/24/ai-fintech-are-these-prone-to-cybersecurity-threats/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/SeBMCrn8m2w/ai-fintech-are-these-prone-to-cybersecurity-threats.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2019/04/ai-for-cybersecurity-in-finance-current-applications.jpg" alt=""></a></div> <div></div> <p>With the improvement in technology, more and more players are joining the bandwagon to leverage it. </p> <p>One of the late entrants is the finance sector also referred to as fintech companies who use technology to offer their services. </p> <p>Off late, fintech is catering to a wide array of customers by rolling out solutions that impact nearly everyone. With the right technology in place, they broadened their reach while significantly increasing the flexibility and innovation level of financial services. </p> <p>While there is technology in the finance industry, on one hand, there’s Artificial intelligence too introduced as a way to simplify human lives by integrating in a day to day life. And in the same manner, AI is integrated with the fintech to offer exceptional services in the simplest possible manner. But, with the increase in digital services and transactions, the vulnerabilities to have increased significantly. Not to mention, the cyber threat remains an all-time high for the online financial transaction and this why Fintech companies are aware of it too. Here’s where AI app development comes to play to by introducing smart applications and programs making it difficult or rather treacherous to access for the cybercriminals to hack systems. </p> <p>Like any other technology, AI to carries a certain amount of threats and this is why utmost care must be taken while implementing the same for Fintech. Conditioning AI for future vulnerabilities is one way to get things started. </p> <h3><strong>Enabling AI to distinguish between the access </strong></h3> <p>Since AI is a system that is designed in a way to remain value-agnostic, feeding the understanding of Good and Wrongful access is a must as a safety measure against cyber threats. Being a value-agnostic concept, AI is not naturally capable to differentiate between the ethical transactions versus the wrongly intended ones. This is because the login condition tends to remain the same for each transaction/attempt. </p> <p>For example, imagine a user moving his/her funds digitally from New York to London and then to Paris, and back again. You can expect a sizeable dip along the way due to different taxation policies and rate. Usually, a transaction of such nature will go down in the books of accounts as “usual business” under the AI engine scanner. Such transactions in the FinTech world will involve plenty of intricate calculations that refer to jurisdictions and statutes. Here’s when human intervention is required and that’s when the vulnerability is exposed. The AI will not be able to make any discretionary judgment and ethics and hence security becomes the primary concern. </p> <h3><strong>Regulating the Access Control</strong></h3> <p>One of the major cybersecurity vulnerabilities involves access control to a certain set of data in the fintech industry. For AI to control the access to data for security purpose, it gets difficult to manage the data security. The biggest vulnerability is that of the ability of cybercriminals and hackers to bypass the access controls with an aim to steal information or even pose as another legitimate individual. </p> <p>They try to leverage identity theft for engaging in the phishing schemes. For fintech companies, the first line of defense to negate the power of unauthorized access is that of introducing e-signatures as a mandatory protocol for authorizing the business transaction. One can also involve other complex access control for advance security that involves bio-signatures or even biometric authorization that involves retina or irises scan, fingerprint login, etc. </p> <h3><strong>Making the best use of AI and RPA for a Dynamic Security</strong></h3> <p>AI has limited power to control security because of its scope. Perhaps, this is the reason why there is a difference between Robotic Process Intelligence (RPA) and AI. For any security engineer responsible for the fintech company’s security, the line between RPA and AI shouldn’t be blurred at any cost. </p> <p>One has to move beyond the conventional idea of a security level when it comes to fighting vulnerabilities faced by fintech corporations. You can use RPA for a set of iterative tasks that involves protocol verification, ownership verification, and even monitoring and ensuring the right balance mechanisms. </p> <p>And when it comes to security for banks, merely employing an intelligent system acting as a cybersecurity gatekeeper is not enough. This is because a banking transaction has far more depth than any other online transactions as it involves routing digital currency thru multiple devices and storage spaces. </p> <p>This is where the breaching opportunities are opened up and vulnerabilities are exposed at each point. Engineering a static AI solution cannot cater to such all-pervasive threats, especially when fintech industry is experiencing a higher frequency of ‘zero-day’ attacks. The <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cudm90aXJvLmNvbS8yMDE4LXRoZS1mb3VyLXplcm8tZGF5LWF0dGFjay1zdGF0cy1hbmQtdHJlbmRzLw%3D%3D&feed-stats-url-post-id=107492">76% of zero-day cybersecurity attacks</a> took place in 2018 that stemmed from sources that were entirely unaccustomed for.</p> <h3><strong>Doing away with the defensive, negative attitude </strong></h3> <p>Challenges are everywhere, and most often when businesses face challenges on the technology front, the mindset differs. Much key business personnel are left feeling that it’s only a matter of time before their systems are hacked. The question boils down to ‘when will it get hacked’ rather than ‘will it ever’ or even better, ‘if it can get hacked’?</p> <p>Here’s where the half battle is lost. One has to understand that AI is nothing sort of a magic bullet aiding the modern cybersecurity complexities. Fintech sites and transactions will inevitably need AI integrations to ensure safety. The benefits of bringing inefficiencies will evolve in the coming times as AI too wears off the age and presents a wider scope with deeper securities in terms of reducing manual efforts, and bringing down the salary costs while ensuring timeliness. </p> <p>The best way to tackle threats is not to surrender to the idea of ‘one-stop-solution’ when it comes to securing transactions thru AI. The key is to look at the incremental transformation by taking an example from the likes of PayPal who are immune to large scale as they have adopted a continuous testing approach that keeps vulnerabilities at check. </p> <h4><strong>Conclusion</strong></h4> <p>The blend of Artificial intelligence in the fintech has become integral to both the industry wherein a dedicated <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cucGVlcmJpdHMuY29tL21vYmlsZS1hcHBsaWNhdGlvbi1kZXZlbG9wbWVudC5odG1s&feed-stats-url-post-id=107492">mobile app development company</a> plays a major role in bridging the gap. </p> <p>This is because banking and investment have moved beyond the traditional brick and mortar way where even institutions are encouraging people to move their finances digital. </p> <p>And this is why we see many traditional banks pair up with fintech firms to blend in the best of both worlds. And hence, ensuring the safety of all such transactions that take place on their portal becomes the liability for the banking and financial institutes. </p> <p>Any failure in that regard will have customers losing faith in them and even risking the future prospects of investors as they fear to operate online. </p> <p>Customers too have evolved when it comes to picking the fintech companies as they tend to go for the one that follows regulations and best practices. </p> <p>They also consider whether or not such firms had any cyberattacks history and checks how well the company utilize precautions for cybersecurity.</p> <p></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2234538"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/23/who-are-design-systems-for/" rel="bookmark">Who Are Design Systems For?</a></h2> <div class="info"> <span class="date">April 23rd, 2019</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/23/who-are-design-systems-for/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/who-are-design-systems-for/"><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-10-at-7.27.32-AM.png" alt=""></a></div> <p><em>Specific</em> design systems, I mean. Design systems, as a concept, are something just about any site can benefit from.</p> <p>A lot of hype goes into design systems these days. Just the other day, an organization’s published their design system publicly and I got a slew of DMs, emails, and Slack messages encouraging me to check it out. “Looks good to me,” I said. But I’m merely knocking on the hood of a new car, so to speak. I haven’t sat in it. I haven’t driven it around the block, let alone driven it cross-country or tried to dig Cheerios out from between the seats. I’m sure I’d have more opinions after building a site or 10 with it (excuse the mixed metaphors). </p> <p>So that leads me to a few questions. <em>Can</em> I build a site with this design system? <em>Should</em> I build a site with it? Is it for <em>me</em>? Or wait… who <em>is</em> this for?</p> <p><span></span></p> <h3>They all have accordions.</h3> <p>Well not <em>all</em> of them, but bear with me, because there is a point to be made.</p> <p><video src="https://css-tricks.com/wp-content/uploads/2019/04/accordion.mp4" controls></video></p> <h3>Bootstrap has an accordion too! Developers totally understand Bootstrap.</h3> <p>Whatever you think of it, I don’t see much confusion around Bootstrap. You link up the CSS, you use the HTML they give you and — ? — you have components that are ready to rock.</p> <figure></figure> <p>It’s possible that Bootstrap is a more of a “pattern library” than a “design system.” I dunno. There is probably something to that distinction, but the naming semantics (if there are any) seem to be used interchangeably, so distinguishing Bootstrap as one or the other doesn’t alleviate any confusion.</p> <p>Developers reach for Bootstrap because…</p> <ul> <li>It helps them build faster.</li> <li>They get good quality “out of the box” if they aren’t particularly great at HTML and CSS themselves.</li> <li>They want to be accessible and Bootstrap has been through the accessibility ringer.</li> <li>[Insert your reason.]</li> </ul> <p>Appealing, yet these seem to be somewhat table stakes for any design system and not exclusive to Bootstrap alone.</p> <h3>Hmmmm… Maybe I’ll have a gander around and choose a non-Bootstrap solution for my next project.</h3> <p>A lot of people are in this boat.</p> <p>Maybe the next project is React so we want a design system that makes React a first-class citizen. Maybe we had trouble customizing Bootstrap to our liking. Maybe we just saw the default look of another design system and thought that would be a better fit. Maybe we are just bored of Bootstrap. Lots of reasons to look outside of Bootstrap, just as there are lots of reasons to look to it.</p> <h3>Since other design systems have accordions, too, can’t I just… pick one?</h3> <p>Sorta?</p> <p>One immediate consideration is the license. Salesforce’s <a target="_blank" href="https://www.lightningdesignsystem.com/">Lightning Design System</a> is often pointed to as a leader in the world of design systems and has influenced a lot of the current thinking around them. Yet, it is <a target="_blank" href="https://github.com/salesforce-ux/design-system/blob/master/LICENSE.txt">not open source licensed</a>.</p> <p>That’s not a problem — it’s probably a <em>good</em> thing for Lightning. It’s not a general purpose grab-it-and-go for <em>all web developers on Earth</em> as the target audience. It’s for Salesforce and the slew of teams on different development stacks <em>building things for Salesforce</em>. If you’re not building a Salesforce thing, it’s not for you.</p> <p>Then why is it public and not some internal document for the Salesforce team? I can’t answer for them, but as I understand it, Salesforce is so enormous that they have both internal and external teams using it. So, perhaps making Lightning a public document is the most useful way to make it available to everyone who needs it.</p> <blockquote> <p lang="en" dir="ltr">This is something we’re actively discussing on the SLDS team. What exactly does “open source” mean to design systems when the usage is so specific? Is it more “source available?</p> <p>— Alexis Córdova (@acordova) <a target="_blank" href="https://twitter.com/acordova/status/1115685088598024192?ref_src=twsrc%5Etfw">April 9, 2019</a></p> </blockquote> <p>There’s also the nice side effect that they get good press for it, and that can’t hurt hiring efforts. I’ve also heard having a public design system can <a target="_blank" href="https://twitter.com/emplums/status/1115716456765775872">spark interesting and useful conversations</a>. </p> <p><a target="_blank" href="https://www.carbondesignsystem.com/">Carbon Design System</a>, on the other hand, <a target="_blank" href="https://github.com/carbon-design-system/carbon/blob/master/LICENSE">is open source licensed</a>. They also have an entire section explaining <a target="_blank" href="https://www.carbondesignsystem.com/getting-started/about-carbon#who-is-carbon-for">who should use the system</a>:</p> <blockquote> <p>Carbon is the official implementation of the IBM Design Language for product and web designers, and represents an ever-growing ecosystem of design assets and guidance. With a comprehensive set of human interface guidelines, design kits, and documentation, Carbon helps designers work faster and smarter.</p> </blockquote> <p>That doesn’t <em>quite</em> tell me what I want to know. It looks like IBM stuff out of the box, so it’s definitely for IBM. </p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/carbon.png" alt=""></figure> <p>It’s open source so I <em>can</em> use it if I want to. But is it <em>really</em> for me and my random projects? Do they <em>want</em> me to use it for that? Am <em>I</em>, random developer, who they are thinking about with this project? Or is it IBM-first, random developer second? </p> <h3>Company first, the world second.</h3> <p>If a design system <em>is</em> by a company, then it’s <em>for</em> the company. It might also be open source, but any ol’ random developer who wants to use it isn’t the target audience. </p> <p>It might not even technically be a company who makes it. It could be a government! </p> <p>One really great design system is the <a target="_blank" href="https://v2.designsystem.digital.gov/">U.S. Web Design System</a>, which just <a target="_blank" href="https://v2.designsystem.digital.gov/whats-new/updates/2019/04/08/introducing-uswds-2-0/">went 2.0</a>. It’s gorgeous! It looks very complete and has some great features. It’s got a classy custom font, it was designed with incremental adoption in mind, it has both useful components as well as utilities, and was built atomically from <a target="_blank" href="https://css-tricks.com/what-are-design-tokens/">design tokens</a>. Perhaps the best feature is that it’s <em>extremely accessible</em> because it has to be <em>by law</em>. </p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-12-at-7.54.45-AM.png" alt=""></figure> <p>The U.S. Web Design System is <a target="_blank" href="https://github.com/uswds/uswds/blob/develop/LICENSE.md">mostly public domain</a>, so you totally can use it. But it’s not designed with you in mind; it’s designed to help people who make website for the government. </p> <p>(By the way, The U.S. Web Design System is open to contribution, which is pretty cool because it’s a way you could make a significant impact on websites that are very important to people’s lives.)</p> <blockquote> <p lang="en" dir="ltr">My mindset is that open source design systems are not meant be reused and spin up for yourself, but to learn from and apply to your own</p> <p>— Mike Dick (@miked1ck) <a target="_blank" href="https://twitter.com/miked1ck/status/1115716465884258304?ref_src=twsrc%5Etfw">April 9, 2019</a></p> </blockquote> <h3>Here’s another kicker: There is a spectrum of customizability to design systems, on purpose.</h3> <p>Even if you technically <em>can</em> use a public design system you’ve found and like, you might consider the customizability angle. There is a whole spectrum to this, but let’s consider the extreme edges and middle:</p> <ul> <li><strong>Zero Customizability</strong>: We built this to strongly enforce consistency for ourselves.</li> <li><strong>Pre-Selected Variations</strong>: We’ve got accordions in three different colors.</li> <li><strong>BYO Theme</strong>: We’ll give you a skeleton that loosely achieves the pattern and you apply the styles to your liking.</li> </ul> <p>There are design systems at all points on this spectrum. Bootstrap might be in between the last two, where you get a fully styled theme, but customizability largely comes via setting Sass variables and that creates infinite variations.</p> <p><a target="_blank" href="https://polaris.shopify.com/">Polaris</a>, Shopify’s design system, is open source, but definitely for Shopify stuff. They are intentionally <em>not</em> trying to do what Bootstrap does. It’s far more about enforced consistency and adhering to a cohesive brand than it is slapping together and customizing a page.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-12-at-8.45.38-AM.png" alt=""></figure> <p><a target="_blank" href="https://material.io/">Material Design</a> is definitely Google’s thing. In its early days, I feel like the messaging was that this is Google’s cohesive design work. But these days, they definitely encourage <a target="_blank" href="https://material-components.github.io/material-components-web-catalog/#/">other developers to use it</a> too. If you do, your thing will look a lot like a Google thing. Maybe that’s what you want, maybe it’s not. Either way, you should know what you’re getting into. </p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-12-at-1.58.37-PM.png" alt=""></figure> <p>Google’s take on customizability so far is <a target="_blank" href="https://material.io/tools/theme-editor/">a Sketch plugin</a>. They have no incentive to allow for a level of customization to make things <em>not</em> look like Google, because that would be antithetical to the whole thing. </p> <hr> <p>In case this isn’t obvious (and I very much fear that it isn’t), design systems aren’t a commodity. We don’t get to simply pick the one that has the nicest accordion and use it on the next project. We might not even be allowed to use it. It might be intentionally branded for a specific company. There are all kinds of factors to consider here.</p> <p>My parting advice is actually to the makers of public design systems: <strong>clearly identify who this design system is for and what they are able to do with it.</strong></p> <p>I’d also like to note that everyone who I’ve brought this up to in the last few weeks has had different opinions about all this target audience messaging stuff in design systems. Of course, I’d love to read your comments about how you feel about it.</p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/who-are-design-systems-for/">Who Are Design Systems For?</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2234230"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/23/the-circle-of-a-react-lifecycle/" rel="bookmark">The Circle of a React Lifecycle</a></h2> <div class="info"> <span class="date">April 23rd, 2019</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/23/the-circle-of-a-react-lifecycle/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes.</p> <p>Those phases are:</p> <ul> <li>mounting</li> <li>updating</li> <li>unmounting</li> <li>error handling</li> </ul> <p>There are methods in each of these phases that make it possible to perform specific actions on the component during that phase. For example, when fetching data from a network, you’d want to call the function that handles the API call in the <code>componentDidMount()</code> method, which is available during the mounting phase.</p> <p>Knowing the different lifecycle methods is important in the development of React applications, because it allows us to trigger actions exactly when they’re needed without getting tangled up with others. We’re going to look at each lifecycle in this post, including the methods that are available to them and the types of scenarios we’d use them.</p> <p><span></span></p> <h3>The Mounting Phase</h3> <p>Think of <strong>mounting</strong> as the initial phase of a component’s lifecycle. Before mounting occurs, a component has yet to exist — it’s merely a twinkle in the eyes of the DOM until mounting takes place and hooks the component up as part of the document. </p> <p>There are plenty of methods we can leverage once a component is mounted: <code>constructor()</code> , <code>render()</code>, <code>componentDidMount()</code> and <code>static getDerivedStateFromProps()</code>. Each one is handy in it’s own right, so let’s look at them in that order.</p> <h4>constructor()</h4> <p>The <code>constructor()</code> method is expected when state is set directly on a component in order to bind methods together. Here is how it looks:</p> <pre><code>// Once the input component is mounting... constructor(props) { // ...set some props on it... super(props); // ...which, in this case is a blank username... this.state = { username: '' }; // ...and then bind with a method that handles a change to the input this.handleInputChange = this.handleInputChange.bind(this); }</code></pre> <p>It is important to know that the constructor is the first method that gets called as the component is created. The component hasn’t rendered yet (that’s coming) but the DOM is aware of it and we can hook into it before it renders. As a result, this isn’t the place where we’d call <code>setState()</code> or introduce any side effects because, well, the component is still in the phase of being constructed!</p> <p>I wrote up a <a target="_blank" href="https://css-tricks.com/working-with-refs-in-react/">tutorial on refs</a> a little while back, and once thing I noted is that it’s possible to set up ref in the constructor when making use of <code>React.createRef()</code>. That’s legit because refs is used to change values without props or having to re-render the component with updates values:</p> <pre><code>constructor(props) { super(props); this.state = { username: '' }; this.inputText = React.createRef(); }</code></pre> <h4>render()</h4> <p>The <code>render()</code> method is where the markup for the component comes into view on the front end. Users can see it and access it at this point. If you’ve ever created a React component, then you’re already familiar with it — even if you didn’t realize it — because it’s required to spit out the markup.</p> <pre><code>class App extends React.Component { // When mounting is in progress, please render the following! render() { return ( <div> <p>Hello World!</p> </div> ) } }</code></pre> <p>But that’s not all that <code>render()</code> is good for! It can also be used to <a target="_blank" href="https://css-tricks.com/render-children-in-react-using-fragment-or-array-components/">render an array of components</a>:</p> <pre><code>class App extends React.Component { render () { return [] <h2>JavaScript Tools</h2>, <Frontend />, <Backend /> ] } }</code></pre> <p>…and even fragments of a component:</p> <pre><code>class App extends React.Component { render() { return ( <React.Fragment> <p>Hello World!</p> </React.Fragment> ) } }</code></pre> <p>We can also use it to render components outside of the DOM hierarchy (a la <a target="_blank" href="https://css-tricks.com/using-react-portals-to-render-children-outside-the-dom-hierarchy/">React Portal</a>):</p> <pre><code>// We're creating a portal that allows the component to travel around the DOM class Portal extends React.Component { // First, we're creating a div element constructor() { super(); this.el = document.createElement("div"); } // Once it mounts, let's append the component's children componentDidMount = () => { portalRoot.appendChild(this.el); }; // If the component is removed from the DOM, then we'll remove the children, too componentWillUnmount = () => { portalRoot.removeChild(this.el); }; // Ah, now we can render the component and its children where we want render() { const { children } = this.props; return ReactDOM.createPortal(children, this.el); } }</code></pre> <p>And, of course, <code>render()</code> can — ahem — render numbers and strings…</p> <pre><code>class App extends React.Component { render () { return "Hello World!" } }</code></pre> <p>…as well as <code>null</code> or Boolean values:</p> <pre><code>class App extends React.Component { render () { return null } }</code></pre> <h4>componentDidMount()</h4> <p>Does the <code>componentDidMount()</code> name give away what it means? This method gets called after the component is mounted (i.e. hooked to the DOM). In another tutorial I wrote up on <a target="_blank" href="https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/">fetching data in React</a>, this is where you want to make a request to obtain data from an API.</p> <p>We can have your fetch method:</p> <pre><code>fetchUsers() { fetch(`https://jsonplaceholder.typicode.com/users`) .then(response => response.json()) .then(data => this.setState({ users: data, isLoading: false, }) ) .catch(error => this.setState({ error, isLoading: false })); }</code></pre> <p>Then call the method in <code>componentDidMount()</code> hook:</p> <pre><code>componentDidMount() { this.fetchUsers(); }</code></pre> <p>We can also add event listeners:</p> <pre><code>componentDidMount() { el.addEventListener() }</code></pre> <p>Neat, right?</p> <h4>static getDerivedStateFromProps()</h4> <p>It’s kind of a long-winded name, but <code>static getDerivedStateFromProps()</code> isn’t as complicated as it sounds. It’s called before the <code>render()</code> method during the mounting phase, and before the update phase. It returns either an object to update the state of a component, or <code>null</code> when there’s nothing to update.</p> <p>To understand how it works, let’s implement a counter component which will have a certain value for its <code>counter</code> state. This state will only update when the value of <code>maxCount</code> is higher. <code>maxCount</code> will be passed from the parent component.</p> <p>Here’s the parent component:</p> <pre><code>class App extends React.Component { constructor(props) { super(props) this.textInput = React.createRef(); this.state = { value: 0 } } handleIncrement = e => { e.preventDefault(); this.setState({ value: this.state.value + 1 }) }; handleDecrement = e => { e.preventDefault(); this.setState({ value: this.state.value - 1 }) }; render() { return ( <React.Fragment> <section className="section"> <p>Max count: { this.state.value }</p> <button onClick={this.handleIncrement} class="button is-grey">+</button> <button onClick={this.handleDecrement} class="button is-dark">-</button> </section> <section className="section"> <Counter maxCount={this.state.value} /> </section> </React.Fragment> ) } }</code></pre> <p>We have a button used to increase the value of <code>maxCount</code>, which we pass to the <code>Counter</code> component.</p> <pre><code>class Counter extends React.Component { state={ counter: 5 } static getDerivedStateFromProps(nextProps, prevState) { if (prevState.counter < nextProps.maxCount) { return { counter: nextProps.maxCount }; } return null; } render() { return ( <div className="box"> <p>Count: {this.state.counter}</p> </div> ) } }</code></pre> <p>In the <code>Counter</code> component, we check to see if <code>counter</code> is less than <code>maxCount</code>. If it is, we set <code>counter</code> to the value of <code>maxCount</code>. Otherwise, we do nothing.</p> <p>You can play around with the following Pen below to see how that works on the front end:</p> <p> <span>See the Pen <a target="_blank" href="https://codepen.io/kinsomicrote/pen/oVzJBp/"><br /> getDerivedStateFromProps</a> by Kingsley Silas Chijioke (<a target="_blank" href="https://codepen.io/kinsomicrote">@kinsomicrote</a>)<br /> on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span> </p> <hr> <h3>The Updating Phase</h3> <p>The <strong>updating</strong> phase occurs when a component when a component’s <code>props</code> or <code>state</code> changes. Like mounting, updating has its own set of available methods, which we’ll look at next. That said, it’s worth noting that both <code>render()</code> and <code>getDerivedStateFromProps()</code> also get triggered in this phase.</p> <h4>shouldComponentUpdate()</h4> <p>When the <code>state</code> or <code>props</code> of a component changes, we can make use of the <code>shouldComponentUpdate()</code> method to control whether the component <em>should</em> update or not. This method is called before rendering occurs and when state and props are being received. The default behavior is <code>true</code>. To re-render every time the state or props change, we’d do something like this:</p> <pre><code>shouldComponentUpdate(nextProps, nextState) { return this.state.value !== nextState.value; }</code></pre> <p>When <code>false</code> is returned, the component does not update and, instead, the <code>render()</code> method is called to display the component.</p> <h4>getSnapshotBeforeUpdate()</h4> <p>One thing we can do is capture the state of a component at a moment in time, and that’s what <code>getSnapshotBeforeUpdate()</code> is designed to do. It’s called after <code>render()</code> but before any new changes are committed to the DOM. The returned value gets passed as a third parameter to <code>componentDidUpdate()</code>.</p> <p>It takes the previous state and props as parameters:</p> <pre><code>getSnapshotBeforeUpdate(prevProps, prevState) { // ... }</code></pre> <p>Use cases for this method are kinda few and far between, at least in my experience. It is one of those lifecycle methods you may not find yourself reaching for very often.</p> <h4>componentDidUpdate()</h4> <p>Add <code>componentDidUpdate()</code> to the list of methods where the name sort of says it all. If the component updates, then we can hook into it at that time using this method and pass it previous <code>props</code> and <code>state</code> of the component.</p> <pre><code>componentDidUpdate(prevProps, prevState) { if (prevState.counter !== this.state.counter) { // ... } }</code></pre> <p>If you ever make use of <code>getSnapshotBeforeUpdate()</code>, you can also pass the returned value as a parameter to <code>componentDidUpdate()</code>:</p> <pre><code>componentDidUpdate(prevProps, prevState, snapshot) { if (prevState.counter !== this.state.counter) { // .... } }</code></pre> <hr> <h3>The Unmounting Phase</h3> <p>We’re pretty much looking at the inverse of the mounting phase here. As you might expect, <code>unmounting</code> occurs when a component is wiped out of the DOM and no longer available.</p> <p>We only have one method in here: <code>componentWillUnmount()</code></p> <p>This gets called before a component is unmounted and destroyed. This is where we would want to carry out any necessary clean up after the component takes a hike, like removing event listeners that may have been added in <code>componentDidMount()</code>, or clearing subscriptions.</p> <pre><code>// Remove event listener componentWillUnmount() { el.removeEventListener() }</code></pre> <hr> <h3>The Error Handling Phase</h3> <p>Things can go wrong in a component and that can leave us with errors. We’ve had <a target="_blank" href="https://css-tricks.com/handling-errors-with-error-boundary/">error boundary</a> around for a while to help with this. This error boundary component makes use of some methods to help us handle the errors we could encounter.</p> <h4>getDerivedStateFromError()</h4> <p>We use <code>getDerivedStateFromError()</code> to catch any errors thrown from a descendant component, which we then use to update the state of the component.</p> <pre><code>class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } render() { if (this.state.hasError) { return ( <h1>Oops, something went wrong :(</h1> ); } return this.props.children; } }</code></pre> <p>In this example, the <code>ErrorBoundary</code> component will display “Oops, something went wrong” when an error is thrown from a child component. We have a lot more info on this method in a <a target="_blank" href="https://css-tricks.com/react-16-6-0-goodies/#article-header-id-3">wrap up on goodies that were released in React 16.6.0</a>.</p> <h4>componentDidCatch()</h4> <p>While <code>getDerivedStateFromError()</code> is suited for updating the state of the component in cases where where side effects, like error logging, take place, we ought to make use of <code>componentDidCatch()</code> because it is called during the commit phase, when the DOM has been updated.</p> <pre><code>componentDidCatch(error, info) { // Log error to service }</code></pre> <p>Both <code>getDerivedStateFromError()</code> and <code>componentDidCatch()</code> can be used in the <code>ErrorBoundary</code> component:</p> <pre><code>class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, info) { // Log error to service } render() { if (this.state.hasError) { return ( <h1>Oops, something went wrong :(</h1> ); } return this.props.children; } }</code></pre> <h3>And that’s the lifecycle of a React component!</h3> <p>There’s something neat about knowing how a React component interacts with the DOM. It’s easy to think some “magic” happens and then something appears on a page. But the lifecycle of a React component shows that there’s order to the madness and it’s designed to give us a great deal of control to make things happen from the time the component hits the DOM to the time it goes away.</p> <p>We covered a lot of ground in a relatively short amount of space, but hopefully this gives you a good idea of not only how React handles components, but what sort of capabilities we have at various stages of that handling. Feel free to leave any questions at all if anything we covered here is unclear and I’d be happy to help as best I can!</p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/the-circle-of-a-react-lifecycle/">The Circle of a React Lifecycle</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2233924"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/23/netlify-functions-for-sending-emails/" rel="bookmark">Netlify Functions for Sending Emails</a></h2> <div class="info"> <span class="date">April 23rd, 2019</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/23/netlify-functions-for-sending-emails/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/netlify-functions-for-sending-emails/"><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/send-email.png" alt=""></a></div> <p>Let’s say you’re rocking a <a target="_blank" href="https://jamstack.org/">JAMstack</a>-style site (no server-side languages in use), but you want to do something rather dynamic like <strong>send an email</strong>. Not a problem! That’s the whole point of JAMstack. It’s not just static hosting. It’s that <em>plus</em> doing anything else you wanna do through JavaScript and APIs. </p> <p>Here’s the setup: You need a service to help you send the email. Let’s just pick <a target="_blank" href="https://www.sparkpost.com/">Sparkpost</a> out of a hat. There are a number of them, and I’ll leave comparing their features and pricing to you, as we’re doing something extremely basic and low-volume here. To send an email with Sparkpost, you hit their API with your API key, provide information about the email you want to send, and Sparkpost sends it.</p> <p>So, you’ll need to run a <em>little</em> server-side code to protect your API key during the API request. Where can you run that code? A Lambda is perfect for that (<abbr title="also known as">aka</abbr> a serverless function or cloud function). There are lots of services to help you run these, but none are easier than <a target="_blank" href="https://www.netlify.com/docs/functions?utm_source=css-tricks&utm_medium=post&utm_campaign=css-0419">Netlify</a>, where you might be hosting your site anyway.</p> <p><span></span></p> <figure></figure> <h3>Get Sparkpost ready</h3> <p>I signed up for Sparkpost and made sure my account was all set up and verified. The dashboard there will give you an API key:</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/sparkpost-api-key.png" alt=""></figure> <h3>Toss that API Key into Netlify</h3> <p>Part of protecting our API key is making sure it’s only used in server-side code, but <strong>also that we keep it out of our Git repository</strong>. Netlify has environment variables that expose it to functions as needed, so we’ll plop it there:</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/netlify-env.png" alt=""></figure> <h3>Let’s spin up Netlify Dev, as that’ll make this easy to work with</h3> <p><a target="_blank" href="https://www.netlify.com/products/dev?utm_source=css-tricks&utm_medium=post&utm_campaign=css-0219">Netlify Dev</a> is a magical little tool that does stuff like run our static site generator for us. For the <a target="_blank" href="https://css-tricks.com/a-site-for-front-end-development-conferences-built-with-11ty-on-netlify/">site I’m working on</a>, I use <a target="_blank" href="https://www.11ty.io/">Eleventy</a> and Netlify Dev auto-detects and auto-runs it, which is super neat. But more importantly, for us, it gives us a local URL that runs our functions for testing. </p> <p>Once it’s all installed, running it should look like this:</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/netlify-dev.png" alt=""></figure> <p>In the terminal screenshot above, it shows the website itself being spun up at <code>localhost:8080</code>, but it also says:</p> <pre><code>◈ Lambda server is listening on 59629</code></pre> <p>That’ll be very useful in a moment when we’re writing and testing our new function — which, by the way, we can scaffold out if we’d like. For example:</p> <pre><code>netlify functions:create --name hello-world</code></pre> <p>From there, it will ask some questions and then make a function. Pretty useful to get started quickly. We’ll cover writing that function in a moment, but first, let’s use this…</p> <h3>Sparkpost has their own Node lib</h3> <p><a target="_blank" href="https://www.sparkpost.com/">Sparkpost</a> has an API, of course, for sending these emails. We could look at those docs and learn how to hit their URL endpoints with the correct data. </p> <p>But things get even easier with <a target="_blank" href="https://github.com/SparkPost/node-sparkpost">their Node.js bindings</a>. Let’s get this set up by creating all the folders and files we’ll need:</p> <pre><code>/project ... your entire website or whatever ... /functions/ /send-email/ package.json send-email.js</code></pre> <p>All we need the <code>package.json</code file for is to yank in the Sparkpost library, so <code>npm install sparkpost --save-dev</code> will do the trick there.</p> <p>Then the <code>send-email.js</code> imports that lib and uses it:</p> <pre><code>const SparkPost = require('sparkpost'); const client = new SparkPost(process.env.SPARKPOST); exports.handler = function(event, context, callback) { client.transmissions .send({ content: { from: 'chris@css-tricks.com', subject: 'Hello, World!', html: "<html><body><p>My cool email.</p></body></html>" }, recipients: [{ address: 'chriscoyier@gmail.com' }] }); }</code></pre> <p>You'll want to <a target="_blank" href="https://github.com/SparkPost/node-sparkpost#send-an-email-hello-world-example">look at their docs</a> for error handling and whatnot. Again, we've just chosen Sparkpost out of a hat here. Any email sending service will have an API and helper code for popular languages. </p> <p>Notice line 2! That's where we need the API key, and we don't need to hard-code it because Netlify Dev is so darn fancy that it will <em>connect to Netlify</em> and let us use the environment variable from there. </p> <h3>Test the function</h3> <p>When Netlify Dev is running, our Lamba functions have that special port they are running. We'll be able to have a URL like this to run the function:</p> <pre><code>http://localhost:34567/.netlify/functions/send-email</code></pre> <p>This function is set up to run when it's hit, so we could simply visit that in a browser to run it.</p> <h3>Testing</h3> <p>Maybe you'll <code>POST</code> to this URL. Maybe you'll send the body of the email. Maybe you'll send the recipient's email address. It would be nice to have a testing environment for all of this.</p> <p>Well, we can <code>console.log()</code> stuff and see it in the terminal, so that's always handy. Plus we can write our functions to return whatever, and we could look at those responses in some kind of API testing tool, like <a target="_blank" href="https://www.getpostman.com/">Postman</a> or <a target="_blank" href="https://insomnia.rest/">Insomnia</a>. </p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/testing.png" alt=""></figure> <p>It works!</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/email.png" alt=""></figure> <p>I'll leave it to you to get fancy with it 😉</p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/netlify-functions-for-sending-emails/">Netlify Functions for Sending Emails</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-2233720"> <h2><a class="title" href="http://www.webmastersgallery.com/2019/04/23/building-a-node-js-express-api-to-convert-markdown-to-html/" rel="bookmark">Building A Node.js Express API To Convert Markdown To HTML</a></h2> <div class="info"> <span class="date">April 23rd, 2019</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/04/23/building-a-node-js-express-api-to-convert-markdown-to-html/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/9faIFGNSDgA/"><img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/462c5b77-18e5-498d-a06e-f59276859c4f/nodejs-express-api-markdown-html-postman-intro.png" alt="Postman interface"></a></div> <p> <title>Building A Node.js Express API To Convert Markdown To HTML</title></p> <article> <header> <h1>Building A Node.js Express API To Convert Markdown To HTML</h1> <address>Sameer Borate</address> <p> 2019-04-23T12:30:16+02:002019-04-23T12:46:32+00:00</header> <p>Markdown is a lightweight text markup language that allows the marked text to be converted to various formats. The original goal of creating Markdown was of enabling people “to write using an easy-to-read and easy-to-write plain text format and to optionally convert it to structurally valid XHTML (or HTML). Currently, with WordPress supporting Markdown, the format has become even more widely used.</p> <p>The purpose of writing the article is to show you how to use Node.js and the Express framework to create an API endpoint. The context in which we will be learning this is by building an application that converts Markdown syntax to HTML. We will also be adding an authentication mechanism to the API so as to prevent misuse of our application.</p> <h3>A Markdown Node.js Application</h3> <p>Our teeny-tiny application, which we will call ‘Markdown Convertor’, will enable us to post Markdown-styled text and retrieve an HTML version. The application will be created using the Node.js Express framework, and support authentication for conversion requests.</p> <p>We will build the application in small stages — initially creating a scaffold using Express and then adding various features like authentication as we go along. So let us start with the initial stage of building the application by creating a scaffold.</p> <div></div> <h3>Stage 1: Installing Express</h3> <p>Assuming you’ve already installed Node.js on your system, create a directory to hold your application (let’s call it “<code>markdown-api</code>”), and switch to that directory:</p> <pre><code>$ mkdir markdown-api $ cd markdown-api </code></pre> <p>Use the npm init command to create a <em>package.json</em> file for your application. This command prompts you for a number of things like the name and version of your application.</p> <p>For now, simply hit <kbd>Enter</kbd> to accept the defaults for most of them. I’ve used the default entry point file as <em>index.js</em>, but you could try <em>app.js</em> or some other depending on your preferences.</p> <p>Now install Express in the <code>markdown-api</code> directory and save it in the dependencies list:</p> <pre><code>$ npm install express --save </code></pre> <p>Create an <em>index.js</em> file in the current directory (<code>markdown-api</code>) and add the following code to test if the Express framework is properly installed:</p> <pre><code>Const express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello World!'); }); app.listen(3000); </code></pre> <p>Now browse to the URL <code>http://localhost:3000</code> to check whether the test file is working properly. If everything is in order, we will see a Hello World!’ greeting in the browser and we can proceed to build a base API to convert Markdown to HTML.</p> <h3>Stage 2: Building A Base API</h3> <p>The primary purpose of our API will be to convert text in a Markdown syntax to HTML. The API will have two endpoints:</p> <ul> <li><code>/login</code></li> <li><code>/convert</code></li> </ul> <p>The <code>login</code> endpoint will allow the application to authenticate valid requests while the <code>convert</code> endpoint will convert (obviously) Markdown to HTML.</p> <p>Below is the base API code to call the two endpoints. The <code>login</code> call just returns an “Authenticated” string, while the <code>convert</code> call returns whatever Markdown content you submitted to the application. The home method just returns a ‘Hello World!’ string.</p> <div> <pre><code>const express = require("express"); const bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.get('/', function(req, res){ res.send('Hello World!'); }); app.post('/login', function(req, res) { res.send("Authenticated"); }, ); app.post("/convert", function(req, res, next) { console.log(req.body); if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { res.json(["markdown", req.body.content]); } }); app.listen(3000, function() { console.log("Server running on port 3000"); }); </code></pre> </div> <p>We use the <code>body-parser</code> middleware to make it easy to parse incoming requests to the applications. The middleware will make all the incoming requests available to you under the <code>req.body</code> property. You can do without the additional middleware but adding it makes it far easier to parse various incoming request parameters.</p> <p>You can install <code>body-parser</code> by simply using npm:</p> <pre><code>$ npm install body-parser </code></pre> <p>Now that we have our dummy stub functions in place, we will use Postman to test the same. Let’s first begin with a brief overview of Postman.</p> <div></div> <h4>Postman Overview</h4> <p>Postman is an API development tool that makes it easy to build, modify and test API endpoints from within a browser or by downloading a desktop application (browser version is now deprecated). It has the ability to make various types of HTTP requests, i.e. GET, POST, PUT, PATCH. It is available for Windows, macOS, and Linux.</p> <p>Here’s a taste of Postman’s interface:</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/462c5b77-18e5-498d-a06e-f59276859c4f/nodejs-express-api-markdown-html-postman-intro.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/462c5b77-18e5-498d-a06e-f59276859c4f/nodejs-express-api-markdown-html-postman-intro.png" alt="Postman interface"></a><figcaption> (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/462c5b77-18e5-498d-a06e-f59276859c4f/nodejs-express-api-markdown-html-postman-intro.png">Large preview</a>)<br /> </figcaption></figure> <p>To query an API endpoint, you’ll need to do the following steps:</p> <ol> <li>Enter the URL that you want to query in the URL bar in the top section;</li> <li>Select the HTTP method on the left of the URL bar to send the request;</li> <li>Click on the ‘Send’ button.</li> </ol> <p>Postman will then send the request to the application, retrieve any responses and display it in the lower window. This is the basic mechanism on how to use the Postman tool. In our application, we will also have to add other parameters to the request, which will be described in the following sections.</p> <h3>Using Postman</h3> <p>Now that we have seen an overview of Postman, let’s move forward on using it for our application.</p> <p>Start your <code>markdown-api</code> application from the command-line:</p> <pre><code>$ node index.js</code></pre> <p>To test the base API code, we make API calls to the application from Postman. Note that we use the POST method to pass the text to convert to the application.</p> <p>The application at present accepts the Markdown content to convert via the <code>content</code> POST parameter. This we pass as a URL encoded format. The application, currently, returns the string verbatim in a JSON format — with the first field always returning the string <code>markdown</code> and the second field returning the converted text. Later, when we add the Markdown processing code, it will return the converted text.</p> <h3>Stage 3: Adding Markdown Convertor</h3> <p>With the application scaffold now built, we can look into the <code>Showdown</code> JavaScript library which we will use to convert Markdown to HTML. Showdown is a bidirectional Markdown to HTML converter written in Javascript which allows you to convert Markdown to HTML and back.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7634b6ea-e153-48cc-8001-67c21e08e3ac/nodejs-express-api-markdown-html-base-postman-test.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7634b6ea-e153-48cc-8001-67c21e08e3ac/nodejs-express-api-markdown-html-base-postman-test.png" alt="Testing with Postman"></a><figcaption> (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7634b6ea-e153-48cc-8001-67c21e08e3ac/nodejs-express-api-markdown-html-base-postman-test.png">Large preview</a>)<br /> </figcaption></figure> <p>Install the package using npm:</p> <pre><code>$ npm install showdown </code></pre> <p>After adding the required showdown code to the scaffold, we get the following result:</p> <div> <pre><code>const express = require("express"); const bodyParser = require('body-parser'); const showdown = require('showdown'); var app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); converter = new showdown.Converter(); app.get('/', function(req, res){ res.send('Hello World!'); }); app.post('/login', function(req, res) { res.send("Authenticated"); }, ); app.post("/convert", function(req, res, next) { if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); } }); app.listen(3000, function() { console.log("Server running on port 3000"); }); </code></pre> </div> <p>The main converter code is in the <code>/convert</code> endpoint as extracted and shown below. This will convert whatever Markdown text you post to an HTML version and return it as a JSON document.</p> <pre><code>... } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); } </code></pre> <p>The method that does the conversion is <code>converter.makeHtml(text)</code>. We can set various options for the Markdown conversion using the <code>setOption</code> method with the following format:</p> <pre><code>converter.setOption('optionKey', 'value'); </code></pre> <p>So, for example, we can set an option to automatically insert and link a specified URL without any markup.</p> <pre><code>converter.setOption('simplifiedAutoLink', 'true'); </code></pre> <p>As in the Postman example, if we pass a simple string (such as <code>Google home http://www.google.com/</code>) to the application, it will return the following string if <code>simplifiedAutoLink</code> is enabled:</p> <div> <pre><code><p>Google home <a href="http://www.google.com/">http://www.google.com/</a></p> </code></pre> </div> <p>Without the option, we will have to add markup information to achieve the same results:</p> <pre><code>Google home <http://www.google.com/> </code></pre> <p>There are many options to modify how the Markdown is processed. A complete list can be found on the <a target="_blank" href="http://www.passportjs.org/">Passport.js</a> website.</p> <p>So now we have a working Markdown-to-HTML converter with a single endpoint. Let us move further and add authentication to have application.</p> <div></div> <h3>Stage 4: Adding API Authentication Using Passport</h3> <p>Exposing your application API to the outside world without proper authentication will encourage users to query your API endpoint with no restrictions. This will invite unscrupulous elements to misuse your API and also will burden your server with unmoderated requests. To mitigate this, we have to add a proper authentication mechanism.</p> <p>We will be using the Passport package to add authentication to our application. Just like the <code>body-parser</code> middleware we encountered earlier, Passport is an authentication middleware for Node.js. The reason we will be using Passport is that it has a variety of authentication mechanisms to work with (username and password, Facebook, Twitter, and so on) which gives the user the flexibility on choosing a particular mechanism. A Passport middleware can be easily dropped into any Express application without changing much code.</p> <p>Install the package using npm.</p> <pre><code>$ npm install passport </code></pre> <p>We will also be using the <code>local</code> strategy, which will be explained later, for authentication. So install it, too.</p> <pre><code>$ npm install passport-local </code></pre> <p>You will also need to add the JWT(JSON Web Token) encode and decode module for Node.js which is used by Passport:</p> <pre><code>$ npm install jwt-simple </code></pre> <h4>Strategies In Passport</h4> <p>Passport uses the concept of strategies to authenticate requests. Strategies are various methods that let you authenticate requests and can range from the simple case as verifying username and password credentials, authentication using OAuth (Facebook or Twitter), or using OpenID. Before authenticating requests, the strategy used by an application must be configured.</p> <p>In our application, we will use a simple username and password authentication scheme, as it is simple to understand and code. Currently, Passport supports more than 300 strategies which can be found here.</p> <p>Although the design of Passport may seem complicated, the implementation in code is very simple. Here is an example that shows how our <code>/convert</code> endpoint is decorated for authentication. As you will see, adding authentication to a method is simple enough.</p> <div> <pre><code>app.post("/convert", passport.authenticate('local',{ session: false, failWithError: true }), function(req, res, next) { // If this function gets called, authentication was successful. // Also check if no content is sent if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); }}, // Return a 'Unauthorized' message back if authentication failed. function(err, req, res, next) { return res.status(401).send({ success: false, message: err }) }); </code></pre> </div> <p>Now, along with the Markdown string to be converted, we also have to send a username and password. This will be checked with our application username and password and verified. As we are using a local strategy for authentication, the credentials are stored in the code itself.</p> <p>Although this may sound like a security nightmare, for demo applications this is good enough. This also makes it easier to understand the authentication process in our example. Incidentally, a common security method used is to store credentials in environment variables. Still, many people may not agree with this method, but I find this relatively secure.</p> <p>The complete example with authentication is shown below.</p> <div> <pre><code>const express = require("express"); const showdown = require('showdown'); const bodyParser = require('body-parser'); const passport = require('passport'); const jwt = require('jwt-simple'); const LocalStrategy = require('passport-local').Strategy; var app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); converter = new showdown.Converter(); const ADMIN = 'admin'; const ADMIN_PASSWORD = 'smagazine'; const SECRET = 'secret#4456'; passport.use(new LocalStrategy(function(username, password, done) { if (username === ADMIN && password === ADMIN_PASSWORD) { done(null, jwt.encode({ username }, SECRET)); return; } done(null, false); })); app.get('/', function(req, res){ res.send('Hello World!'); }); app.post('/login', passport.authenticate('local',{ session: false }), function(req, res) { // If this function gets called, authentication was successful. // Send a 'Authenticated' string back. res.send("Authenticated"); }); app.post("/convert", passport.authenticate('local',{ session: false, failWithError: true }), function(req, res, next) { // If this function gets called, authentication was successful. // Also check if no content is sent if(typeof req.body.content == 'undefined' || req.body.content == null) { res.json(["error", "No data found"]); } else { text = req.body.content; html = converter.makeHtml(text); res.json(["markdown", html]); }}, // Return a 'Unauthorized' message back if authentication failed. function(err, req, res, next) { return res.status(401).send({ success: false, message: err }) }); app.listen(3000, function() { console.log("Server running on port 3000"); }); </code></pre> </div> <p>A Postman session that shows conversion with authentication added is shown below.</p> <figure><a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ae32fa60-d46d-4065-8966-b5e9ce0b32b9/nodejs-express-api-markdown-html-base-postman-auth.png"></p> <p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ae32fa60-d46d-4065-8966-b5e9ce0b32b9/nodejs-express-api-markdown-html-base-postman-auth.png" alt="Final application testing with Postman"></a><figcaption> Final application testing with Postman (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ae32fa60-d46d-4065-8966-b5e9ce0b32b9/nodejs-express-api-markdown-html-base-postman-auth.png">Large preview</a>)<br /> </figcaption></figure> <p>Here we can see that we have got a proper HTML converted string from a Markdown syntax. Although we have only requested to convert a single line of Markdown, the API can convert a larger amount of text.</p> <p>This concludes our brief foray into building an API endpoint using Node.js and Express. API building is a complex topic and there are finer nuances that you should be aware of while building one, which sadly we have no time for here but will perhaps cover in future articles.</p> <h3>Accessing Our API From Another Application</h3> <p>Now that we have built an API, we can create a small Node.js script that will show you how the API can be accessed. For our example, we will need to install the <code>request</code> npm package that provides a simple way to make HTTP requests. (You will Most probably already have this installed.)</p> <pre><code>$ npm install request --save </code></pre> <p>The example code to send a request to our API and get the response is given below. As you can see, the <code>request</code> package simplifies the matter considerably. The markdown to be converted is in the <code>textToConvert</code> variable.</p> <p>Before running the following script, make sure that the API application we created earlier is already running. Run the following script in another command window.</p> <p><strong>Note</strong>: <em>We are using the</em> <code>(back-tick)</code> <em>sign to span multiple JavaScript lines for the</em> <code>textToConvert</code> <em>variable. This is not a single-quote.</em></p> <pre><code>var Request = require("request"); // Start of markdown var textToConvert = `Heading ======= ## Sub-heading Paragraphs are separated by a blank line. Two spaces at the end of a line produces a line break. Text attributes _italic_, **bold**, 'monospace'. A [link](http://example.com). Horizontal rule:`; // End of markdown Request.post({ "headers": { "content-type": "application/json" }, "url": "http://localhost:3000/convert", "body": JSON.stringify({ "content": textToConvert, "username": "admin", "password": "smagazine" }) }, function(error, response, body){ // If we got any connection error, bail out. if(error) { return console.log(error); } // Else display the converted text console.dir(JSON.parse(body)); }); </code></pre> <p>When we make a POST request to our API, we provide the Markdown text to be converted along with the credentials. If we provide the wrong credentials, we will be greeted with an error message.</p> <pre><code>{ success: false, message: { name: 'AuthenticationError', message: 'Unauthorized', status: 401 } } </code></pre> <p>For a correctly authorized request, the above sample Markdown will be converted to the following:</p> <pre><code>[ 'markdown', `<h1 id="heading">Heading</h1> <h2 id="subheading">Sub-heading</h2> <p>Paragraphs are separated by a blank line.</p> <p>Two spaces at the end of a line<br /> produces a line break.</p> <p>Text attributes <em>italic</em>, <strong>bold</strong>, 'monospace'. A <a href="http://example.com">link</a>. Horizontal rule:</p>` ] </code></pre> <p>Although we have hardcoded the Markdown here, the text can come from various other sources — file, web forms, and so on. The request process remains the same.</p> <p>Note that as we are sending the request as an <code>application/json</code> content type; we need to encode the body using json, hence the <code>JSON.stringify</code> function call. As you can see, it takes a very small example to test or API application.</p> <h3>Conclusion</h3> <p>In this article, we embarked on a tutorial with the goal of learning on how to use Node,js and the Express framework to build an API endpoint. Rather than building some dummy application with no purpose, we decided to create an API that converts Markdown syntax to HTML, which anchors or learning in a useful context. Along the way, we added authentication to our API endpoint, and we also saw ways to test our application endpoint using Postman.</p> <div> <span>(rb, ra, il)</span> </div> </article> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"><a href="http://www.webmastersgallery.com/2019/04/page/2/" >Newer Entries</a></span> <span class="older"><a href="http://www.webmastersgallery.com/2019/04/page/4/" >Older Entries</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/' aria-current="page">April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>