#image 0 image 1 image 2 image 3 Request a custom order and have something made just for you. Natural Turquoise Pendant 925 Silver Penda | Explore Tumblr Posts and Blogs

colourpopme · 5 years

Text

Colourpop Frequently Asked Questions

New Post has been published on Colourpop Swatch Gallery

Colourpop Frequently Asked Questions

As some of you may know, I am a moderator for the Colourpop Makeup Queens group on Facebook. Recently, after seeing an influx of posts asking the same questions over and over again, I decided to write up a FAQ for Colourpop to help people find answers. If you have any suggestions to Questions/Answers that should be added to this FAQ, please comment below with your suggestions or thoughts about the FAQ!

Shipping

Normal processing times for ColourPop orders is 3-5 business days. BUSINESS DAYS means Monday through Friday. Weekends and Holidays are NOT INCLUDED.

If there is a BIG ANTICIPATED RELEASE or a SALE is currently happening or just happened processing times can be more like 7-10 BUSINESS DAYS. There have been times, like between Black Friday and Christmas where processing times have even been up to 15 Days.

Order Issues

If you have received a broken product, someone else’s order, haven’t received your order or have any other issues with your order. CONTACT CUSTOMER SERVICE. The best thing to do is reply to your order confirmation email with the issues you are having. If you have broken product, missing product, wrong product. You should include photos of said broken/wrong product and also include a photo of the packing slip with your order information! If you can’t reply to your order confirmation email, then use this form to send them all of this stuff.

https://support.colourpop.com/hc/en-us/requests/new

**Also if your order ends up being delivered but you never received it. I would recommend contacting Colourpop as you would a damaged order and possibly contacting your local Post Master as well.

https://about.usps.com/who-we-are/postmasterfinder/

List of Colourpop Products and Shades

Does someone have a list of every palette? Every shadow? Etc.

Yes, there is a SPREADSHEET that lists every shade name of every product (it’s up to date to the best of my knowledge) that is maintained by ME. It is updated every few weeks.

It can be found here: https://docs.google.com/spreadsheets/d/1Sjiyl7MViHgzSBSlWt-oA4WgJ6Jw_FaDq3pXOfamjSE/edit?usp=sharing

When Will the Next Sale Be?

Colourpop tends to have sales around major holidays. Christmastime, Memorial Day, Fourth of July and Labor Day, etc.

Their birthday month of MAY tends to see a lot of special releases and sales.

They also sometimes have sales to celebrate hitting a certain number of followers on Instagram. So pay attention to how many followers they have. They’re at 9 Million right now, so I would not be surprised if they release something special and have a sale to celebrate 10 Million when they get there.

Coupon Codes

Some active 10% codes: (there is nothing higher that we know of right now.)

THOMAS

BEAUTYCULT

SHAE

KRISTI

TRENDMOOD

KATRINA

HONEY5 ($5 off)

KathleenLights

Student Discounts for Colourpop can be obtained through UniDays!

https://www.myunidays.com/

**Also, Colourpop is also a part of Rakuten (formally known as eBates) and MyPoints!

(These are referral links for both! You and I will both get $$$$$ or points for signing up through my referral link.)

Get 3% back on your purchase from Colourpop or 4% for your Colourpop purchases from Ulta via Rakuten. Join Here: https://www.rakuten.com/r/CHEMIC27?eeid=28187

Get 2 points per dollar spent at Colourpop if you purchase through MyPoints. Points accumulated can be turned in for gift cards!

Join Here: https://www.mypoints.com?rb=57966486

Dry Super Shock Shadows

Add few drops of a beauty oil to your super shock shadow. close it up tight and let it sit for a day or two. Silicone based primers are also known to re-hydrate super shock shadows.

https://youtu.be/qfpWQakmSJc

Dry Jelly Much Shadows

Add a few drops of DISTILLED water to your jelly much and stir it up. https://www.instagram.com/stories/highlights/17855063491653114/

Dry Gel Liner Pots

Use Inglot Duraline to revive your gel liner pots. You can purchase that from Beautylish. We have also heard that setting spray and beauty oil works but we’ve never tried those ourselves.

https://www.beautylish.com/s/inglot-cosmetics-duraline

Can you think of any other questions / answers that belong in our Colourpop FAQ? Let us know!

#asked #colourpop #cosmetics #coupon codes #discount codes #dry gel liner pots #dry jelly much shadows #dry super shock shadows #f.a.q.#faq #frequently #frequently asked questions #orders #processing time #questions #shipping

1 note · View note

the-noodle-king · 5 years

Photo

Woowee! This Brand new Izzati drawing was my first time drawing on a far larger canvas and damn! It’s awesome (both the drawing and drawing on a big ass canvas), my lines are so clean even after resizing, the final images are super high rez and the thicker lines make colouring and detailing way easier, would recommend!

Stats and Bio under the cut!~

Real Name: Her Royal Highness, Princess Izzati Bolkiah

Alias: Princess

Role: Damage / Job: Barrier Buster with Damage Boost Support

Hit Points: 275 / Health: 150 / Shields: 125

Primary Weapon: Dual Hardlight Chain-Swords

Ammo: 135 / Reload Speed: 1.35 Seconds / Attack Speed: 2.5 Swings per Second / Ammo Consumption Rate: 22.5 per Second of Swinging

Damage: 50 per slash / DPS: 125 / Range and AoE: 4.25M Arc Directly In Front / Attack Type: Melee

Primary Attack, Sword Strike: Swing swords one after another to cut down foes.

Special: All Sword attacks, including Abilities, Ultimate and Quick Melee deal Double damage to Shields and Quadruple damage to Barriers (Both Placed and Personal).

Ability 1, Cross Slash: Attack with both swords at once for devastating damage against Shields and Barriers, as well as firing an X-shaped blast forwards. / Ammo Consumption: 60 / Cast Time: 0.45s / Damage: 55 + 85 for Projectile + Special Bonus / Range: 6M directly ahead + 24M for Projectile / Projectile Travel Speed: 50Mps / Cooldown: 4s

Ability 2, Damage Pylons: Throw out up to 3 small pylons which enhance the damage dealt by Izzati and other allies within their AoE. Pylons can stick to walls and moving platforms, and by holding the button all available charges can be thrown at once in a tight triangular grouping. / Damage Boost: +15% per pylon (Stacks additively) / AoE: 9.5M around each pylon / Projectile Travel Speed: 25Mps / Duration: 6s per Pylon / Cooldown: 10s per Pylon

Ability 3, Disengage: Leap backwards while sweeping both swords out horizontally in order to quickly leave melee range while damaging pursuing foes. / Leap Distance: 12.5M directly backwards / Travel Speed: 15Mps / Damage: 75 + Special Bonus / Slash Range: 6.5M Arc In Front of Izzati on Use / Cooldown: 8s

Ultimate, Mighty Blow: Deliver a single, precise strike which carriers you through enemies and deals massive damage to the first thing it hits, as well as reduced damage to subsequent targets. / Damage: 1000 to first target + 125 to subsequent targets + Special Bonus / Distance Travelled: Carries Izzati forward 25M, damaging and passing through all enemies in her path / Cast Time: 1.5s charge before casting, 0.25s travel time / Required Charge: 2135

Passive, Continuous Guard: Well trained with her dual swords and never letting her guard down in battle, Izzati blocks and redirects attacks almost on instinct, reducing all incoming damage, and even negating some minor damage entirely. Izzati’s natural Damage Resistance does not stack with other Damage Resistance Buffs, and is instead replaced by any buffs greater than it. / Any damage equal to or lower than 2 before Damage Reduction is reduced to 0. / Melee Damage Reduction: -50% (To a Minimum of 15) / General Damage Reduction: -10%

Ultimate Voiceline (Self & Enemies): Musuh-musuh Saya Jatuh Ke Hadapan Saya!

Ultimate Voiceline (Allies): My Enemies Fall Before Me!

Hero Select Voiceline: Dengan Pedang Saya (By My Sword)

Home / Base of Operations: Bandar Seri Begawan, Brunei

Nationality: Bruneian

Sexuality: Lesbian / Gender: Cis Woman / Pronouns: She/Her

Age: 32 / Date of Birth: 16th of April

Height: 5ft 11in

Affiliation / Allegiance: Herself, The People of Brunei

Backstory: Izzati was born a princess of Brunei, and for as long as she can remember all she has wanted is to be Queen. However, she was born a distant 34th in line for the throne, and while a few family members lost to the Omnic Crisis and an abdication have brought her up to 28th in line, she is still too far from the throne to ever hope of seeing it.

She trained much of her life with swords, sharing her twin brother’s passion for the art form, and having quickly surpassed his skill at it, moving on from weekend sparing to professional training, to personal tutelage under a master swordsman. She won many contests, and many more duels in less restricted settings, having invited challengers to face her in open combat, offering rewards to any who could best her with no holds barred. None managed, earning her something of a reputation. A reputation which drew the eyes of both Overwatch and Talon alike, one asking her to join a covert sub sect of the then illustrious organisation and the other implying that for her help they might see her ascended to the throne far more quickly. Pride saw her deny both however, refusing to work in the shadows or acquire the throne through subterfuge.

When she heard news of the Ex-Overwatch agents rebanding in open defiance of the Petras Act, she thought them fools. But in time she thought on her own hopeless dream of being Queen, and on the legacy Overwatch had left, and came to the decision to follow their lead. She would fight, for her country and people, for herself and her legacy, if she would not be remembered as a Queen, then she would be immortalised as a Warrior. And so she took up a pair of custom hardlight swords, kindly supplied by the Vishkar Corporation following a Royal Request, and set out to earn renown in victories against those who would bring chaos to the world.

#Overwatch OC #Princess Izzati #Updated Bio #Overwatch Skins #Overwatch Abilities #Art #Paint Tool SAI

4 notes · View notes

a-sweeter-solarsystem · 5 years

Photo

gaAHH guess who’s opening up commissions for the first time in years. Below you’ll find what’s available and after the read more is where you can find where to order some art from me. If you have any questions please don’t be afraid to ask, my inbox is always open :’) Current Slots [0/3]: [1] - [2] - [3]

Available types ————

Not sure if I will be able to draw it? Contact me! I love to discuss ideas beforehand! You can also read a more in-depth version about what I can draw here: (xXx)

Available Styles:

