Duvien - Design | Develop | Host | Drupal | WordPress | Ecommerce | Themes | Photography | Music | Digital playground | Scotland | UK https://duvien.com/rss.xml en Responsive Design is Killing Two-Thirds of Your Conversions. Here's How to Fix It. https://duvien.com/blog/responsive-design-killing-two-thirds-your-conversions-heres-how-fix-it <span class="field field--name-title field--type-string field--label-hidden">Responsive Design is Killing Two-Thirds of Your Conversions. Here&#039;s How to Fix It.</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/mobile.jpg?itok=5dm-7zhA" width="950" height="322" alt="Responsive Design is Killing Two-Thirds of Your Conversions" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 19/08/2016 - 15:36</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Allow me to start with a quick summary of this article:</p> <p>There's a <a href="http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/">270% gap</a> in conversions between desktop and mobile, because mobile websites suck and we’re all doing it wrong. (Now that I’ve gotten that out of the way, I’ll explain why and what needs to be done to fix this.)</p> <p>At its essence, responsive design is supposed to make a cross-device world a more seamless experience by adapting your desktop design to a smaller mobile screen. Unfortunately, condensing all that desktop content into such a small screen has the exact opposite effect — it's actually causing huge loss in conversion rates. But how?</p> <p>Responsive design clutters mobile sites with irrelevant content for on-the-go visitors. Built with a desktop user in mind, a mobile visitor who has different intentions and a different state of mind may not find what they’re looking for, and leave your site feeling frustrated and confused. <em>This</em> is the source of your huge loss in conversions.</p> <p>This isn’t to say you should abandon responsive design altogether. Rather, you must think more specifically about the mobile web <em>experience</em> and the mobile visitor’s <em>state of mind</em>instead of simply transferring the desktop design to a mobile one.</p> <p>To develop a useful responsive mobile experience we must do two things:</p> <ol><li>Most importantly, consider why a mobile customer has come to your site;</li> <li>And understand their intent.</li> </ol><p>(<a href="https://www.banana-splash.com/blog/5-metrics-you-should-follow-to-understand-your-mobile-visitors/">Here are 5 metrics you should follow</a> to understand your mobile visitors better.)</p> <p>These two parameters will help determine what you need to highlight, remove, or optimize on your mobile site and give greater clarity to what your responsive design should include. Below are the 5 basic elements you should consider when designing your mobile experience:</p> <h2>5 Steps for Optimizing Your Responsive Site</h2> <h3>1. Optimize image scaling and consider value</h3> <p>Most images scale down with responsive design. However, an image that looks nice on a desktop can suddenly become a dominant and distracting part of a mobile site. Although images are scalable, depending on their value, they might not be necessary to mobile design. Consider the way an image appears within your responsive design. Is it an effective use of visuals? If the image is taking up the entire screen on a phone, or simply serves as nice centerpiece to the site, it’s time to rethink how that image is used device-to-device. For example, Simpsons Solutions’ desktop image doesn’t scale well and overtakes the mobile screen, cluttering the design and making it hard to comprehend what’s going on on that page.</p> <p><img src="https://d2v4zi8pl64nxt.cloudfront.net/responsive-design-fix-conversions/57b39a0b00a541.11219025.png" /></p> <p>Images (both logo and main image) that work well on desktop completely overtake the mobile screen, have almost no value on a phone, and make it difficult to understand the product.</p> <p><img src="https://d1avok0lzls2w.cloudfront.net/uploads/blog/57b554040bcca3.92827631.jpg" /></p> <p>Outdoor retailer REI’s website, on the other hand, uses the same photo as a focal point on both mobile and desktop, but it scales to the appropriate needs of the visitor.</p> <p><img src="https://d2v4zi8pl64nxt.cloudfront.net/responsive-design-fix-conversions/57b39a0d1baa88.81456155.png" /><img src="https://d2v4zi8pl64nxt.cloudfront.net/responsive-design-fix-conversions/57b39a0dde5270.17527525.png" /></p> <h3>2. Simplify navigation</h3> <p>Perhaps one of the most important features a mobile site can include is a clear and functional navigation bar. Having a visible, easily accessible menu or search bar helps mobile visitors get where they're going quickly. Most mobile visitors are coming to a mobile site with a single objective in mind; they'll waste no time in finding the menu bar, searching for a keyword, and clicking to the page they need.</p> <p>Analyzing what your mobile customers are doing on your site and searching for is integral for understanding how to tailor your mobile site to those needs. You may discover most mobile visitors use the search bar rather than click on your main call-to-action button; as a result, you might redesign your mobile site to feature the search bar more prominently, helping mobile visitors achieve their goals more quickly. In addition, understanding what people are actually searching for on the site will give you an indication to what’s missing, what isn’t clear, and what needs optimizing.</p> <p>Because they're on the go, mobile visitors are often in need of a contact page, usually looking for an address or a phone number to easily reach your company. Brick-and-mortar businesses should be especially cognizant of this, ensuring they have an easy-to-find contact page directly via the site navigation or on the homepage itself. Customers are much more likely to complete an order, visit your physical shop, and leave satisfied with the experience if finding you is simple and straightforward.</p> <p><img src="https://d1avok0lzls2w.cloudfront.net/uploads/blog/57b5541d6ab1d8.17400026.jpg" /></p> <h3>3. Kill responsive pop ups, use mobile overlays</h3> <p>Overlays and pop ups built for desktop experiences on mobile tend to distract from a mobile visitor’s primary purpose for landing on your site. Instead, guide them and focus them on a singular goal — <em>their</em> goal. Using a desktop solution for a mobile experience kills conversions. Since desktop overlays/pop-ups aren’t designed to fit the 19,000 combinations of screen size and resolutions found on mobile devices today, it’s wise not to use them on mobile. You don’t want an overlay fit to the resolution and specs of a desktop — these won’t scale down, making mobile navigation unbearable.</p> <p>A bad overlay, like the examples below, completely take over the mobile screen, prevent you from seeing any other content, are hard to click out of, and do not fit the mobile screen (see how the email field is cut on the LastKings example).</p> <p><img src="https://d1avok0lzls2w.cloudfront.net/uploads/blog/57b554307ded53.84980705.jpg" /></p> <p><img src="https://d1avok0lzls2w.cloudfront.net/uploads/blog/57b55444616331.51648593.jpg" /></p> <p>Instead, studying how a mobile visitor behaves on your site can help you determine what your overlay should ask for, lead to, or even just what information should be included. Take into consideration both the mobile technical necessities and the customer's mobile behavior to design an overlay to the exact needs of your mobile visitors.</p> <p><img src="https://d2v4zi8pl64nxt.cloudfront.net/responsive-design-fix-conversions/57b39a1274f4e2.01062987.gif" /><img src="https://d2v4zi8pl64nxt.cloudfront.net/responsive-design-fix-conversions/57b39a131e83a2.17585693.gif" /></p> <h3>4. Less is more: simplify, shorten and optimize your text</h3> <p>While it might seem obvious, text is often one feature that very few brands take the time to develop for effective desktop (let alone mobile) sites. To avoid overcrowding and confusion, it's always better to keep text brief and to the point in terms of how many words appear on a site. This is where information hierarchy comes heavily into play. Your company can rearrange, rewrite, and reformat any headlines and taglines to feature only the most important information for a mobile visitor. This practice also ensures that the text isn’t taking over a page with long and wordy visuals.</p> <p>While all this text seems to work well on desktop, mobile is a completely different story. The text completely hides the page, is impossible to read, and all conversion elements (such as trust symbols and call-to-action buttons) have been pushed below the fold. This is yet another case of failed responsive design:</p> <p><img src="https://d2v4zi8pl64nxt.cloudfront.net/responsive-design-fix-conversions/57b39a140bdab9.41352145.png" /></p> <p><img src="https://d1avok0lzls2w.cloudfront.net/uploads/blog/57b5546cb91380.23387236.jpg" /></p> <p>Another factor to consider is the automatic nature of scrolling on a mobile device. A desktop can capture a full message, words, and pictures in a single glance. While less people scroll when on a desktop, on mobile, visitors instantly begin scrolling hoping for something to catch their eye. This should influence how you write a headline based on where and how it scrolls. Text should be short and concise so it catches the eye and is valuable to the reader.</p> <h3>5. Reconsider and clarify your calls-to-action</h3> <p>A mobile site should have one clear goal that the call-to-action button should support. The call-to-action button should be the first element a mobile visitor pays attention to and it should instantly tell the visitor what to do. For example, Udemy, an online learning platform, puts a very clear call-to-action at the top of their mobile landing page that aligns with the company’s overall goal. They know their customers have come to their site to learn, so to help them accomplish this goal instantly, they provided a button for finding courses and a search bar for enhanced navigation.</p> <h2><img src="https://d1avok0lzls2w.cloudfront.net/uploads/blog/57b5547eb882b2.89207346.jpg" /></h2> <h2>Create seamless design today</h2> <p>While the goal is to create a seamless experience across all channels for your customers, in order to increase conversions and create a better experience on mobile or any other device, companies must get to know their customers better, understanding their behavior and state of mind before choosing to implement the simple, common solution that may kill their conversions and experience. Remember to always have your mobile customers’ specific behavior and needs in mind before designing your next landing page or site.</p> <p>What mobile design tactics have worked for you? Let us know in the comments below.</p> <p><small>[This article was published on moz.com and is written by <a href="https://moz.com/community/users/808819">Talia Wolf</a>]</small></p> <p> </p> </div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/seo" typeof="schema:Thing"> <a href="/tag/seo"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">SEO</div> </a> <span property="schema:name" content="SEO" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/responsive-web-design" typeof="schema:Thing"> <a href="/tag/responsive-web-design"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">responsive web design</div> </a> <span property="schema:name" content="responsive web design" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=216&amp;2=comment&amp;3=comment" token="b9816b9e"></drupal-render-placeholder> </section> Fri, 19 Aug 2016 14:36:31 +0000 duvien 216 at https://duvien.com https://duvien.com/blog/responsive-design-killing-two-thirds-your-conversions-heres-how-fix-it#comments Make certain region of a web page editable with Sitecake https://duvien.com/blog/make-certain-region-web-page-editable-sitecake <span class="field field--name-title field--type-string field--label-hidden">Make certain region of a web page editable with Sitecake</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 02/08/2016 - 19:10</span> <div class="field field--name-field-video-embed field--type-video-embed-field field--label-hidden field__item"><div class="video-embed-field-responsive-video"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/MomffHIOa7A?autoplay=0&amp;start=0&amp;rel=0"></iframe> </div> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><img alt="Sitecake" src="http://sitecake.com/img/logo.png" /></p> <p>There are times when a fully fledge CMS is just overkill for your client who is only looking for a simple website for an onlione presence. For example, i had a client who wanted a website just to put up some information about their small business.</p> <p>The static website only consists of a frontpage with some images and content, an about page and contact form page. This is just a simple 3 page website.</p> <p>There was one more request, they wanted to be able to edit the frontpage and about us page.</p> <p>This is were <a href="http://sitecake.com/">Sitecake</a> fills the gap to make certain section of the web page editable.</p> <p>And it's simple...</p> <p>All it requires is to add <strong><em>sc-content</em></strong> class to divs you want editable (example below):</p> <pre> <code>&lt;div class="sc-content"&gt; &lt;h1&gt;Fine looking heading&lt;/h1&gt; &lt;img src=”feature.jpg"&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;/div&gt;</code></pre> <p>Once this is done, <a href="http://sitecake.com/">SiteCake</a> will render these editable regions with some inline editing features.</p> <p>Check the video (above), it outlines exactly what <a href="http://sitecake.com/">Sitecake</a> can offer. It works really well on either static or PHP websites.</p> <p> </p> </div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/sitecake" typeof="schema:Thing"> <a href="/tag/sitecake"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Sitecake</div> </a> <span property="schema:name" content="Sitecake" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/website-builder" typeof="schema:Thing"> <a href="/tag/website-builder"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">website builder</div> </a> <span property="schema:name" content="website builder" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=215&amp;2=comment&amp;3=comment" token="81bae0ed"></drupal-render-placeholder> </section> Tue, 02 Aug 2016 18:10:34 +0000 duvien 215 at https://duvien.com https://duvien.com/blog/make-certain-region-web-page-editable-sitecake#comments Create a featured post for frontpage using Query Wrangler for WordPress https://duvien.com/blog/create-featured-post-frontpage-using-query-wrangler-wordpress <span class="field field--name-title field--type-string field--label-hidden">Create a featured post for frontpage using Query Wrangler for WordPress</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/query-wrangler.png?itok=2mCWIOml" width="950" height="469" alt="Query Wrangler" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Sun, 31/07/2016 - 16:01</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><blockquote> <p><a href="https://wordpress.org/plugins/query-wrangler/">Query Wrangler</a> provides an intuitive interface for creating complex WP queries as shortcodes and widgets. UI based on Drupal Views.</p> </blockquote> <p>If you come from a Drupal background, you will no doubt have used Views. It was such an essential part of Drupal that it has made it's way into Drupal core as of Drupal version 8 for all the right reasons.</p> <p>WordPress have had a similar plugin for some time now (in fact, for a few good years). It really has borrowed heavliy from Drupal Views. Anyway, not going into details about this plugin but all i can say is that it's nice to know something like this exist for WP even though it still isn't a powerful as Drupal View is, though that might be a factor due to WP itself.</p> <p><a href="https://wordpress.org/plugins/query-wrangler/">Query Wrangler</a> is a admin UI tool that helps you to query the DB for certain existing fields to be displayed either using shortcode, widget or programmically in the theme file. </p> <p>------------------------------------------------------</p> <p>This article is about creating a <strong>featured post </strong>to be shown on frontpage and is a continution of previous article since we are going to build it into the same website. The article is '<a href="/blog/create-similar-website-duviencom-less-day-wordpress"><span>Create a similar website like duvien.com in less than a day with WordPress</span></a>'.</p> <p>The demo site for this article is: <a href="https://wp.duvien.com/">https://wp.duvien.com/</a></p> <p>You can download my theme used for this article: Pingraphy-child theme - <a href="https://github.com/vienie/pingraphy-child">https://github.com/vienie/pingraphy-child</a></p> <p>This <strong>Featured frontpage post</strong> we will create is to show 1 latest post consisting of a page title, teaser text and the post image.</p> <p>First of all, let's install Query Wrangler. Go to menu --&gt; plugins --&gt; add new. Search for query wrangler. When you find it, click on 'install now' button and activate the plugin.</p> <p>Now you should see a new menu link item called 'Query Wrangler'. Click on this link and then click on 'add new' button.</p> <p>Under <em>Query name</em>, enter: Featured frontpage post</p> <p>For <em>Query Type</em>, leave it as: Widget</p> <p>So it should look like in the image below:</p> <p><img alt="Create query" data-entity-type="file" data-entity-uuid="e7c456db-290c-4afd-9925-36eb08dd74ab" src="/sites/default/files/inline-images/create-query.png" /></p> <p>Click 'create' button to create your Views.</p> <p>To create our Featured frontpage post, these are the settings you need:</p> <p>Under <strong>Basic Settings </strong>box:</p> <p><strong>Row style - </strong><br /> How should each post in this query be presented? Fields<br /> Posting settings - complete post</p> <p><strong>Post per page - </strong><br /> 1</p> <p><strong>Post status -</strong><br /> Publish</p> <p>Under <strong>Fields </strong>box:</p> <p>Click on add button.<br /> Select <strong>Post title</strong><br /> Click update button</p> <p>Click on add button.<br /> Select <strong>Featured image</strong><br /> Click update button</p> <p>Click on add button.<br /> Select <strong>Custom Field: teaser_text</strong><br /> Click update button</p> <p>Once you ahve add the 3 fields.</p> <p>Click on Post Title field and make sure it looks like what is shown in the image below:</p> <p><img alt="Post title" data-entity-type="file" data-entity-uuid="7f4afaa5-7962-4aac-abbb-e68e010ed4df" src="/sites/default/files/inline-images/post-title.png" /></p> <p>Do the same for Featured image:</p> <p><img alt="Featured image" data-entity-type="file" data-entity-uuid="fa57ac9e-93ee-44af-9161-b13122e04b05" src="/sites/default/files/inline-images/feat-image_0.png" /></p> <p>Do the same for Custom Field: teaser_text:</p> <p><img alt="Teaser Text" data-entity-type="file" data-entity-uuid="71197234-afd0-423a-9cc5-d8abea41d991" src="/sites/default/files/inline-images/teaser_text1.png" /></p> <p>Under <strong>Sort Options </strong>box:</p> <p>Click on add button.<br /> Select <strong>Date</strong><br /> Click update button</p> <p>Click on <strong>Date</strong> and select: Descending in the dropdown list</p> <p>--------</p> <p>Under <strong>Filters </strong>box:</p> <p>Click on add button.<br /> Select <strong>Post Types</strong><br /> Click update button</p> <p>Click on <strong>Post Types</strong> and select: Post</p> <p>Here is the export views (below) you can import into your website for the same setup as above. To import, go to menu --&gt; Query Wrangler --&gt; import. Leave <em>Query name</em> blank and copy and paste the export code below, then click import button.</p> <pre> <code class="language-bash">$query = array ( 'name' =&gt; 'Featured frontpage post', 'slug' =&gt; 'featured-frontpage-post', 'type' =&gt; 'widget', 'path' =&gt; NULL, 'data' =&gt; array ( 'display' =&gt; array ( 'title' =&gt; '', 'style' =&gt; 'unformatted', 'row_style' =&gt; 'fields', 'post_settings' =&gt; array ( 'size' =&gt; 'complete', ), 'field_settings' =&gt; array ( 'group_by_field' =&gt; '__none__', 'fields' =&gt; array ( 'post_title' =&gt; array ( 'type' =&gt; 'post_title', 'hook_key' =&gt; 'post_title', 'name' =&gt; 'post_title', 'weight' =&gt; '0', 'link' =&gt; 'on', 'label' =&gt; '', 'rewrite_output' =&gt; 'on', 'custom_output' =&gt; '&lt;h1&gt;{{post_title}}&lt;/h1&gt;', 'classes' =&gt; '', 'empty_field_content' =&gt; '', ), 'featured_image' =&gt; array ( 'type' =&gt; 'featured_image', 'hook_key' =&gt; 'featured_image', 'name' =&gt; 'featured_image', 'weight' =&gt; '1', 'image_display_style' =&gt; 'pingraphy-child-large', 'link' =&gt; 'on', 'label' =&gt; '', 'custom_output' =&gt; '', 'classes' =&gt; '', 'empty_field_content' =&gt; '', ), 'meta_teaser_text' =&gt; array ( 'type' =&gt; 'meta_teaser_text', 'hook_key' =&gt; 'meta_teaser_text', 'name' =&gt; 'meta_teaser_text', 'weight' =&gt; '2', 'meta_value_count' =&gt; '1', 'meta_value_separator' =&gt; '', 'display_handler' =&gt; 'acf_default', 'image_display_style' =&gt; 'thumbnail', 'label' =&gt; '', 'hide_if_empty' =&gt; 'on', 'custom_output' =&gt; '', 'classes' =&gt; '', 'empty_field_content' =&gt; '', ), ), ), 'template_part_settings' =&gt; array ( 'path' =&gt; '', 'name' =&gt; '', ), 'header' =&gt; '', 'footer' =&gt; '', 'empty' =&gt; '', 'wrapper-classes' =&gt; '', 'page' =&gt; array ( 'pager' =&gt; array ( 'type' =&gt; 'default', 'previous' =&gt; '', 'next' =&gt; '', ), ), ), 'args' =&gt; array ( 'posts_per_page' =&gt; '1', 'post_status' =&gt; 'publish', 'offset' =&gt; 0, 'sorts' =&gt; array ( 'date' =&gt; array ( 'type' =&gt; 'date', 'hook_key' =&gt; 'post_date', 'name' =&gt; 'date', 'weight' =&gt; '0', 'order_value' =&gt; 'DESC', ), ), 'filters' =&gt; array ( 'post_types' =&gt; array ( 'type' =&gt; 'post_types', 'hook_key' =&gt; 'post_types', 'name' =&gt; 'post_types', 'weight' =&gt; '0', 'post_types' =&gt; array ( 'post' =&gt; 'post', ), 'exposed_label' =&gt; '', 'exposed_desc' =&gt; '', 'exposed_key' =&gt; '', 'exposed_settings' =&gt; array ( 'type' =&gt; 'select', ), ), ), ), ), );</code></pre> <p>Lastly, we want to display this new widget in the theme and show it only on frontpage.</p> <p>To do this, we need to copy the index.php file from parent theme (pingraphy) to our child theme (pingraphy-child). Remember, this article is a follow up to: <a href="/blog/create-similar-website-duviencom-less-day-wordpress"><span class="field field--name-title field--type-string field--label-hidden" data-quickedit-field-id="node/211/title/en/full">Create a similar website like duvien.com in less than a day with WordPress</span></a></p> <p>So copy file: /wp-content/themes/pingraphy/index.php to /wp-content/themes/pingraphy-child/index.php</p> <p>Add the code snippet to index.php file where you want to display your featured post:</p> <pre> <code class="language-php">&lt;?php if( is_home() || is_front_page() ) : ?&gt; &lt;?php echo do_shortcode( '[query id=1]' ); ?&gt; &lt;?php endif; ?&gt;</code></pre> <p>Note: notice the id=1, that is the id of my Views. Your Id maybe different, check this in Query Wrangler. You'll see it under the details column.</p> <p>This is what my index.php looks like after adding the above code:</p> <pre> <code class="language-php">&lt;?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a page when nothing more specific matches a query. * E.g., it puts together the home page when no home.php file exists. * Learn more: http://codex.wordpress.org/Template_Hierarchy * * @package Pingraphy */ get_header(); ?&gt; &lt;div id="primary" class="content-area content-masonry"&gt; &lt;main id="main" class="site-main" role="main"&gt; &lt;?php if( is_home() || is_front_page() ) : ?&gt; &lt;?php echo do_shortcode( '[query id=1]' ); ?&gt; &lt;?php endif; ?&gt; &lt;div id="masonry-container"&gt; &lt;div class="masonry" class="clearfix"&gt; &lt;?php if ( have_posts() ) : ?&gt; &lt;?php /* Start the Loop */ ?&gt; &lt;?php while ( have_posts() ) : the_post(); ?&gt; &lt;?php /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/content', get_post_format()); ?&gt; &lt;?php endwhile; ?&gt; &lt;?php else : ?&gt; &lt;?php get_template_part( 'template-parts/content', 'none' ); ?&gt; &lt;?php endif; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="infinite-scroll clearfix"&gt; &lt;div class="la-ball-spin-clockwise la-dark la-2x"&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php pingraphy_the_posts_navigation(); ?&gt; &lt;/main&gt;&lt;!-- #main --&gt; &lt;/div&gt;&lt;!-- #primary --&gt; &lt;?php get_footer(); ?&gt; </code></pre> <p>And that is it.</p> <p>Now you just need to style your new Featured frontpage Post.</p> <p> </p> </div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/wordpress" typeof="schema:Thing"> <a href="/tag/wordpress"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">WordPress</div> </a> <span property="schema:name" content="WordPress" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/query-wrangler" typeof="schema:Thing"> <a href="/tag/query-wrangler"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Query Wrangler</div> </a> <span property="schema:name" content="Query Wrangler" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/plugins" typeof="schema:Thing"> <a href="/tag/plugins"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">plugins</div> </a> <span property="schema:name" content="plugins" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/views" typeof="schema:Thing"> <a href="/tag/views"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Views</div> </a> <span property="schema:name" content="Views" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/pingraphy-theme" typeof="schema:Thing"> <a href="/tag/pingraphy-theme"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Pingraphy theme</div> </a> <span property="schema:name" content="Pingraphy theme" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/howto" typeof="schema:Thing"> <a href="/tag/howto"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">HowTos</div> </a> <span property="schema:name" content="HowTos" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=213&amp;2=comment&amp;3=comment" token="f1cdf60b"></drupal-render-placeholder> </section> Sun, 31 Jul 2016 15:01:43 +0000 duvien 213 at https://duvien.com https://duvien.com/blog/create-featured-post-frontpage-using-query-wrangler-wordpress#comments Drupal Gardens is shutting down on 1st Aug 2016 https://duvien.com/blog/drupal-gardens-shutting-down-1st-aug-2016 <span class="field field--name-title field--type-string field--label-hidden">Drupal Gardens is shutting down on 1st Aug 2016</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/drupal-gardens.png?itok=0PAmxnYm" width="950" height="479" alt="Drupal Gardens" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Sun, 31/07/2016 - 09:00</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><a href="https://www.drupalgardens.com/">Drupal Gardens</a> was started about 6 years ago to fill the gap of offering hosted Drupal sites, much like <a href="https://wordpress.com/">WordPress.com</a> (for WordPress hosted sites). </p> <p><strong>Why Drupal Gardens eventually decided to shut down it's service?</strong> it's still a little unclear and the details are a little vague. But our speculations is that it is completing in an already saturated website builder market (such as SquareSpace, Wix, Weebly to name a few) and Drupal is still behind on this type of market because its own layout builder tools are not as feature rich than their competitors. Where Drupal becomes a more powerful choice than standard website buiilder services is when you run it on your own hosting with access to install your own modules and modify themes or add custom functionality. <span>This is something no website builder services can out do and is limited to simple or limited functional pages. But the low cost of these website builder services does make it an attractive option for small businesses.</span></p> <p>WordPress.com on the other hand is still doing well. Perhaps it is because it has been around longer and covers a niche market, ie, blogging. Also, the complexity of running such an infrastructure is less intensive than the complexity of mananging 100s of thousands Drupal hosted sites.   </p> <p>All websites hosted on Drupal Gardens runs on Drupal 7. With 100s of thousands sites that will eventually need to be upgraded to Drupal 8, this is an immense tasks and takes massive resources and man power to handle this. The whole <span>infrastructure will probably need to be refactor as well to accommodate Drupal 8 sites since it is a whole different beast to manage and operate. Factoring all that in, it just doesn't seem feasible marketing it as a low cost hosting solution. </span></p> <p><span><strong>What happens now? </strong>What are the options if you want to continue usng your Drupal site hosted on DrupalGardens? Drupal Gardens is partnered with Bluehost and recommends that you should migrate your site to Bluehost. Drupal Garden makes it easy to export your entire site so you can install it on a 3rd party web hosting provider.   </span><span> </span></p> <p><span>Bluehost is not a Drupal managed service like Drupal Gardens. It is a regular website hosting company (much like GoDaddy or Siteground). Drupal does not require any complex web server so any standard web hosting is suitable. However, in terms of resources, that will depend on many different factors - how many clients' websites exist on a single web server, how much traffic to the site, how </span>optimised<span> are the media and css files and how many contrib or custom modules are loaded and in use. All these can impact on the performance of a website.</span></p> <p><span>One of the important factor to take into consideration is unlike Drupal Gardens, Bluehost like many other regular web hosting company only provide a service where you rent some space on their server to host your 3rd party website or application. In this </span>scenario<span>, Drupal can be considered as a 3rd party website so you are solely responsible to apply any security updates at all times and fixed any website issues you might encounter. If you are confident and comfortable to manage this on your own, then Bluehost cheap shared hosting is sufficient and if you need better performance, VPS server should be the next consideration. Others will often, hire a developer to manage the update process their site or do some development to add any further custom functionality required.</span></p> <p><span><strong>So if Bluehost doesn't support any customers' websites hosted on their server, what do they do?</strong> Bluehost will manage and maintain their infastructure of servers to ensure it will be in operation 24/7 all year round and provide customer support for server issues or emails only. Customers are fully responsible to maintain their own websites. </span><span>If in an unfortunate turn of event that your website gets hacked, you are responsible to fix it. Some web hosting providers can help restore or fix your hacked site but normally for a fee and subject to how deep the hack has gotten. </span></p> <p><span><strong>There are companies offering hosted services tailored for Drupal managed sites. Are they better choice if i run a Drupal site?</strong> Generally, yes and there are a few good reasons for this:</span></p> <ul><li>Hosting server is <span>optimised for Drupal specific sites</span></li> <li><span>Staff are experienced with Drupal should you need support</span></li> <li><span>Some hosting companies offer managed Drupal sites and keep the site up to date for you (on a monthly fee)</span></li> </ul><p> </p> <h4><strong><span>Alternatively, you may want to consider hosting your Drupal site with duvien.com  </span></strong></h4> <h3><strong>What I offer:</strong></h3> <ul><li>Free site migration from Drupal Gardens to our Cloud server.</li> <li>Free SSL (secure site) for your domain.</li> <li>Varnish cache and Memcache for better and faster site perfomance</li> <li>Backup service</li> <li>We'll keep Drupal and any contrib modules up to date for you</li> <li>Customer support (we are Drupal experts)</li> <li>and more...</li> </ul><p>All this for <strong>£15 GBP</strong> per month.</p> <h4><strong><span>For further details about our web hosting and support, <a href="/hire-me/hosting-support">visit my web hosting page</a>. </span></strong></h4> <p> </p></div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/drupal" typeof="schema:Thing"> <a href="/tag/drupal"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Drupal</div> </a> <span property="schema:name" content="Drupal" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/drupal-gardens" typeof="schema:Thing"> <a href="/tag/drupal-gardens"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Drupal Gardens</div> </a> <span property="schema:name" content="Drupal Gardens" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/web-hosting" typeof="schema:Thing"> <a href="/tag/web-hosting"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">web hosting</div> </a> <span property="schema:name" content="web hosting" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=164&amp;2=comment&amp;3=comment" token="50f1ea05"></drupal-render-placeholder> </section> Sun, 31 Jul 2016 08:00:33 +0000 duvien 164 at https://duvien.com https://duvien.com/blog/drupal-gardens-shutting-down-1st-aug-2016#comments Create a similar website like duvien.com in less than a day with WordPress https://duvien.com/blog/create-similar-website-duviencom-less-day-wordpress <span class="field field--name-title field--type-string field--label-hidden">Create a similar website like duvien.com in less than a day with WordPress</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/pingraphy-child-theme.jpg?itok=SdftYFTj" width="950" height="513" alt="Pingraphy cihld theme" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Sat, 30/07/2016 - 13:56</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>This site runs on <a href="https://www.drupal.org/8">Drupal 8</a> but i was curious to see how much time it will take to recreate this complete site (duvien.com) using <a href="https://wordpress.org/news/2016/04/coleman/">WordPress 4.5.x</a> from scratch to a functional site with minimal coding.</p> <p>Turns out not a lot of time. In fact, less than a day using an existing WP theme with some modifications and a few free plugins thrown in.</p> <p>Here are 5 main steps to a completed site. I've created a child theme you can download on Github which will save you a lot of time. Keep reading on...</p> <p> </p> <h3>Installation of WordPress</h3> <p>To cut down on this long post, follow this article on <a href="/blog/how-install-wordpress">how to install WordPress</a> or do a search on YouTube. There's enough tutorials on this topic so not worth covering here. I'm using WordPress 4.5.x</p> <h3>Requirements</h3> <p>Download and install the following theme and plugins:</p> <p><strong>Theme:</strong><br /> Pingraphy - <a href="https://wordpress.org/themes/pingraphy/">https://wordpress.org/themes/pingraphy/</a><br /> Pingraphy-child theme - <a href="https://github.com/vienie/pingraphy-child">https://github.com/vienie/pingraphy-child</a></p> <p><strong>Plugins:</strong><br /> Advanced Custom Fields - <a href="https://wordpress.org/plugins/advanced-custom-fields/">https://wordpress.org/plugins/advanced-custom-fields/</a><br /> Featured Video Plus - <a href="https://wordpress.org/plugins/featured-video-plus/">https://wordpress.org/plugins/featured-video-plus/</a><br /> Social Media Flying Icons | Floating Social Media Icon - <a href="https://wordpress.org/plugins/floating-social-media-icon/">https://wordpress.org/plugins/floating-social-media-icon/</a><br /> Contact Form 7 - <a href="https://wordpress.org/plugins/contact-form-7/">https://wordpress.org/plugins/contact-form-7/</a></p> <p>WordPress themes and plugins can be installed using WordPress admin UI. See this video on <a href="https://www.youtube.com/watch?v=4lExW857b7I">installing a theme</a> and this video on <a href="https://www.youtube.com/watch?v=4TJ_E7qbCF0">installing plugins</a>. Remember do a search for the following theme and plugins. You will not find Pingraphy-child because this exist on Github, not on wordpress.org. But don't worry, read below to download and install child theme.</p> <p>Once you have installed and activated the theme and all plugins. The next step is to install the child theme - <a href="https://github.com/vienie/pingraphy-child/archive/master.zip">Download Pingraphy-child from GitHub</a> and unzip the master zip file. Rename the theme folder - <em>pingraphy-child-master</em> to <em>pingraphy-child</em> and upload the whole directory theme to /wp-content/themes/ in your WP installation.</p> <p>Then, go to Menu --&gt; Appearances --&gt; Themes. You will see Pingraphy-child theme. Mouseover the thumbnail image of the theme with your cursor and click on 'activate' button.</p> <blockquote> <p><em><u>Quick note about child theme:</u> A child theme in WordPress is a theme which inherits everything from a parent theme (the main theme). This means we can make changes to a parent theme just be overriding it in our child theme. The advantages is that we keep the parent theme intact so when we update the theme, we will not lose our changes we have applied to th theme. In Drupal, this wuold be the difference between base theme (parent) and subtheme (child). </em></p> </blockquote> <p>Pingraphy is the parent theme and Pingraphy-child is the child theme. One final point to make is that everything is already setup in the child theme but for the sake of learning and knowing where evreything goes i thought doing an article on this would makes thing clear.</p> <p> </p> <h3>Configuration and setup</h3> <h4>Advance Custom Fields (plugin)</h4> <p>Basically, we want to add a new field to the already existing Posts Type for teaser text. To do this, follow the steps below:</p> <p>Once plugin is installed, go to menu --&gt; custom fields and click on 'add new' button.</p> <p>In the title field, enter Post type</p> <p>Under the location - rules box, in the select list for <em>'Show this field group if'</em>, select 'Post type' and 'is equal to' and 'post', see image below:</p> <img alt="custom post type" data-entity-type="file" data-entity-uuid="03e7d466-3fff-4a5b-b410-b34c2dcf543e" src="/sites/default/files/inline-images/post-type.png" class="align-center" /><p> </p> <p>Now click on '+ add field' button to add a new field to Post type. This field will be used to enter teaser text.</p> <p>In the <em>field label</em>, enter: Teaser Text</p> <p>In the <em>field name</em>, enter: teaser_text</p> <p>In the <em>field type</em>, select: Textarea</p> <p>In the <em>field instruction</em>, give it a description text. Something like: Add a summary text. This will not show on the full post page.</p> <p>Set it to be required so user/editor must fill out this field.</p> <p>It should look like the image below:</p> <img alt="post type 2" data-entity-type="file" data-entity-uuid="dcc8eada-6ff6-448d-9e06-e3f884c3b134" src="/sites/default/files/inline-images/post-type2.png" class="align-center" /><p> </p> <p>You can ignore the rest of the other fields and click on 'update' button (at top right of the page) to save it.</p> <p>Go to add a new post (menu --&gt; Posts --&gt; Add new), you should now see a new field called teaser text (as shown in image below),</p> <img alt="posts type with new field" data-entity-type="file" data-entity-uuid="dc695f28-b72b-4ebc-b9f5-66a86b068785" src="/sites/default/files/inline-images/post-type3.png" class="align-center" /><p> </p> <p>We want this field to only show in the masonry box on homepage and all category pages.</p> <p>Copy the theme files from Pingraphy to your child theme:</p> <p>pingraphy-child/template-parts/content.php<br /> pingraphy-child/template-parts/content-video.php</p> <p>(This is already done in Pingraphy-child)</p> <p>Remove excerpt from theme:</p> <pre> <code class="language-php">&lt;?php the_excerpt(); ?&gt;</code></pre> <p>Replace it with:</p> <pre> <code class="language-php">&lt;?php the_field('teaser_text'); ?&gt;</code></pre> <p>teaser_text must match the Advance Custom Fields - Post types <em>field name</em> we have created previously. So if you have a different <em>field name</em>, replace it with your own.</p> <p>This is done already in Pingraphy-child theme</p> <p> </p> <h4>Featured Video Plus (plugin)</h4> <p>Once this plugin is installed, you'll see a featured video box in Posts. This is for adding video from Youtube / Vimeo / Dailymotion into your post. You can customised how the video should be displayed in menu --&gt; settings -- Media. We will cover how to embed video in 'Adding content' step later.</p> <p> </p> <h4>Social Media Flying Icons | Floating Social Media Icon (plugin)</h4> <p>Once the plugin is installed, go to menu --&gt; Floating social media settings. Here, you can select which icosn you want. Don't forget to add your social media links under 'Social Media Configuration', otherwise it willl not be displayed on your page.</p> <p>Under the 'Social Media Integration Settings' select: <em>Manual Only (Using Shortcode or PHP code - will not float)</em>.</p> <p>Your setup should look similar to this:</p> <img alt="Social media" data-entity-type="file" data-entity-uuid="a8022730-b7fd-4fb5-a160-5d38a3a2c25a" src="/sites/default/files/inline-images/social-media-setup.png" class="align-center" /><p>And save the changes you have made.</p> <p>Now we want to display the social media in the theme but only on the full post page. Copy theme file content-single.php from Pingraphy and place it in your child theme:</p> <p>pingraphy-child/template-parts/content-single.php</p> <p>Add the following somewhere you want to display the social media. I chose to render it next to post date:</p> <pre> <code class="language-php">&lt;?php if (function_exists("DISPLAY_ACURAX_ICONS")) { DISPLAY_ACURAX_ICONS(); } ?&gt;</code></pre> <p>This is already done in Pingraphy-child theme.</p> <p> </p> <h4>Contact Form 7 (plugins)</h4> <p>Once this plugin is installed, go to menu --&gt; Contact</p> <p>As you can see, it already has a contact form setup. We can just use this default one. Click on 'Contact form 1' and click on the mail tab. Enter your emailing details. If you want to alter any of the contact form fields, you can do this under the form tab. </p> <p>Let's create a page for the contct form. Go to menu --&gt; Pages --&gt; Add new.</p> <p>Copy the contact form shortcode into the page content:</p> <pre> <code class="language-bash">[contact-form-7 id="52" title="Contact form 1"]</code></pre> <p>One more thing, in the page right sidebar under 'Page attributes', select 'default template'. This will render the contact form with a sidebar.</p> <p> </p> <h3>Adding content</h3> <p>Go to menu --&gt; Posts --&gt; Categories, and add some Categories you want.</p> <p>Add some test posts for now. You can add real content later.</p> <p>There are 2 features we can add to the post, an image or video.</p> <p>To add a post with featured image or video:</p> <p>Fill out the fields - Title, Teaser text, body text.</p> <p>In the sidebar, you'll see 'featured image' and 'featured video'.</p> <p><img alt="Featured post" data-entity-type="file" data-entity-uuid="eea57c52-863a-471a-9f22-ea3cd9ebc2a0" src="/sites/default/files/inline-images/featured.png" /></p> <p>If you want to add a post with images, click on 'set featured image' and upload an image.</p> <p>If you want to add a post with video, paste in the video URL.</p> <p>Don't use both at once though. Only either one per post.</p> <p>The image or video will render as a thumbnail for the masonary box and full image/video on full post page. See demo: <a href="https://wp.duvien.com">https://wp.duvien.com</a></p> <p>Don't forget to add some tags for each post as well so we can see them on the page and working.</p> <p> </p> <h3>Theming</h3> <p>Let's make the Tags to be displayed in masonry box and full post page, under the content. Open up the following theme file:</p> <p>pingraphy-child/template-parts/content.php</p> <p>Add it before the footer post meta (&lt;?php pingraphy_footer_post_meta(); ?&gt;):</p> <pre> <code class="language-php">&lt;?php the_tags( '&lt;ul&gt;&lt;li&gt;', '&lt;/li&gt;&lt;li&gt;', '&lt;/li&gt;&lt;/ul&gt;' ); ?&gt;</code></pre> <p>Do the same in the following theme files:</p> <p>pingraphy-child/template-parts/content-video.php<br /> pingraphy-child/template-parts/content-single.php</p> <p>Again, this is done for you in  the Pingraphy-child theme.</p> <p> </p> <p>The last steps is to setup your menu. Go to menu --&gt; Appearance --&gt; Menus. Under Menu settings, select secondary menu and save.</p> <p>Now we will add pages and categories to the menu. Just follow the steps shown in image below:</p> <img alt="menu" data-entity-type="file" data-entity-uuid="89e8f8ca-eb82-43dd-bb70-23e63e61ad71" src="/sites/default/files/inline-images/menu.png" class="align-center" /><p>Finally, we want to customise a bit of the theme. Dont' worry about CSS styling, this is all done already in Pingraphy-child theme but we want to alter the background color and etc.</p> <p>Go to menu --&gt; Appearance --&gt; Customise</p> <p>Click on 'Site Identity' and add your own.</p> <p>Click arrow icon to go back.</p> <p>Click on 'General Options' and add your own footer text.</p> <p>Click arrow icon to go back.</p> <p>Click on 'Colours' and add your own background colour. I used #FAFAFA hex colour.</p> <p>Click on Static Front Page and select: Your latest posts</p> <p>That's it! All done in one day's work...</p> <p> </p> <p><strong>Update:</strong><br /> If you want to add a <strong>Featured frontpage Post</strong>, check this article: <a href="/blog/create-featured-post-frontpage-using-query-wrangler-wordpress"><span class="field field--name-title field--type-string field--label-hidden quickedit-field" data-quickedit-field-id="node/213/title/en/full">Create a featured post for frontpage using Query Wrangler for WordPress</span></a></p> <p> </p> <p> </p> </div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/wordpress" typeof="schema:Thing"> <a href="/tag/wordpress"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">WordPress</div> </a> <span property="schema:name" content="WordPress" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/pingraphy-theme" typeof="schema:Thing"> <a href="/tag/pingraphy-theme"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Pingraphy theme</div> </a> <span property="schema:name" content="Pingraphy theme" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/howto" typeof="schema:Thing"> <a href="/tag/howto"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">HowTos</div> </a> <span property="schema:name" content="HowTos" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/query-wrangler" typeof="schema:Thing"> <a href="/tag/query-wrangler"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Query Wrangler</div> </a> <span property="schema:name" content="Query Wrangler" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=211&amp;2=comment&amp;3=comment" token="68cff996"></drupal-render-placeholder> </section> Sat, 30 Jul 2016 12:56:11 +0000 duvien 211 at https://duvien.com https://duvien.com/blog/create-similar-website-duviencom-less-day-wordpress#comments Is your HTTPS setup causing SEO issues? https://duvien.com/blog/your-https-setup-causing-seo-issues <span class="field field--name-title field--type-string field--label-hidden">Is your HTTPS setup causing SEO issues?</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/google-https1-ss-1920.jpg?itok=Q9xe-oUC" width="950" height="534" alt="HTTPS and SEO" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Sat, 23/07/2016 - 03:41</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Google has been making the push for sites to move to HTTPS, and many folks have already started to include this in their SEO strategy. Recently at SMX Advanced, Gary Illyes from Google said that <a href="https://www.seroundtable.com/34-of-google-search-results-are-https-22298.html">34 percent of the Google search results are HTTPS</a>. That’s more than I personally expected, but it’s a good sign, as more sites are becoming secured.</p> <p>However, more and more, I’m noticing a lot of sites have migrated to HTTPS but have not done it correctly and may be losing out on the HTTPS ranking boost. Some have also created more problems on their sites by not migrating correctly.</p> <h2>HTTPS post-migration issues</h2> <p>One of the common issues I noticed after a site has migrated to HTTPS is that they do not set the HTTPS site version as the preferred one and still have the HTTP version floating around. Google back in December 2015 said in scenarios like this, they would <a href="https://webmasters.googleblog.com/2015/12/indexing-https-pages-by-default.html">index the HTTPS by default</a>.</p> <p>However, the following problems still exist by having two site versions live:</p> <ul><li>Duplicate content</li> <li>Link dilution</li> <li>Waste of search engine crawl budget</li> </ul><h2>Duplicate content</h2> <p>If canonical tags are not leveraged, Google sees two site versions live, which is considered duplicate content. For example, the following site has both HTTPS and HTTP versions live and is not leveraging canonical tags.</p> <p><img alt="HTTP Site Version Indexed" height="111" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/http-site-version.jpg" width="710" /><img alt="HTTPS Site Version Indexed" height="117" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/https-site-version.jpg" width="710" /></p> <p>Because of this incorrect setup, we see both HTTP and HTTPS site versions are indexed.</p> <p><img alt="HTTPS &amp; HTTP Site Versions Indexed" height="612" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/https-http-site-versions-indexed-google.jpg" width="744" /></p> <p>I’ve also seen sites that have canonical tags in place, but the setup is incorrect. For example, Adorama.com has both HTTP and HTTPS versions live — and both versions self-canonicalize. This does not eliminate the duplicate content issue.</p> <p><img alt="HTTP Canonical" height="87" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/http-canonical.jpg" width="463" /></p> <p>http://www.adorama.com/</p> <p><img alt="HTTPS Canonical" height="86" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/https-canonical.jpg" width="484" /></p> <p>https://www.adorama.com/</p> <p>Adorama’s XML sitemap highlights the HTTP URLs instead of the HTTPS versions.</p> <p><img alt="XML Sitemap HTTPS" height="356" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/xml-sitemap-http-https.jpg" width="593" /></p> <h2>Link dilution</h2> <p>Having both the HTTPS and HTTP versions live, even with canonical tags in place, can cause link dilution. What will happen is that different users will come across both site versions, sharing and linking to them respectively. So social signals and external link equity can get split into two URLs instead of one.</p> <h2>Waste of search engine crawl budget</h2> <p>If canonical tags are not leveraged, and both versions are live, the search engines will end up crawling both, which will waste crawl budget. Instead of crawling just one preferred version, the search engines have to do double work. This can be problematic for very large sites.</p> <p>The ideal setup to address the issues above is to have the HTTP version URLs 301 redirect to the HTTPS versions sitewide. This will eliminate the duplication, link dilution and waste of crawl budget. Here is an example:</p> <p><img alt="HTTP 301 redirect to HTTPS" height="221" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/http-301-redirect-https.jpg" width="675" /></p> <p>Be sure not to use 302 redirects, which are temporary redirects. Here is an example of a site that is doing this. They are actually 302 redirecting the HTTPS to the HTTP. It should be that the HTTP 301 redirects to the HTTPS.</p> <p><img alt="HTTPS 302 redirect" height="215" src="http://searchengineland.com/figz/wp-content/seloads/2016/07/https-302-redirect-to-http.jpg" width="669" /></p> <p>Here is a list of the best practices for a correct HTTPS setup to avoid SEO issues:</p> <ol><li>Ensure your HTTPS site version is added in Google Search Console and Bing Webmaster Tools. In Google Search Console, add both the www and non-www versions. Set your preferred domain under the HTTPS versions.</li> <li>301 redirect HTTP URL versions to their HTTPS versions sitewide.</li> <li>Ensure all internal links point to the HTTPS version URLs sitewide.</li> <li>Ensure canonical tags point to the HTTPS URL versions.</li> <li>Ensure your XML Sitemap includes the HTTPS URL versions.</li> <li>Ensure all external links to your site that are under your control, such as social profiles, point to the HTTPS URL versions.</li> </ol><p> </p> <p>Article written by <a href="http://searchengineland.com/author/tony-edward">Tony Edward</a></p> </div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/seo" typeof="schema:Thing"> <a href="/tag/seo"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">SEO</div> </a> <span property="schema:name" content="SEO" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/google" typeof="schema:Thing"> <a href="/tag/google"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Google</div> </a> <span property="schema:name" content="Google" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/https" typeof="schema:Thing"> <a href="/tag/https"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">HTTPS</div> </a> <span property="schema:name" content="HTTPS" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=210&amp;2=comment&amp;3=comment" token="c9f67d78"></drupal-render-placeholder> </section> Sat, 23 Jul 2016 02:41:49 +0000 duvien 210 at https://duvien.com https://duvien.com/blog/your-https-setup-causing-seo-issues#comments Protect your PC, Mac and mobile devices from virus, adware, spyware and malware. https://duvien.com/blog/protect-your-pc-mac-and-mobile-devices-virus-adware-spyware-and-malware <span class="field field--name-title field--type-string field--label-hidden">Protect your PC, Mac and mobile devices from virus, adware, spyware and malware.</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/avast.jpg?itok=xMiXKSGR" width="950" height="431" alt="Avast!" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 12/07/2016 - 00:47</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Antivirus and anti malware software doesn't have to cost a penny and still does a great job. So there's no excuse why you are not running a software to protect your machine or device.</p> <blockquote> <h3>What is Antivirus and anti malware software?</h3> <p>It is<span> a program or set of programs that are designed to prevent, search for, detect, and remove software viruses, and other malicious software like worms, trojans, adware, rootkit and more.</span></p> </blockquote> <p>I've gone through a few pieces of sotfware and the one i've ended up using for the past year is <strong><a href="https://www.avast.com">Avast!</a></strong> on my Macbook Pro.It protects you against viruses and email spams.</p> <p>Once the software is installed you'll see a small icon in the top bar which allows you to open up the dashboard to configure your settings or check reports. I highly recommend you turn on everything (file system, email, web shieids) to activaly scan in the background. If you don't see the shields, click on preferences in the <a href="https://www.avast.com">Avast!</a> dashboard. This will ensure when any files downloaded or retrieved will be automatically scan before it lets you access it.</p> <img alt="Avasti dashboard" data-entity-type="file" data-entity-uuid="43fcb86f-5491-43ea-a443-51754e524f54" src="/sites/default/files/inline-images/avast1.png" class="align-center" /><p><br /> You will need to register your product for auto updates, again highly recommended to keep your virus definition lists up to date. This is a dat file to checks against for any known viruses.</p> <p>It uses popup notifications so each time it finds an infected file or new virus update list, you will get a popup noitfication message appear on your desktop.</p> <p>It also provides an option to install a plugin for Firefox or Chrome web browsers. You should install this plugin, it protects you from malware sites and also warns you of any malicious sites on search result pages so you can make an informed choice to visit or not.  </p> <p>Another thing i normally do it scan my Macbook once a week. Avast!, offers a tool to do a full scan or select a specific directory to scan. You can even manually scan files and compressed files.</p> <p>Some virus software will fasely report a certain file as a virus. I've not had this experience with <a href="https://www.avast.com">Avast!</a>. Nornally, when it detects a virus, the virus gets quarantined. This is standard in every virus software. Why do virus software do this? in case of a false positive. Some files are not virus and occassionally it made make mistakes so because it was quarantined, at least you have the options to retrieve the files again as oppose to if the software had completely deleted it. Virus are harmless unless you execute it or some program is ran to access and execute the virus infect your computer.</p> <p>It does email scans for <span>adware amd </span>malware attachments in emails retreive from Mac mail. It doesn't scan for spam emails but this is something you need to protect on your mail server or thru an email service.</p> <p><a href="https://www.avast.com">Avast!</a> offers a VPN service but i have no idea how good it is because i use <a href="https://billing.purevpn.com/aff.php?aff=25070">PureVPN</a> and that is good enough for me.</p> <p>So there you go, you are protect from the surfing the web, email communications and file downloads.</p> <p> </p></div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/virus" typeof="schema:Thing"> <a href="/tag/virus"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">virus</div> </a> <span property="schema:name" content="virus" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/spam" typeof="schema:Thing"> <a href="/tag/spam"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">spam</div> </a> <span property="schema:name" content="spam" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/spyware" typeof="schema:Thing"> <a href="/tag/spyware"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">spyware</div> </a> <span property="schema:name" content="spyware" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/malware" typeof="schema:Thing"> <a href="/tag/malware"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">malware</div> </a> <span property="schema:name" content="malware" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/antivirus" typeof="schema:Thing"> <a href="/tag/antivirus"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">antivirus</div> </a> <span property="schema:name" content="antivirus" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=169&amp;2=comment&amp;3=comment" token="11264327"></drupal-render-placeholder> </section> Mon, 11 Jul 2016 23:47:36 +0000 duvien 169 at https://duvien.com https://duvien.com/blog/protect-your-pc-mac-and-mobile-devices-virus-adware-spyware-and-malware#comments What can you do with a Raspberry Pi 3? https://duvien.com/blog/what-can-you-do-raspberry-pi-3 <span class="field field--name-title field--type-string field--label-hidden">What can you do with a Raspberry Pi 3?</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/rpi3_1.jpg?itok=zlUIUZev" width="950" height="436" alt="Raspberry Pi 3" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Sun, 10/07/2016 - 01:46</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>I love retro games so i bought a Raspberry Pi 3 to run <a href="https://retropie.org.uk/">Retropie</a>, then later switched to <a href="http://www.recalbox.com/">Recalbox</a> because it has an awesome feature called 'rewind' that lets you to turn back time in games.</p> <p>But there is so much more to Raspberry Pi than just building a retro gaming machine. Here are some other cool and fun projects i have tried out (for educational purposes) and they are all quite easy to install since they most of them comes as a disk image you can write to a mirco SD card and boot it up.</p> <p>First of all, in case you have never heard of Raspberry Pi (shame on you):</p> <blockquote> <p>The <strong>Raspberry Pi</strong> is a series of <a href="https://en.wikipedia.org/wiki/Credit_card">credit card</a>-sized <a href="https://en.wikipedia.org/wiki/Single-board_computer">single-board computers</a> developed in the <a href="https://en.wikipedia.org/wiki/United_Kingdom">United Kingdom</a> by the <a href="https://en.wikipedia.org/wiki/Raspberry_Pi_Foundation">Raspberry Pi Foundation</a> with the intent to promote the teaching of basic <a href="https://en.wikipedia.org/wiki/Computer_science">computer science</a> in schools and <a href="https://en.wikipedia.org/wiki/Developing_countries">developing countries</a>.<a href="https://en.wikipedia.org/wiki/Raspberry_Pi#cite_note-3">[3]</a><a href="https://en.wikipedia.org/wiki/Raspberry_Pi#cite_note-4">[4]</a><a href="https://en.wikipedia.org/wiki/Raspberry_Pi#cite_note-5">[5]</a> The original Raspberry Pi and Raspberry Pi 2 are manufactured in several board configurations through licensed manufacturing agreements with <a href="https://en.wikipedia.org/wiki/Newark_element14">Newark element14</a> (<a href="https://en.wikipedia.org/wiki/Premier_Farnell">Premier Farnell</a>), <a href="https://en.wikipedia.org/wiki/RS_Components">RS Components</a> and Egoman.<a href="https://en.wikipedia.org/wiki/Raspberry_Pi#cite_note-6">[6]</a> The hardware is the same across all manufacturers. The firmware is <a href="https://en.wikipedia.org/wiki/Closed-source">closed-source</a>.<a href="https://en.wikipedia.org/wiki/Raspberry_Pi#cite_note-haiku-7">[7]</a></p> <p><a href="https://en.wikipedia.org/wiki/Raspberry_Pi">Wikipedia</a></p> </blockquote> <p><strong>Raspberry Pi 3 (Model B) spec:</strong></p> <p>The Raspberry Pi 3 is the third generation Raspberry Pi. It replaced the Raspberry Pi 2 Model B in February 2016:</p> <ul><li>A 1.2GHz 64-bit quad-core ARMv8 CPU</li> <li>802.11n Wireless LAN</li> <li>Bluetooth 4.1</li> <li>Bluetooth Low Energy (BLE)</li> </ul><p>Like the Pi 2, it also has:</p> <ul><li>1GB RAM</li> <li>4 USB ports</li> <li>40 GPIO pins</li> <li>Full HDMI port</li> <li>Ethernet port</li> <li>Combined 3.5mm audio jack and composite video</li> <li>Camera interface (CSI)</li> <li>Display interface (DSI)</li> <li>Micro SD card slot (now push-pull rather than push-push)</li> <li>VideoCore IV 3D graphics core</li> </ul><p>All this for only $35 USD, what a bargain!</p> <p>There are 100s of DIY projects out in the wild but the popular ones are:</p> <ul><li><span>Open Embedded Linux Entertainment Center, or <a href="http://openelec.tv/"><em>OpenELEC</em></a> for short, is a small Linux distribution built for running a complete media center. It uses a media center called Kodi There is another one called <a href="https://libreelec.tv/">LibreELEC</a>.</span></li> <li><span>Another Open source alternative media center, <a href="https://osmc.tv/">OSMC</a>.</span></li> <li><span>S</span>tandalone <a href="http://www.pimusicbox.com/">streaming music player</a> for Spotify, Google Music, SoundCloud, Webradio, Podcasts and other music from the cloud.</li> <li>Build a <span>Network Attached Storage (</span>NAS) with <a href="https://sourceforge.net/projects/openmediavault/files/Raspberry%20Pi%20images/">OpenMediaVault</a>, a fully-fledged file server to save your family photos, music and videos to a connected HDD, ready to share across your home network.</li> <li><span><a href="https://retropie.org.uk/">RetroPie</a> allows you to turn your Raspberry Pi into a retro-gaming machine.</span></li> <li><span><a href="http://recalbox.com/">Recalbox</a>, Another retro gaming machine with a few more nice features than Retropie.</span></li> <li><a href="https://ubuntu-mate.org/raspberry-pi/">Ubuntu Mate</a>, a popular linux distribution.</li> <li>Google will be releasing <a href="https://android.googlesource.com/device/pifoundation/rpi3/">Android</a> for RPi3 though at the moment, the Github project is empty. But if you can't wait, someone has already ported an <a href="http://geektillithertz.com/wordpress/index.php/2016/04/09/raspberry-pi-3-android-6-0-marshmallow-download/">unoffical version</a> of Android 6 (usable but still rough around the edges). Can't wait to run Android TV soon...</li> <li>Run a <a href="http://raspberrywebserver.com/">web server</a> on a Raspberry Pi</li> <li>Run your own pocket size Dropbox alternative called <a href="http://projpi.com/diy-home-projects-with-a-raspberry-pi/pi-owncloud-drop-box-clone/">OwnCloud 9</a> for storing and sharing files.</li> <li>Raspberry Pi <a href="https://www.pi-point.co.uk/">Access point</a>. Great if you want to extend your Wifi connection or WiFi HotSpot. You could even install an <a href="http://raspberrypihelp.net/raspberry-pi-openvpn-server-tutorial/">OpenVPN server</a> and use access point as your Virtual Private Network connection.</li> <li>Browse anonymously anywhere you go with the <a href="https://learn.adafruit.com/onion-pi/overview">Onion Pi Tor proxy</a>.</li> <li>Run and play <a href="https://www.raspberrypi.org/learning/getting-started-with-minecraft-pi/">Minecraft</a> on Raspberry Pi.</li> <li><a href="https://www.realvnc.com/docs/raspberry-pi.html">VNC server</a> for remote desktop access.</li> </ul><p>This is just a very small selection of projects. There are other really cool projects to make your home smarter using <a href="https://en.wikipedia.org/wiki/Internet_of_things">IoT</a> but you need the addons for Raspberry Pi. Take a look at some of the DIY project created using <a href="https://microsoft.hackster.io/en-US">Window IoT</a> for Raspberry Pi.</p> <p>What other popular DIY project do you know of? i'll be interested to learn and try them out.</p> <p> </p></div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/raspberry-pi" typeof="schema:Thing"> <a href="/tag/raspberry-pi"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Raspberry Pi</div> </a> <span property="schema:name" content="Raspberry Pi" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=168&amp;2=comment&amp;3=comment" token="b01fc7c9"></drupal-render-placeholder> </section> Sun, 10 Jul 2016 00:46:57 +0000 duvien 168 at https://duvien.com https://duvien.com/blog/what-can-you-do-raspberry-pi-3#comments Drupal 7.50 with support for full UTF-8 https://duvien.com/blog/drupal-750-support-full-utf-8 <span class="field field--name-title field--type-string field--label-hidden">Drupal 7.50 with support for full UTF-8</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/750.png?itok=t2iIShiT" width="950" height="442" alt="Drupal 7.50 Support for full UTF-8" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/about" lang="" about="/about" typeof="schema:Person" property="schema:name" datatype="" class="username">duvien</a></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 08/07/2016 - 20:19</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>This is quite a significant release so there is a version jump from Drupal 7.44 --&gt; 7.50. It introduces a few new features and bugfixes.</p> <p>The few new features in Drupal 7.50 are:</p> <ul><li>New "administer fields" permission added for trusted users</li> <li>Protection against clickjacking enabled by default</li> <li>Support for full UTF-8 (emojis, Asian symbols, mathematical symbols) is now possible on MySQL</li> <li>Improved support for PHP 7</li> </ul><p>You can read it at: <a href="https://www.drupal.org/blog/drupal-7-50">https://www.drupal.org/blog/drupal-7-50</a></p> <p>I'm not a big fan of emojis, in fact i find them quite annoying. But i do like to stay current and on top of things with my own and clients' Drupal sites.</p> <p>In this article, i want to cover the support for full UTF-8 that allows for emojis, Asian symbols and mathematical symbols to be included in your content because updating to Drupal 7.50 isn't enough, you still need to convert your DB char set to utf8mb4.</p> <p>Note: utf8mb4 is only supported on MySQL 5.5.3 or higher and MariaDB 10.0 or higher.</p> <h3>How do we do this?</h3> <p>Before you begin, you need <a href="http://www.drush.org/en/master/">Drush</a> installed on your server. I'm using Drush 8.0.x version and MariaDB 10.0.26. For those that do not have Drush, you can try this <a href="http://stackoverflow.com/questions/6115612/how-to-convert-an-entire-mysql-database-characterset-and-collation-to-utf-8">solution found on StackOverflow</a>.</p> <p>These steps below will takes you through the process of updating a single Drupal DB to add support for full UTF-8. You will need to repeat these steps for every drupal installation.</p> <ol><li>Back up your database and files (and perform this process in a test environment before on your production site if at all possible).</li> <li>Prepare MySQL by making sure the following three settings are in <code>my.cnf</code> (then restart MySQL): <pre> <code>[mysqld] innodb_large_prefix=true innodb_file_format=barracuda innodb_file_per_table=true</code></pre> <br /> If you are using CentOS 7.x, my.cnf is located at /etc/my.cnf<br /><br /> Note: if you have this line in your my.cnf: default-storage-engine=MyISAM<br /> you should uncomment it out.</li> <li>Install the drush command to convert your site's databases: <pre> <code>drush @none dl utf8mb4_convert-7.x</code></pre> </li> <li> <p>Upgrade your Drupal codebase to version 7.50 (download link: <a href="https://ftp.drupal.org/files/projects/drupal-7.50.tar.gz">Drupal 7.50</a>)</p> </li> <li> <p>You might run into this issue if you have not been cleanly uninstalling your modules causing some redunant entries left in the DB tables. The error msg you might be something like this:<br />  </p> <pre> <code>file system: addtihs. In order to fix this, put the module back in its original location. For more information see the documentation page. in _drupal_trigger_error_with_delayed_loggin()(line 1128 of /var/www/drupal/includes/bootstrap.inc) </code></pre> <p>To fix this, run the command below (remember to replace module_name with the name of the module you want to remove. Do this for each module you want to remove):</p> <pre> <code>drush sql-query "DELETE from system where name='module_name' AND type = 'module';"</code></pre> See: <a href="https://www.drupal.org/node/2487215">https://www.drupal.org/node/2487215</a> for more details regarding above issue.</li> <li> <p>Add charset and collation settings in your site /sites/default/settings.php file:</p> <pre> <code>$databases['default']['default'] = array( 'database' =&gt; 'databasename', ... 'charset' =&gt; 'utf8mb4', 'collation' =&gt; 'utf8mb4_general_ci', );</code></pre> </li> <li> <p>Navigate to your drupal installation webroot directory and run this command:</p> <pre> <code>drush utf8mb4-convert-databases</code></pre> </li> </ol><p>If all goes well, Drush will start converting all the Drupal 7 DB tables:</p> <img alt="drush convert db tables to full utf-8" data-entity-type="file" data-entity-uuid="a0d3691a-677e-46bb-bd89-6f532853adee" src="/sites/default/files/inline-images/convert-db.png" class="align-center" /><p>Now you can test by adding Emoji (👍🏼). Create a page and copy this smiling pile of poo: 💩 into your content page 😀. If you don't like 💩, try others emoji at: <a href="http://getemoji.com/">http://getemoji.com/</a></p> <p>Good news, if you are running <strong>Drupal 8</strong>, you don't need to go through this process 😎</p> <p>Big thanks to <a href="http://www.jeffgeerling.com/">Jeff Geerling</a>. This article was made possible from his <a href="http://www.jeffgeerling.com/blog/2016/getting-emoji-and-multibyte-characters-on-your-drupal-7-site-750">tutorial</a>. I recommend you check out his other articles as well, a lot of useful stuff on his blog.</p> <p> </p></div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/drupal" typeof="schema:Thing"> <a href="/tag/drupal"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Drupal</div> </a> <span property="schema:name" content="Drupal" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/drupal-7" typeof="schema:Thing"> <a href="/tag/drupal-7"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Drupal 7</div> </a> <span property="schema:name" content="Drupal 7" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/mysql" typeof="schema:Thing"> <a href="/tag/mysql"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">mysql</div> </a> <span property="schema:name" content="mysql" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/drush" typeof="schema:Thing"> <a href="/tag/drush"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Drush</div> </a> <span property="schema:name" content="Drush" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/howto" typeof="schema:Thing"> <a href="/tag/howto"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">HowTos</div> </a> <span property="schema:name" content="HowTos" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=167&amp;2=comment&amp;3=comment" token="68ca6176"></drupal-render-placeholder> </section> Fri, 08 Jul 2016 19:19:57 +0000 duvien 167 at https://duvien.com https://duvien.com/blog/drupal-750-support-full-utf-8#comments Setting up a VPN client using Asus RT-AC68U router modem https://duvien.com/blog/setting-vpn-client-using-asus-rt-ac68u-router-modem <span class="field field--name-title field--type-string field--label-hidden">Setting up a VPN client using Asus RT-AC68U router modem</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/article_image_full/public/field/image/vpn.png?itok=GUhG34D8" width="950" height="371" alt="VPN" typeof="foaf:Image" class="image-style-article-image-full" /> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/user/1" lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="" class="username">admin</a></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 07/07/2016 - 16:21</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>What is a VPN?</p> <blockquote> <p>A <strong>virtual private network</strong> also known as a (<strong>VPN</strong>) is a <a href="https://en.wikipedia.org/wiki/Private_network">private network</a> that extends across a public network or <a href="https://en.wikipedia.org/wiki/Internet_%28disambiguation%29">internet</a>. It enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network.</p> <p>VPNs can provide functionality, security and/or network management benefits to the user.<a href="https://en.wikipedia.org/wiki/Virtual_private_network#cite_note-1">[1]</a> But they can also lead to new issues, and some VPN services, especially "free" ones, can actually violate their users' privacy by logging their usage and making it available without their consent, or make money by selling the user's bandwidth to other users.<a href="https://en.wikipedia.org/wiki/Virtual_private_network#cite_note-2">[2]</a></p> <p>Some VPNs allow employees to securely access a corporate <a href="https://en.wikipedia.org/wiki/Intranet">intranet</a> while located outside the office. Some can securely connect geographically separated offices of an organization, creating one cohesive network. Individual Internet users can use some VPNs to secure their <a href="https://en.wikipedia.org/wiki/Wireless">wireless</a> transactions, to circumvent geo-restrictions and censorship, and/or to connect to <a href="https://en.wikipedia.org/wiki/Proxy_server">proxy servers</a> for the purpose of protecting personal identity and location. But some Internet sites block access via known VPNs to prevent the circumvention of their geo-restrictions.</p> <p><a href="https://en.wikipedia.org/wiki/Virtual_private_network">Wikipedia</a></p> </blockquote> <p>One of the popular uses of VPN is to <span>circumvent regional restrictions (known as <a href="http://www.pcworld.com/article/260236/tunnelbear_vpn_circumvents_geoblocking.html">geoblocking</a>) on certain websites or online TV channels.</span> People use VPN for many reasons, from <span>Journalists and political dissidents to get around state blocked websites to users who just want to access local websites aboard (ie, UK resident who wants to watch bbc.co.uk online outside of their own country while on holiday).  </span></p> <p>In my case, it was a friend that approach me asking how his parent can watch Chinese channels on YouKu outside of China on their Android box because after 6 months it stopped working and the box was restricted. They tried contacting the supplier but to no avail so it was time to find another solution. </p> <p>I've never setup a VPN before so was up for a good challenge. At first, it was easy enough to install a VPN client on  a PC machine and it would pretty much do everything for you with a couple of clicks. The problem is that, the Android box is not a computer but a device for streaming TV channels so how can you simply install a VPN client? it runs Android so that was easy enough to root it with the right tools, which is what i did and then download a VPN client android app like <a href="http://apk-dl.com/openvpn-for-android">OpenVPN</a> (you cannot use GooglePlay since this only allows installation via web browser or device, something that was not available on the Android box).</p> <p>Furthermore, what if they had more than one device they want to use but that device does not or cannot install a standalone VPN client. This means you just need to connect any device to the Asus router like a hotspot to access VPN.</p> <p>Once OpenVPN.apk was installed i headed over to <a href="https://billing.purevpn.com/aff.php?aff=25070">PureVPN</a> to purchase an account. You need a service that provides access to VPN servers to connect to and use.</p> <p>I wouldn't go into details how to root and install the apk on the Android box because this article is about getting a router to work for VPN.</p> <p>This worked well but temporary. After a day, the restriction came back on the Android box, which meant you cannot do anything (ie, access the apps). It was something to do with the DNS settings and also it was annoying because each time the box was powered off and turned back on, you had to reconfigure the VPN client to connect again.</p> <p>So the only option was to use a router and route any device that wanted to use the VPN connection.</p> <p>We didn't want to use the main modem for the VPN since they still wanted to browse the internet as normal. So a second router what preferred for this setup.</p> <p>Initially, i was really interested in using a Raspberry Pi as an access point and VPN since i have a Pi 3 sitting around and it was going to be fun learning but I quickly ruled that out on the basis that if the Pi starts to play up, i would have to sort out the issue. Not something i was particularly keen on as they lived quite far from me. </p> <p>Eventually, we found a cheap (and had a built-in VPN client) router device on Ebay. It is an <strong>Asus RT-AC68U</strong> but for this guide, you can use any of the following model: <strong>Asus RT-N16, Asus RT-N18U, Asus RT-N66U, Asus RT-AC66U and Asus RT-AC87U</strong>.</p> <p>Don't forget you need a VPN service, i recommend signing up with <a href="https://billing.purevpn.com/aff.php?aff=25070">PureVPN</a>, their service has been cheap, reliable and the speed is surprisingly good as well as great support. Another great thing is that they do not <span class="st">monitor user activity nor do we <em>keep</em> any <em>logs so</em> have no record of your activities.</span></p> <p>Okay, let's get straight to setup the Asus router modem.</p> <p>The DSL modem is main one plugged into telephone line to ISP (Internet Service Provider), it has a 4 port LAN (Local Area Network) connection and the Asus router that is to be used for VPN is connected to the DSL modem from its own modem/DSL port to the DSL LAN port. See diagram image:</p> <img alt="LAN to DSL" data-entity-type="file" data-entity-uuid="05b1ecb1-7ded-446c-94c1-c6cc806f820e" src="/sites/default/files/inline-images/2routersetup1.png" class="align-center" /><p><em>Image taken from <a href="https://support.hidemyass.com/hc/en-us/articles/203712283-How-to-connect-two-routers-">Hidemyass</a></em></p> <img alt="Asus" data-entity-type="file" data-entity-uuid="b726e326-dbe0-48c9-b984-ce976a0fd7b8" src="/sites/default/files/inline-images/DSCF7924_0.jpg" class="align-center" /><p> </p> <p>The standard DSL modem already has an IP address of <strong>192.168.1.1</strong> so we want to make the router running VPN on a different subnet (networks) to avoid IP address conflict. So we will assign <strong>192.168.2.1</strong> for the router.</p> <p>Let's login to the Asus router via web browser. I hooked up my macbook with Asus router via LAN. Consult your manual on how to login as admin. Do not connect your DSL modem with Asus router yet, we'll do that later.</p> <p>Here is what we will do:</p> <img alt="Asus Setup" data-entity-type="file" data-entity-uuid="e36139f3-78ea-4e9d-a984-fcc1e8db2196" src="/sites/default/files/inline-images/1setup_0.png" class="align-center" /><p> </p> <p>1. Use 'Wireless router mode' and setup your wireless connection. Consult your manual on how to add SSID (wireless name) and WPA password.</p> <p>2. Setup your LAN IP, give it <strong>192.168.2.1</strong> and leave subnet as 255.255.255.0, see image below:</p> <img alt="Asus LAN" data-entity-type="file" data-entity-uuid="9cabe75c-75ec-472c-bf75-6c12e76f0d08" src="/sites/default/files/inline-images/2lan.png" class="align-center" /><p>Now you can connect Asus router to your DSL modem via LAN port. Reboot Asus router. View the 'Network Map', you should see that it has connected to the Internet. If you have gotten this far, you can safely connect via wireless</p> <p>3. Now we can configure the VPN client. Click on VPN under advanced settings and then the VPN client tab. Click on add profile and you should see something like this:</p> <img alt="VPN client" data-entity-type="file" data-entity-uuid="030ad4e3-2c8e-45c6-98f5-e1ebd0ee1b81" src="/sites/default/files/inline-images/vpn-client.png" class="align-center" /><p> </p> <p>If you you have an account with <a href="https://billing.purevpn.com/aff.php?aff=25070">PureVPN</a> you can do the following (other providers are more or less the same):</p> <ul><li>Description: PureVPN, PureVPN US, PureVPN UK etc (Anything you like)</li> <li>VPN Server: Insert any server, <a href="https://support.purevpn.com/pptpl2tp-manual-setup-hostname-list">click here</a> to get the server list</li> <li>Username: Insert Username provided by PureVPN</li> <li>Password: Insert Password provided by PureVPN</li> <li>PPTP Options: Auto (For Streaming purpose select None)</li> <li>Click OK</li> </ul><p>Then, click on activate button. If all goes well, you should see a blue circle tick under connection status column meaning you have successfully connected to a VPN server.</p> <p>Now back to your Android box, configure the network settings to auto pick up the network. If you are connecting via LAN, you will need a CAT5 cable. Use ethernet connection settings and let it auto acquire IP and network. If wireless, again use wireless settings and connect to your SSID name you setup (wireless name), let it auto acquire IP and network.</p> <p>I also setup remote login for admin via web interface. This is so i can remote access to the Asus router if there were any issues with VPN connection. I don't particular recommend to enable this feature if you manage your router from within your home only.</p> <p>Furthermore, it would be a waste just to use a VPN service for the home. With <a href="https://billing.purevpn.com/aff.php?aff=25070">PureVPN</a>, it allows up to 5 simultaneous connections so you can take advantage of using if you are on holiday or in public places. Simply download and install the <a href="https://www.purevpn.com/download.php">VPN client</a> (for Mac or Windows) on your machine, , or even any mobile devices. Enter your user and password provide by PureVPN and find a country to connect to, and you are good to go. Plain and simple...</p> <p> </p> </div> <div class="field field-node--field-tags field-name-field-tags field-type-entity-reference field-label-hidden clearfix"> <ul class="links field-items"> <li><div about="/tag/vpn" typeof="schema:Thing"> <a href="/tag/vpn"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">vpn</div> </a> <span property="schema:name" content="vpn" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/router" typeof="schema:Thing"> <a href="/tag/router"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">router</div> </a> <span property="schema:name" content="router" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/asus" typeof="schema:Thing"> <a href="/tag/asus"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">Asus</div> </a> <span property="schema:name" content="Asus" class="rdf-meta hidden"></span> </div> </li> <li><div about="/tag/howto" typeof="schema:Thing"> <a href="/tag/howto"> <div property="schema:name" class="field field--name-name field--type-string field--label-hidden field__item">HowTos</div> </a> <span property="schema:name" content="HowTos" class="rdf-meta hidden"></span> </div> </li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=165&amp;2=comment&amp;3=comment" token="f1c86eeb"></drupal-render-placeholder> </section> Thu, 07 Jul 2016 15:21:17 +0000 admin 165 at https://duvien.com https://duvien.com/blog/setting-vpn-client-using-asus-rt-ac68u-router-modem#comments