Black Friday: 50% off the best library in web development and design!

Here at SitePoint it’s our mission to keep you informed, so you can stay on the cutting edge of web development and design to produce some pretty awesome things!

That’s why today, we’re giving you two years of SitePoint Premium, for the price of 1! To put it simply that’s $20,000 worth of SitePoint web development and design books and courses for just $99.

If you don’t know already, SitePoint Premium guides you through topics like HTML, CSS, JavaScript, Angular, Node, React, PHP, Responsive Web Design, UX, Project Management and much more so you can get ahead of the game, and learn how to build better, faster, and more responsive websites and apps.

Here’s what you get:

  • Download ALL (100+) SitePoint ebooks and keep them forever
  • Download ALL (115+) SitePoint courses
  • Easy to follow paths, exclusive member discounts, an ad-free SitePoint, new content monthly, shareable certificates
  • Access to every book and course we release in 2018 and 2019.

Did we mention priority access to everything we release in 2018 and 2019?

Here’s a taster of what we have planed for the next few months:

  • Creating a REST API with Node.js
  • Node.js security, authentication and deployment
  • Getting started with React
  • Beginner Sass
  • Version Control with Git
  • HTML5 Games: Novice to Ninja
  • Beginner to advanced HTML and CSS
  • iOS and Android app development

And that’s just the next few months! You’ll have a whole two years of web tech books, courses and tutorials to look foward to.

Grab this deal now because the offer ends midnight Black Friday

SitePoint Black Friday 2017 offer

Continue reading %Black Friday: 50% off the best library in web development and design!%


Source: Sitepoint

24 Productivity Tools to Help You with Almost Everything

This article was sponsored by Mekanism. Thank you for supporting the partners who make SitePoint possible.

With such high competition in the market, how do you make sure you’re project, product or idea cuts through? And in a timely manner? The difference is made by the talent, learning new technologies and last, but not least, by the tools used. There are a heap of productivity tools out there that are helping web designers and developers to design logos, build phone apps without the need for coding skills or even build a database quickly and efficiently.

In this showcase, we will take you through 25 of our favourite tools to help you overcome almost anything. We hope that you will find these helpful. Let us know your thoughts or if you have some other recommendations to add to the list.

1. Tailor Brands – Automated Logo Maker and Brand Builder 

Tailor Brands

Tailor Brands has quickly grown to be one of the best tools on the market to help you design logos and make branding. After offering up a great logo maker, the company now offers a full branding suite that makes marketing and creating unique company visuals a breeze.

The company’s logo maker uses AI and pairs it with an expansive template library to create unique and effective designs in a matter of minutes. You can then fine-tune aspects of your logo until it’s perfect.

Now that you have your logo, you can move on to making your mark with a powerful online brand presence. Tailor Brands is easy-to-use and gives you a fully automated weekly social planner that sets a schedule and auto-generates posts and ads to upload on a regular basis, you can also add more posts in manually if you’d like.

If you want to launch a holiday campaign, you can take advantage of Tailor Brands’ seasonal logos, which lets you give your branding a quick boost. For your business needs, you can create business cards and decks to go along with letterheads, and even presentation templates. You can also download your logo in EPS format to print it on shirts, bag, and other gear.

With a basic monthly subscription of $2.99 or a full package for $10.99, Tailor Brands is a quick and easy way to give your brand a professional touch.

Pricing: Monthly subscription from $2.99.

2. iGenApps – Build Your Phone App Without Any Coding Skills

iGenApps

iGenApps is a powerful and affordable app builder that allows people without programming skills to build and publish a fully customized app. According to the company, it has been downloaded 2 million times and has more than 1.5 million registered users building their apps with it already. And in April 2017, it was named the Best Productivity App.

You start the app creation with the wizard building process that will guide you step by step to build Apps for mobile phones and tablets. Build and publish your Apps in minutes all through your mobile device.

iGenApps has a free trial you can start playing with that will show you how it all works and what it can do.

Pricing: Check their website for detailed pricing.

3. Kohezion – Online Database Software

Kohezion

Kohezion is an advanced online database software that allows you to quickly create your own customized web-based database without coding or any programming. The database can be used for:

  • Clients – Easily manage your clients, leads, organization and more. You can create reminders so you will never lose an opportunity. Keep a record of all communications and attach files to client’s records
  • Manage Contracts – Collaborate and share ideas about contracts. Never miss an expiration date with reminders. Easily track all required information. Attach files, Apply calculations or Email contracts directly from Kohezion
  • Manage tasks
  • Schedules