✫ Style Types: Pixel / Semi Chibi / Normal ✫ Coloring Types: Flat / Detailed ✫ Background Types: Sticker / Flat Color / Pattern / Semi Detailed / Detailed

Available Art & Pricing:

✫ [3$] Sketch ✫ [$5+] Sprite▷ 5$ for non animated/ 7$ for animated ✫ [$5] Head ✫ [$7] Bust ✫ [$10] Full Body ✫ [$7+] Icon▷ $7 for non animated / $10 for animated

Strengths and Limitations:

✫ will draw: fandom, original characters, some nsfw Please talk to me beforehand about nsfw ideas before requesting them! ✫ will not draw: sexual art, heavy gore, customs (i.e. designing a character for you) ✫ strengths: mecha, human, anthro (wolf/feline), animals ✫ weaknesses: wings, equines, dragons

How to contact me ————

In order from most to least checked:

▷ Discord : Lukas_stop#8661 ▷ Instagram : Lukas_stop ▷ Tumblr : a-sweeter-solarsystem ▷ Business Email : [email protected]

I rarely check my business email unless otherwise asked to! Please contact me through discord, insta, or tumblr first!

How to order ————

1. Contact me by one of the methods above that you are interested in a commission. Describe what you’re interested in and other additional details. 2. I will provide you with a price for your art based upon your request (Payment is done through Venmo). I will then create a concept sketch of your character and ask for your feedback. If all is good I will work on finishing the piece. I will not provide you with my venmo information until we’ve agreed on a price!

What I need from you:

▷ A reference to the character you would like for me to draw. If they have no set colors please provide me with some palettes/color schemes for the character. ▷ A pose you want your character to be in. ▷ Specify if you want your piece to be animated or not. ▷ Feedback based on the work in progress images I send you (see below).

What I will provide to you:

▷ If requesting colored pieces you will receive two work in progress images: one concept sketch and one lined piece. For just lined pieces you will receive one wip: a concept sketch of your character. These are so I can provide you with the best possible art! These work in progress images cannot be posed without my permission. ▷ Before beginning to work on the commission I will talk with you beforehand on the pricing.

At an absolute worst the order will be completed no later than 2 weeks after it has been placed (though I usually am able to get art done much faster!). I will let you know along the way if something comes up or I am unable to work on your order.

#art #art commission #art commissions #commission info #art commission info #commissions #commission

1 note · View note

psychicanchortimemachine · 3 years

Text

SKETCH PLUGIN WITH JAVASCRIPT

In this blog we’ll see how to create the basic files that make up a Sketch plugin; we’ll write some JavaScript and create a user interface for our plugin with the help of some HTML and CSS. The plugin we’ll be creating is called “Mosaic”.We’ll study the basic documents that make up a Sketch plugin; we’ll write some JavaScript and create a user interface for our plugin with the assist of some HTML and CSS.

Sketch Plugin And How Do They Work?

In Sketch, plugins are a way to feature functions and capability that aren’t found in Sketch. Considering that there’s nearly always going to be a few missing characteristic or integration in any given program, one can begin to consider how plugins might be especially useful and powerful. Sketch plugins are able to do things like manipulating the color, shape, length, order, style, grouping, and outcomes of layers, but additionally able to do such things as make requests to internet sources, gift a consumer interface, and an awful lot, lots extra! Most Sketch plugins are written in JavaScript, and some times in, Objective-C and Swift.

Mosaic

Feed it your layers, tweak a few settings, and Mosaic will create a pattern. Mosaic is inspired by Adobe Fireworks plugin called Twist-and-Fade which turned into quite powerful, able to replica a layer any range of instances whilst adjusting its hue, role, rotation, size, and opacity. The plugin was even able to generate animated GIFs.Duplicate any Sketch layer (bitmap or vector) and tweak the duplicates’ layer’s role, rotation, and opacity. This will supply us an advent to manipulating layers the usage of Sketch’s JavaScript APIs. Display a user interface created using HTML, CSS, and JS, a good way to teach you about the way to without problems create an interface for the plugin. The plugin interface is quite important since it’s how we’ll gather the user’s inputs concerning how the person wants the resulting mosaic image to look.

Creating the Base Plugin

1. First, we’ll be growing the “base” for the plugin we want to construct. We ought to create all the essential documents and folders that make up a plugin manually, but thankfully we don’t ought to — because Sketch can do it for us. After we’ve generated the template plugin, we’ll be capable of customize it as we see fit. With Sketch open, test the menu bar at the top of the screen and click Plugins -> Run Script. This will open up a dialog container that we are able to use to test and run the code.

const UI = require("sketch/ui"); UI.message("message");

2. Next, hit Save Script as Plugin inside the bottom-left of the window, input whatever name you’d like for this plugin then Save Script as Plugin .

3. Press “Save” within the bottom-left of the window and enter some thing call you want for this plugin to have.

Congratulations, you’ve just written your first Sketch plugin!

First, it imports the sketch/ui module of Sketch’s built-in JS library, and assigns it to the UI variable. This module contains many useful interface-related methods, we’ll use:

const UI = require("sketch/ui");

Next, it calls the message method with the string of text we want displayed in the tooltip we saw:

UI.message("message");

The message() method sends message to the user.There’s also different ways to give common UI elements like alerts, prompts, and such, a number of which we’ll be the use of as we construct Mosaic.

CUSTOMIZING OUR PLUGIN’S METADATA

We now have a simple plugin to begin from, but we nonetheless need to tweak it to change the plugin’s metadata. For this step, we’ll want to peek into what’s referred to as the plugin bundle.

When you hit save the ‘Run Script’ window, Sketch saved your plugin as a folder named Mosaic.Sketchplugin that you could discover inside the ~/Library/Application Support/com.Bohemiancoding.Sketch3/Plugins listing. You could also pull it up through Plugins -> Manage Plugins -> (proper-click on your plugin) -> Reveal Plugins Folder. Sketch registered the .Sketchplugin extension as a “bundle” (a special sort of folder that looks as a record) and requested for it to routinely open in Sketch while opened. Right-click on Mosaic.Sketchplugin, then click “Show Package Contents”. Inside, you should see the following listing :

Contents/ └ Resources/ └ Sketch/ └ manifest.Json └ script.Cocoascript

Go ahead and rename the last report to index.Js,

Contents/ └ Resources/ └ Sketch/ └ manifest.Json └ index.Js

Let’s start by tweaking the file named manifest.json.The plugin appear serves mainly two purposes:

First, it presents metadata that describes the plugin to the user — such things as its call, version, the writer’s name, and so on. Sketch makes use of this records within the Sketch -> Preferences -> Plugins dialog to create a listing and description in your plugin. Second, it additionally tells Sketch approximately the way to get right down to your business; that is, it tells Sketch how you’d like your plugin’s menu to appearance, what hotkeys to assign in your plugin, and where your plugin’s code.

{ "description": "Generate awesome designs and repeating patterns from your layers!", "x": "=> Your name here <=" } Change your identifier to com.your-name.mosaic: { "identifier": "com.your-name.mosaic" } The menu and commands keys are responsible for telling Sketch what code to call and in response to what { "menu": { "title" : "Mosaic", "items" : [ "com.bohemiancoding.sketch.runscriptidentifier" ], "isRoot": true } }

This tells Sketch to place the first level of menu items directly under the Plugins menu, rather than nesting them under the menu’s title.

{ "menu": { "title" : "Mosaic", "items" : [ "open", { "title" : "I'm a sub-menu!", "items" : [ "another-command-identifier" ] } ] } }

Open Sketch/index.js in your code editor, delete what’s already there, and paste in the following:

function onRun(context){ const window = NSWindow.alloc().initWithContentRect_styleMask_backing_defer_( NSMakeRect(0, 0, 145, 500), NSWindowStyleMaskClosable | NSWindowStyleMaskTitled | NSWindowStyleMaskResizable, NSBackingStoreBuffered, false ); window.releasedWhenClosed = false; window.makeKeyAndOrderFront(nil); }; const window = NSWindow.alloc().initWithContentRect_styleMask_backing_defer( NSMakeRect(0, 0, 145, 500), NSWindowStyleMaskClosable | NSWindowStyleMaskTitled | NSWindowStyleMaskResizable, NSBackingStoreBuffered, false );

Code Explanation: First, we name alloc() on NSWindow; this basically means “set apart a few reminiscence for an instance of NSWindow”. It’s sufficient to realize that you’ll have to try this for every instance of a local class you want to create. The alloc technique is available in every native magnificence.

Next, we name NSWindow’s initializer method (that is, the method that truely creates an instance of NSWindow), which is known as initWithContentRect:styleMask:backing:defer:. You’ll word that’s one-of-a-kind from what we call in our code above — it’s were given a gaggle of colons (:) between every argument. Since we can’t use that syntax in JavaScript, Sketch without difficulty renames it to something we can sincerely use by way of replacing the colons with underscores, which is how we get its JS name:

initWithContentRect_styleMask_backing_defer.

Next, we skip in each of the arguments the technique needs. For the first argument, contentRect, we supply a rectangle with a size massive sufficient for our consumer interface.

For styleMask, we use a bitmask which says that we want our window to have a near button, a title bar, and to be resizable.

The next arguments, backing and defer, are continually going to be set to NSBackingStoreBuffered and false, so we don’t really need to worry about them. THE INTERFACE

download the HTML and CSS code

here

Once you’ve downloaded it, extract it, then move the folder named “web-ui” into our plugin’s Resources folder.

We’ll add the code needed to create our WKWebView beneath the code we wrote for our window:

function onRun(context){ // Create window const window = NSWindow.alloc().initWithContentRect_styleMask_backing_defer( NSMakeRect(0, 0, 145, 500), NSWindowStyleMaskClosable | NSWindowStyleMaskTitled | NSWindowStyleMaskResizable, NSBackingStoreBuffered, false ); window.releasedWhenClosed = false; // Create web view, and set it as the view for our window to display const webView = WKWebView.alloc().init(); window.contentView = webView; // Load our UI into the web view const webUIFolderURL = context.scriptURL .URLByDeletingLastPathComponent() .URLByAppendingPathComponent("../Resources/web-ui/"); const indexURL = webUIFolderURL.URLByAppendingPathComponent("index.html"); webView.loadFileURL_allowingReadAccessToURL(indexURL, webUIFolderURL); // Make window key and move to front window.makeKeyAndOrderFront(nil); };

If we run our plugin now, we’ll see that now we’ve got a window open that displays our web user interface. Success! Again, before moving on, let’s examine what the code we added does: const webView = WKWebView.alloc().init(); This should look familiar — it’s basically the same as what we did when we made our NSWindow: allocate memory for a web view, then initialize it. window.contentView = webView; This line of code tells our window to display the web view we just made.

const webUIFolderURL = context.scriptURL .URLByDeletingLastPathComponent() .URLByAppendingPathComponent("../Resources/web-ui/"); Make it as follows file://path-to-your-plugin/Contents/Resources/web-ui/ Consider the following alterations: window.standardWindowButton(NSWindowZoomButton).hidden = true; window.standardWindowButton(NSWindowMiniaturizeButton).hidden = true; window.floatingPanel = true; window.becomesKeyOnlyIfNeeded = true; window.frameAutosaveName = "mosaic-panel-frame";

For the full code and its working visit:

ORGANIZING THE CODE

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs. As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to

get in touch with us!

#b2b marketing agency #b2b content marketing

0 notes

secretcupcakesublime · 3 years

Text

SKETCH PLUGIN WITH JAVASCRIPT

Sketch Plugin And How Do They Work?

Mosaic

Creating the Base Plugin

const UI = require("sketch/ui"); UI.message("message");

2. Next, hit Save Script as Plugin inside the bottom-left of the window, input whatever name you’d like for this plugin then Save Script as Plugin .

3. Press “Save” within the bottom-left of the window and enter some thing call you want for this plugin to have.

Congratulations, you’ve just written your first Sketch plugin!

First, it imports the sketch/ui module of Sketch’s built-in JS library, and assigns it to the UI variable. This module contains many useful interface-related methods, we’ll use:

const UI = require("sketch/ui");

Next, it calls the message method with the string of text we want displayed in the tooltip we saw:

UI.message("message");

The message() method sends message to the user.There’s also different ways to give common UI elements like alerts, prompts, and such, a number of which we’ll be the use of as we construct Mosaic.

CUSTOMIZING OUR PLUGIN’S METADATA

We now have a simple plugin to begin from, but we nonetheless need to tweak it to change the plugin’s metadata. For this step, we’ll want to peek into what’s referred to as the plugin bundle.

Contents/ └ Resources/ └ Sketch/ └ manifest.Json └ script.Cocoascript

Go ahead and rename the last report to index.Js,

Contents/ └ Resources/ └ Sketch/ └ manifest.Json └ index.Js

Let’s start by tweaking the file named manifest.json.The plugin appear serves mainly two purposes:

This tells Sketch to place the first level of menu items directly under the Plugins menu, rather than nesting them under the menu’s title.

{ "menu": { "title" : "Mosaic", "items" : [ "open", { "title" : "I'm a sub-menu!", "items" : [ "another-command-identifier" ] } ] } }

Open Sketch/index.js in your code editor, delete what’s already there, and paste in the following:

initWithContentRect_styleMask_backing_defer.

Next, we skip in each of the arguments the technique needs. For the first argument, contentRect, we supply a rectangle with a size massive sufficient for our consumer interface.

For styleMask, we use a bitmask which says that we want our window to have a near button, a title bar, and to be resizable.

The next arguments, backing and defer, are continually going to be set to NSBackingStoreBuffered and false, so we don’t really need to worry about them. THE INTERFACE

download the HTML and CSS code

here

Once you’ve downloaded it, extract it, then move the folder named “web-ui” into our plugin’s Resources folder.

We’ll add the code needed to create our WKWebView beneath the code we wrote for our window:

For the full code and its working visit:

ORGANIZING THE CODE

get in touch with us!

#b2b website #ecommerce

0 notes

jhungajewelry · 6 years

Link

#image 0 image 1 image 2 image 3 Request a custom order and have something made just for you. This seller usually responds within 24 hou

0 notes

praeclarum · 7 years

Text

"Hotdog or Not" Using Azure Custom Vision, CoreML, and Xamarin

TL;DR I used Microsoft’s Custom Vision service to train a CoreML model and wrote an iOS app in Xamarin to execute it in less than two hours. It has a loose tie-in with a popular television show. Code on GitHub. You can hear James and I discuss this on Merge Conflict.

Machine Learning Is Easy Now?

Microsoft released a webapp called Custom Vision as a part of their Azure Cognitive Services. While Microsoft has been a player in machine learning for awhile now, this new service is special for one reason: it can export CoreML models.

CoreML is a new feature of iOS 11 that enables apps to execute neural networks (and other ML models) locally on the device. While this has always been possible, Apple made execution easy.

All you need is a trained model and all of a sudden your app can do fancy AI tricks - all locally without needing a network connection and without sharing information with third parties.

The only trick is that you need to train a model. While there are certainly pre-trained models online that you can download, chances are they won’t do exactly what you want.

To train a CoreML model, you would follow the Keras tutorials and examples. Keras, while amazingly powerful, is neither easy to learn nor easy to use even after you’ve learned it. Eventually your skills increase and you can use it, but it does take quite some effort. It also takes some money - training deep networks is slow on standard PC hardware. Soon you’ll be buying fast GPUs or paying for virtual machines out in the cloud.

Now with Custom Vision, Microsoft has made training easy. Instead of learning Keras and finding some fast GPUs to run it on, you can just use Microsoft’s web app. They use Azure’s infrastructure to find machines and, most importantly, they don’t require that you learn how to train networks manually. Instead, there is a GUI that holds your hand, lets you experiment, and keeps everything organized for you.

In this version, they made training easy only for a particular kind of model: recognizing the dominant object in an image. This is a classic task for CNN based neural networks to solve because they’re really good at it and it’s a useful capability with numerous real-world applications. It’s a great choice for Microsoft to lead with this type of model.

So that’s the hype. But does it work?

I tried training a new model and writing an app to execute it to find out. Since I wasn’t confident in my success (and perhaps had too many beers while extolling the virtues of ML to friends), I decided to make it an easy problem: hot dog or not. The app would take a picture and decide if the dominant object in the scene is a hotdog. Yes mom and dad, I’m really putting my degree to use.

I wrote my experience below as a tutorial for doing these kinds of trainings yourself. If you follow along, you’ll be able to write an iOS ML app yourself.

Step 1. Gather Training Data

No matter how skilled you are as a data scientist you will always be terrible at one thing - gathering training data.

We need two sets of images to train our model: one set of hotdogs and another of not hotdogs.

Sounds easy right? Well sure it is until you start actually doing it. Quickly you’ll run up against questions and troubling biases:

Is a drawing of a hotdog a hotdog? (Aristotle would be proud.)

Are two hotdogs a hotdog? (What about 3?)

Should I have an equal number of hotdogs with mustard as hotdogs with ketchup? (Should you bias the network towards your a priori view of the world? Are your biases personal or universal?)

Should I have an equal number of images of hotdogs and not hotdogs? (Since nearly all objects in the universe are not hotdogs, just how strong should our bias be?)

Why do people dress up their dogs as hotdogs?

The list goes on and on. You will confront your biases when collecting training data. Those biases will then be passed onto the network you train. You’ve been warned.

Thankfully the nature of this app precludes the need to do much soul searching for biases towards hotdogs. So I made some executive decisions:

No, drawings are not hotdogs

Yes, many hotdogs are a hotdog

Bias towards ketchup because it’s better

Bias towards not hotdogs since people love to try to trick these kinds of apps

Just accept it

Data collection takes a long time too even with Google’s assistance. After an hour of dragging and dropping, I ended up with 75 images of hotdogs and 175 images of not hotdogs. (I could have written a script but we all know how deep that rabbit hole is.)

For anyone who’s trained a CNN before, you know that this is a very small training set. Even more absurdly, Custom Vision only requires 5 images of each type. What’s going on here?

While Microsoft doesn’t explain the details, my guess is that they are fine-tuning a model already trained on images. The idea is that you take a trained model and then re-train only a part of it on new data. The hope is that the majority of the model is general purpose and can be reused. This saves training time and also reduces the required training set size. I’m not sure if this is what they’re doing, but I’m relieved that I don’t have to gather tens of thousands of images.

Of course with all ML, more data is better. But my fingers were getting tired. (Also, Custom Vision is currently capped at 1,000 training images.)

Step 2. Create a Project

You will want a project for each network you train. Projects hold all of your images and your trained models. You will end up training multiple times because it’s good to experiment with different training set sizes and compositions.

Create an account on https://www.customvision.ai. It’s free!

Create a New Project.

I named the project MyHotDogOrNot, gave it a banal description, and then chose the domain General (compact).

Domains are starting points for your trained model. If you are using cognitive services as a web API, then you should choose whichever domain most closely matches your training data.

General (compact) is the only domain that supports CoreML export so we must choose that. Hopefully Microsoft will allow us to use the other domains in the future in order to improve accuracy.

Step 3. Create Tags

When you’re viewing your project, you will see a list of tags. We need to make this list match the types of training images gathered.

Click the + at the top of the Tags list.

Create two tags: hotdog and not-hotdog.

When you’re done, you’ll see a list of your tags. The (0) means there are no images yet associated with the tags.

Step 4. Upload Training Data

You can upload all the images with the same tag using just one command.

Choose Add images from the toolbar and select all of your hotdog images.

Add the tag hotdog.

Click Upload files.

Repeat for the tag not-hotdog.

Step 5. Train the Model

So let’s train this thing already.

Click the big green Train button.

Go to the Performance tab and wait for your “Iteration” to finish.

When training is complete you will see the performance screen with the overall Precision and Recall of the model. In my case, I get slightly better results detecting not-hotdog than hotdog but they’re both great numbers so why fret.

Of course, these numbers don’t mean your network will work in the real world since the performance is measured against images you hand selected (with all your gross human biases). That said, you can use them as rough indicators of the relative performance of one training iteration against another.

Step 6. Export the CoreML Model

Finally, we can retrieve the CoreML file.

Click Export from your iteration’s performance screen.

Choose iOS 11 (CoreML) from the platform selection screen.

Click Export.

Click Download.

You will now have a fancy .mlmodel model file. Rename it to something nice.

If you open it with Xcode you will see its inputs and outputs.

We can see that its input is a 227 x 227 pixel image named data and its output includes a classLabel string that will be the model’s best judgement and also a loss output that will give a closeness measure for each of our tags.

Step 7. Write an App

At this point we have a model file and just need to put a UI on it.

To keep the code to a minimum, I’m going to use the Vision framework to execute the CoreML model. This framework makes resizing images to our required 227x227 dimensions easy and also takes care of numerical and pixel format conversions.

I will also use ARKit to display the camera on the screen. This is most definitely overkill, but it greatly reduces the amount of code we need to write to deal with the camera.

First, create a new Single View app.

Modify ViewController.cs to add an AR view.

// In ViewController readonly ARSCNView cameraView = new ARSCNView (); public override void ViewDidLoad () { base.ViewDidLoad (); cameraView.Frame = View.Bounds; cameraView.AutoresizingMask = UIViewAutoresizing.FlexibleDimensions; View.AddSubview (cameraView); }

Perform the standard management of that view. This is all we need to get a live camera preview.

// In ViewController public override void ViewWillAppear (bool animated) { base.ViewWillAppear (animated); var config = new ARWorldTrackingConfiguration { WorldAlignment = ARWorldAlignment.Gravity, }; cameraView.Session.Run (config, (ARSessionRunOptions)0); } public override void ViewWillDisappear (bool animated) { base.ViewWillDisappear (animated); cameraView.Session.Pause (); }

Add the model to the resources section of your app.

Add code to load the model. Models need to be compiled before they can be loaded. If you have access to Xcode, you can pre-compile your models. Compiling on the device is pretty fast so we won’t bother with that optimization. (I do this loading in the view controller’s ViewDidLoad method but you should architect your app better by doing this work on a background task.)

This also includes code to initialize the Vision request that we will make. Requests can be used for multiple images so we initialize it once. When a request completes, HandleVNRequest will be called.

// In ViewController MLModel model; VNCoreMLRequest classificationRequest; // In ViewController.ViewDidLoad () var modelUrl = NSBundle.MainBundle.GetUrlForResource ( "HotDogOrNot", "mlmodel"); var compiledModelUrl = MLModel.CompileModel (modelUrl, out var error); if (error == null) { model = MLModel.Create (compiledModelUrl, out error); if (error == null) { var nvModel = VNCoreMLModel.FromMLModel (model, out error); if (error == null) { classificationRequest = new VNCoreMLRequest (nvModel, HandleVNRequest); } } }

Add a tap handler that will respond to any taps on the screen (I like simple UIs). When a tap is detected, the Vision framework will be used to perform the model execution.

// In ViewController.ViewDidLoad () cameraView.AddGestureRecognizer (new UITapGestureRecognizer (HandleTapped)); // In ViewController void HandleTapped () { var image = cameraView.Session?.CurrentFrame?.CapturedImage; if (image == null) return; var handler = new VNImageRequestHandler (image, CGImagePropertyOrientation.Up, new VNImageOptions ()); Task.Run (() => { handler.Perform (new[] { classificationRequest }, out var error); }); } void HandleVNRequest (VNRequest request, NSError error) { if (error != null) return; var observations = request.GetResults () .OrderByDescending (x => x.Confidence); ShowObservation (observations.First ()); }

Finally, in ShowObervation we present an alert of the model’s best guess.

// In ViewController void ShowObservation (VNClassificationObservation observation) { var good = observation.Confidence > 0.9; var name = observation.Identifier.Replace ('-', ' '); var title = good ? $"{name}" : $"maybe {name}"; var message = $"I am {Math.Round (observation.Confidence * 100)}% sure."; BeginInvokeOnMainThread (() => { var alert = UIAlertController.Create (title, message, UIAlertControllerStyle.Alert); alert.AddAction (UIAlertAction.Create ("OK", UIAlertActionStyle.Default, _ => { })); PresentViewController (alert, true, null); }); }

And that’s it, we now have an app that can detect hot dogs (or not)!

You can find the complete source code on GitHub.

Conclusion

It’s great to see Microsoft and Apple technologies working together to make adding a powerful feature to apps easier. If you made it this far, you saw how I was able to build the app in less than two hours and I think you can see that it’s pretty easy to make your own ML apps.

If you enjoyed this you will probably enjoy listening to James Montemagno and I discuss it on our podcast Merge Conflict.

11 notes · View notes

wickedbananas · 7 years

Text

Rewriting the Beginner's Guide to SEO

Posted by BritneyMuller

Many of you reading likely cut your teeth on Moz’s Beginner’s Guide to SEO. Since it was launched, it's easily been our top-performing piece of content:

Most months see 100k+ views (the reverse plateau in 2013 is when we changed domains).

While Moz’s Beginner's Guide to SEO still gets well over 100k views a month, the current guide itself is fairly outdated. This big update has been on my personal to-do list since I started at Moz, and we need to get it right because — let’s get real — you all deserve a bad-ass SEO 101 resource!

However, updating the guide is no easy feat. Thankfully, I have the help of my fellow Mozzers. Our content team has been a collective voice of reason, wisdom, and organization throughout this process and has kept this train on its tracks.

Despite the effort we've put into this already, it felt like something was missing: your input! We're writing this guide to be a go-to resource for all of you (and everyone who follows in your footsteps), and want to make sure that we're including everything that today's SEOs need to know. You all have a better sense of that than anyone else.

So, in order to deliver the best possible update, I'm seeking your help.

This is similar to the way Rand did it back in 2007. And upon re-reading your many "more examples" requests, we’ve continued to integrate more examples throughout.

The plan:

Over the next 6–8 weeks, I’ll be updating sections of the Beginner's Guide and posting them, one by one, on the blog.

I'll solicit feedback from you incredible people and implement top suggestions.

The guide will be reformatted/redesigned, and I'll 301 all of the blog entries that will be created over the next few weeks to the final version.

It's going to remain 100% free to everyone — no registration required, no premium membership necessary.

To kick things off, here’s the revised outline for the Beginner’s Guide to SEO:

Click each chapter's description to expand the section for more detail.

Chapter 1: SEO 101

What is it, and why is it important? ↓

What is SEO?

Why invest in SEO?

Do I really need SEO?

Should I hire an SEO professional, consultant, or agency?

Search engine basics:

Google Webmaster Guidelines basic principles

Bing Webmaster Guidelines basic principles

Guidelines for representing your business on Google

Fulfilling user intent

Know your SEO goals

Chapter 2: Crawlers & Indexing

First, you need to show up. ↓

How do search engines work?

Crawling & indexing

Determining relevance

Links

Personalization

How search engines make an index

Googlebot

Indexable content

Crawlable link structure

Links

Alt text

Types of media that Google crawls

Local business listings

Common crawling and indexing problems

Online forms

Blocking crawlers

Search forms

Duplicate content

Non-text content

Tools to ensure proper crawl & indexing

Google Search Console

Moz Pro Site Crawl

Screaming Frog

Deep Crawl

How search engines order results

200+ ranking factors

RankBrain

Inbound links

On-page content: Fulfilling a searcher’s query

PageRank

Domain Authority

Structured markup: Schema

Engagement

Domain, subdomain, & page-level signals

Content relevance

Searcher proximity

Reviews

Business citation spread and consistency

SERP features

Rich snippets

Paid results

Universal results

Featured snippets

People Also Ask boxes

Knowledge Graph

Local Pack

Carousels

Chapter 3: Keyword Research

Next, know what to say and how to say it. ↓

How to judge the value of a keyword

The search demand curve

Fat head

Chunky middle

Long tail

Four types of searches:

Transactional queries

Informational queries

Navigational queries

Commercial investigation

Fulfilling user intent

Keyword research tools:

Google Keyword Planner

Moz Keyword Explorer

Google Trends

AnswerThePublic

SpyFu

SEMRush

Keyword difficulty

Keyword abuse

Content strategy {link to the Beginner’s Guide to Content Marketing}

Chapter 4: On-Page SEO

Next, structure your message to resonate and get it published. ↓

Keyword usage and targeting

Keyword stuffing

Page titles:

Unique to each page

Accurate

Be mindful of length

Naturally include keywords

Include branding

Meta data/Head section:

Meta title

Meta description

Meta keywords tag

No longer a ranking signal

Meta robots

Meta descriptions:

Unique to each page

Accurate

Compelling

Naturally include keywords

Heading tags:

Subtitles

Summary

Accurate

Use in order

Call-to-action (CTA)

Clear CTAs on all primary pages

Help guide visitors through your conversion funnels

Image optimization

Compress file size

File names

Alt attribute

Image titles

Captioning

Avoid text in an image

Video optimization

Transcription

Thumbnail

Length

"~3mo to YouTube" method

Anchor text

Descriptive

Succinct

Helps readers

URL best practices

Shorter is better

Unique and accurate

Naturally include keywords

Go static

Use hyphens

Avoid unsafe characters

Structured data

Microdata

RFDa

JSON-LD

Schema

Social markup

Twitter Cards markup

Facebook Open Graph tags

Pinterest Rich Pins

Structured data types

Breadcrumbs

Reviews

Events

Business information

People

Mobile apps

Recipes

Media content

Contact data

Email markup

Mobile usability

Beyond responsive design

Accelerated Mobile Pages (AMP)

Progressive Web Apps (PWAs)

Google mobile-friendly test

Bing mobile-friendly test

Local SEO

Business citations

Entity authority

Local relevance

Complete NAP on primary pages

Low-value pages

Chapter 5: Technical SEO

Next, translate your site into Google's language. ↓

Internal linking

Link positioning

Anchor links

Common search engine protocols

Sitemaps

Mobile

News

Image

Video

XML

RSS

TXT

Robots

Robots.txt

Disallow

Sitemap

Crawl Delay

X-robots

Meta robots

Index/noindex

Follow/nofollow

Noimageindex

None

Noarchive

Nocache

No archive

No snippet

Noodp/noydir

Log file analysis

Site speed

HTTP/2

Crawl errors

Duplicate content

Canonicalization

Pagination

What is the DOM?

Critical rendering path

Help robots find the most important code first

Hreflang/Targeting multiple languages

Chrome DevTools

Technical site audit checklist

Chapter 6: Establishing Authority

Finally, turn up the volume. ↓

Link signals

Global popularity

Local/topic-specific popularity

Freshness

Social sharing

Anchor text

Trustworthiness

Trust Rank

Number of links on a page

Domain Authority

Page Authority

MozRank

Competitive backlinks

Backlink analysis

The power of social sharing

Tapping into influencers

Expanding your reach

Types of link building

Natural link building

Manual link building

Self-created

Six popular link building strategies

Create content that inspires sharing and natural links

Ego-bait influencers

Broken link building

Refurbish valuable content on external platforms

Get your customers/partners to link to you

Local community involvement

Manipulative link building

Reciprocal link exchanges

Link schemes

Paid links

Low-quality directory links

Tiered link building

Negative SEO

Disavow

Reviews

Establishing trust

Asking for reviews

Managing reviews

Avoiding spam practices

Chapter 7: Measuring and Tracking SEO

Pivot based on what's working. ↓

KPIs

Conversions

Event goals

Signups

Engagement

GMB Insights:

Click-to-call

Click-for-directions

Beacons

Which pages have the highest exit percentage? Why?

Which referrals are sending you the most qualified traffic?

Pivot!

Search engine tools:

Google Search Console

Bing Webmaster Tools

GMB Insights

Appendix A: Glossary of Terms

Appendix B: List of Additional Resources

Appendix C: Contributors & Credits

What did you struggle with most when you were first learning about SEO? What would you have benefited from understanding from the get-go?

Are we missing anything? Any section you wish wouldn't be included in the updated Beginner's Guide?

Thanks in advance for contributing.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from The Moz Blog http://ift.tt/2AIAGpW via IFTTT

#The Moz Blog #Moz #seo

2 notes · View notes

addwebsolution · 5 years

Text

A Guide To Enhance Your WordPress Site Performance - 2

One often spends an ample amount on building a site with appealing designs, images, videos and whatnot, to attract and retain their customer base. But yet, when a site fails to load faster, every other effort made goes in vain. And hence, the loading speed of your website deserves as much importance as other factors of website-building & maintenance. The ingenious team of AddWeb WordPress developers has jotted down a list of guidelines, specifically meant for WordPress Site Optimisation. And here we’re, as promised, with the second blog from this 2-blog series which shares this list of things that can help you optimise the performance of your WordPress Site.

1) Remove Unnecessary Plugins

