Friday, March 29

Web Tricks

Web Tricks

JavaScript String Manipulation (Solution to Code Challenge #12)

Last time on the code challenge #12 we looked at problems involving the use of String Manipulation techniques. Yet to try your hands at the challenge? You can check it out here. You can also see other fantastic submissions in the Spectrum Chat. In this post, we shall be solving these awesome challenges and you know the best part? Chris did really cool videos to better explain these challenge solutions! The Challenge Manipulating strings form the basis of programming in JavaScript and is important both in simple logical instances to even more complex instances. In this challenge solution, we employed the use of functions in JavaScript as well as array and string methods. The Base Pen A base pen was provided for you to easily get started with the project. The pen consists of JavaScript code...
Sunshine All Day Every Day (August 2018 Wallpapers Edition)
Web Tricks

Sunshine All Day Every Day (August 2018 Wallpapers Edition)

Sunshine All Day Every Day (August 2018 Wallpapers Edition)Sunshine All Day Every Day (August 2018 Wallpapers Edition) Cosima Mielke 2018-07-31T13:11:56+02:00 2018-07-31T15:32:00+00:00 Everybody loves a beautiful wallpaper to freshen up their desktops. So to cater for new and unique artworks on a regular basis, we embarked on our monthly wallpapers adventure nine years ago, and since then, countless artists and designers from all over the world have accepted the challenge and submitted their designs to it. It wasn’t any different this time around, of course. This post features wallpapers created for August 2018. Each of them comes in versions with and without ...
Web Tricks

What Do You Need To Know When Converting A Flash Game Into HTML5?

What Do You Need To Know When Converting A Flash Game Into HTML5?What Do You Need To Know When Converting A Flash Game Into HTML5? Tomasz Grajewski 2018-07-30T14:00:26+02:00 2018-07-30T17:26:48+00:00 With the rise of HTML5 usage, many companies start redoing their most popular titles to get rid of outdated Flash and match their products to the latest industry standards. This change is especially visible in the Gambling/Casino & Entertainment industries and has been happening for several years now, so a decent selection of titles has already been converted. Unfortunately, when browsing the Internet, you can quite often stumble upon examples of a seemingly h...
3 Essential Design Trends, August 2018
Web Tricks

3 Essential Design Trends, August 2018

From light and bright designs to complex data visualizations and a new take on polygons, this month’s design trends are anything but ordinary. And they are so practical you can deploy them on single pages or for a complete design overhaul. Each of these trends shows and evolution of styles that’s been progressing for some time: minimalism to white and light color schemes, data “everything” to data visualization for the web, and a fresh look at poly shapes. Here’s what’s trending in design this month: 1. White and Light Color Schemes White and light color schemes seem to be popping up everywhere. (We could probably have dedicated an entire post to this design trend because there are so many designs featuring this color trend.) The main characteristic of this design trend is an aesthetic th...
Popular Design News of the Week: July 23, 2018 – July 29, 2018
Web Tricks

Popular Design News of the Week: July 23, 2018 – July 29, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. The Future of Mobile Web? It’s all About Progressive Web Apps   Finally… Capture your Screen Without all that Mess on your Desktop   Google Video Shows All-white Redesigns for Gmail,...
Web Tricks

Logging Activity With The Web Beacon API

Logging Activity With The Web Beacon APILogging Activity With The Web Beacon API Drew McLellan 2018-07-27T13:40:14+02:00 2018-07-27T14:14:35+00:00 The Beacon API is a JavaScript-based Web API for sending small amounts of data from the browser to the web server without waiting for a response. In this article, we’ll look at what that can be useful for, what makes it different from familiar techniques like XMLHTTPRequest (‘Ajax’), and how you can get started using it. If you know why you want to use Beacon already, feel free to jump directly to the Getting Started section. What Is The Beacon API For? The Beacon API is used for sending small amounts of data to a...
7 Elements of Good UX in 2018
Web Tricks

7 Elements of Good UX in 2018

UX is a crucial component of modern web design, and users’ expectations are constantly shifting. Though we cannot see into the future, changes made throughout the last decade indicate that adjusting for user needs has never been more crucial. To get ahead in the ever-changing mobile app sphere, designers have to be proactive at all times. Let the following 7 UX trends be your guide to help prep for both the present and the future of UX design: 1. Journey Simplification Users typically engage with websites or applications with a specific intention in mind, which they want to achieve as soon as possible. The most user-friendly applications and websites strive to simplify a user’s journey with time-saving designs. The essence of such designs is that they reduce the number of steps users have...
Web Tricks

Create a Typing Speed Effect with VueJS – Part 2: Timer and Score Board

Introduction In Part 1 - Create a Typing Speed Effect with VueJS We saw how to create a Typing Speed Effect. We are going to extend what we built previously, and include a timer and a score board, so that users can type and see the times they typed in faster. In order to follow along, you must have read through part 1. Logic Since we already have the typing effect covered, we need to do the following. There should be a 60 second timer that will count down whenever a user is typing. When the time reaches 0 (Zero), the typing area should be blured, and the typing speed calculated. The metrics for calculating the typing speed for a user is Number of correct words typed in a minute + typos. We will also give the user the number of typos they made as a single number. We will then list the leadi...
Web Tricks

Introducing Laravel Nova

Laracon is here again. For those of you that don't know, Laracon is the event where that happens every 6 months where we get a look at the latest and greatest in Laravel. We'll write an article on the latest features in Laravel once we've compiled them. But, for now, let's talk about Nova. Laravel's Nova is a beautifully designed administration panel designed by the team behind Laravel. Nova is a single-page application built on the Vue.js ecosystem and Tailwind. Not only does it look cool, it's also highly customizable in a true Laravel fashion. Nova is not yet out for public consumption, and it's a paid product, but if a highly customizable dashboard is what you need, you can signup and get alerted when it goes live next month. Calling it an admin dashboard doesn't do it justice. I de...
PHP, Web Tricks

WordPress Notifications Made Easy

WordPress doesn’t offer any kind of notification system. All you can use is the wp_mail() function, but all of the settings have to be hardcoded, or else you have to create a separate settings screen to allow the user tweak the options. It takes many hours to write a system that is reliable, configurable and easy to use. But not anymore. I’ll show you how to create your own notification system within minutes with the free Notification plugin. By notification, I mean any kind of notification. Most of the time, it will be email, but with the plugin we’ll be using, you can also send webhooks and other kinds of notifications. While creating a project for one of my clients, I encountered this problem I’ve described. The requirement was to have multiple custom email alerts with configurable c...
5 Ways to Lower Your Site’s Barrier to Entry
Web Tricks

5 Ways to Lower Your Site’s Barrier to Entry

The internet, like most activities on the planet, has a barrier to entry. You need at least one brain—conscious and functioning at a level high enough to tap or click on stuff—and a working Internet-enabled device. You need access, in one form or another, to an Internet service provider. And that’s really about it. In an ideal world, that’s all you need. People without functioning eyeballs can use screen readers. People without hands have other input devices for their computers. People with crappy computers have… access to an ever-shrinking percentage of websites. Wait… what? Here’s the thing, each individual website, depending on how it’s built, can either increase its barrier to entry, or keep it at a bare minimum. Every time you implement a feature or technology that not every...
Web Tricks

Managing User Permissions in Vue using CASL

There is one thing we can all agree on, no matter what language or platform we prefer for building applications — there has to be some form of control and access levels in our applications to ensure it runs smoothly. This is why the concept of user permission will quickly become commonplace for you once you build your first application. In server-side languages, user permissions can be done with little or no fuss. You can use sessions to hold a user’s information and there would be over a hundred libraries begging for the opportunity to help you manage what the user sees and when the user sees it. You can manage complex permission logic with the aid of a robust database. For JavaScript, this becomes a little tricky, given that all you may have to achieve this localStorage. In this tutorial...
Web Tricks

My Top 8 Visual Studio Code Tips and Features

Visual Studio Code has become one of the most used and loved Text Editors in recent years. Here are some statistics from the 2018 Stackoverflow Survey:- Most Popular Development Environments. Source: https://insights.stackoverflow.com/survey/2018/ 1. Visual Studio Code CLI Visual Studio Code comes with an inbuilt Command Line Interface. Once you've installed Visual Studio Code, and have it open, press ⇧⌘P to open the command palette for Mac, or just ⌘P and the press > button. Next, type in shell command, select Install Code Command in PATH, and press enter. Now if you type in code, Visual Studio Code will open, and code <path>, Visual Studio Code will open with the directory represented by Path. To see the command line interface however, type in code -h. code -h Visual Studio Co...
Apps, Web Tricks

How To Improve Test Coverage For Your Android App Using Mockito And Espresso

In app development, a variety of use cases and interactions come up as one iterates the code. The app might need to fetch data from a server, interact with the device’s sensors, access local storage or render complex user interfaces. The important thing to consider while writing tests is the units of responsibility that emerge as you design the new feature. The unit test should cover all possible interactions with the unit, including standard interactions and exceptional scenarios. In this article, we will cover the fundamentals of testing and frameworks such as Mockito and Espresso, which developers can use to write unit tests. I will also briefly discuss how to write testable code. I’ll also explain how to get started with local and instrumented tests in Android. Fundamentals Of T...
CSS Tricks, Web Tricks

Did you know that style and script tags can be set to display: block?

The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well.   All of this is such a weird concept to me that I just had to make a demo to see if it worked: <p data-height="550" data-theme-id="1" data-slug-hash="46b115ccbe34d51e2bf1ebfda04438de" data-default-tab="result" data-user="robinrendle" data-embed-version="2" data-pen-title="contentEditable tags" class="codepen">See the Pen contentEditable <style&rt; tags by Robin Rendle (@robinrendle) on CodePen. And it does, as strange as tha...