It is also highly customizable. You can create custom quotes and invoices for your clients, custom reports with your own look and feel, integrate with Dropbox™, Google Drive™ or Box™, create complex calculation fields, or even embeddable online forms.

There are 3 types of plans, standard, non-profit organizations and enterprise solutions, with pricing starting at $50/user/year. They also have a Free Forever plan, which will cover your basic needs.

Pricing: Starts from $50/User/YEAR for full access or they also have a Free Forever plan.

4. Visme

Visme

When it comes to Visual Communication, Visme is a game changer.  Imagine taking key features of Powerpoint and Photoshop and then marrying them together into an easy-to-use tool. It allows people without design experience to tap into hundreds of professional templates and an extensive library of assets to create engaging and memorable presentations, infographics, charts and report, ebooks, websites and social graphics. You can even make your content interactive with the ability to insert videos, audio or embed external content such as forms, polls, and maps.  

You can publish your content online, embed to your website, make it private and password protected or download it as an Image, PDF or even HTML5, so you can present offline.

Pricing:Paid plans start at $10/month which unlock premium features including the ability to customize your own brand, upload your own fonts, and tap into all premium templates and images. But they also have a free plan.

5. Ultra Theme

Ultra Theme

Ultra Theme is a powerful and flexible WordPress theme created by the well reputed Themify. It is easy to use and makes creating sites quickly and beautifully (and responsive, of course), a breeze. It allows you to take full control of your theme design from header to footer.

Pricing: The standard license is $49.

6. Codester.com

Codester

Codester is a fast growing platform for web designers and developers to buy and sell lots of great premium PHP scripts, app templates, themes and plugins to create amazing websites & apps. They even have a “flash sales” where products are available for a limited period but with a 50% discount.

Pricing: It’s a marketplace, so will vary on products.

7. GrapeCity – JavaScript Solutions

GrapeCity

GrapeCity JavaScript solutions provides all you’ll need for a full web app. With this you’ll get dependency-free, fast, flexible, true JavaScript components that enable you to build basic websites, full enterprise apps, and Excel-like spreadsheet web apps. And if you need it, expert support is available by forum, direct ticket or phone.

There are 2 products: SpreadJS and Wijmo and both have offer free trials.

Pricing: SpreadJS is $999/developer and Wijmo is $895/developer.

8. ThemeFuse.com

ThemeFuse

ThemeFuse is one of the most impressive WordPress theme developers in the market. They cover most domains such as automotive, blogging, e-commerce, events and portfolios. Their themes are professional-looking and includes everything you need to get started and the installation and setup only takes a couple of minutes, so you can get started with your next big idea.

Pricing: They offer a free plan, but the premium ones start from $45, paid once.
You can also use this code BLKFRY2017 and get a 70% discount.

9. Blaskan

Blaskan

Blaskan is a responsive and professional WordPress theme that’s built for many kinds of screens. It was built by Colorlib, a new WordPress developer that is quickly becoming one of the best in the market. The theme is free to download and use, so give it a try.

Pricing: Free

10. VectorStock.com

VectorStock

VectorStock is the world’s premier vector-only image marketplace with more than 10,000 vectors added daily. It’s one of the favorite places for web designers because there is a heap to be found here and also because the pricing is budget friendly.

Pricing: Free plan with access to 41,000 free vectors and millions of royalty free images.

11. wpKube

wpKube

wpKube specializes in WordPress themes, hosting, plugins and everything related to this platform. They’ve even made a complete guide about how you can start a WP website from scratch, which tools, themes and hosting to choose from, so you can have an awesome website.

They’re also investing lots of money in developing new themes. All of their templates are fully responsive, easy to install, setup and customize. At this point, there are 5 themes and the pricing is between $49-$59/theme.

Pricing: Varies depending on service you are after

12. Host-Tracker.com

Host Tracker

Host-Tracker is one of the best website monitoring systems on the market. It provides instant notifications about failures, domain and certificate expiration monitoring, content check and many other cool things. They recently launched a cool new feature which automatically pauses your AdWords campaign if any problems with the site are detected and then reactivates onces resolved.

