OXDevelopment.comhttps://www.oxdevelopment.com
Web Development & Digital Marketing Company
Fri, 29 Mar 2019 06:51:42 +0000 en-US
hourly
1 https://wordpress.org/?v=5.1.1https://www.oxdevelopment.com/wp-content/uploads/2019/04/favi.pngOXDevelopment.comhttps://www.oxdevelopment.com
3232Is Your Website Mobile App Ready?https://www.oxdevelopment.com/is-your-website-mobile-app-ready/
https://www.oxdevelopment.com/is-your-website-mobile-app-ready/#respondFri, 15 Mar 2019 17:43:36 +0000https://www.nextwebinc.com/?p=205570It’s no secret that the mobile revolution is already here. Everyone’s been abuzz with talk about the need for websites to be mobile-ready and responsive for years now. But considering mobile device usage accounts for 55% of all internet activity, now is the perfect time to ensure any site you work with looks just as good on a mobile device as it does on a standard computer.

Here’s another impressive stat: nearly 47% of all internet traffic now comes from mobile apps. When you take that into consideration, it might be worth thinking about converting your website into a mobile app from the get-go.

While there is no guarantee that your business will suddenly blossom just because your target audience can now interact with you through an app, it makes even less sense to ignore this portion of the market.

By turning your website into a mobile app, you have another chance to build your brand, reach your ideal client, and even generate new revenue. You’re showing your clients that not only you can build a responsive website, but you also know how to create an engaging app that they can use in the same fashion as you – to expand their reach and grow their business.

In this article, we’ll cover the pros and cons of having a mobile app and share the key things that will help you determine whether your website is ready to make this leap.

Let’s dive in!

Pros and Cons of Mobile Apps

With an increasing number of people spending more of their time on their smartphones, creating a mobile app for your business is a wise choice. Here are some pros and cons to keep in mind.

Mobile App Pros

On average, people spend more than two hours a day using their mobile phone and most of that time is spent interacting with apps. The statistic speaks volumes about the popularity of apps in general and is argument enough in their favor.

You can use the app in many different ways – from allowing users to book your services directly and sharing different price packages to adding chat functionality, special offers, or providing a tip a day via push notifications. You are only limited by your imagination.

It allows you to better capture the attention of your audience. When we’re browsing the web, it’s easy to get distracted, either by a new email notification, a friend messaging you on Facebook, a co-worker sharing a tweet, and so on. But once a user is interacting with your app, chances are they will be more engaged. You have their complete attention and you can continue engaging them on a daily basis.

Mobile App Cons

It adds extra maintenance – if you want your app to have any traction and success, you have to keep it up to date and ensure every release provides a smooth experience. Sure, technical glitches and bugs can always happen but do keep in mind that you will need to maintain your app on top of everything else.

Additional marketing – unfortunately, it’s not enough to submit your app to the app store and get it approved to get users. You’ll have to promote and market your app just like you’re promoting your business. If you don’t have bandwidth to spare, this might be a significant con.

Added cost – if you don’t have time to develop the app yourself, you’ll have to outsource this task to another developer which means you’ll have to pay for the app development as well as for any ongoing support. And even if you develop the app yourself, there are still fees associated with it so cost is another con to keep in mind.

5 Things You Must Consider To Determine If Your Website Is Mobile App Ready

Now that you know the pros and cons of mobile apps, let’s cover the most important things you must consider before creating one.

1. Is Your Website Mobile-Friendly?

Before starting on your journey to create a mobile app, ensure your website is mobile-friendly. This will make it easier to determine which features would translate well to this platform and show you parts that need to be improved upon or created from scratch.

2. Your Audience’s Behaviour

Now is a good time to check your analytics and see how your ideal audience interacts with your website. Which devices are they using? Which pages on your site do they spend the most amount of time on and where do they drop off? By analyzing the data, you’ll have a better idea of whether or not you should invest in a mobile app and which marketplace to target first.

3. Assess the Functionality

What functionality do you provide on your website now? What can a potential visitor do? How easy is the process of booking your services or getting support? Will your app offer the same functionality or will you start with the basics?

4. Can Your Backend Support It?

Your website might be fine on your current hosting plan but if you plan on using the same server to host your app, you might run into issues when there is a surge in popularity and user count increases.

5. Brand Consistency

The last point to consider is your brand consistency. It’s true that an app should be simpler to use than a website but that doesn’t mean you have to ignore your brand values and style. If your website already has solid branding in place, it will be easier to develop an app that falls in line with it.

Is Your Website Ready?

