Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
This tutorial focuses on how to wire your web application to a MySQL database so you can Create, Read, Update, and Delete (CRUD) information in a database via a Vaadin web application. The idea is to show you how to connect a template project downloaded from https://start.vaadin.com to a database so you can replicate it to your own needs. This is not about best practices (for Vaadin, Spring, or MySQL) but to help you get started fast.
You can find the code used in this tutorial from GitHub.
Embarking on a new website build? Creating a visual sitemap is an often-overlooked step that can help you improve client relationships and overall productivity. They’re also super simple to create with the right tools.
In this post we’ll explain why you would should create a visual sitemap and show you some easy tools (from whiteboards to WordPress plugins, we’ve got a great one from Mind Doodle for you to check out) that will help you create one.
When planning a new WordPress site build there are some common steps most people take.
First you might sit down with your client to discover their goals.
Then you’ll probably dive into a discussion about the purpose of their website.
Finally, it’s time to transfer all of this into a plan and work through the possible structure of their site.
Now, although this sounds like a straightforward workflow… what happens if these plans get lost in translation?
Or worse, what if you’re cleaning up a site littered with duplicate content, or that contains a structure that wasn’t well thought out prior to release?
And in this article we’ll be showing you how easy it is to create a visual sitemap in WordPress – as well as diving into the benefits of sitemaps in general.
But first…
A sitemap is a list of all the pages that make up a website. They’re often used by a developer, designer or website owner to plan a new website or rethink an existing web structure.
Visual sitemaps on the other hand, show the hierarchy of web pages and the relationships between them.
So how do they stack up against your usual kind of sitemap?
Let’s examine the main differences.
The main difference between a visual sitemap (or site map) and an XML sitemap is that the former is intended for humans and the latter for search engines.
The concept of a sitemap for humans is easy to grasp, as the image below shows.
An XML sitemap for a search engine, on the other hand, informs search engines about pages on your site that are available for crawling.
It does this by listing all the URLs for a site with additional metadata about each URL – such as when it was last updated, how often it usually changes, and how important it is relative to other URLs in the site.
This allows search engines to crawl the site more intelligently and discover pages from links within the site and from other sites.
Note: Smart SEO plugins like SmartCrawl include a built-in XML sitemap generator, so there’s nothing you need to do to generate sitemap files to help search engines crawl and index your content, other than to install and configure the plugin. Learn more about Smart Crawl.
There are many benefits to working with visual sitemaps. Some of these include:
One of the biggest benefits of creating a visual sitemap is that you can communicate website structure to your client quickly, in a visual way that is easy to understand. This helps you kick-start a WordPress project in a simple and logical way.
Depending on the type of clients you have, their day-to-day responsibilities might run far beyond their WordPress sites. Some might not know much about websites at all.
In these cases, you need to find new ways to explain the intricacies of your website development project for someone unfamiliar with WordPress to understand.
Making a visual sitemap creates a meaningful context for your client. Think of it as a reference point that you can build your project from. Sharing a visual sitemap brings a whole new meaning to “Show, don’t tell.”
For those of us who are visual people, using visual tools makes the collaborative experience a whole lot easier, simpler, and more pleasant.
Even for your clients who have a good grasp of their web structure and have owned WordPress sites for years, a visual sitemap saves time and effort by putting you and your client on the same page from the very beginning. There can be no confusion when you are both looking at the same visual structure.
What’s more, improving client communications by providing a visual sitemap gives you an advantage over competitors.
Another advantage of making visual sitemaps is that you can use them to create site structure collaboratively with your client.
Using a collaborative tool like Mind Doodle’s Visual Sitemaps & Tasks plugin for WordPress, you can benefit from visual context with a sitemap that is more than a graphical tool.
You and your client can drag-and-drop pages around the sitemap to update the actual structure of a WordPress site. You can also use online chat that hooks up with tools like Slack and add tasks for Mind Doodle’s Task Board to develop a plan of action for the next steps.
Let’s face it, sometimes you find yourself working on a site that’s a bit of a mess.
This may be no fault of your own, and sometimes it’s not the fault of your client either. Perhaps they inherited the website from a former colleague, just like you took it over from another developer.
If you find yourself responsible for a WordPress site with a lot of heritage and many, many pages of content, it can be difficult to know where to start. That’s where visual sitemaps come in.
Creating a visual sitemap of all the pages on your site helps you see the bigger picture. You might be surprised to find some unnecessary pages that you no longer need or pages that would work better if they were nested or placed in a different section of the site.
With a large number of pages to manage, it’s possible that content that is no longer current or relevant, such as discontinued features or services, may still be live and available to web visitors when they should not be.
The visual sitemap brings these pages back to the surface so they can be dealt with appropriately and not simply forgotten about.
Although it’s highly unlikely that you will find identical pages, you may discover duplicated messaging across multiple pages that can be made more concise and combined into a single page.
This makes it easier for web visitors to find the information they need. It also makes it simpler for a website manager to maintain their site and ensure the content is always relevant and accurate, and (importantly for SEO) unique. Everyone wins!
A well-structured site will help your site visitors navigate their way to the information, products, and resources they require or provoke the call-to-action you want them to take.
Think of it as information architecture. You craft every website for a purpose, and you need to carefully consider how you structure a site, just like you take care with designing, developing, testing and copywriting.
Use a visual sitemap to craft usable, accessible and intuitive navigation that allows web visitors to get from one page to another in just a few clicks.
Focus on your web visitor’s journey and expectations, too. It’s important that visitors navigating through your website land on the pages they anticipate. This creates a good user experience, which also brings business benefits.
How are your website’s pages linked together? Are they organized in a manner that’s easy for a user to navigate? How about Google? After all, website structure is important for SEO, too.
Google’s spiders should be able to navigate your site structure. Click-throughs and bounce rates, as well as the time spent on each page, will also impact Google’s algorithms.
Your site’s structure helps a search engine interpret your site. Search engines should be able to crawl through website content to understand what the site is all about and determine which keywords should bring up the WordPress site in search results. Pages that are linked together make it easier for search engines to do this.
Creating a visual sitemap that includes both page hierarchy and internal links will give you a much better idea of how crawlable your site is.
There are a variety of options for creating a visual sitemap, including online and offline:
One way to create a visual sitemap is to use sticky notes on a wall.
Label each sticky note with the name of a page or section of your site, add brief descriptions and any notes you or client raises during the process, and organize these in a hierarchical structure on a wall to create the layout of the site (tip: use different colors to separate sections of the site or indicate nested pages).
Just remember to take photos of the end result before the cleaners come around so you don’t lose your work.
Many great ideas were borne from simple sketches made on the back of a napkin.
Using a pen or pencil and paper is a straightforward way of creating a visual sitemap and allows you to work with your clients anywhere: a coffee shop, bar, park bench, or even the back of your limousine.
Most offices have whiteboards. You can create visual sitemaps on plain whiteboards, an interactive whiteboard, even an old-fashioned chalkboard if your client happens to be a school or learning institution.
A visual sitemap tool like Mind Doodle lets you easily visualize and document sitemaps on the fly.
Combining visual thinking with built-in tools like task management and online chat allow you to offer clients the added convenience of scheduling workflow tasks and working on sitemaps collaboratively and remotely.
No doubt you’ll be building or redesigning your clients’ sites using WordPress, so why not use a visual sitemap generator that actually builds your site for you as you design and rearrange its page structure?
Mind Doodle Visual Sitemaps & Tasks is a free WordPress plugin that lets you create a visual, interactive sitemap while streamlining the website development process.
The plugin includes access to a built-in task management tool that facilitates the creation of your website.
As you create a visual sitemap in the same way as you would create a mind map using drag-and-drop to update parent/child pages, the plugin then instantly builds WordPress pages for your site, adds them to your sitemap, and automatically creates your website menu system.
Here it is in action:
We also highly recommend installing our SmartCrawl SEO plugin and using it together with Mind Doodle.
*P.S. WPMU DEV members you also have access to a special Mind Doodle deal if you’re interested. Head to our Partner Page for more details. Not a member yet? Sign up for a free 30 day trial silly!
Hopefully this article has given you a better understanding of sitemaps and why they’re useful.
If you’re up for it, on your next build try using both an XML sitemap (for search engines) and a visual sitemap (for easier visitor navigation).
You’ll seldom go wrong combining both of these crucial “site-mappers.”
The answer used to be absolutely yes because, if you used px units, you prevented the text from being resized by the user at all.
But browser zoom is the default method for making everything bigger (including text) these days and it works great even if you use px.
But... Kathleen McMahon really digs into this and finds that it's still worth setting all your type (both font-size and line-height) in relative units because:
px prevents browser settings from making font size adjustments (which some people definitely use) andDirect Link to Article — Permalink
The post Is it better to use ems/rems than px for font-size? appeared first on CSS-Tricks.
I'd like to think there is a lot to learn on CSS-Tricks. But we don't really offer much by the way of courses. You're probably reading this because you just generally read this site, and you land on CSS-Tricks otherwise mostly because you are looking for an answer to some front-end question.
Courses are a really great way to learn though. I've done many over my years as a developer, particularly when learning something fairly outside my bubble of things I already know. For example, I don't reach for TypeScript yet because I don't really know it and am definitely not comfortable with it. You better believe I'll be taking a course on it when the time comes that I want to use it on a project.
Where will I find that course? Frontend masters, of course. They are clearly the most high-quality in-depth courses on all things front-end development. They've got a course on TypeScript, of course.
So I'm so so glad to announce that Frontend Masters is our official learning partner. I like having an official place to send people to when it's clear their learning style is video courses, like so many people's is.
One not-so-little aspect I love about Frontend Masters: the courses are taught in a live environment. So it's not a head talking into a screen, the courses have the natural energy of a live teaching situation, because they are.
How you'll see our course recommendations here on CSS-Tricks is through some contextual ads next to articles. Say you're reading Geoff's recent article about the dense keyword as part of CSS grid layout. Well, that article is about layout, and Frontend Masters has a comprehensive course on modern CSS layout from Jen Kramer. So as you scroll down that post, you'll see our course recommendation there, as well as at the bottom of the article.
Access to all of Frontend Masters is a paid membership. Access to literally everything they have is $39 a month or $390 a year, with special pricing for teams. But, they have some free stuff if you want to dip your toes and see for yourself if it's any good.
I feel like this is worth mentioning too. Frontend Masters itself is a website you log into to watch the videos and that's a great experience. But it's not the only way. They also have great native mobile apps (iOS / Android), if you prefer that experience.
The post Our Learning Partner: Frontend Masters appeared first on CSS-Tricks.
Check Point Research, a provider of cyber threat intelligence, has published an in-depth review of an analysis they conducted concerning the popular TikTok video-sharing application.
Shopify has published its January 2020 API features roundup. These API features roundups are used by the company to help developers understand changes and updates to the latest Shopify API releases. The latest roundup focuses on merchandising and order fulfillment.
The Gutenberg team released version 7.2 of the plugin yesterday after a four-week release hiatus for the holidays. This update includes at least 180 pull requests to the project’s repository by 56 contributors. The largest user-facing features include a new “buttons” block that allows users to add multiple buttons in a row and the ability to define the size of images in a gallery block. These were two highly-requested features.
The update supports changing the font size in the relatively new navigation block. Users can also add a link for the image in the media & text block. A few dozen other minor enhancements across multiple components made their way into the update. Most enhancements continue to clean up the interface and improve usability.
Many bug fixes are included in version 7.2. Accessibility improvements include using radio inputs for text alignment, adding an appropriate group role to the block wrapper, adding a label to the social icons block, and more. Several fixes should improve how pasting content in the editor works, which generally works well already.
The team continued building upon experimental features, which must be activated via the Gutenberg > Experiments screen in the admin. Outside of a handful of bug fixes and enhancements, the most interesting change is the introduction of a new experimental admin screen. Gutenberg 7.2 now includes an early beta of a full-site editing page.
If I had a nickel for every time a user asked how to put two buttons next to each other…You know how the story goes.
One of the most-common website layouts today is a large “hero” section, a heading, some text, and a button, perhaps two. An end-user could easily build this with a combination of the cover, heading, paragraph, and button blocks if only a single button was needed. However, that second button was troubling without some custom code work.
The introduction of the buttons block changes everything. It is a block that allows end-users to add any number of individual button blocks in a row. At the moment, the block essentially serves as a wrapper. The block’s only option is the ability to set the alignment of the inner button blocks.
The lack of an option to set the size of gallery images has been one of Gutenberg’s largest failures since its inception. After years of this basic option for the gallery shortcode with the classic editor, the gallery block has always felt incomplete.
For some users, the lack of basic features that have long existed in the classic editor is frustrating. That frustration is understandable, given the fast-paced movement on newer and shinier features. It is refreshing to see work being done toward addressing long-missing features such as this.
The gallery block now has a new “Images Sizes” dropdown select for choosing the size of the images shown. This option will solve at least a couple of major issues. By selecting a custom size, the images will utilize less bandwidth for site visitors. Previously, full-sized images were displayed. It also allows users to select a consistent size so that galleries with multiple image aspect ratios are better aligned in a grid. Basically, it can make for prettier galleries.
Gutenberg 7.2 introduces a “Site Editor” screen, which can be enabled by ticking the “Enable Full Site Editing” checkbox on the Gutenberg > Experiments admin page. The new screen is an early, bare-bones beta exploration into what will eventually be fully-fledged site editor.
At this point, the screen does not do much. End-users can insert blocks and little else. Content on this screen is not stored for later. There is not even a save button yet. Mostly, it serves as another step toward site editing, which could possibly land in core WordPress late in 2020. However, that is an optimistic schedule, and it is far too early to make a solid guess. There are a lot of open questions that need answers and technical hurdles to jump. A 2021 release might be more realistic, depending on the pace of development.
I work as a DevOps engineer for a large public-facing application, which has around 90+ microservices (Java-based). Consistently, we are hit by scenarios that we’d discover in the field, which were not caught in any of our testing. Despite improving our test strategies and code coverage assessments, we were unable to assess the "strength" of our test cases.
We looked around for options and solutions that could help us to be more sure about our test cases and the code we develop. As a DevOps engineer, my responsibility was to identify options and trial them to fix this problem and include it as part of our automated build process.
In this tutorial, we are going to learn about formatting a number to specific decimal places in JavaScript using the toFixed() method.
Consider that we have a number like this.
In React Native (and also in React) you can create custom components and use them easily as much as you want in your app. You may give custom styles and values to these components by passing different values in the props of these components. However, you can not change the child components of your custom components since they are already defined.
In some cases, you may want to have containers that look alike but also have different content and differ in style. At this point, custom container components come in.
As apps become more complex in the way they use microservices, managing API keys and other secrets becomes more challenging as well. Microservices running in containers need to transfer secrets to allow them to communicate with each other. Each of those transfers, and each of the secrets being exchanged, needs to be secured properly for the entire system to remain secure.
Hard-coding API keys and other secrets is definitely NOT an option. Despite the obvious nature of the previous statement, a lot of developers still expose the credentials of their microservices or apps on GitHub. Fortunately, there are tools designed to make managing secrets easier. We are going to compare the best secrets management tools in this article.
Welcome to today's tutorial on aviationstack, a free, real-time flight status and global aviation data API used by more than 5,000 companies. You can obtain up to the minute information on flight departures and arrivals, historical arrival data, routes, airports, airlines, airplanes, aircraft types, and even taxes. And, it's free up to 500 requests per month before a paid plan is required.
The Future Of Web Design: Trends For 2020 Read More »
If you work in open source, we're going to bet you may not know that what you do every day affects a billion people. Surprised? You shouldn't be! In fact, that number is most likely even larger than that, given the popularity of open-source software throughout industries across the globe.
I've been following the latest efforts (in the US) of the GOP to unfairly redraw electoral boundaries and was considering how simple a law could be worded to ensure a more fair allocation of electoral districts. What I came up with is:
I chose the 1.5 number as a starting point. Do the above three restrictions effectively eliminate the tetris/dragon style maps?
Take a look at your website(s) and think about how many blog posts are available for easy access on the homepage. I’m sure you can see maybe four or five, or maybe even up to ten or a few more, but once your blog posts leave the homepage they become similar to a link moving to the […]
The post Recycle Old Blog Posts to Drive Traffic appeared first on WPExplorer.
When writing code for the web, eventually you'll need to do some process that might take a few moments to complete. JavaScript can't really multitask, so we'll need a way to handle those long-running processes.
Async/Await is a way to handle this type of time-based sequencing. It’s especially great for when you need to make some sort of network request and then work with the resulting data. Let's dig in!
Async/Await is a type of Promise. Promises in JavaScript are objects that can have multiple states (kind of like the real-life ones ☺️). Promises do this because sometimes what we ask for isn't available immediately, and we'll need to be able to detect what state it is in.
Consider someone asks you to promise to do something for them, like help them move. There is the initial state, where they have asked. But you haven't fulfilled your promise to them until you show up and help them move. If you cancel your plans, you rejected the promise.
Similarly, the three possible states for a promise in JavaScript are:
Here’s an example of a promise in these states:
Here is the fulfilled state. We store a promise called getSomeTacos, passing in the resolve and reject parameters. We tell the promise it is resolved, and that allows us to then console log two more times.
const getSomeTacos = new Promise((resolve, reject) => {
console.log("Initial state: Excuse me can I have some tacos");
resolve();
})
.then(() => {
console.log("Order some tacos");
})
.then(() => {
console.log("Here are your tacos");
})
.catch(err => {
console.error("Nope! No tacos for you.");
});> Initial state: Excuse me can I have some tacos
> Order some tacos
> Here are your tacos
See the Pen
Promise States by Sarah Drasner (@sdras)
on CodePen.
If we choose the rejected state, we'll do the same function but reject it this time. Now what will be printed to the console is the Initial State and the catch error:
const getSomeTacos = new Promise((resolve, reject) => {
console.log("Initial state: Excuse me can I have some tacos");
reject();
})
.then(() => {
console.log("Order some tacos");
})
.then(() => {
console.log("Here are your tacos");
})
.catch(err => {
console.error("Nope! No tacos for you.");
});> Initial state: Excuse me can I have some tacos
> Nope! No tacos for you.And when we select the pending state, we'll simply console.log what we stored, getSomeTacos. This will print out a pending state because that's the state the promise is in when we logged it!
console.log(getSomeTacos)> Initial state: Excuse me can I have some 🌮s
> Promise {<pending>}
> Order some 🌮s
> Here are your 🌮sBut here’s a part that was confusing to me at first. To get a value out of a promise, you have to use .then() or something that returns the resolution of your promise. This makes sense if you think about it, because you need to capture what it will eventually be — rather than what it initially is — because it will be in that pending state initially. That's why we saw it print out Promise {<pending>} when we logged the promise above. Nothing had resolved yet at that point in the execution.
Async/Await is really syntactic sugar on top of those promises you just saw. Here's a small example of how I might use it along with a promise to schedule multiple executions.
async function tacos() {
return await Promise.resolve("Now and then I get to eat delicious tacos!")
};
tacos().then(console.log)Or a more in-depth example:
// this is the function we want to schedule. it's a promise.
const addOne = (x) => {
return new Promise(resolve => {
setTimeout(() => {
console.log(`I added one! Now it's ${x + 1}.`)
resolve()
}, 2000);
})
}
// we will immediately log the first one,
// then the addOne promise will run, taking 2 seconds
// then the final console.log will fire
async function addAsync() {
console.log('I have 10')
await addOne(10)
console.log(`Now I'm done!`)
}
addAsync()> I have 10
> I added one! Now it's 11.
> Now I'm done!
See the Pen
Async Example 1 by Sarah Drasner (@sdras)
on CodePen.
One common use of Async/Await is to use it to chain multiple asynchronous calls. Here, we'll fetch some JSON that we'll use to pass into our next fetch call to figure out what type of thing we want to fetch from the second API. In our case, we want to access some programming jokes, but we first need to find out from a different API what type of quote we want.
The first JSON file looks like this- we want the type of quote to be random:
{
"type": "random"
}The second API will return something that looks like this, given that random query parameter we just got:
{
"_id":"5a933f6f8e7b510004cba4c2",
"en":"For all its power, the computer is a harsh taskmaster. Its programs must be correct, and what we wish to say must be said accurately in every detail.",
"author":"Alan Perlis",
"id":"5a933f6f8e7b510004cba4c2"
}We call the async function then let it wait to go retrieve the first .json file before it fetches data from the API. Once that happens, we can do something with that response, like add it to our page.
async function getQuote() {
// get the type of quote from one fetch call, everything else waits for this to finish
let quoteTypeResponse = await fetch(`https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/quotes.json`)
let quoteType = await quoteTypeResponse.json()
// use what we got from the first call in the second call to an API, everything else waits for this to finish
let quoteResponse = await fetch("https://programming-quotes-api.herokuapp.com/quotes/" + quoteType.type)
let quote = await quoteResponse.json()
// finish up
console.log('done')
}We can even simplify this using template literals and arrow functions:
async function getQuote() {
// get the type of quote from one fetch call, everything else waits for this to finish
let quoteType = await fetch(`quotes.json`).then(res => res.json())
// use what we got from the first call in the second call to an API, everything else waits for this to finish
let quote = await fetch(`programming-quotes.com/${quoteType.type}`).then(res => res.json())
// finish up
console.log('done')
}
getQuote()Here is an animated explanation of this process.
See the Pen
Animated Description of Async Await by Sarah Drasner (@sdras)
on CodePen.
Eventually we’ll want to add error states to this process. We have handy try, catch, and finally blocks for this.
try {
// I’ll try to execute some code for you
}
catch(error) {
// I’ll handle any errors in that process
}
finally {
// I’ll fire either way
}Let’s restructure the code above to use this syntax and catch any errors.
async function getQuote() {
try {
// get the type of quote from one fetch call, everything else waits for this to finish
let quoteType = await fetch(`quotes.json`).then(res => res.json())
// use what we got from the first call in the second call to an API, everything else waits for this to finish
let quote = await fetch(`programming-quotes.com/${quoteType.type}`).then(res => res.json())
// finish up
console.log('done')
}
catch(error) {
console.warn(`We have an error here: ${error}`)
}
}
getQuote()We didn’t use finally here because we don’t always need it. It is a block that will always fire whether it is successful or fails. Consider using finally any time you’re duplicating things in both try and catch. I usually use this for some cleanup. I wrote an article about this, if you’re curious to know more.
You might eventually want more sophisticated error handling, such as a way to cancel an async function. There is, unfortunately, no way to do this natively, but thankfully, Kyle Simpson created a library called CAF that can help.
It's common for explanations of Async/Await to begin with callbacks, then promises, and use those explanations to frame Async/Await. Since Async/Await is well-supported these days, we didn’t walk through all of these steps. It’s still pretty good background, especially if you need to maintain older codebases. Here are some of my favorite resources out there:
The post Understanding Async Await appeared first on CSS-Tricks.