Pricing: $5/month with a 50% discount for new customers

Continue reading %24 Productivity Tools to Help You with Almost Everything%


Source: Sitepoint

Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes

So far in this series, you have learned how to animate the CSS properties of different elements, how to create different SVG-related animations, and how to animate the text content of different elements on a webpage. There is one more way in which you can animate the elements on a webpage using KUTE.js, and that is by changing the values of different attributes. This requires you to include the attributes plugin in your project.

In this tutorial, you will learn how to use the attributes plugin to animate the value of different kinds of attributes in KUTE.js. We will also discuss different easing functions that you can use to control the pace of different animations.

Easing Functions

Objects in real life very rarely move linearly. They are either accelerating or decelerating. Even the acceleration and deceleration occur at different magnitudes. Up to this point, all our animations have progressed linearly. This doesn’t feel natural at all. In this section, you will learn about all the easing functions that KUTE.js provides for controlling the pace of different animations.

The core easing functions in the library are included in the core engine out of the box. Let’s say you want to apply the QuadraticInOut easing to an animation. This can be achieved in two ways:

Each of the easing functions has a unique curve that determines how the elements will accelerate during the animation. A sinusoidal curve implies linear acceleration. Keep in mind that this is different from the linear easing function. The linear function implies a linear speed of animation, while a sinusoidal curve implies a linear speed of acceleration for the animation. In other words, the speed of the animation will increase or decrease linearly. Similarly, quadratic implies acceleration with a power of two, cubic implies a power of three, quartic implies a power of four, and quintic implies a power of five. There are also circular and exponential easing functions.

You can append In, Out, or InOut to any of the easing functions. The value In implies that the animation will start very slowly and keep accelerating until the end. The value Out implies that the animation will start at the maximum speed and then decelerate slowly until it comes to a halt at the end. The value InOut means that the animation will speed up at the beginning and slow down at the end.

You can also use bounce and elastic easing functions in your animations and append In, Out, or InOut to any of them. In the following demo, I have applied all these easing functions on different circles so that you can see how they affect the pace of the animation.

It is possible that none of the core easing functions provide the animation pace that you are looking for. In such cases, you can include the Cubic Bezier functions in your project from the experiments branch and start using those easing functions. 

Similarly, KUTE.js also provides some physics-based easing functions imported from the Dynamics.js library. You can read more about all these easing functions and how to properly use them on the easing function page of the library.

Animating Attributes

Attributes in SVG can accept numbers as well as strings as their value. The strings can be color values or numbers suffixed with a unit like px, em, or %. The names of the attributes themselves can also consist of two words joined by a hyphen. Keeping these differences in mind, KUTE.js provides us different methods that can be used to specify the values of different attributes.

As you can see, suffixed values need to be enclosed within quotes. Similarly, attributes which contain a hyphen in their name need to be enclosed inside quotes or specified in camelCase form.

Unitless Attributes

A lot of attributes accept unitless values. For example, the stroke-width of a path could be unitless. Similarly, you don’t have to specify a unit for the r, cx, and cy attributes of a circle element. You can animate all these attributes from one value to another using the attributes plugin. 

Now that you know how to use different easing functions, you will be able to animate different attributes at different paces. Here is an example:

The first tween animates the radius of both circles at once using the allTo() method we discussed in the first tutorial. If set to true, the yoyo attribute plays the animation in the reverse direction. 

The cx attribute of both the circles is animated individually. However, they are both triggered by the same button click. Finally, the cy attribute of both the circles is animated at once with an offset of 1000 milliseconds.

Color Attributes

Starting from version 1.5.7, the attribute plugin in KUTE.js also allows you to animate the fill, stroke, and stopColor attributes. You can use valid color names or hex values for the colors. You can also provide the color values in RGB or HSL format. 

One important thing that you have to keep in mind is that the animations will only seem to work if you are not setting the value of these properties in CSS. In the following demo, the fill color wouldn’t have animated at all if I had added the following CSS in our demo.

The demo I created is very basic, but you can make it more interesting by applying transforms and using more colors.

Suffixed Attributes

A lot of SVG attributes like r and stroke-width can work with and without suffixes. For example, you can set the value of r to be a number like 10 or in terms of em units like 10em. There are some attributes like offset attribute for color stops that always require you to add a suffix. While specifying a value for suffixed attributes in KUTE.js, always make sure that you enclose the value within quotes.