If done correctly, a mobile app is a great business asset that provides a smooth user experience and feels like a natural extension of your brand. Take the time to assess your website and understand how people interact with it. Once you have a general idea of your site’s strengths and weaknesses and your audience’s behaviour, you’re ready to turn your website into a mobile app.

If you’ve been following Android N-related news over the last, little while, you’d have been forgiven for thinking that Google would only begin publicly talking about Android N in May, when it holds its I/O developer conference. Android N is the company’s codename for its Android mobile operating system’s upcoming release.

In a completely surprise move, however, Google preempted this expectation by throwing the development world a curveball. The company just announced the Android N Developer Preview months before anyone expected it to. Sweetening this news is the revelation that Google will also make this preview available as an over-the-air update.

There’s a method behind this madness: Google is interested in getting more feedback from developers earlier in the development process. In addition, it wants to ensure that Android N’s final release makes it into device manufacturers’ hands by this summer. This ambitious timetable necessitated this surprise announcement, according to Hiroshi Lockheimer, who is the company’s VP for Android, Chromecase and Chrome OS.

At the moment, there are five preview releases planned, with the final one dropping sometime in Q3 of this year. It’s vital to note that this preview will be continually updated as the months go by. Google wants to incorporate additional features over time, yet this preview is meant to spotlight just a few of the standout features of Android N.

Better notifications are one of those. In Android N, developers will note that direct reply notifications will enable them to let their users respond to incoming notifications directly from the notifications shade. If they want, developers may bundle same-app notifications, as well.

Another huge change is split-screen view, which is a first for Android. The apps that support this new feature are going to be able to work side-by-side with other apps on smartphones and tablets. Developers are permitted to establish the minimum allowable dimensions for apps. For the longest time, users have been clamoring for multi-windows support, so it’s gratifying to finally see Google acquiesce to these requests.

Even picture-in-picture is addressed in this preview. Video apps should be able to play in the corner on Android TV.

Then, there’s Doze, the feature Google recently introduced that lets devices go into a deep-slumber mode if a device has been stationary for a certain period of time. With Android N, Google takes this idea further still by letting Doze save more battery power when users turn off their screens.

Designers and developers who can’t wait to try this new preview release can try their luck with it when Google lets them sign up for its over-the-air update. That should happen fairly soon. Here’s the catch: They have to own a Nexus device.

At the WWDC 2014 Apple introduced a brand new programming language called Swift,. It’s a language that has been created by Apple from the ground up to be both very efficient and very beautiful.

Swift uses the same API’s as C but in my opinion is easier to learn and get a grasp if you come from a web development background like me.

If you are just as exited about this language as I am, then this is the article for you.

Variables and constants

Declaring variables in Swift, if you come from a Javascript background, should be very familiar; you declare a variable by using the var keyword:

varmyNumber = 40

You can, of course, also set constants; to define a constant you need to use the let keyword:

letname = "DeveloperDrive"

If you have used Objective-C, or in this case even Javascript, one thing you will notice from the sample code I just wrote is that I didn’t add any semi colons. That is because Swift doesn’t require them (although you can include them if you prefer).

Manipulating strings

This is another part of the language where you should feel at home if you work with Javascript. Concatenating strings is done as you would see in any of your Javascript files, you just need to use the “+” sign:

By the way, if you want to print this to the screen all you need to do is call println:

println(name)

Inserting variables into a string is also really simple; you need to use “\” and then place the variable inside some parenthesis:

varnumber=20vartimeLeft="You have \(number) minutes left."

As you can see, everything is written in a simple and structured manner.

Arrays

One thing every language needs to handle is arrays. We always need them, and it’s a huge help if they are simple to set up.

They are simple in Swift, and again, will be familiar to anyone who has used Javascript:

var names = ["Leslie","April","Tom","Andy","Ann","Ben"]

As you can see this is a really simple and clean method.
If you want to count the elements use the count property:

varnumberNames = names.count

Adding elements to your array is also fairly straight forward:

// Adding a single elementnames+="Jerry"// Adding several elementsnames+=["Donna","Chris"]

Dictionaries

The other collection type we have in Swift is dictionaries. In this type of collection every value we have in the array is associated with a unique key, like so:

varsocialNetworks=["FB":"Facebook","TW":"Twitter","G+":"Google+"]

And as you would expect, you can iterate through them using a for loop:

for(abbr,name)insocialNetworks{println("\(abbr) = \(name)")}

You can also call out a value very easily by specifying the key for it, and if you want to change that value just assign it with a “=” sign:

println(socialNetworks["FB"])socialNetworks["FB"]="Vine"

Functions

The next step is to see how we can create simple function in swift and we do that by using the func keyword:

funchelloRuby()->String{return"Hello Ruby"}helloRuby()

As you can see, the syntax for defining a function is really simple and great to look at, even when it comes to calling the function all you need to do is write the name of the function and if you don’t have any parameters, just open and close parenthesis.

Of course, we can also have parameters if we need them. We just declare them inside the parenthesis, after the name of the function:

Conclusion

As you can see from these basics Swift is a very well written language that does a great job and should be highly appealing to any web developer hoping to move into mobile. It’s simple, but it allows you to everything Objective-C allows.

]]>https://www.oxdevelopment.com/a-simple-introduction-to-swift/feed/0Getting started with PhoneGap, part 3https://www.oxdevelopment.com/getting-started-with-phonegap-part-3/
https://www.oxdevelopment.com/getting-started-with-phonegap-part-3/#respondFri, 15 Mar 2019 17:42:26 +0000https://www.nextwebinc.com/?p=205558With the first and second parts of this tutorial we have gotten pretty far when it comes to understanding PhoneGap and in this last part we will take a look at some more device API’s that we can make use of when creating our mobile applications with PhoneGap.

The Contacts API

The name in this API is pretty self explanatory , with this API we can access the device’s contacts database and it allows us to either create , find , clone or delete a contact.

To create a contact we need to use the contacts.create method and using that method to create a simple contact is as simple as:

If we take a look at the code you can see that we first waited for the device to be ready, like we usually do when it comes to these API’s, then we use the contacts.create method and assign it to the variable called contact.

The next step was to give our contact a display name ( I also set a nickname for compatibility), in the next part we set the contact’s name and family name, this is where we can place other things like middleName, honorificPrefix and honorificSuffix.

Next we add the contact’s phone numbers, and these must be placed inside an array because one person can have various phone numbers, it’s the same idea with e-mails.

The last things we need to do is save the contact to the database and provide success and error functions where we can just place an alert or anything we please.

This was just the create method, we can also clone, find or even remove contacts from the database.

The Connection API

In some cases you may need the application to be aware of what connection, if any, the device is using. Whether you’re downloading a file or synchronizing data, it’s always a good idea for the app to be mindful of the type of connection.

In order to check for all types of connections and alert the proper one we’d use something like:

In this piece of code, after the document has finished loading we call the checkConnection function and in that function all we do is provide readable names for all types of connection so that we can alert that to the user.

The connection API is a very simple one to put into use but it’s also a very specific API , it’s not needed in all applications but is very helpful when called upon.

The device API

This will be the last API we will be talking about and with this API we can gather all the information we may need about the device our application is running on, like the OS, model and version of that OS so that if, for example, we have code that needs a certain version of Android to run we won’t run it if the test we did on the device version comes back negative. To get all the information from the device and place it on the screen we use something like:

In this API, after the document has finished loading, we first grab the element where we want our device info to be placed and then grab all of its characteristics; first we get the model, then the OS and its version, then the Cordova version and finally we get the device’s Universally Unique Identifier. Now we have this data we can do something useful with it like show the correct UI.

Conclusion

When it comes to phone applications there are literally thousands of applications for all the OS’s but the transition between creating a web app and a phone app used to be quite rough and now we can do it smoothly using all the languages we already use on our daily life.

There is still a lot of PhoneGap to discover and build upon but these three articles have been your long introduction to what it can do and just how much you can customize your application depending on the device or even location.

Now go build some great mobile applications with PhoneGap.

]]>https://www.oxdevelopment.com/getting-started-with-phonegap-part-3/feed/0Getting started with PhoneGap, part 2https://www.oxdevelopment.com/getting-started-with-phonegap-part-2/
https://www.oxdevelopment.com/getting-started-with-phonegap-part-2/#respondFri, 15 Mar 2019 17:42:04 +0000https://www.nextwebinc.com/?p=205557The first part of this mini-series showed you what PhoneGap is, and how it can help you develop mobile applications with familiar technologies.

In this second part we’ll look at some more device APIs.

The geolocation API

This API is used on a variety of websites to make the site (or in this case the mobile application) location aware.

A simple example that would get you the user’s latitude, longitude and altitude coordinates and show them on the screen would look something like:

The first part of this code should look very familiar to you, that is the part where we check if the device is ready and if it is, we use the geolocation API to get the device’s current position.

If we succeed in getting the location we just need to place the coordinates we want in a div with the ID of geolocation and as you can see getting this value is pretty intuitive seeing as their names are self-explanatory. Finally if we don’t retrieve the user’s location we show an error.