Remove all the inactive,problematic and duplicate plugins from your site.

Avoid the premium plugins, because they are required to visit the 3rd party server for decrypting the code. And this process results in a drastic decline in the load time of the website.

Choose & install plugins carefully. Keeping the number of plugins less than 20 is the ideal thing to do for an optimised WordPress site.

2) Enable gzip Compression

Technically, gzip compression is something that drastically reduces the amount of data that is sent from the website server.

In simpler words, it basically compresses the size of the website page and eventually increases the loading speed of the respective web-page.

In fact, Varvy claims that compression is capable of discarding 50-70% of the unnecessary HTML & CSS files of the web-page.

The implementation of compression depends on the web-server & its setting. Below, we’ve shared a couple of resources used for the commonly-used web-servers.

In case, your web-server isn’t on the below-list, contact your hosting company to guide you through the same.

For Apache Server Add below code in .htaceess file.

<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

For nginx Server Create a file at /etc/nginx/conf.d/gzip.conf with the following content:

gzip on; gzip_proxied any; gzip_types text/plain text/xml text/css application/x-javascript; gzip_vary on; gzip_disable "MSIE [1-6]\.(?!.*SV1)";

3) Use a Content Delivery Network (CDN)

CDN is a set of web servers distributed across various geographical locations that provide web content to end-users with regard to their location.