In the following example, I have animated the offset value of the first stop in a gradient and the color of the second stop. Since offset requires a suffix, I have enclosed the value inside quotes.

There are three different gradients in the demo, and each of these gradients has two color stops with the class names stop1 and stop2. I have also applied a scale transform using the svgTransform attribute, which we discussed in the third tutorial of the series.

Final Thoughts

In this tutorial, you learned about different easing functions available in KUTE.js and how you can use them to control the pace of your own animations. You also learned how to animate different kinds of attributes.

I have tried to cover all the important aspects of KUTE.js in this series. This should be enough to help you use KUTE.js confidently in your own projects. You can also read the documentation in order to learn more about the library. 

I would also recommend that you go through the source code and see how the library actually works. If you have any questions or tips related to this tutorial, feel free to share them in the comments.


Source: Nettuts Web Development

How to Ship & Validate New Projects Fast

This article was sponsored by MOJO Marketplace. Thank you for supporting the partners who make SitePoint possible.

Launching a new project can be costly, both in terms of time and money. After all, if it’s worth doing, it’s worth doing well. But is that always the best approach? There can be real value in shipping a new project fast.

The risk of a new endeavour isn’t getting the technical stuff right. It’s your customers—or lack of them. They’re looking for effective solutions to their problems; does your product provide one? Will they pay for it? How much? Do they have any feedback?

You need to validate your idea before you start building it—that way you can make sure you’re providing something your customers truly need. So launch quickly. Rather than investing a lot of time and money up front, get something out the door, gauge interest early, and validate your idea.

How Non-Technical Founders Can Ship Projects

Your customers don’t need to see a finished product. They need to know you’re passionate, and they need to have confidence you’ll finish what you start. So start with a prototype—a minimum viable product (MVP)—that will give them a taste of what you have in mind.

Creating an MVP doesn’t necessarily require technical skill or knowledge. In fact, even if you’re a coder it’s best to keep things lean and mean at the beginning. Instead, rapidly launch your product using existing web technologies. You can jerry-rig a lot of functionality by linking web services together with Zapier or IFTTT. We’re talking minutes, hours or days, not weeks and months.

Ramli John tells the stories of some non-technical founders who successfully launched startups without writing a line of code. The first is Ryan Hoover, the co-founder of Product Hunt, a site that curates interesting new products. By using an existing link-sharing tool (the now defunct Linky Dink), he was able to launch a prototype in just 20 minutes from a coffee shop, then organized 30 quality contributors to share links. Within two weeks the fledgeling project had over 170 subscribers.

Then there’s Rolling Tree, an online community for skateboard enthusiasts. The three founders were unable to find a suitable developer in three months, so they turned to Facebook instead. They set up a group in less than a day, and attracted 500 keen members in less than five. The community met together weekly on Google Hangouts, where they started to design skateboards together.

A lot of new entrepreneurs think that to launch a startup, you need to build a product, and to do that you need someone that can write code. At that early stage, however, the biggest risk for most startups is not the technology, but the market. Will someone out there actually pay for it? (Ramli John)

Developing an MVP is a great approach to launching products, and it’s not just for non-technical entrepreneurs. Even developers can use these techniques to test ideas for market response before building out apps.

The founders I mentioned created their prototypes using popular web services. WordPress is another approach—it’s versatile, easy and inexpensive. The right WordPress theme will get you started in minutes, then you can add functionality with plugins and embedded web apps. And because WordPress is so popular there’s plenty of help available for customization.

One place to get that support is MOJO Marketplace. They sell WordPress themes and plugins, offer help and personalized coaching with WP Live support, and provide a wide range of professional services for those jobs you don’t have the time or inclination to do yourself.

Let’s have a look at how MOJO can help you launch your project.

Get Started with a Landing Page & Email List

Get started right away by putting together a landing page. That way you can let the world know about your upcoming project from Day 0, all the while collecting email addresses for your mailing list.

Failing to build your list from the start is one of the most common missed opportunities. It will enable you to gauge interest now, and communicate your passion down the track.

“Your passion and belief to build your idea is central to everything that you are doing. Learn from the data and move on.” (Nitesh Agrawal)

For most online businesses, a good email list is one of the most important assets for converting customers.