In the example above I’ve used the getCurrentPosition function and this function only gives us the location when the success function is fired, if we want something that constantly watches the coordinates and updates them on the fly we would use the watchPosition function which also takes a third parameter specifying the frequency with which we would like to update the coordinates. Not a lot would need to change in our code:

As always we wait for PhoneGap to be loaded and when it is, we set the destinationType and sourceType ( by default they are camera and data_url). After this we wait for the user to click the button and when she does the capturePhoto function fires and here we place our options and also the error and success callbacks.

If the function succeeds our getPhoto function fires and we set the img element’s display value to block and then place the image in its src attribute. And since our allowEdit option is true the user will be able to edit the image before it shows up in the app.

Conclusion

In this second part we looked at two more API’s we have at our disposal with PhoneGap, the Geolocation API and the Camera API, and how easily these two can be used to our benefit.

]]>https://www.oxdevelopment.com/getting-started-with-phonegap-part-2/feed/0Getting started with PhoneGaphttps://www.oxdevelopment.com/getting-started-with-phonegap/
https://www.oxdevelopment.com/getting-started-with-phonegap/#respondFri, 15 Mar 2019 17:41:34 +0000https://www.nextwebinc.com/?p=205556Creating Mobile applications is something a lot of web developers are keen to get into.

The problem with creating these applications when coming from a web background is that new languages need to be learned.

With PhoneGap that need is gone, PhoneGap allows you to build web applications with languages you are already familiar with like HTML, CSS and JavaScript.

What is PhoneGap ?

PhoneGap is an open source framework that aids in the development of cross-platform applications with languages familiar to web developers.

For anyone from a web background this is a great solution and it also has the benefit of being a cross-platform approach to mobile development.

Since we all want to work with different platforms, there’s no installation guide that’s better than PhoneGap’s own guide, follow the instructions there to install PhoneGap in your preferred environment.

The Device API’s

The good thing about working with PhoneGap is that we have access to a lot of device API’s like:

Accelerometer — The accelerometer allows us to tap in to the motion sensor in the mobile device.

Camera — We can capture a photo using the device’s camera.

Compass — With compass we can get the direction the device is pointing in.

Capture — The capture provides us access to the audio, image, and video capture capabilities of the device.

Connection — Check if the user has an internet connection and get its details.

Contacts — With this API we can access the contacts database on the device.

Device — This API helps us get information about the device itself.

File — Using the JavaScript File we can read, write and navigate through the user’s files on the device.

Events — This API allows us too hook up to a user event and add a callback to it. An example could be the device ready event, lowering down the sound or even hooking up a function when the user’s battery is critically low.

Geolocation — This API is widely used in the mobile world and it makes your application aware of where it’s located.

As you can see the first thing we did was check if the device was ready, if that comes back true we start the accelerometer and get its current position and in there we passed a success callback and an error callback; in the former I created an alert with the acceleration in all 3 axis and in the latter just a simple error alert to let the user know that something went wrong.

Conclusion

In this first part we took a look at what PhoneGap is, what its capabilities are, and we even saw how to use one of its device API’s. We’ll continue with this in the second part of this tutorial where we’ll be looking at more device APIs like the camera and geolocation.

]]>https://www.oxdevelopment.com/getting-started-with-phonegap/feed/012 Magento Pitfalls (and How to Avoid Them)https://www.oxdevelopment.com/12-magento-pitfalls-and-how-to-avoid-them/
https://www.oxdevelopment.com/12-magento-pitfalls-and-how-to-avoid-them/#respondFri, 15 Mar 2019 17:40:50 +0000https://www.nextwebinc.com/?p=205555To this day, Magento stands firm to its reputation as the most popular e-commerce platform among online businesses. From startups, SME’s to large scale corporations, this orange shopping cart has been knighted as “The People’s Favorite”.

Be it brands like Nike, Nestle, Fox Connect, Samsung, Ford, Lenovo, Olympus, Vizio and Men’s Health, or other millions of eStores, Magento’s foothold in the e-commerce landscape has accelerated and reached new heights.

We’ve been very frustrated with the state of open-source eCommerce we knew it could be done better

Roy Rubin, Co Founder/CEO Magento

What Makes Magento so Special?

With its thousands of elegant themes, open source extensions and a mighty community always in for action, Magento presents itself as the best option for a reliable, fast and user-friendly eStore with the best practical features for online commerce. However, in order to tame this orange beast, developers must acquire a fair knowledge on the most common pitfalls to avoid, and fix.

Technical issues often arise during the deployment phase, which can not only compromise website performance, but lead developers into blaming the platform rather than debugging to identify the exact cause of the issue. The following 12 are the most common issues encountered during Magento deployment and we have provided their simplified solutions alongside them.