When you host the website on a single server, all user requests are sent to the same hardware. Due to this, the load time increases when users are physically far from the server.

With CDN, user requests are redirected to the nearest server. As a result, the content is delivered to a user quickly and a website works faster. It is expensive but an effective way for optimisation.

4) Minimize the Number of JavaScript & CSS File

JavaScript & CSS files lead to a large number of HTTP requests on the basis of every individual visitor’s access request for any file. This reduces the speed of your WordPress site. Hence, reduce the usage of JavaScript & CSS files.

Try and combine all the JavaScript & CSS files in one group, which will reduce the number of the HTTP request and eventually optimize the speed of the site-page.

There are multiple tools available in the market, which minimizes the HTML, CSS & JavaScript files with ease. Some of these tools are named, WillPeavy, Script Minifier, Grunt tools, et al.

5) Database Optimisation in CMS

Database optimisation is a proved-formula for increasing the performance of the website.

Especially, when you’re using one of those Content Management Systems(CMS) with complex plugins, database optimisation is highly required to reduce the excessive load brought-in by these complex plugins.

Every such CMS requires database optimisation in order to leave behind all the above-mentioned setbacks and gain an optimised CMS platform & website.

It’s a mandatory measure to optimise a CMS and for a WordPress-based platform, one can utilise the WP-Optimise Plugin for database optimisation.

6) Less Utilisation of Web Fonts

Web Designing is one of the most appealing & result-oriented features of every website since that is what your user is going to see and get impressed by. And Web Fonts is one of the major factors in Web Designing.

But unfortunately, the usage of more web fonts adversely affects the page rendering speed.

Web fonts are prone to adding extra HTTP requests to external resources and eventually adding up to the load of the website, which reduces the speed of the website.

Below we share a measure to overcome from excessive traffic coming from web fonts and optimise your website speed:

Use modern formats WOFF2 for modern browsers;

Include only those character sets that are used on the site;

Choose only the needed styles

7) Detect 404 Errors

It occurs several times that your web-page goes under error and comes with an instruction of ‘Page Not Found’ when tried contacting.

One comes across such an instruction when the access for the requested content is not available. To avoid & fix such an issue, one uses additional plugins. But some of such additional plugins load the website while affecting the speed of the webpage.

Hence, we advise you to run the resource through external tools for fixing the error detection issue.

Below is the suggested solution for the same:

For instance, Xenu’s Link Sleuth, Google Webmaster Tools (GWT), and 404 Redirected Plugin For WordPress.

Once the detected error is fixed, see to it if the respective page is attracting traffic or not. Because, if the page brings heavy traffic, consider redirecting the external ones to the external links and fix the link addresses for the internal ones.

8) Reduces Redirects

Redirection creates additional HTTP requests, which ultimately increases the load of the website leading to a fall in the performance speed of the same.

Hence, it is highly recommended to avoid such redirection or keep it as less as possible.

Scan your site/webpage to churn out a list of such redirection links.

‘Screaming Frog’ can be used to grasp this list of redirection links.

Once you receive the list, scrutinize each of them wisely and discard the unnecessary ones.

Concluding Words

Team AddWeb WordPress Developers, with their experience of 160+ WordPress projects, is glad to share their knowledge of optimising the speed of a WordPress site with all of you. Hope, it may prove to be helpful to you and in case of any queries or suggestions, feel free to get in touch with us. Let’s support and grow the WordPress community, together, with the contribution of all kinds.

Also, in case you wish to check the score of how well-optimised is your website; here is our blog on it. We also have a blog that speaks about a list of plugins for WordPress Site Optimisation, which might help you.

Source: AddWeb Solution

#Wordpress Development Service #WordPress Optimization #Website Performance #Customization #WordPress #Blog #Guide #letstalksolution

0 notes

suzanneshannon · 5 years

Text

Five Methods for Five-Star Ratings

In the world of likes and social statistics, reviews are very important method for leaving feedback. Users often like to know the opinions of others before deciding on items to purchase themselves, or even articles to read, movies to see, or restaurants to dine.

Developers often struggle with with reviews — it is common to see inaccessible and over-complicated implementations. Hey, CSS-Tricks has a snippet for one that’s now bordering on a decade.

Let’s walk through new, accessible and maintainable approaches for this classic design pattern. Our goal will be to define the requirements and then take a journey on the thought-process and considerations for how to implement them.

Scoping the work

Did you know that using stars as a rating dates all the way back to 1844 when they were first used to rate restaurants in Murray's Handbooks for Travellers — and later popularized by Michelin Guides in 1931 as a three-star system? There’s a lot of history there, so no wonder it’s something we’re used to seeing!

There are a couple of good reasons why they’ve stood the test of time:

Clear visuals (in the form of five hollow or filled stars in a row)

A straightforward label (that provides an accessible description, like aria-label)

When we implement it on the web, it is important that we focus meeting both of those outcomes.

It is also important to implement features like this in the most versatile way possible. That means we should reach for HTML and CSS as much as possible and try to avoid JavaScript where we can. And that’s because:

JavaScript solutions will always differ per framework. Patterns that are typical in vanilla JavaScript might be anti-patterns in frameworks (e.g. React prohibits direct document manipulation).

Languages like JavaScript evolve fast, which is great for community, but not so great articles like this. We want a solution that’s maintainable and relevant for the long haul, so we should base our decisions on consistent, stable tooling.

Methods for creating the visuals

One of the many wonderful things about CSS is that there are often many ways to write the same thing. Well, the same thing goes for how we can tackle drawing stars. There are five options that I see:

Using an image file

Using a background image

Using SVG to draw the shape

Using CSS to draw the shape

Using Unicode symbols

Which one to choose? It depends. Let's check them all out.

Method 1: Using an image file

Using images means creating elements — at least 5 of them to be exact. Even if we’re calling the same image file for each star in a five-star rating, that’s five total requests. What are the consequences of that?

More DOM nodes make document structure more complex, which could cause a slower page paint. The elements themselves need to render as well, which means either the server response time (if SSR) or the main thread generation (if we’re working in a SPA) has to increase. That doesn’t even account for the rendering logic that has to be implemented.

It does not handle fractional ratings, say 2.3 stars out of 5. That would require a second group of duplicated elements masked with clip-path on top of them. This increases the document’s complexity by a minimum of seven more DOM nodes, and potentially tens of additional CSS property declarations.

Optimized performance ought to consider how images are loaded and implementing something like lazy-loading) for off-screen images becomes increasingly harder when repeated elements like this are added to the mix.

It makes a request, which means that caching TTLs should be configured in order to achieve an instantaneous second image load. However, even if this is configured correctly, the first load will still suffer because TTFB awaits from the server. Prefetch, pre-connect techniques or the service-worker should be considered in order to optimize the first load of the image.

It creates minimum of five non-meaningful elements for a screen reader. As we discussed earlier, the label is more important than the image itself. There is no reason to leave them in the DOM because they add no meaning to the rating — they are just a common visual.