Get started quickly with a landing page theme with an embedded contact widget. Here are some great choices from MOJO Marketplace.

Advanced Coming Soon – Landing Page PHP Script

MOJO Marketplace - Advanced Coming Soon

This PHP script lets you add a beautiful “Under Construction” page to your website in just five minutes. Its Twitter, subscribe and contact forms will help you grow your follower base.

Smooth – Animated Coming Soon Template

MOJO Marketplace - Smooth

Smooth lets you build anticipation and trust even before you launch your website. The plugin’s Mailchimp integration and contact form will help you build your contact base.

Level Up – Responsive Coming Soon Template

MOJO Marketplace - Level Up

Level Up is a responsive coming soon template with a countdown timer. A simple form allows you to collect subscribers and gauge interest.

Continue reading %How to Ship & Validate New Projects Fast%


Source: Sitepoint

Building Accessible Menu Systems

Editor’s Note: This article originally appeared on Inclusive Components. If you’d like to know more about similar inclusive component articles, follow @inclusicomps on Twitter or subscribe to the RSS feed. By supporting inclusive-components.design on Patreon, you can help to make it the most comprehensive database of robust interface components available.
Classification is hard. Take crabs, for example. Hermit crabs, porcelain crabs, and horseshoe crabs are not — taxonomically speaking — true crabs.
Source: Smashing Magazine

Performant Animations Using KUTE.js: Part 4, Animating Text

In the second tutorial of this series, you learned how to animate different CSS properties of the elements on a webpage using KUTE.js. You learned how to animate all the transform properties as well as properties like border-radius and border-color. You can also use the CSS plugin to animate CSS properties like font-size, line-height, letter-spacing, and word-spacing.

KUTE.js also has a Text plugin which allows you to animate the text inside different elements, either by increasing or decreasing a number like in a countdown or by writing a string character by character.

In this tutorial, you will learn how to animate the text inside different elements on a webpage using the CSS and Text plugins in KUTE.js.

Animating CSS Text Properties

As I mentioned earlier, you can use the KUTE.js CSS plugin to animate four different text-related CSS properties. These properties are font-size, line-height, letter-spacing, and word-spacing. We will also use some properties from the core engine discussed in the first tutorial to animate individual letters. Let’s see how we can use all these concepts together to create the vibrating HELLO text in the following demo.

Here is the code that was used to create the above animation:

Each letter of the word is wrapped inside a span tag and has its own unique class. The first tween animates the color of all the letters from white to red with an offset of 200ms. This is also the first animation that is played after clicking on Start Animation. The animateFontSize tween has been chained to animateColor. This way, the font-size animation begins as soon as the color animation ends. 

You might have noticed that I have used two attributes called repeat and yoyo to control the behavior of the animation. The yoyo attribute is used to reverse the animation that is currently being played repeatedly. This can avoid sudden jumps in the values of different properties during the animation and make it appear smooth.

The font-size animation has been chained with animateSkewing, which skews all the letters by -15 degrees. The skewX and skewY properties are available within the core engine itself.

All the tweens for animating the color of different letters have been chained to animateSkewing at once. This way, you can make sure that all the chained color animations start playing as soon as the skew animation ends. Finally, the lettersSqueezed tween reduces the spacing between different letters by 15 px.

You can create more interesting effects by using different combinations of properties.

Animating Numbers

You can also animate numbers in KUTE.js. However, you will have to include an additional text plugin to create the animation. 

The process of animating numbers is actually very simple. You just need to specify the selector where the animating numbers should be shown as well as the final number at which the animation should end. 

Here is a basic example that shows the total number of airports in the USA in 2016 using animation.

You can also apply the usual tween options like duration, repeat, and delay to customize the behavior of the animation. The code we just wrote will result in the following animation:

Writing Text Character by Character

This is a very popular effect that you can find on quite a few websites. The KUTE.js text plugin allows you to specify the new sentence that should replace the original sentence one character at a time. 

Before replacing the initial characters with their final value, random characters are animated like the numbers example you just saw. The embedded CodePen demo should make it clearer:

Here is the code that you need to write in order to create the above animation:

The character animation for the whole sentence is finished within 5 seconds. As you might have noticed, the initial and final sentences don’t need to have the same number of characters. This gives us a lot of liberty when setting the value of the text parameter.