1. Changing Main Magento Files

Modifying the main Magento files always leads to issues in later stages, whether during updates or integrating new extensions. Although additional code can be added to the main Magento files through <rewrite>, modifying it again can create an extends chain which complicates the entire program and results in errors when one or more modules are disabled or removed. However, multiple modules can access the same event without causing errors through event observers.

2. Unnecessary Load on Memory

The fetchAll() method consumes a major portion of memory and network resources when it has to retrieve heavy amounts of data. Under most cases the entire data set is unnecessary; coding the fetch() method to retrieve rows from database disjointedly achieves better results.

3. Use count() Method Warily

Count() is useful but can also potentially become a burden on memory resources if utilized within loops. This is because it calculates the length of array it is assigned to for every iteration. In case the array happens to be a lengthy one, the time required for count will ultimately slow down your processing.

for ($sales=10; $sales < count($products); sales++){//code}

If the size could be determined outside looping condition from the start in such manner as below, the program can be streamlined for memory efficiency.

4. Nesting SQL Queries within Looping Conditions

SQL queries already consume considerable memory and network resources, and looping them results in an even more resource demanding process. For example, a single Entity Attribute Value (EAV) model demands a sizable chunk of resources and since an online store features numerous products and services, such coding will ultimately consume excessive time.

6. Avoid Router Issues

You can eliminate router issues by ensuring that similar names are assigned for both frontend and admin routers. Taking out router issues is imperative as it directly interferes with behavior of modules. In case the module functions without an admin router, remove it entirely, as it may cause issues such as failure to detect frontend page or redirecting to HTTPS from HTTP.

7. Exception Handling

Exception handling is the perfect solution for containing any unexpected behavior the code may display due to any reason. Errors can be checked safely in staging servers but once it goes live, unknown errors cause the online store to behave erratically that may lead to user abandonment. Using try-catch blocks guarantees the module will continue operating even when it encounters unpredictable errors which keep the website to its optimum performance.

8. Updating Security

Magento has a reputation of timely releases of security updates when a new version surfaces or when they detect a breach in their code. Either way, updating your e-commerce store security enhances the security protocols and prevents your valuable data from being stolen and misused. Since the updates are designed by the recent software releases and advancements in hacking techniques, updating safeguards your Magento store from spam ware and third party cyber-attacks.

9. Common Extension Installation Mistakes

One another amongst the notorious issues faced while deploying Magento is extension integration and installation. The developer must download the correct extension compatible with the Magento version in use after verifying system requirements. Each step must be followed correctly as provided in the extension installation guideline.

Also, the statics cache must be cleaned to start using the extension. Cleaning cache is easy. Go to System > Cache Management > Flush Static Files Cache. This also applies for static content cache each time any change in setting or extension is made. This prevents old CSS files from interfering with the front end’s performance. Extensions play an integral role during deployment and making errors during these stages can be catastrophic for your online store. To make sure your extension works uninterrupted in the best means possible, test their functionality after downloading to avoid a clash with other installed extensions. Last but not the least, double check if the download file path is in the correct folder.

10. Using FTP to download Magento

Installing the complete version of Magento via FTP can cause numerous issues during updates. For best results, developers are recommended to use the downloader provided by Magento so any such errors can be avoided. It is both user-friendly and allows user to select the files which they wish to download. This significantly helps in streamlining the entire process of Magento re-installation.

11. What to do with 404 error for CSS and scripts

Another common issue developers face is the creation of symlinks. The production of symlinks in not by random nature, but to suffice static resources. Developers can fix this by the following simple steps.

You can start by finding virtualType name=”developerMaterialization” after opening app/etc/di.xml. Once you have located it, you will come across an item name=”view_preprocessed.” You can either delete it or set it for modification.

When deleting them, be careful not to alter or erase the .htaccess. To get rid of any existing symlinks, Delete the files under pub/static

Modification of name=”developerMaterialization can be done by changing the contents from Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink to Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

12.Layered Navigation Management

While Magento does provide a well-defined layered navigation system, its success highly depends on how this functionality is integrated. Layered navigation can exhibit duplicate content which can negatively impact on SERPs. To avoid this, AJAX or cookies can be used to disable search engines from accessing the layered navigation content, only permitting customers to view it.

Final Thoughts

Magento is a robust e-commerce platform rich with user-friendly features and world-class functionalities.Using such a dominant ecommerce platform to its full spectrum means acquiring a thorough understanding of its do’s and don’ts.

]]>https://www.oxdevelopment.com/12-magento-pitfalls-and-how-to-avoid-them/feed/0Getting Started with PostCSS and Gulphttps://www.oxdevelopment.com/getting-started-with-postcss-and-gulp/
https://www.oxdevelopment.com/getting-started-with-postcss-and-gulp/#respondFri, 15 Mar 2019 17:40:10 +0000https://www.nextwebinc.com/?p=205553PostCSS is a programming tool that uses JS plugins to transform styles. The plugins can do different tasks in CSS, like transpiling CSS syntax, supporting mixins and variables, linting CSS, inlining images and much more. PostCSS has grown popular in recent times, and is now being used by huge corporations such as Alibaba, Wikipedia and others. It is also relatively easy to use, giving the developer an easy time to get the output that they require.

