In Web Apps

SplitWire.com

14 Views November 2, 2015 Be first to comment

[vc_row][vc_column width=”2/3″][cq_vc_flipbox frontfullimage=”2471″ backtitle=”VISIT THIS PROJECT” backcontent=”(opens a new tab/window)” backcontentcolor=”#ffffff” backbutton=”CLICK HERE” backbuttonbg=”#bd0000″ backbuttonhoverbg=”#ff1919″ flipdirection=”rightleft” cardstyle=”customized” backbg=”#000000″ isshadow=”cq-noshadow” avatarsize=”” elementwidth=”100%” elementheight=”393px” elementmargin=”5px 0 0 0″ backbuttonlink=”url:http%3A%2F%2Flink.xarg.com%2F9NyzW||target:%20_blank” link=”url:http%3A%2F%2Flink.xarg.com%2F9NyzW||target:%20_blank”][/vc_column][vc_column width=”1/3″][vc_column_text]Project Title: SplitWire Media

Purpose: Online Advertising Company front-end and brand development.

Technologies: WordPress, PHP, HTML5, CSS3, Javascript, Photoshop[/vc_column_text][cq_vc_cqbutton buttonlabel=”OPEN PROJECT” icon=”hand-o-up” iconposition=”left” buttoncolor=”#ffffff” buttonbackground=”#bd0000″ link=”url:http%3A%2F%2Flink.xarg.com%2F9NyzW||target:%20_blank” extra_class=”btn-project”][/vc_column][/vc_row]

Continue Reading

by admin

Share

In Web Apps

1st Amendment Tattoo

13 Views November 2, 2015 Be first to comment

[vc_row][vc_column width=”2/3″][cq_vc_flipbox frontfullimage=”2458″ backtitle=”VISIT THIS PROJECT” backcontent=”(opens a new tab/window)” backcontentcolor=”#ffffff” backbutton=”CLICK HERE” backbuttonbg=”#bd0000″ backbuttonhoverbg=”#ff1919″ flipdirection=”rightleft” cardstyle=”customized” backbg=”#000000″ isshadow=”cq-noshadow” avatarsize=”” elementwidth=”100%” elementheight=”393px” elementmargin=”5px 0 0 0″ backbuttonlink=”url:http%3A%2F%2Flink.xarg.com%2FXHWk4||target:%20_blank” link=”url:http%3A%2F%2Flink.xarg.com%2FXHWk4||target:%20_blank”][/vc_column][vc_column width=”1/3″][vc_column_text]Project Title: 1st Amendment Tattoo

Purpose: General Informational site for Tattoo Shop located in Simi Valley. The shop needed a way to showcase the various artists portfolios, provide aftercare instructions and give details about the shop.

Technologies: WordPress, PHP, HTML5, CSS3, Javascript, Photoshop[/vc_column_text][cq_vc_cqbutton buttonlabel=”OPEN PROJECT” icon=”hand-o-up” iconposition=”left” buttoncolor=”#ffffff” buttonbackground=”#bd0000″ link=”url:http%3A%2F%2Flink.xarg.com%2FXHWk4||target:%20_blank” extra_class=”btn-project”][/vc_column][/vc_row]

Continue Reading

by admin

Share

In Web Apps

DailyNuke.com

10 Views November 2, 2015 Be first to comment

[vc_row][vc_column width=”2/3″][cq_vc_flipbox frontfullimage=”2461″ backtitle=”VISIT THIS PROJECT” backcontent=”(opens a new tab/window)” backcontentcolor=”#ffffff” backbutton=”CLICK HERE” backbuttonbg=”#bd0000″ backbuttonhoverbg=”#ff1919″ flipdirection=”rightleft” cardstyle=”customized” backbg=”#000000″ isshadow=”cq-noshadow” avatarsize=”” elementwidth=”100%” elementheight=”393px” elementmargin=”5px 0 0 0″ backbuttonlink=”url:http%3A%2F%2Flink.xarg.com%2FRSTnq||target:%20_blank” link=”url:http%3A%2F%2Flink.xarg.com%2FRSTnq||target:%20_blank”][/vc_column][vc_column width=”1/3″][vc_column_text]Project Title: DailyNuke.com

Purpose: Entertainment News Blog

Technologies: WordPress, PHP, HTML5, CSS3, Javascript, Photoshop[/vc_column_text][cq_vc_cqbutton buttonlabel=”OPEN PROJECT” icon=”hand-o-up” iconposition=”left” buttoncolor=”#ffffff” buttonbackground=”#bd0000″ link=”url:http%3A%2F%2Flink.xarg.com%2FRSTnq||target:%20_blank” extra_class=”btn-project”][/vc_column][/vc_row]

Continue Reading

by admin

Share

In Web Apps

Purple Haze Liqueur

9 Views October 31, 2015 Be first to comment

[vc_row][vc_column width=”2/3″][cq_vc_flipbox frontfullimage=”2467″ backtitle=”VISIT THIS PROJECT” backcontent=”(opens a new tab/window)” backcontentcolor=”#ffffff” backbutton=”CLICK HERE” backbuttonbg=”#bd0000″ backbuttonhoverbg=”#ff1919″ flipdirection=”rightleft” cardstyle=”customized” backbg=”#000000″ isshadow=”cq-noshadow” avatarsize=”” elementwidth=”100%” elementheight=”393px” elementmargin=”5px 0 0 0″ backbuttonlink=”url:http%3A%2F%2Flink.xarg.com%2Fw8hrr||target:%20_blank” link=”url:http%3A%2F%2Flink.xarg.com%2Fw8hrr||target:%20_blank”][/vc_column][vc_column width=”1/3″][vc_column_text]Project Title: Purple Haze Liqueur

Purpose: Informational website to introduce a new Liqueur called “Purple Haze”.

Technologies: WordPress, PHP, HTML5, CSS3, Javascript, Photoshop[/vc_column_text][cq_vc_cqbutton buttonlabel=”OPEN PROJECT” icon=”hand-o-up” iconposition=”left” buttoncolor=”#ffffff” buttonbackground=”#bd0000″ link=”url:http%3A%2F%2Flink.xarg.com%2Fw8hrr||target:%20_blank” extra_class=”btn-project”][/vc_column][/vc_row]

Continue Reading

by admin

Share

In Web Apps

DynamoDelay.com

13 Views October 31, 2015 Be first to comment

[vc_row][vc_column width=”2/3″][cq_vc_flipbox frontfullimage=”2463″ backtitle=”VISIT THIS PROJECT” backcontent=”(opens a new tab/window)” backcontentcolor=”#ffffff” backbutton=”CLICK HERE” backbuttonbg=”#bd0000″ backbuttonhoverbg=”#ff1919″ flipdirection=”rightleft” cardstyle=”customized” backbg=”#000000″ isshadow=”cq-noshadow” avatarsize=”” elementwidth=”100%” elementheight=”393px” elementmargin=”5px 0 0 0″ backbuttonlink=”url:http%3A%2F%2Flink.xarg.com%2FSkQvM||target:%20_blank” link=”url:http%3A%2F%2Flink.xarg.com%2FSkQvM||target:%20_blank”][/vc_column][vc_column width=”1/3″][vc_column_text]Project Title: DynamoDelay.com

Purpose: Ecommerce website to sell male endurance spray.

Technologies: WordPress, WooCommerce, PHP, HTML5, CSS3, Javascript

[/vc_column_text][cq_vc_cqbutton buttonlabel=”OPEN PROJECT” icon=”hand-o-up” iconposition=”left” buttoncolor=”#ffffff” buttonbackground=”#bd0000″ link=”url:http%3A%2F%2Flink.xarg.com%2FSkQvM||target:%20_blank” extra_class=”btn-project”][/vc_column][/vc_row]

Continue Reading

by admin

Share

In Modded News

Fix the WordPress Top Admin Bar

6 Views August 16, 2015 Be first to comment

Does your site header get overtaken by the WordPress Top Admin bar??? It’s annoying and if you don’t know what you’re doing, you can really mess things up trying to fix it. So here’s the right way to deal with it, and it only takes a moment to do…

1426481763broken-header

Open up the header.php file and just before the < /head > tag add this (modify it to suit your code):

370748f2338fd94c291b227346333735

I hope this helps some poor soul out there.

Cheers!

Continue Reading

by admin

Share

In Coding, From the Web, Grids, Layouts, Preprocessors

Smarter Grids With Sass And Susy

2 Views July 20, 2015 Be first to comment


  

If you’re a designer, you’ll know that grids are your friends. More often than not, they’re the vital architecture that holds a beautiful design together; they create rhythm, structure your page, lead the eye, and prevent the whole thing collapsing in a sloppy mess.

Smarter Grids With Sass And Susy

I’m a firm advocate for designing with the browser: prototyping with HTML and CSS has many clear advantages over static Photoshop comps, which have less value for the responsive web. Unfortunately, HTML, CSS and grids aren’t natural bedfellows: the progression of web standards over the years has been lacking in this area, meaning we have to grapple with floats (which were never designed to be used this way) and clearfixes — not ideal when you want to spend less time debugging layout and more time crafting experiences.

The post Smarter Grids With Sass And Susy appeared first on Smashing Magazine.

Continue Reading

by admin

Share

In From the Web

Remix CodePen Challenge: Winners Announced!

3 Views July 20, 2015 Be first to comment

One month ago we set you a challenge: to remix an HTML and CSS profile card on CodePen as creatively as possible. A massive 154 of you took part–and today we’re very happy to announce the three prizewinners!

How we Selected the Winners

The judges panel comprised an Editor (me), a Designer, a Project Manager, a UX Specialist, an SEO Pro and a Front-end Developer from the team at Envato. Together we whittled down the collection by examining each pen’s creativity, execution, personality, originality and UX. It was a difficult process, but the three which received the most votes are listed below! 

Drumroll please..

Third Place: Yegor Borisenco

Great bit of Sass and animation, with plenty of personality!

Yegor wins:

  • $50 PayPal Prize
  • 1-year CodePen Pro Account
  • 3-month subscription to Tuts+
  • Envato Studio 20% discount voucher

Second Place: David Jones

Hit Rerun (bottom right of the pen) to fully appreciate what David’s done..

David wins:

  • $100 PayPal prize
  • 1-year CodePen Pro Account
  • 3-month subscription to Tuts+
  • $50 Envato Studio voucher

First Place: Dion Pramadhan

Our judges couldn’t help but be charmed by this one, well done Dion!

Dion wins:

  • $200 PayPal Prize
  • CodePen Tee Shirt and Swag Bag
  • 1-year CodePen Pro Account
  • 1-year subscription to Tuts+
  • $150 Envato Studio voucher
  • A “Won a Contest“ badge on Envato Market

Great Job Everyone!

A well-deserved congratulations to our winners! We’ll be in touch shortly with details on how to get hold of the goodies.

Thank you to everyone who took part–selecting the best from these entries (don’t forget the check out the collection to see what you were all up against) was no easy task. Thanks to the judges team for lending us their expertise. Lastly, thanks must go to PayPal and the guys at CodePen for stumping up superb prizes. If you didn’t win, better luck next time, we hope to see you in another challenge!

Continue Reading

by admin

Share

In From the Web

Getting Started With the Instagram API: Media Endpoints

8 Views July 20, 2015 Be first to comment

Final product image
What You’ll Be Creating

This is part two of a series on the Instagram API. In this tutorial, I’ll guide you through using Instagram’s Media Endpoints, which allow you to search for popular images from a specific time and place. 

You can download code for each episode by using the GitHub repository link in the sidebar. You may also be interested in my two-part Tuts+ series, Locating Potential Crime Scene Witnesses With Social Media APIs

The code for these tutorials is written in PHP using the Yii Framework. You can learn more about Yii in Introduction to the Yii Framework (Tuts+) and in the Programming With Yii2 Series (Tuts+). You can also easily adapt the code segments for your own PHP application.

I do participate in the discussions. If you have a question or topic suggestion, please post a comment below. You can also reach me on Twitter @reifman or email me directly.

Let’s begin by registering as a developer with Instagram.

Getting Started

To get started, visit the Instagram API page for developers and click Register Your Application:

Instagram Hello Developers

You’ll need to sign up for a developer account:

Instagram Developer Signup

Then you can register a new application to receive your Client ID:

Instagram New Client Registration

On the Manage Clients dashboard, you’ll see your Client ID and Client Secret, so make note of these:

Instagram Manage Clients

Using the Media Endpoints

As web service APIs go, the Instagram API is robust, and in my experience works very well. Instagram offers a handful of API endpoints:

Instagram API Documentation Overview and Endpoints

For this tutorial, we’ll focus on the Media endpoints:

Instagram API Media Endpoints

With Media endpoints, you can retrieve information about an Instagram photo or video by referencing its ID or the shortcode from its URL, e.g. 0EyZ53Ja9X from https://instagram.com/p/0EyZ53Ja9X. It also provides geosearch capabilities to find media posted from a specific time and place as we did in Locating Potential Crime Scene Witnesses With Social Media APIs. And finally, it allows you to retrieve popular, trending Instagram posts.

The API Console

To help you get started and debug, Instagram has an API console powered by Apigee:

Instagram API Console powered by Apigee

You can try out queries against the Media endpoints using the API console. Here’s an example result for media/popular:

Obviously, you can see how useful this is for working with media from the popular mobile photography service.

Let’s move on to installing our sample codebase and configuring it to work with your Instagram client application.

Installing the Codebase

For this series, I’m going to continue to build on the Eyewitness codebase from Locating Potential Crime Scene Witnesses With Social Media APIs. You can clone the GitHub repository located in the sidebar to run our sample code.

You’ll need to configure your local Apache configuration. I use MAMP, so it looks something like this:

You need to create a database locally. I use PHPMyAdmin to create one graphically:

Create your Eyewitness database

Then I create an initialization file in /var/secure/eyew.ini with my database credentials and Instagram IDs and keys. I described this process recently in another Tuts+ tutorial: Protecting Your Keys From GitHub.

My ini file looks like this:

Update your Composer and its vendor libraries:

Then initialize our database. The first migration installs user tables for our Yii2-User by developer Dmeroff extension, and the second creates our app-specific tables:

Again, you can learn more about setting up a Yii Framework application in my Programming With Yii2 series for Tuts+.

Here’s the MySQL schema for our Instagram image table—we call it the Gram table. We’ll use it to store geosearch results.

The Home Page

I’ve renamed the sample application “Instapi”, short for Instagram API.

Here’s a look at what you should see when you visit the site in your browser:

Instagram API Sample Code Home Page

Performing Media Searches

To implement media searches in our Instapi application, I’m using Galen Grover’s Instagram PHP package.

Search Popular Images

First, let’s implement a search for media/popular. We’ll query the API and display the results in a table.

I’ve created an action called popular in GramController.php:

It calls searchPopular() in the Gram.php model:

In /views/gram/popular.php, we set up an HTML table structure:

and include the _item.php partial view to display individual media results:

Here are the results of Instagram media popular queries. Go ahead and refresh the page in your app. It’s fun to see what comes up next.

Instagram Media Popular Results Table

Look Up Information About an Image or Video

I’ve linked the Instagram media ID in the first column to a controller action that calls the media endpoint which gets us more information:

Here’s the lookup function in the Instagram model:

Here’s a screenshot of the data dumped to the screen:

Instagram API Media Information Dumped to Screen

Obviously, you could use and store this information however you would like.

Search for Media From a Time and Place

Now, let’s search for images from a specific time and place. For this example, I’ll review our Eyewitness example.

Our codebase allows you to define a moment as a place and time. It consists of a friendly descriptor, a location (latitude and longitude), a start time and a duration (in minutes). For my first example, I’m looking for Instagram users who were present at Macklemore’s video shooting on the evening of Wednesday, July 24, 2013 at Seattle’s landmark Dick’s Drive In.

Using Google Maps, I can get the GPS latitude and longitude for Dick’s. It’s 47.6195 -122.321. 

Dicks Drive In Broadway Seattle GPS in Google Maps

From the article, I learned that the production shut down at 1 am. I’m going to choose a start time of 10 pm and a duration of 3 hours.

Create a Moment

Instagram accepts start times in GMT so I’ve hardcoded an eight-hour time change adjustment from my timezone (PST). You may need to change this in the code.

To search Instagram, just click on the camera icon below:

The Moments Index Grid

The actual search is fairly straightforward: $instagram->searchMedia( $this->latitude, $this->longitude,$params ); 

The results are stored in the Gram table, which we can then browse:

Here’s the first page of results from my search. You can see the crowds and Macklemore’s Cadillac limo driving up.

Macklemore Search Results

Then on page three, an Instagram user named Joshua Lewis has a shot of Macklemore exiting the Cadillac: 

More Macklemore Search Results

Here’s Macklemore:

Macklemore Arrives on Instagram

This example clearly shows the power that the Instagram search API provides. In just a few moments, we found a variety of eyewitnesses to an event from the summer of 2013.

What’s Next?

I hope you’ve enjoyed learning about the Instagram API thus far. In the next episode, we’ll explore OAuth authentication so that we can query areas of the Instagram service that require user authorization.

In the meantime, please feel free to post your questions and comments below. You can also reach me on Twitter @reifman or email me directly. You can also browse my Tuts+ instructor page to see other tutorials I’ve written. 

Related Links

The preview image is modified from a result that came up in our API search. 

Continue Reading

by admin

Share

In From the Web

The Beginners Guide to WooCommerce: Shipping Settings Part 2

2 Views July 19, 2015 Be first to comment

In our previous article we discussed how a store owner can configure the settings in the Shipping Options section. WooCommerce offers multiple shipping methods which you can implement to deliver items/products to your customers. Today I will be taking up every method separately in detail, explaining how you can configure the settings for these shipping methods.

WooCommerce Shipping Options menu

As a reminder, WooCommerce offers five different types of shipping methods. Each is listed on a separate sub-page in the Shipping Settings tab. They are:

  1. Flat Rate
  2. Free Shipping
  3. International Delivery
  4. Local Delivery
  5. Local Pickup

Flat Rate

We will start this article with the settings of shipping through the flat rate shipping option.

Enable/Disable

Enable or Disable shipping method

By now I am sure you know what the option for Enable/Disable means. You may enable this option if you want to offer shipping at a flat rate to your customers. 

Method Title

Method title

The field for Method Title will decide what text will be displayed to your customers if you are offering flat rate shipping. Once again WooCommerce has set a default value of Flat Rate at the time of plugin installation, but a store owner can set it to any custom value.

Cart showing Flat Rate Shipping Method text

The figure above shows that if we change this field to Flat Rate Shipping Method and save the changes then the same title will appear on the front-end.

Availability 

Availability All allowed countries

You can limit the destinations where you will offer shipping at a flat rate. The option of Availability is a dropdown menu from which you can allow flat rate shipping to All allowed countries or to some Specific Countries. If you select some Specific Countries then you’ll have to choose the specific countries from another dropdown which appears next to this option.

Tax Status

Tax Status dropdown menu

An online store owner has the choice of applying taxes to the various shipping methods or not. You can add the cost of taxes like Value Added Tax (VAT) or the Sales Tax if you set the Tax Status option as Taxable. Otherwise you may select None and the shipping cost will not include any such tax.

Additional Rates

Additional Rates

In WooCommerce, if you are willing to implement some additional taxes other than the standard flat rates then you can use the function of Additional Rates. WooCommerce guides its users about how to fill the details in this setting. You will notice in the above figure that some attributes are displayed which are filled according to a particular format, i.e.

Option Name | Additional Cost [+-Percents%] | Per Cost Type (order, class or item)

Let’s see what these attributes denote:

  • Option Name: Here you will enter the names of shipping methods other than the flat rate, e.g. Express Shipping, Airmail Shipping, etc.
  • Additional Cost: This is the additional amount which will be applied on every product other than the base flat rate.
  • Per Cost Type: The attribute of Per Cost Type may apply to every class, order or item and will decide how this cost will be applied. 

Now I will explain how these Additional Rates can be set at the front-end with the help of an example.

Additional Rates

In the above figure I have added an additional price of 10.0 and 5.0 for the newly defined shipping rates of Express Shipping and Airmail Shipping, which will be applicable on every order. So, considering the fact that I have fixed £7.00 for shipping with flat rate, now the total charge for Express Shipping becomes £17.00 (10.0+7.0=17.00) and the Airmail Shipping becomes £12.00 (7.0+5.0=12.00). 

Shopping cart showing different shipping totals depending on shipping method

A customer who chooses shipping with flat rate will be charged £42.00 (35.0+7.0=42.00) whereas a person opting for the additional rate of Express Shipping will be charged £52.00 (35.0+17.0=52.00) for the same order. The difference in total cost was observed due to the selection of different shipping methods. (See above fig.)   

Additional Costs

Towards the end of this section we see some configurations that will control and manage various additional costs that will apply apart from the fixed flat rate. These settings include:

  • Costs Added…
  • Costs
  • Minimum Handling Fee

Costs Added

Costs Added dropdown menu

The settings in this field will decide how and on what basis the additional costs other than flat rate will apply. Here we see three different options. These costs may be applied:

  • per order: applicable on the entire order
  • per item: applicable on every single item
  • per class: applicable on the entire shipping class for a particular order

Costs

Costs options

The section for Costs is displayed in the form of a table where you can actually enter the cost of additional rates which will be applied per order, item or class. In this table you can see different columns. You can click the Add Cost button to add new fields in this table and click Delete selected costs to remove any field. You can find the following attributes in the table:

  • Shipping Class: This field defines various shipping classes of items that are added to the cart.
  • Cost: Here you will enter the applied cost, which will not include the tax rate.
  • Handling Fee: This is another kind of additional amount that will be added to your final product price. Here you will enter the data either in the form of numbers (e.g. 5.5) or in percentages (e.g. 4%).
  • Any class: If a user is defining the cost for a product’s shipping class then this field will apply.
Costs section showing additional amounts for cost and handling fee

For example, let’s fill the fields with the data shown in the above figure, where I have fixed Shipping Class=Any class; Cost=5; Handling Fee=2.5.

When I save these changes, the cart page will display new prices. So, when a customer selects flat rate shipping, the total price for the product is £49.50.

How £49.50?

AttributesPrice (£)
Price of the product35.00
Flat shipping rate7.00
Additional cost5.00
Handling fee 2.50
Total49.50
Front end view showing the new rates as above

In the same manner you can calculate the total cost if a customer selects the option of Express Shipping Method or any other.

Minimum Handling Fee

Minimum Handling Fee

The last field for setting which you will see in this section is for the Minimum Handling Fee, which is the minimum amount which will always be charged to customers. If you do not want to apply this fee, then you may leave this field empty.

In the end, click the Save Changes button.

This setting completes the configuration of flat rate shipping. In the next article I will explain the rest of the settings for the remaining shipping methods. 

Continue Reading

by admin

Share