The images might be a part of manageable media, which means content managers will be able to change the star appearance at any time, even if it’s incorrect.

It allows for a versatile appearance of the star, however the active state might only be similar to the initial state. It’s not possible to change the image src attribute without JavaScript and that’s something we’re trying to avoid.

Wondering how the HTML structure might look? Probably something like this:

In order to change the appearance of those stars, we can use multiple CSS properties. For example:

.Rating--Star { filter: grayscale(100%); // maybe we want stars to become grey if inactive opacity: .3; // maybe we want stars to become opaque }

An additional benefit of this method is that the <img> element is set to inline-block by default, so it takes a little bit less styling to position them in a single line.

Accessibility: ★★☆☆☆ Management: ★★★★☆ Performance: ★☆☆☆☆ Maintenance: ★★★★☆ Overall: ★★☆☆☆

Method 2: Using a background image

This was once a fairly common implementation. That said, it still has its pros and cons.

For example:

Sure, it’s only a single server request which alleviates a lot of caching needs. At the same time, we now have to wait for three additional events before displaying the stars: That would be (1) the CSS to download, (2) the CSSOM to parse, and (3) the image itself to download.

It’s super easy to change the state of a star from empty to filled since all we’re really doing is changing the position of a background image. However, having to crack open an image editor and re-upload the file anytime a change is needed in the actual appearance of the stars is not the most ideal thing as far as maintenance goes.

We can use CSS properties like background-repeat property and clip-path to reduce the number of DOM nodes. We could, in a sense, use a single element to make this work. On the other hand, it’s not great that we don’t technically have good accessible markup to identify the images to screen readers and have the stars be recognized as inputs. Well, not easily.

In my opinion, background images are probably best used complex star appearances where neither CSS not SVG suffice to get the exact styling down. Otherwise, using background images still presents a lot of compromises.

Accessibility: ★★★☆☆ Management: ★★★★☆ Performance: ★★☆☆☆ Maintenance: ★★★☆☆ Overall: ★★★☆☆

Method 3: Using SVG to draw the shape

SVG is great! It has a lot of the same custom drawing benefits as raster images but doesn’t require a server call if it’s inlined because, well, it’s simply code!

We could inline five stars into HTML, but we can do better than that, right? Chris has shown us a nice approach that allows us to provide the SVG markup for a single shape as a <symbol> and call it multiple times with with <use>.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="star" viewBox="214.7 0 182.6 792">  </symbol> </svg>  <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg>

What are the benefits? Well, we’re talking zero requests, cleaner HTML, no worries about pixelation, and accessible attributes right out of the box. Plus, we’ve got the flexibility to use the stars anywhere and the scale to use them as many times as we want with no additional penalties on performance. Score!

The ultimate benefit is that this doesn’t require additional overhead, either. For example, we don’t need a build process to make this happen and there’s no reliance on additional image editing software to make further changes down the road (though, let’s be honest, it does help).

Accessibility: ★★★★★ Management: ★★☆☆☆ Performance: ★★★★★ Maintenance: ★★★★☆ Overall: ★★★★☆

Method 4: Using CSS to draw the shape

This method is very similar to background-image method, though improves on it by optimizing drawing the shape with CSS properties rather than making a call for an image. We might think of CSS as styling elements with borders, fonts and other stuff, but it’s capable of producing ome pretty complex artwork as well. Just look at Diana Smith’s now-famous “Francine" portrait.

Francine, a CSS replica of an oil painting done in CSS by Diana Smith (Source)

We’re not going to get that crazy, but you can see where we’re going with this. In fact, there’s already a nice demo of a CSS star shape right here on CSS-Tricks.

See the Pen Five stars! by Geoff Graham (@geoffgraham) on CodePen.

Or, hey, we can get a little more crafty by using the clip-path property to draw a five-point polygon. Even less CSS! But, buyer beware, because your cross-browser support mileage may vary.

See the Pen 5 Clipped Stars! by Geoff Graham (@geoffgraham) on CodePen.

Accessibility: ★★★★★ Manangement: ★★☆☆☆ Performance: ★★★★★ Maintenance: ★★☆☆☆ Overall: ★★★☆☆

Method 5: Using Unicode symbols

This method is very nice, but very limited in terms of appearance. Why? Because the appearance of the star is set in stone as a Unicode character. But, hey, there are variations for a filled star (★) and an empty star (☆) which is exactly what we need!

Unicode characters are something you can either copy and paste directly into the HTML:

See the Pen Unicode Stars! by Geoff Graham (@geoffgraham) on CodePen.

We can use font, color, width, height, and other properties to size and style things up a bit, but not a whole lot of flexibility here. But this is perhaps the most basic HTML approach of the bunch that it almost seems too obvious.

Instead, we can move the content into the CSS as a pseudo-element. That unleashes additional styling capabilities, including using custom properties to fill the stars fractionally:

See the Pen Tiny but accessible 5 star rating by Fred Genkin (@FredGenkin) on CodePen.

Let’s break this last example down a bit more because it winds up taking the best benefits from other methods and splices them into a single solution with very little drawback while meeting all of our requirements.

Let's start with HTML. there’s a single element that makes no calls to the server while maintaining accessibility:

As you may see, the rating value is passed as an inlined custom CSS property (--rating). This means there is no additional rendering logic required, except for displaying the same rating value in the label for better accessibility.

Let’s take a look at that custom property. It’s actually a conversion from a value value to a percentage that’s handled in the CSS using the calc() function:

--percent: calc(var(--rating) / 5 * 100%);

I chose to go this route because CSS properties — like width and linear-gradient — do not accept <number> values. They accept <length> and <percentage> instead and have specific units in them, like % and px, em. Initially, the rating value is a float, which is a <number> type. Using this conversion helps ensure we can use the values in a number of ways.

Filling the stars may sound tough, but turns out to be quite simple. We need a linear-gradient background to create hard color stops where the gold-colored fill should end:

background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent) );

Note that I am using custom variables for colors because I want the styles to be easily adjustable. Because custom properties are inherited from the parent elements styles, you can define them once on the :root element and then override in an element wrapper. Here’s what I put in the root:

:root { --star-size: 60px; --star-color: #fff; --star-background: #fc0; }

The last thing I did was clip the background to the shape of the text so that the background gradient takes the shape of the stars. Think of the Unicode stars as stencils that we use to cut out the shape of stars from the background color. Or like a cookie cutters in the shape of stars that are mashed right into the dough:

-webkit-background-clip: text; -webkit-text-fill-color: transparent;

The browser support for background clipping and text fills is pretty darn good. IE11 is the only holdout.

Accessibility: ★★★★★ Management: ★★☆☆☆ Performance: ★★★★★ Maintenance: ★★★★★ Overall: ★★★★★

Final thoughts

Image Files Background Image SVG CSS Shapes Unicode Symbols Accessibility ★★☆☆☆ ★★★☆☆ ★★★★★ ★★★★★ ★★★★★ Management ★★★★☆ ★★★★☆ ★★☆☆☆ ★★☆☆☆ ★★☆☆☆ Performance ★☆☆☆☆ ★★☆☆☆ ★★★★★ ★★★★★ ★★★★★ Maintenance ★★★★☆ ★★★☆☆ ★★★★☆ ★★☆☆☆ ★★★★★ Overall ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★☆☆ ★★★★★

Of the five methods we covered, two are my favorites: using SVG (Method 3) and using Unicode characters in pseudo-elements (Method 5). There are definitely use cases where a background image makes a lot of sense, but that seems best evaluated case-by-case as opposed to a go-to solution.

You have to always consider all the benefits and downsides of a specific method. This is, in my opinion, is the beauty of front-end development! There are multiple ways to go, and proper experience is required to implement features efficiently.

The post Five Methods for Five-Star Ratings appeared first on CSS-Tricks.

Five Methods for Five-Star Ratings published first on https://deskbysnafu.tumblr.com/

0 notes

happymiraclepeach-blog · 6 years

Link

#image 0 image 1 image 2 image 3 🔎zoom Request a custom order and have something made just for you. This seller usually responds within 24

0 notes

psychicanchortimemachine · 3 years

Text

SKETCH PLUGIN WITH JAVASCRIPT

Sketch Plugin And How Do They Work?

Mosaic

Creating the Base Plugin

const UI = require("sketch/ui"); UI.message("message");

2. Next, hit Save Script as Plugin inside the bottom-left of the window, input whatever name you’d like for this plugin then Save Script as Plugin .

3. Press “Save” within the bottom-left of the window and enter some thing call you want for this plugin to have.

Congratulations, you’ve just written your first Sketch plugin!

First, it imports the sketch/ui module of Sketch’s built-in JS library, and assigns it to the UI variable. This module contains many useful interface-related methods, we’ll use:

const UI = require("sketch/ui");

Next, it calls the message method with the string of text we want displayed in the tooltip we saw:

UI.message("message");

The message() method sends message to the user.There’s also different ways to give common UI elements like alerts, prompts, and such, a number of which we’ll be the use of as we construct Mosaic.

CUSTOMIZING OUR PLUGIN’S METADATA

We now have a simple plugin to begin from, but we nonetheless need to tweak it to change the plugin’s metadata. For this step, we’ll want to peek into what’s referred to as the plugin bundle.

Contents/ └ Resources/ └ Sketch/ └ manifest.Json └ script.Cocoascript

Go ahead and rename the last report to index.Js,

Contents/ └ Resources/ └ Sketch/ └ manifest.Json └ index.Js

Let’s start by tweaking the file named manifest.json.The plugin appear serves mainly two purposes:

This tells Sketch to place the first level of menu items directly under the Plugins menu, rather than nesting them under the menu’s title.

{ "menu": { "title" : "Mosaic", "items" : [ "open", { "title" : "I'm a sub-menu!", "items" : [ "another-command-identifier" ] } ] } }

Open Sketch/index.js in your code editor, delete what’s already there, and paste in the following:

initWithContentRect_styleMask_backing_defer.

Next, we skip in each of the arguments the technique needs. For the first argument, contentRect, we supply a rectangle with a size massive sufficient for our consumer interface.

For styleMask, we use a bitmask which says that we want our window to have a near button, a title bar, and to be resizable.

The next arguments, backing and defer, are continually going to be set to NSBackingStoreBuffered and false, so we don’t really need to worry about them. THE INTERFACE

download the HTML and CSS code

here

Once you’ve downloaded it, extract it, then move the folder named “web-ui” into our plugin’s Resources folder.

We’ll add the code needed to create our WKWebView beneath the code we wrote for our window:

For the full code and its working visit:

ORGANIZING THE CODE

get in touch with us!

#b2b marketing agency #b2b content marketing

0 notes

jhungajewelry · 6 years

Link

#image 0 image 1 image 2 image 3 image 4 image 5 Request a custom order and have something made just for you. This seller usually resp

0 notes

asfeedin · 4 years

Text

Hunter McGrady’s All Worthy Collection At QVC Comes In Sizes 0-36

I started following Hunter McGrady on Instagram at the recommendation of my sister. She said McGrady stood out from the other influencers crowding her feed, and it didn’t take long for me to figure out why. Her sunny disposition, daily Stories updates, and of course, some pretty bomb in-feed modeling shots had me stanning her just as hard. Even then, it was easy to see McGrady as more than a model and influencer—she gave off big-time change-maker vibes. It’s exactly this energy that I have no doubt served as fuel for her latest endeavor: Hunter McGrady’s All Worthy Collection, a QVC exclusive line available in sizes 0 to 36. Yes, that’s XXS through 5X. See what I mean when I say this girl is a change-maker?

McGrady got her start in the modeling world at age 16 as a size 2, 6-foot-tall stunner, and made the switch to plus-size modeling at the request of her agency at age 19. With the new role came a change of perspective, too: “I think that was the most transformative few years of my life, because I learned a lot about myself, my mental health, and all of that comes along with it,” says McGrady, who adds that she felt mixed emotions at first.

“I was like, you know what? If this is what modeling is going to be, then I don’t think I can be a part of this. I don’t think that this is something that I can keep up,” she admits. “So through therapy, and learning who I am, what my body can do and where my body’s supposed to be, I was able to slip into what I believe is the body I was meant to be in all along.” As if she needed proof of this, McGrady booked Sports Illustrated two years later, and her career skyrocketed.

QVC.

Fast-forward a few years, and McGrady knew she wanted to branch out beyond modeling. “I have always been passionate about fashion, and I’ve always really wanted to get my feet wet and kind of dive right in and be in the forefront of it. So during this time in late 2018, I started discussing with my team who I could work with, who gets my vision, who understands what I want to do,” she says. Eventually, she landed on QVC—the company has been praised for their inclusive sizing options, with many of their brands available in sizes up to 3X-5X. Of course, McGrady wouldn’t settle for anything less.

McGrady isn’t a fair-weather activist in the slightest—she’s deadset on making positive change happen within the industry. Just last year, she changed up her Fashion Week routine and vowed to only attend and/or model in shows that were diverse and inclusive. Needless to say, her schedule freed up a little too quickly. “Of course, it became a lot more sparse than in prior Fashion Weeks, but that’s a stand that I feel like I have to take in order for any change to be made,” McGrady insists. “I think that the more that we take that stand—and yes, it may suck for the time being, and it may be uncomfortable, and we may miss out on shows that are dreams of ours—but you know, the greater outcome, it’s a more positive world for everybody.”

“

Fashion doesn’t stop at a size 14.

”

With this in mind, it’s easy to see why McGrady landed on “All Worthy” as the name for her own line. “Very few designers have really got onboard with expanding their sizes above an XL or a size 14,” she says, “and they’re missing out on a big customer. They’re missing out on more than half of the population. Fashion doesn’t stop at a size 14.”

McGrady isn’t slowing down her attempts to get the industry to be more inclusive, but in the meantime, she’s throwing her own hat in the ring with All Worthy. In addition to being size-inclusive, there’s a lot to choose from fashion-wise, as well. “A lot of times, people ask me, ‘What is your style?’ And for me, I think that’s what’s so fun about fashion is that you don’t have to stick to a certain style if you don’t want to,” explains McGrady. “You know, one day I wake up and I’m wearing a maxi dress and, you know, a flower crown, and then the next day I’m wearing leather pants and a leather jacket.”

QVC.

To ensure she made the perfect range, McGrady used her 642K Instagram followers as a soundboard. “I had been asking my following for the last year and a half what they wanted, what they were missing, why they wanted it, why they felt it was missing, what kind of person they are, who are they,” she said. “I just said, ‘Hey, listen, drop it in my DM, or drop it in the box. Let me know your dream piece, or let me know what you think isn’t out there or available for you.’”

PSA to anyone looking to launch a successful brand: McGrady’s Insta-approach was the right move. “It was great because I got answers from all different size women as well. So I was really able to compile what I thought was kind of the common denominator, which was quite a few things.” All of which, of course, have made their way into the All Worthy lineup. “We have everything from power suits for the businesswoman, to flirty and floral dresses, to leather jackets, to jeans, to athleisure,” she raves. “I mean, we literally have everything coming, because me as a plus-sized woman, I’m missing everything in my closet.”

QVC.

McGrady is an open book when it comes to modeling, body positivity, inclusivity, and of course, All Worthy. The only thing she won’t tell me? Her most-loved piece from the line. “They’re like my babies, so it’s hard to choose between one!” she insists, and after browsing the clothes myself, I understand why.

To shop All Worthy before it inevitably sells out, check out the QVC site now, and be on the lookout for even more chic drops in the coming months. Take a peek at my faves for summer below.

1. Snake Print Asymmetrical Hem Skirt

QVC.

I’m into snake print year-round, but I especially love this lighter white and tan colorway for summer.

2. Button Front Sleeveless Blazer Dress

QVC.

Pro Tip: According to McGrady, you can also style this piece open and wear it like a long vest.

3. Chiffon Dress with Ladder Lace Insets

QVC.

A surefire staple for every wardrobe. Plus, it comes in black, too!

Our mission at STYLECASTER is to bring style to the people, and we only feature products we think you’ll love as much as we do. Please note that if you purchase something by clicking on a link within this story, we may receive a small commission of the sale and the retailer may receive certain auditable data for accounting purposes.

Tags: 036, Collection, Hunter, McGradys, QVC, Sizes, Worthy

from WordPress https://ift.tt/3azOFz2 via IFTTT

#IFTTT #WordPress #Asfeed.in #asfeed #asfeedin #asfeed blog

0 notes

413-request-entity-too-large · 5 years

Text

How to Incorporate External APIs in Your WordPress Theme or Plugin

APIs can help you to add functionality to your WordPress plugins and themes. In this tutorial I will show you how to use any API (whether it be from Flickr, Google, Twitter, and so on) with WordPress. You will learn how to connect, collect data, store and render–everything you need to know to extend your plugin or theme with new functionality!

We will use Flickr as an example, creating a simple widget that displays the latest Flickr images in order of username.

Wait, What’s an API?

“API” stands for Application Programming Interface; an intermediary between applications, allowing them to communicate, sending information back and forth in real time. We’ll be using a Web API, one which uses HTTP to fetch data from a remote location on the internet somewhere.

“APIs are used by software applications in much the same way that interfaces for apps and other software are used by humans.” – David Berlind, ProgrammableWeb

If you want to get an even clearer idea of what APIs are before we dive into our tutorial, here are some more resources to help you:

News

The Increasing Importance of APIs in Web Development

Janet Wagner

WordPress

Use the WooCommerce API to Customize Your Online Store

Rachel McCollin

API WordPress Plugins on Envato Market

If you’d like to see what other WordPress developers are building with APIs, check out this collection of plugins on Envato Market–plenty of API goodness to get stuck into!

API WordPress plugins on Envato Market

1. Organize Your Working Environment

Let’s begin by organizing our working environment. Start by downloading the Postman app, which provides an API development environment that makes it easy to connect, test, and develop any API. For individuals and small teams it’s completely free.

We’re going to build a widget in a simple WordPress plugin, so make sure you have WordPress installed.

2. Code the Plugin Basics

To start let’s create a simple plugin called flickr-widget. Create a folder with that name and create a flickr-widget.php file in it. At the top of the file place the following code (feel free to change the Author and URIs with your own details):

/* Plugin Name: Flickr widget Plugin URI: https://www.enovathemes.com Description: Display recent Flickr images Author: Enovathemes Version: 1.0 Author URI: http://enovathemes.com */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly }

Note: this is rudimentary plugin, so I won’t load a language file or create any additional parameters.

Put the freshly created plugin folder inside your WordPress install: wp-content > plugins. You can now activate it from within the WordPress admin dashboard > plugins. You won’t see any changes to your WordPress because we haven’t actually added any functional code.

A Note on Using APIs

Before we go any further, let me quickly mention API use. Any service whose API you want to use will have documentation; I highly recommend you look closely at it. You can use APIs with all kinds of development languages and often get data back in any format you need: PHP, JSON, Java etc. Good documentation will contain detailed information on how to connect to the API, with instructions for each language, and also the main API endpoints (an endpoint is one end of a communication channel).

Web APIs are typically categorized as being either SOAP or REST. SOAP relies solely on XML to provide messaging services, while REST offers a more lightweight method, using URLs in most cases to receive or send information. In our example we will use a REST API.

Programming Fundamentals

What Does REST Mean?

Matthew Machuga

3. Configure and Test API with Postman

So, here is our plan:

Configure and test API with Postman

Connect, collect, and format data from Flickr REST API

Cache the data with WordPress transients

Let’s refer to the Flickr API documentation. Under the Request Formats section you have REST, XML-RPC, SOAP. We need the REST. Click it and you will see an example of a general Flickr REST API Endpoint: https://www.flickr.com/services/rest/.

With the Flickr REST API we can GET, POST, and DELETE any Flickr data we want. Copy the sample endpoint and paste it into Postman (make sure your request type is set to GET).

Click the Send button and... error!

The sample request included the compulsory Flickr API method, but we didn’t specify the API key that is required in order to connect (keys are used to track and control how an API is being used, for example to prevent malicious use or abuse of the API as defined perhaps by terms of service).

4. Get API Key

Having established that we need an API key, let’s go and get one. In order to create one you will first need to have a Flickr/Yahoo account. Once you’ve entered the API dashboard click on the link create your first:

After that click on the Request an API Key. Many API providers have their own specific terms on API usage. Some limit access, others have light and pro versions, or commercial and non-commercial. Sometimes API keys are provided after manual approval; it depends entirely on the API provider. I have chosen Flickr, because it has simple API requirements. For example, Twitter requires a detailed description of the app you want to build before providing an API key, and this is then reviewed by the review team.