The following are the ways that are available for you to get started with PostCSS:

Codepen

Prepos

Gulp

I would like us to discuss how to get started using Gulp, the task runner. The other two methods are also good, the only con with them is the fact that you do not have the ability to have control on the plugins you want use.

Using the Task Runner Gulp to Install PostCSS

To get started, you will need to have the following installed:

Node.js

NPM

Git

Step 1

The first step is to install gulp. You can install it by opening terminal running this command. The -g extension means that we are installing globally:

npm install gulp -g

After successfully installing gulp, you will need to set up a gulp project. You will the need to create a package.json file and add it to your project. You can create it by using npm init command. After this, you then install the gulp package to the project. This is done by running this command, npm install gulp –save-dev. We use the extension –save-dev so that we can have it saved like a dev dependency.

After successfully following the above step, open the root of the project you have just created, then add a new file and name it gulp.js. We will need to allow this file access the package we installed above. We can do that by adding var gulp = require(‘gulp’); line on the top of the gulp.js file. Finally, you can optionally install plugins for gulp. This is not mandatory since gulp can use npm packages to get plugins.

Step 2

We have now created our project. Just to make sure that we are on the same page, please check your project root folder and make sure that you have the following in it:

Package.json

Gulp.js

Installed gulp as development dependency

Step 3

We are now going to go through the basic steps to install and work with PostCSS. The first step here will be to go to the root folder of your project, then create two sub folders, name one of them tstfoo and the other one src. All CSS files that are not processed will go to the src folder while the ones that have been processed to PostCSS will be stored in the tstfoo folder.

Step 4

The next step will be to install a plugin that will be in charge of handling the processing of PostCSS files. The best plugin to use for this is the gulp-postcss plugin. To install this plugin, open your terminal and navigate to the root folder of your project using the cd command, the run this command;

npm install --save-dev gulp-postcss

Notice that your root folder has more sub folders under the node_modules folder after successful installation of the plugin.

Using a editor of your choice, you can now open the project, then open the gulp.js file for editing. We are now going to create variables that will be used to for calling the gulp-postcss and gulp modules that we just installed. To do that, we will add the following code to the file:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

After successfully adding the above and following all the steps correctly, we are now able to create a task that will read a CSS file, then give an output through PostCSS. Let us start doing it by adding these lines of code to the gulp.js file:

Going through the piece of code above, the first line has a task called css whose purpose is to have a function executed. In the function to be executed, we have tools, which is an empty array at the moment.

In line four, we specify files that we want processed. That piece of code simply means any files in the scr folder with the extension .css. Then we have the tube function which sets PostCSS to use the function postcss() for execution. We have our array tube here as an argument. This will let PostCSS know about the plugins we will be using. In the last line of code, we are telling PostCSS where to store the processed CSS files.

Step 5

We will now test what we have done and establish whether we have been successful. Let us now create a new file in the src folder, name it style.css. Open this file and add some CSS code to it, for example, you can add the following;

.example{
Background-color: blue;
}

Save the file after that, then open the terminal, navigate the the project folder, and run this command:

gulp css

This command is used to run the task we set up above. If you followed all the steps above correctly, then you should notice that you have a new file in the tstfoo folder, named style.css.

If you open the above new file, you will find that the code created is the same as the first file. The reason this has not changed is because we have not installed any plugins yet. If you remember in the introduction, we said that PostCSS uses JS plugins to transform styles. The plugins can do different tasks in CSS, like transpiling CSS syntax, supporting mixins and variables, linting CSS, inlining images and much more. You will need to install plugins of your choice now, depending on what you want to do. Let us go through an example adding one plugin.

Step 5

Let us add a plugin example and see how it works. We will add a plugin called cssnext used for enabling future syntax. To do that, still pointing at your project folder, open the terminal and run this command;

npm install cssnext --save-dev

After that, open the gulp file and add the following line at the top:

var cssnext = require('cssnext');