You can also include HTML tags inside the value of the text parameter and then use CSS to change the appearance of the text that you just animated.

There will be a delay in the appearance of Earth after of has already appeared. This happens because the plugin also writes <span class="earth"> using the same character animation, but none of those characters are actually visible to the user. The delay may or may not be desirable based on your preferences.

The intermediate characters that are shown during the animation are lowercase alphabetical values by default. This can be an issue when the characters that you want to animate are all uppercase letters or numbers. Which intermediate characters are used for the animation is determined by the value of the textChars parameter. It accepts six different values:

  • alpha: In this case, the intermediate characters will be lowercase letters.
  • upper: In this case, the intermediate characters will be uppercase letters.
  • numeric: In this case, numerical characters are used for the animation. This is different from animating a number as the values won’t increase sequentially.
  • symbols: In this case, the plugin will use characters like #, %, and $ for the animations.
  • all: You can use this value if you want the intermediate characters to be a mix of alphabetic, numeric, and symbols.
  • If nothing else works for you, KUTE.js gives you the option of specifying your own custom list of characters that should be used during the animation.

The following example shows how you can animate text inside a heading using uppercase intermediate characters.

Final Thoughts

In this tutorial, you learned how to use the CSS and Text plugins in KUTE.js to animate the text inside an element. When you want to animate the appearance of the text, you need to use the CSS plugin. This will allow you to use properties like font-size, letter-spacing, etc. When you want to change the actual characters inside any element, you need to use the text plugin.

If you’re looking for additional JavaScript resources to study or to use in your work, check out what we have available on Envato Market.

I hope you learned something new in this tutorial. If you have any questions, please let me know in the comments.


Source: Nettuts Web Development

Case Study: Optimizing CommonMark Markdown Parser with Blackfire.io

As you may know, I am the author and maintainer of the PHP League‘s CommonMark Markdown parser. This project has three primary goals:

  1. fully support the entire CommonMark spec
  2. match the behavior of the JS reference implementation
  3. be well-written and super-extensible so that others can add their own functionality.

This last goal is perhaps the most challenging, especially from a performance perspective. Other popular Markdown parsers are built using single classes with massive regex functions. As you can see from this benchmark, it makes them lightning fast:

Library Avg. Parse Time File/Class Count
Parsedown 1.6.0 2 ms 1
PHP Markdown 1.5.0 4 ms 4
PHP Markdown Extra 1.5.0 7 ms 6
CommonMark 0.12.0 46 ms 117

Unfortunately, because of the tightly-coupled design and overall architecture, it’s difficult (if not impossible) to extend these parsers with custom logic.

For the League’s CommonMark parser, we chose to prioritize extensibility over performance. This led to a decoupled object-oriented design which users can easily customize. This has enabled others to build their own integrations, extensions, and other custom projects.

The library’s performance is still decent — the end user probably can’t differentiate between 42ms and 2ms (you should be caching your rendered Markdown anyway). Nevertheless, we still wanted to optimize our parser as much as possible without compromising our primary goals. This blog post explains how we used Blackfire to do just that.

Profiling with Blackfire

Blackfire is a fantastic tool from the folks at SensioLabs. You simply attach it to any web or CLI request and get this awesome, easy-to-digest performance trace of your application’s request. In this post, we’ll be examining how Blackfire was used to identify and optimize two performance issues found in version 0.6.1 of the league/commonmark library.

Let’s start by profiling the time it takes league/commonmark to parse the contents of the CommonMark spec document:

Initial benchmark of league/commonark 0.6.1

Later on we’ll compare this benchmark to our changes in order to measure the performance improvements.

Quick side-note: Blackfire adds overhead while profiling things, so the execution times will always be much higher than usual. Focus on the relative percentage changes instead of the absolute “wall clock” times.

Optimization 1

Looking at our initial benchmark, you can easily see that inline parsing with InlineParserEngine::parse() accounts for a whopping 43.75% of the execution time. Clicking this method reveals more information about why this happens:

Detailed view of InlineParseEngine::parse()

Here we see that InlineParserEngine::parse() is calling Cursor::getCharacter() 79,194 times — once for every single character in the Markdown text. Here’s a partial (slightly-modified) excerpt of this method from 0.6.1:

public function parse(ContextInterface $context, Cursor $cursor)
{
    // Iterate through every single character in the current line
    while (($character = $cursor->getCharacter()) !== null) {
        // Check to see whether this character is a special Markdown character
        // If so, let it try to parse this part of the string
        foreach ($matchingParsers as $parser) {
            if ($res = $parser->parse($context, $inlineParserContext)) {
                continue 2;
            }
        }

        // If no parser could handle this character, then it must be a plain text character
        // Add this character to the current line of text
        $lastInline->append($character);
    }
}

Blackfire tells us that parse() is spending over 17% of its time checking every. single. character. one. at. a. time. But most of these 79,194 characters are plain text which don’t need special handling! Let’s optimize this.

Instead of adding a single character at the end of our loop, let’s use a regex to capture as many non-special characters as we can:

public function parse(ContextInterface $context, Cursor $cursor)
{
    // Iterate through every single character in the current line
    while (($character = $cursor->getCharacter()) !== null) {
        // Check to see whether this character is a special Markdown character
        // If so, let it try to parse this part of the string
        foreach ($matchingParsers as $parser) {
            if ($res = $parser->parse($context, $inlineParserContext)) {
                continue 2;
            }
        }

        // If no parser could handle this character, then it must be a plain text character
        // NEW: Attempt to match multiple non-special characters at once.
        //      We use a dynamically-created regex which matches text from
        //      the current position until it hits a special character.
        $text = $cursor->match($this->environment->getInlineParserCharacterRegex());

        // Add the matching text to the current line of text
        $lastInline->append($character);
    }
}

Once this change was made, I re-profiled the library using Blackfire:

Post-optimization profile

Okay, things are looking a little better. But let’s actually compare the two benchmarks using Blackfire’s comparison tool to get a clearer picture of what changed:

Before-and-after comparison

This single change resulted in 48,118 fewer calls to that Cursor::getCharacter() method and an 11% overall performance boost! This is certainly helpful, but we can optimize inline parsing even further.

Continue reading %Case Study: Optimizing CommonMark Markdown Parser with Blackfire.io%


Source: Sitepoint

Performant Animations Using KUTE.js: Part 3, Animating SVG

The previous tutorial of the series showed you how to animate different CSS properties of any element using KUTE.js. However, the core engine does not allow you to animate properties that are specific to SVG elements. Similarly, you can’t animate the SVG morphing of different path shapes or the drawing of different SVG elements using strokes. You will have to use the KUTE.js SVG plugin to achieve any of these tasks.

Before we begin, keep in mind that you will have to include both the KUTE.js core engine and the SVG plugin for the examples in this tutorial to work.

Morphing SVG Shapes

Morphing one SVG shape into another is a very common feature that you will come across. The KUTE.js SVG plugin gives us everything that we need to create our own morphing animations with ease. 

There are three ways to morph SVG shapes using this library:

  1. You can use the fromTo() method to specify both the initial and the final SVG path for your element. 
  2. You can also use the to() method and avoid specifying the initial path. In this case, the start value for the morphing will be determined based on the value of the d attribute of the selected element that you want to morph. 
  3. One more option that you have is to pass the final path as a string directly to the tween. This way, you can avoid having two different paths in your SVG.

During initialization, the library samples some points based on the paths that we provided. These points are then stored in two different arrays. Finally, these arrays are used for the interpolation. There are a number of options that you can configure to control the morphing behavior for different paths.

  • morphPrecision: As you might have guessed, this option allows you to specify the precision or accuracy of the morphing. It is specified as a number, and a lower value means higher precision. Keep in mind that higher precision will result in more accuracy, but it will also be detrimental to the performance. This option does not apply when you are dealing with polygonal shapes or paths where the d attribute consists only of hl, and v. In such cases, the original polygon paths are used instead of sampling new ones.
  • reverseFirstPath: You can set the value of this option to true in order to reverse the drawing path for your first shape. Its default value is false.
  • reverseSecondPath: You can set the value of this option to true in order to reverse the drawing path for your second shape. Its default value is also false.
  • morphIndex: Sometimes, the points on a path might have to cover a lot of distance during morphing. You can control this behavior using the morphIndex parameter. When specified, this parameter allows you to rotate the final path in such a way that all the points travel the least distance possible.

Let’s use what we have learned so far to morph a battery icon into a bookmark icon. You should note that I have used lowercase l in order to specify the path in relative terms. This is the required markup:

The following JavaScript creates the tween object and starts the animation on button click:

Here is a demo that shows the above code in action. I have also added an extra element where the morph animation sets reverseFirstPath to true. This will help you understand the overall impact of different configuration options on the morphing. The animation duration has been set to 5 seconds so that you can closely observe both the animations and spot the differences.

In the previous example, the main path did not have any subpaths. This made the morphing very straightforward. However, this might not always be the case. 

Let’s add an extra subpath to our bookmark as well as the battery icon. If you morph the icons now, you will see that only the first subpath animates. The second subpath just disappears at the beginning of the animation and reappears at the end. The only way to animate all the subpaths in such cases is by changing the subpaths into individual paths. Here is an example:

Animating SVG Strokes

Another popular SVG-related animation effect includes starting from nothing and then drawing a predefined shape using SVG strokes. This can be used to animate the drawing of logos or other objects. In this section, you will learn how to use KUTE.js to create a stroking animation for the Font Awesome bicycle icon

There are three ways to animate SVG strokes in KUTE.js. You can animate from 0% to 100% by setting the fromTo values as 0% 0% and 0% 100%. You can also draw a part of the SVG shape by setting the values to something like 0% 5% and 95% 100%. Finally, you can set the ending value to 0% 0% in order to create an erasing effect instead of a drawing effect.

Here is the JavaScript code that I have used to animate our bicycle:

As you can see in the example below, you don’t need to worry about multiple subpaths inside a path. KUTE.js animates all of these subpaths individually without any issues. The animation duration is used to determine the time for the animation of the longest path. The stroke duration for the rest of the subpaths is then determined based on their length.

Animating SVG Transforms

We have already learned how to animate CSS transform values in the second tutorial of the series. The KUTE.js SVG plugin also allows you to use the svgTransform attribute in order to rotate, translate, scale, or skew different SVG elements on a webpage.

The rotate attribute accepts a single value that determines the angle of rotation. By default, the rotation happens around the center point of the element, but you can specify a new center of rotation using the transformOrigin attribute.

The translate attribute accepts the values in the format translate: [x, y] or translate: x. When provided with a single value, the value of y is assumed to be zero.

When skewing elements, you will have to use skewX and skewY. There is no support for skew[x, y] in SVG. Similarly, the scale attribute also accepts only one value. The same value is used to scale the elements in both x and y directions.

Here is a code snippet that applies all these transformations on a rectangle and a circle.

I have set the yoyo parameter to true so that after playing the animation in reverse, the transform properties are set to their initial value. This way, we can replay the animations again and again by clicking on the buttons.

If you press the Rotate button in the demo, you will notice that it does not seem to have any effect on the circle. To observe the rotation of circle, you will have to apply a skew transform on it in order to change its shape and then click on rotate immediately.

Final Thoughts

We began this tutorial by covering the basics of SVG morphing and stroke animations. You learned how to properly morph complex paths that have subpaths and how we can create an erasing stroke effect instead of a drawing one by choosing the right values for the draw attribute. After that, we discussed how we can use the svgTransform attribute in order to animate different transforms.

In various tutorials, we’ve seen just how powerful JavaScript has become. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available on Envato Market.

The tutorial was meant to introduce you to all the features of the KUTE.js SVG plugin and help you get started quickly. You can learn more about the SVG plugin by reading the documentation.


Source: Nettuts Web Development

From Cats With Love: Welcome The New Smashing Membership

We can’t believe it’s actually happening. After 18 months of hard work on the big bang relaunch of this little website, today is the day when everything changes. New design and new technical stack. New personality and new ambitious goals. But most importantly, a new focus on our wonderful web community, with the brand new Smashing Membership.
Rewarding Great People Doing Great Work In times when we fight all the craziness and narrow-mindedness around us, we need to remind ourselves how wonderful a vast majority of the web community actually is.
Source: Smashing Magazine

How to Optimize Docker-based CI Runners with Shared Package Caches

At Unleashed Technologies we use Gitlab CI with Docker runners for our continuous integration testing. We’ve put significant effort into speeding up the build execution speeds. One of the optimizations we made was to share a cache volume across all the CI jobs, allowing them to share files like package download caches.

Continue reading %How to Optimize Docker-based CI Runners with Shared Package Caches%


Source: Sitepoint