That said, click on the Apply for a non-commercial key button and provide some basic info on the app name.

Once you’ve submitted the request you will get the API key (which identifies you) and secret code (which proves you are who you say you are) immediately. Keep these details safe!

5. Set the Request Parameters

Now we will need a method to request data. From the Flickr API documentation we can see that Flickr has tons to choose from. Some methods, like image posting, or deleting, require authentication. Flickr uses OAuth for this; an open, simple, and secure protocol that enables applications to authenticate users and interact with API providers on their behalf. The end user’s information is securely transferred without revealing the identity of the user.

For now, we’ll use simple methods that don’t require oAuth. Click on flickr.photos.getRecent method to see what’s required. This method does not need authentication, but it does take several arguments: api_key (required), extras, per_page, page. Let’s make a simple request in Postman using our parameters:

API general endpoint - https://flickr.com/services/rest

API key - f49df4a290d8f224ecd56536af51FF77 (this is a sample API key which you’ll need to replace with your own)

Method - flickr.photos.getRecent

It will look like this:

https://www.flickr.com/services/rest/?api_key=f49df4a290d8f224ecd56536af51FF77&method=flickr.photos.getRecent

This will return the list of recent public images from Flickr in XML format.

XML format

I always set data format to auto to let Postman decide what format the data is. With Postman you have several data format options: JSON (my favorite), XML, HTML and Text. Flickr returns data in XML format, but this is not a problem for us, as we can add an additional parameter to get data in JSON &format=json:

JSON format

6. Connect, Collect, and Format Data

Now we know how to request data using the REST API, let’s build our WordPress Flickr widget. In the plugin’s main PHP file paste the widget code. I won’t cover the specifics of WordPress widget creation in this tutorial as our focus is different. We have a learning guide Introduction to Creating Your First WordPress Widget by Rachel McCollin which should get you up to speed if you need it.

In the WordPress admin navigate to Appearance > Widgets and add the “Photos from Flickr” widget to a widget area. Now if you go to the front-end you will see the widget title, but no results just yet.

Back in our plugin PHP file, here we render the widget output itself. We have our API key, and the method, and the format we’re looking for. Now we will need to make sure the Flickr user id is provided, and the number of photos the user wants to fetch. These are are gathered from the widget settings.

Note: to get a Flickr user id use this service. I am using envato as the username, and the id is 52617155@N08. Enter the following code inside IF statement:

$url = 'https://www.flickr.com/services/rest/'; $arguments = array( 'api_key' => 'f49df4a290d8f224ecd56536af51FF77', 'method' => 'flickr.people.getPublicPhotos', 'format' => 'json', 'user_id' => $user_id, 'per_page'=> $photos_number, ); $url_parameters = array(); foreach ($arguments as $key => $value){ $url_parameters[] = $key.'='.$value; } $url = $url.implode('&', $url_parameters);

At this point we can knit together the final REST API endpoint url with all the arguments we’ve collected.

Now we’ll make an API request with the file_get_contents() php function:

$response = file_get_contents($url); if ($response) { print_r($response); }

If you now go to the front-end you will something like this outputted:

jsonFlickrApi({"photos":{"page":1,"pages":1033,"perpage":1,"total":"1033","photo":[{"id":"15647274066","owner":"52617155@N08","secret":"2ee48c3fe9","server":"3940","farm":4,"title":"Halloween 2014 at Envato in Melbourne","ispublic":1,"isfriend":0,"isfamily":0}]},"stat":"ok"})

Our request was successful and returned useful data, so now let’s decode and format it. We’ll begin by cleaning up the JSON string–first by removing the wrapper (jsonFlickrApi({...});) with a str_replace. Then we’ll decode the JSON url:

$response = str_replace('jsonFlickrApi(', '', $response); $response = str_replace('})', '}', $response); $response = json_decode($response,true);

Now if we print our results we will see an associative array with data. When we’re ready we can loop through that array and create the data output structure. But first, take a closer look at the small parameter stat. According to the Flickr documentation this indicates the response status. So, before creating the structure of the widget let’s use this status to make sure we have the correct data. Add an IF statement:

if ($response['stat'] == 'ok') { // code here… }

Create an empty array before the IF statement. This array will then be used to contain the collected data:

$response_results = array();

Your foreach loop should now look like this:

if ($response['stat'] == 'ok') { foreach ($response['photos']['photo'] as $photo) { $response_results[$photo['id']]['link'] = esc_url('//flickr.com/photos/'.$photo["owner"].'/'.$photo["id"]); $response_results[$photo['id']]['url'] = esc_url('//farm'.$photo["farm"].'.staticflickr.com/'.$photo["server"].'/'.$photo["id"].'_'.$photo["secret"].'_s.jpg'); $response_results[$photo['id']]['alt'] = esc_attr($photo["title"]); } }

Here we loop through each photo object in the photos array from our response data. Our widget needs the following information to function properly:

Image absolute URL

Image link to Flickr

Image description/alt text

Examine this page and you will understand why I used the given structure. Here you will find the detailed information on how to create the image path and image link.

Create Widget Output

Now our $response_results array contains the exact data we need to create our widget:

if (!empty($response_results)) { $output = ''; $output .= '<ul class="widget-flickr-list">'; foreach ($response_results as $photo) { $output .= '<li>'; $output .= '<a href="'.$photo['link'].'" target="_blank">'; $output .= '<img src="'.$photo['url'].'" alt="'.$photo['alt'].'" />'; $output .= '</a>'; $output .= '</li>'; } $output .= '</ul>'; echo $output; }

We begin by making sure our response is not empty. After that we create an unordered list, storing it in $output, then loop through each image, adding a wrapper link, all the other details, and finally outputting the whole thing with echo;.

If you now go to the site front-end you will see a list of images!

Let’s add some basic styling with CSS to make it look better.

Create an empty flickr-widget.css file in the root plugin folder. In the top of the plugin file paste the following code:

if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } function register_script(){ wp_register_style('widget-flickr', plugins_url('/widget-flickr.css', __FILE__ )); } add_action( 'wp_enqueue_scripts', 'register_script' );

Then, inside the IF statement at the very top add the code:

if (!empty($response_results)) { wp_enqueue_style('widget-flickr');

Inside the css file add basic styling:

.widget-flickr-list { list-style: none; margin:0 -4px 0 -4px; padding: 0; } .widget-flickr-list:after { content: ""; clear: both; } .widget-flickr-list li { display: block; float: left; width: 25%; margin:0; padding: 4px; }

Now it looks much better!

Bonus: Cache the Data with WordPress Transients

At this stage we’ve finished the widget, but there is one more little thing that will take our development to the next level: caching.

Any API request uses your site’s resources and increases load time. Each browser reload will send an API request, which could be multiple users at the same time. What if for some reason your API provider host is down? Your site will suffer load difficulties. The solution is to cache the results and update at a give time interval. So the first time a user visits our page the API request will be sent, but the next time, or with another user, we won’t need to send an API request but instead fetch the results from our site cache.

Let’s modify the widget code to cache results:

if (!empty($flickr_id)) { $api_key = 'f49df4a290d8f224ecd56536af51FF77'; $transient_prefix = esc_attr($flickr_id . $api_key); if (false === ($response_results = get_transient('flickr-widget-' . $transient_prefix))) { $url = 'https://www.flickr.com/services/rest/'; $arguments = array( 'api_key' => $api_key, 'method' => 'flickr.people.getPublicPhotos', 'format' => 'json', 'user_id' => $flickr_id, 'per_page' => $photos_number, ); $url_parameters = array(); foreach ($arguments as $key => $value) { $url_parameters[] = $key . '=' . $value; } $url .= '?' . implode('&', $url_parameters); $response = file_get_contents($url); if ($response) { $response = str_replace('jsonFlickrApi(', '', $response); $response = str_replace('})', '}', $response); $response = json_decode($response, true); $response_results = array(); if ($response['stat'] == 'ok') { foreach ($response['photos']['photo'] as $photo) { $response_results[$photo['id']]['link'] = esc_url('//flickr.com/photos/' . $photo["owner"] . '/' . $photo["id"]); $response_results[$photo['id']]['url'] = esc_url('//farm' . $photo["farm"] . '.staticflickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg'); $response_results[$photo['id']]['alt'] = esc_attr($photo["title"]); } if (!empty($response_results)) { $response_results = base64_encode(serialize($response_results)); set_transient('flickr-widget-' . $transient_prefix, $response_results, apply_filters('null_flickr_cache_time', HOUR_IN_SECONDS * 2)); } } } else { return new WP_Error('flickr_error', esc_html__('Could not get data', 'your-text-domain')); } } if (!empty($response_results)) { $response_results = unserialize(base64_decode($response_results)); wp_enqueue_style('widget-flickr'); $output = ''; $output .= '<ul class="widget-flickr-list">'; foreach ($response_results as $photo) { $output .= '<li>'; $output .= '<a href="' . $photo['link'] . '" target="_blank">'; $output .= '<img src="' . $photo['url'] . '" alt="' . $photo['alt'] . '" />'; $output .= '</a>'; $output .= '</li>'; } $output .= '</ul>'; echo $output; } }

I won’t describe what the transient is and how it works, just what it does. Any time the widget is rendered we first check if the transient is in place; if it is present we fetch results from transient, but if not, we make an API request. And each two hours our transient expires, in order to keep our latest Flickr images actual and up to date.

With the WordPress plugin Transients Manager you can even see what your cached Flickr API request results look like:

And the final touch here is to remove transient for every widget update. For example, if you want to change the number of images displayed, or change the username, you’d need to make a new API request. This can be done with the widget_update_callback WordPress filter, or the widget class public function update:

public function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['photos_number'] = strip_tags($new_instance['photos_number']); $instance['flickr_id'] = strip_tags($new_instance['flickr_id']); $api_key = 'f49df4a290d8f224ecd56536af51FF77'; $transient_name = 'flickr-widget-' . esc_attr($instance['flickr_id'] . $api_key); delete_transient($transient_name); return $instance; }

Conclusion

That was a lot of effort, but now you know how to work with WordPress and APIs! If you enjoyed this post and would like to see additional tutorials on APIs or transients, let me know in the comments section.

To grab the widget sample files head over to the GitHub repository.

0 notes