We will also need to add the plugin to our tools array that was previously empty, your array should now look like this:

var tools = [
cssnext
];

Now, we will edit the style.css file in our src folder in the project file to something like this:

.cssnext {
background: color(green(-10%));
}

After that, let us go back to the terminal again and run the command gulp css. If successful, check the new file in the tstfoo folder and you will notice changes, like this;

.cssnext {
background: rgba(0, 255, 0);
}

This means that the plugin was successfully used, with rgba() colour being the result.

]]>https://www.oxdevelopment.com/getting-started-with-postcss-and-gulp/feed/0How to build your own theme for Grav CMShttps://www.oxdevelopment.com/how-to-build-your-own-theme-for-grav-cms/
https://www.oxdevelopment.com/how-to-build-your-own-theme-for-grav-cms/#respondFri, 15 Mar 2019 17:39:31 +0000https://www.nextwebinc.com/?p=205554Grav is an open source flat-file CMS platform, built by the RocketTheme Team. While there are plenty of great CMS platforms available, they are all mostly database-driven, which can be overkill for smaller websites. Instead of a database, Grav uses folders and a basic file structure, it is focused on speed, simplicity, and flexibility.

After reading all of the documentation and spending some time trying Grav out, I’m definitely sold and will be using the platform. I hope you will too.

What We’ll Be Building

For the first part of this tutorial we’ll be building a one-page website, and in the second part, we’ll build a simple blog. I’ll assume you have a good understanding of HTML and CSS (or CSS preprocessors). We will not be getting into the styling of the themes but rather focus on Grav, and its functionality.

Installing Grav

Below are the very few requirements Grav needs in order for it to run:

A web server (Apache, Nginx, LiteSpeed, Lightly, IIS, etc.)

PHP 5.5.9 or higher

Download Grav Core with the Admin Panel Plugin and unzip the package in the webroot of your web server and you’re ready to roll.

Page Types

Grav comes with 3 types of pages out of the box:

Standard Page

These are typically single pages, such as blog posts, contact pages, error pages, etc. Grav assumes that any page is a standard page unless otherwise specified.

Listing Page

These are basically a standard page that has a reference to a collection of pages, for an example, a blog listing page. Configuration settings for these pages include: order, number of items and whether or not pagination is enabled.

Modular Page

Modular pages build a single page from it’s child pages, allowing us to build one-page layouts from smaller modular pages.

File Structure

Generally speaking, the only folder you’ll use is the /user folder.

The Content

The /user/pages folder is where all of the content pages live. Each page is placed in its own folder, and folder names should reflect the page’s name, and also be a valid slug.

You can order pages by naming the page folders with a preceding number: 01.home, 02.blog. Page folders then contain a markdown file and media for the page. The name of the markdown file will reference the name of the theme’s template to be used to render the content, for example: home.md would look for a template named home.html.twig.

The Theme

Themes can be found within the /user/themes folder. For a theme to function you’ll need:

blueprints.yaml – a file which contains information about the theme.

themename.php – a file which contains any logic your theme needs.

themename.yaml – a configuration file used by the plugin to set options the theme might use.

templates/ – a folder containing the Twig templates to render the pages.

You should also include and these are required if you plan to release a theme:

CHANGELOG.md – a file that follows the Grav Changelog Format to show changes.

LICENSE – a file containing the license to the theme.

README.md – a file with documentation for the theme.

screenshot.jpg – a 1009px x 1009px screenshot of the theme.

thumbnail.jpg – a 300px x 300px screenshot of the theme.

This is also where the css, sass, fonts, images, and js folders for the theme reside.

The Templates

Templates can be found in the /user/themes/themename/templates folder. These templates are Twig templates and will be used to render your pages.

The Blueprints

Blueprints are located in the /user/themes/themename/blueprints folder. The files within this folder are YAML files used to extend and modify the admin plugin with custom forms to make updating the website simpler.

Part 1: One Pager modular theme

Now that we have a basic understanding of how Grav works, let’s get started on our first Grav theme: a one page theme showcasing Grav’s awesomeness. Below is what our content and themes folder are going to look like:

Config Files

site.yaml

The site’s configuration file. We should never edit the default configuration files found in system/config. Instead, we overwrite the settings we’d like to change via creating our own configuration files within user/config. Below is a simple version of a site configuration file.

{% block head %}{% endblock head %} – This defines an area in the base template, typically containing the stuff we put in the<head>element. Note that the head in {% endblock %} is not required, but can be used for readability.

<title>{{ site.title }}</title> – Pulls the configuration set in config/site.yaml.

