Tag Archives: website

Ways to Use Google Apps Script to Fetch Databases to a Google Spreadsheet

How to Use Google Apps Script to Fetch Databases to a Google Spreadsheet_YWF

It is pretty common to export information from a WordPress database to an Excel sheet or in a CSV format. However, you may realize that there is a problem with exporting and importing files. One of the most common ones is that the process is sometimes not too intuitive and all files need to be updated at regular intervals.

However, now you can forget those old days, as today, you can solve the problem by using Google Apps Script to link your WordPress database to a Google spreadsheet which automates the workflow. As a web developer, you surely want to know how a Google Apps Script can be used to fetch database values from WordPress through the Google Apps Script Spreadsheet Service. So, here is some information about it that you need to know.

What is Google Apps Script?

Through Google Apps Script, you can automate tasks across Google products and third party services and build web applications. In many cases, Google Apps Script is also known as a JavaScript cloud scripting.

This is why you can do a lot of new things with Google Apps like Docs, Sheets, and Forms through the Google App Script. Other benefits that you can get from the Google App Scripts are:

  • Add custom menus, dialogs, and sidebars to Google Docs, Sheets, and Forms.
  • Write custom functions for Google Sheets
  • Publish web apps – either standalone or embedded in Google Sites
  • Interact with other Google services, including AdSense, Analytics, Calendar, Drive, Gmail, and Maps.

Furthermore, with the Google Apps Script Spreadsheet service, you can create access and modify Google Sheets files.

Creating a Google Apps Script with Spreadsheet

If you want to create a Google Apps Scripts with Spreadsheet, the steps will be as follows:

  • Create a New Spreasheet
  • Click on “Tools ->Script Editor”
  • The editor window will appear in a new tab
  • When writing the script, there are several Classes and methods that you can choose. Some of them are as follows:
  1. Classes
  • BorderStyle
  • DataValidation
  • ContainerInfo
  • Range
  1. Methods
  • getChartType()
  • getRanges()
  • setColours()

 

Below is the Sample app script example that will store the spreadsheet data into the log:

function logProductInfo() {

var sheet = SpreadsheetApp.getActiveSheet();

var data = sheet.getDataRange().getValues();

for (var i = 0; i < data.length; i++) {

Logger.log(‘Product name: ‘ + data[i][0]);

Logger.log(‘Product number: ‘ + data[i][1]);

}

}

  • Don’t forget to debug the script after writing the script. You can debug the icon easily by clicking on debug icon and if debugging is successful with no error then you can “Run” the script by clicking on run icon.
  • Click on “View->Logs” to view the Log.

 Google Apps Script and WordPress

You can also use Google Apps Script with WordPress in many ways. For example, you can connect with the WordPress database. Via JDBC service, Google Apps Script can access many relational databases. It is actually a wrapper around the standard Java Database Connectivity standard. In Google Apps Script, the JDBC service supports the Google Cloud SQL, MySQL, Microsoft SQL Server, and Oracle databases.

You can read the following example that will demonstrate the database connection:

function myFunction() {// make the connectionvar connection = Jdbc.getConnection(“jdbc:mysql://db IP or host name:port number/DB name”, “User name”, “password”);// perform the queryvar SQLstatement = connection.createStatement();var result = SQLstatement.executeQuery(“SELECT * FROM DB_NAME”);// choose a range in sheetvar ss = SpreadsheetApp.getActiveSpreadsheet();var cell = ss.getRange(‘A2’);// loop through result object, setting cell values to database datavar row = 0;while(result.next()) {for(var i=0; i<4; i++) { // four fields per recordcell.offset(row, i).setValue(result.getString(i+1));}row++;}// tidy upresult.close();SQLstatement.close();connection.close();}

By running this code, you will get the values from the database and add the fetched values into the currently active spreadsheet. You can also add values into the database, in which those values can be used in WordPress. For instance, it is possible to register all of the users’ data in a spreadsheet in one go through the Google Apps Script.

Conclusion

In order to easily map your WordPress database to a Google Spreadsheet, you can use the Google Apps Script. Another advantage that you can get by applying this method is that you can simply run this script to update your spreadsheet as per your database. Furthermore, you don’t need to constantly import and merge files in order to keep your online and offline databases in sync. This makes this application highly useful, especially for developers who want to use Google APIs for many purposes.

Creating a More Accessible Website

In general, website accessibility is known as an attempt of removing online barriers faced by people with disabilities. The goal is to provide everyone with equal access to online information and functionality.

This website accessibility issue has been broken down by the W3C or World Wide Web Compliance organization into 12 points and the accessibility requirements will continue to evolve. But, don’t worry, as you can improve the accessibility of your website by following the best practices below for web design, development, and content management to improve the user experience on your website for all visitors. If you are a web developer, this article will suit you best, so keep on reading and learn how to create an accessible web today!

How to Design for all Users?

Below are ways that you can apply to make your user interface design and visual design more accessible. These tips can be applied both to a new website and to an existing site.

Applying the Right Color Contrast Ratio

Color contrast helps people see the text clearly as it gives sufficient contrast between the text color and background color. Therefore, it is important for you to provide a good color contrast ratio. As a best practice, your foreground text should have sufficient contrast from the background colors. A contrast ratio of 5:1 for normal text and 3:1 for large text are good standards to follow and also meet the minimum requirements for WCAG 2.0 Level AA.

Avoiding Sliders and Animations

Some studies reveal that user experiences and visitor engagement are not good for conversions and can cause low engagement. Therefore, it is better to avoid using any rotating slides and carousels on web pages because some website visitors may require more time to view and read a slide, besides, rotating and moving content will only create frustration for visitors.

Utilizing WordPress for Accessibility

Since February 2016, WordPress has released WordPress Accessibility Coding Standards which provide a compliant based on which custom themes can be built, most major themes and frameworks on WordPress, like Genesis or Avada.  Furthermore, all new or updated code released in WordPress must conform to the WCAG 2.0 guidelines.

Form Labels and Errors

Instead of using placeholder text, make sure all forms on your website have proper form labels. For example, the form pictured below has placeholder text for username and password, but once the form field is clicked, the user can no longer see what information should be entered into the field. This kind of form will create a hindrance for users that need extra time filling out a form.

Web Page Navigation

Another thing that you should bring to your attention is the accessibility in creating a website that can be navigated using a keyboard. This is because some website users with mobility impairments can’t use a mouse to navigate your website and rely on a keyword or keyboard-like device.

In fact, the better your page’s structure and semantics are, the more navigable and understandable it is for all users. Therefore, make sure that your WordPress developer is following the best practices in page structures by using proper heading hierarchies, enabling skip links, and using accurate semantic HTML.

How to Manage Content for All Users?

Don’t forget about content, because having an accessible website requires an adjustment in how you handle all website content going forward, so here are some of the ways that you can do.

Adding Alternative Text to Images

To describe the appearance of an image on a web page, alt text is used within an HTML. Visually impaired users rely on alt text to understand an image on a website. With WordPress interface, website administrators can easily update website content and add alternative text to images. In this case, alternative text is helpful for SEO, as search engines look for alternative text to identify and properly index an image.

Video & Audio Captions

Just like having captions on images, you should also put captions and transcripts on any video or audio. By giving captions, to multi-media, the visitors can easily enjoy and access the knowledge offered in the media. Furthermore, with captions, visitors can conveniently watch videos with the sound off. Today, it is easy to find numerous free tools available for adding and editing captions to your video and audio files.

So, whether you are creating a new website or upgrading it, it is important to protect all that work by ensuring the website is secure from hackers and security breaches. In fact, you may need to have a daily backup, not only for security, but also for breaking a component related to accessibility.

In summary, major online businesses are realizing on the importance of accessibility that is able to encourage closed captions on videos for users who are deaf and hard of hearing, so are you ready to start creating a more accessible website today? Remember that it is important to create a website that can be accessed by anyone, anytime, and anywhere.

Simple Tips for Designing a Browserless Web

browserless_ywf

Browserless web is best known as communication over the World Wide Web between programs rather than between people and the server programs at Web sites. Many people believe that in the future, program-to-program communication will be more popular, as it will generate more traffic than browser-to-Web site communication. Even though browser-to-Web site communication is program-to-program – the browser is a client program and the Web server is a server program on behalf of a Web site – this new program-to-program communication does not involve an interactive user. Application that orders fulfillment is likely candidates for the browser less Web.

Of course, there are also some pros and contras on the topic of native versus web experiences. Many are comparing its reliability and speed with the native app experience. Therefore, in this article, we will explain how to design and develop progressive web applications (PWAs) in brief, so that many can experience a browserless web. Hopefully, this article would be beneficial for web developers or web designers who want to create a more engaging web.

  • Instant Page Transitions

It’s an open secret that users do not want to wait. Therefore, you have to be able to get in and around an app quickly without making them wait for your content to load in each interaction.

Solved with PWA

In order to pass the Lighthouse checklist for a PWA, one must follow certain performance-enhancing guidelines. Then, the content will be cached behind the scenes and to make you feel like there is no loading event, content should be cached behind the scenes.

  • Perceived Performance

You might be surprised by knowing that the level of stress caused by mobile delays is pretty much the same as watching a horror movie. Therefore, a good app should not let their users wait for their content. Other thing like elements appearing asynchronously as the app loads should also be avoided.

Solved with PWA

With the “Add to Homescreen” PWA launch transition, you can have a visual bridge between loading and loaded content. This shows how “preloaded states” can increase the perception of speed and seamlessness. Through a well-designed PWA, you can mimic the end state of the page and by using lazy-loading to deprioritize elements that are out of view; you can make the initial loading seem faster.

  • Works Offline

People, who prefer to download native apps, mostly want to use the apps without constantly relying on an Internet connection in order for the apps to function properly.

Solved with PWA

To solve this problem, the page content will be cached behind the scenes, allowing it to be accessed where there would, otherwise be a lag  in the browsing experience, such as when entering a tunnel while driving.

  • Back Button

Android provides a back button through the device which makes some people think there is no need to replace the browser’s back functionality. In fact, most apps choose to offer a back button in the header as an “up” action that navigates within the hierarchical relationship between pages.

Solution

The only possible solution for this problem is to place the menu button in the top left with a back button once the user progresses past the initial page. It will be validated once we put this pattern in front of users. Once participants had progressed through the initial home page, you can ask them to navigate to a new section.

 Can We Use it in the Real World?

Of course you will need “Add to Homescreen” to develop into an accepted group of patterns. To get some best practices about browserless web, you can read the following practices:

Sticky Headers, Persistent Actions

With this sticker, visitors can understand about the importance of learning ability when introducing new patterns.  In fact, the main purpose of this sticker is to ensure that users can easily find crucial global actions.

Prompt Intelligently

As it is said that PWA’s will get full control when they want to prompt users, this makes “Add to Homescreen” installation increase.

Stress and Test

One of the most important validation processes is to do the stress test in multiple applications. This is because, in most cases, the pattern stood up well to the latest brand. For example, the Lancome’s PWA contains many calls to action, which, as a result, can help in identifying overflow menu as a great opportunity to simplify its user interface, while offering exclusives program.

Conclusion

Many believe that “Add to Homescreen” will offer users to a next level experience, which is more engaging and converting user. This is because, a more modern, app-like web can have more positive effects on engagements, as it meets user expectations of performance and design.

The only way to meet those expectations is by combining PWA performance enhancements with intuitive design patterns in navigation and app-like user experience.