{% block stylesheets %} – Within this block we register our stylesheets for the theme.

{{ assets.css() }} – This outputs the stylesheets we just registered.

{% block javascripts %} – Just like the stylesheets block this registers our JavaScript files for the theme. Note that the jQuery library comes bundled with Grav.

{{ assets.js() }} – Renders the scripts we just registered.

<a href=”{{ base_url}}”>OnePager</a> – Links to the home page.

]]>https://www.oxdevelopment.com/how-to-build-your-own-theme-for-grav-cms/feed/05 Ways to Start Working With UX Todayhttps://www.oxdevelopment.com/5-ways-to-start-working-with-ux-today/
https://www.oxdevelopment.com/5-ways-to-start-working-with-ux-today/#respondFri, 15 Mar 2019 17:38:45 +0000https://www.nextwebinc.com/?p=205552There’s so much talk about the “user experience” these days that it’s easy to shrug off the concept of the UX. After all, if you’re in the business of building websites using modern standards and best practices, then isn’t the ultimate goal already to create a quality user experience?

The answer to that is, “Yes, but…”

Here’s the caveat: this idea that websites should be designed around the user experience is a given. If the on-site experience isn’t a satisfying or even a pleasurable one, users won’t convert. However, there is a difference between abiding by basic web design and development best practices and learning how to focus on UX.

While you might not be able to adopt or master a rigorous UX process right away, here are 5 user experience design strategies you can start using now to become a better web developer.

1. Separate the UI from the UX

A beautiful interface for your website is important for impressing visitors. Not only that, you want it to be cleanly laid out and to have a clear focus on the content so there’s no confusion as to what parts visitors should pay attention to. But all of these “musts” have to do with the actual graphical interface and not in the underlying nuts and bolts that drive user behavior.

If your goal is to master UX, understand that it requires a different approach than UI design. While the two do ultimately come together to shape the overall experience for visitors, UI design deals in the outward aesthetics of the site while UX design deals in the ease of usability and interactivity with your site.

So, before you adopt any of these further strategies, remind yourself that UX design requires a separate approach; one that’s more analytical in nature.

2. Tap into Your Inner Customer Service Rep

The one question you should ask yourself if you’re trying to master UX design is: “Do you care about the why?” And the reason for this is simple: because designing for user experience relies on your ability to project the future. Yes, that eye-catching site you want to build is sure to get visitors to notice your business, but does the experience you’ve built on-site support their end goals?

Think about it like this:

Visitors come to your site with a clear mission (e.g. to shop, to hire a service provider, to learn more about a topic).

A high-quality design gives off a professional aura that convinces them to look around.

But maybe the navigational path doesn’t make sense, the instructions to convert are difficult to follow, or there are too many irrelevant steps getting in the way.

It’s your job to think about those obstacles that can create friction in the prospective customer’s journey. Those missteps could cost your site their business and loyalty.

If you want to be a better developer, consider looking at your job as that of a customer service representative. You should know what your visitors’ goals are before they even get through that door. Additionally, before questions or issues arise, you should have already figured out a solution to them.

UX is about understanding your audience and being empathetic to their plight—both in the problem that’s brought them to your site as well as the problem they might run into during a bad on-site experience.

3. Always Start with Strategy

Think of UX more like a strategy than a design. Its focus is on breaking down web projects into the most minute of details so it gains a firmer hold on shaping the experience.

For those of you who are natural-born problem solvers, this one will come easy to you. For those of you who aren’t, you’ll need to learn how to prioritize strategy and cold-hard facts over that urge to create something “really cool.”

There are a number of ways UX pros go about collecting these facts in preparation to build out the user experience. These include researching competitors as well as the industry. Once a thorough base is established for what’s been done, work then needs to focus on creating identities for the site’s brand, voice, and end user (known as user personas).

4. Invest in the Right Tools

There’s a lot of work that goes into UX design. While no one expects you to adopt all of these strategies (at least not right way), one of the best things you could do for yourself as a web designer or developer is to get yourself more organized and structured in how you approach your work.

UX is all about systematic thinking and strict planning. If you can nail that down now and find the right tools to streamline this new approach, you’ll find that much of the other UX strategies will more easily fall into place later.

5. Listen

This again goes back to the idea of approaching your job like a customer service rep. UX pros understand that it’s not enough to study, plan, and test in isolation. Without user feedback, you could just end up spinning your wheels and not gain any traction with your audience.

That’s why it’s important to listen, too. Study the analytics. Send out user surveys. And, above all, be receptive to the feedback you receive. If this is your first time trying to build specifically for usability, your idea of what works may not be exactly on par with what your visitors want or need.