29 Jul

An Introduction to Open-source Licenses

The web community is renowned for its willingness to share. Not only do we share experiences, give advice and help each other with projects, but we also share an incredible amount of code—from small snippets to entire frameworks and applications.

Much of the software we use daily is open-source—from operating systems and servers to the apps we use to ply our trades.

Amid all of this sharing, there arises the issue of copyright and licensing. If you're using someone else's free software, or if you're sharing your own work, it's important to consider these issues.

Standard Copyright

When you create a piece of software, it's automatically protected by copyright. This means that you retain all rights to your source code and that nobody else may reproduce, distribute, or create derivative works from your work.

It may also lead to no one using your code—which obviously defeats the purpose of sharing it.

So if you really do want to share your work, but also want to protect it in some way, it's important to consider the options available for licensing your work.

Choosing a License

There are various, recognized licenses you can apply to your work to make it really clear what people can do with your code. But each license has a particular focus, so which should you choose?

In this article, I'll briefly introduce several of the most used licenses. Which one you choose will depend on what you want to achieve and how your code should be distributed.

Disclaimer: the overview that follows only provides a general sense of what each license encompasses. To understand each license fully, you'll need to do more reading.

Continue reading %An Introduction to Open-source Licenses%

29 Jul

Video: Introducing One-Way Data Flow

In this video, we look at React's concept of one-way data flow. We'll observe a very common example of two-way binding, from frameworks like Angular and Ember, and mimic the functionality in React. This video utilizes everything that we have learned from the previous lessons. If something seems unfamiliar, check out the previous videos for clarification.

Loading the player...

Continue reading %Video: Introducing One-Way Data Flow%

29 Jul

Video: Introducing One-Way Data Flow

In this video, we look at React's concept of one-way data flow. We'll observe a very common example of two-way binding, from frameworks like Angular and Ember, and mimic the functionality in React. This video utilizes everything that we have learned from the previous lessons. If something seems unfamiliar, check out the previous videos for clarification.

Loading the player...

Continue reading %Video: Introducing One-Way Data Flow%

29 Jul

Making Your WordPress Plugins Even More Developer Friendly

In the last article, we looked at how Actions and Filters can be added to your WordPress plugins to help make them developer friendly.

Today, we’ll look at how to provide developer documentation.

Documenting Your Actions and Filters

It’s useful to document your WordPress plugin’s Actions and Filters, so that developers can quickly find what they need, as well as understand what each Action and Filter does.

Code Commenting

As developers, we’re quite comfortable with reviewing other people’s code to understand how something works. Adding DocBlock comments to our actions and filters is a great way to explain what a particular call does:

Continue reading %Making Your WordPress Plugins Even More Developer Friendly%

29 Jul

Motion along path in CSS

From the "I barely knew this was a thing and you can already play with it in browsers" files:

Motion paths allow authors to animate any graphical object along an author-specified path.

I suspect Chrome jumped on this because it's something that was only otherwise doable in SMIL, which they are ditching. I believe this is the first time the full path syntax has made it into CSS? (e.g. motion-path: path('M100,250 C 100,50 400,50 400,250');).

There are some demos

Motion along path in CSS is a post from CSS-Tricks

29 Jul

Implementing “Show More/Less” Functionality with Pure CSS

Nowadays developers take advantage of different CSS techniques to create sliders, modals, tooltips, and many more Javascript-based components.

In this article, we’ll work with some of those techniques to implement what we might refer to as the “Show More/Less” functionality, and doing it without writing any JavaScript. We’ll also create a fully functional accordion-style show/hide demo that you can use as a starting point for your projects.

We have a lot to cover (techniques, pitfalls, and challenges), so let’s get started!

Note: This article will not discuss how to make this component accessible, but that could certainly be a valid improvement and maybe a topic for another post.

CSS Requirements

To better understand the process for creating this functionality, you have to be familiar with the following key CSS concepts:

General sibling selector (~) Adjacent sibling selector (+) The checkbox hack

To help out, I’ve created a demo, which you can see below, to give you the knowledge needed to follow along with this article.

See the Pen Lessons to prepare for the checkbox hack by SitePoint (@SitePoint) on CodePen.

Just click on one of the buttons to view a description and demo of the technique.

The Markup

The HTML structure for our demo is shown below:

[code language="css"]

One Two Three Four Five Six

[/code]

As you can see, we define an unordered list with five list items. The last item acts as the container for our checkbox and its corresponding label. In addition, we include a second unordered list within the wrapper element. This list holds the items that we want to show as soon as the checkbox becomes checked.

Defining Basic Styles

After structuring the demo, we define a few reset styles for our elements. Nothing fancy, just some simple CSS rules that will allow us to enhance the appearance of our component. Have a look at the two rule sets below:

[code language="css"] ul { width: 50%; margin-left: auto; margin-right: auto; list-style-type: none; background: white; }

li { height: 50px; line-height: 50px; border-top: 1px solid #e9ecef; } [/code]

Styling the Checkbox Container

In this part of the tutorial, we will set up the styles for the last list item.

First, we change the value of the aforementioned height property. Then, we set its position to relative. This property value is important because it will help us position the label element:

[code language="css"] .container { position: relative; height: auto; } [/code]

Next, we hide the checkbox:

[code language="css"] [type="checkbox"] { position: absolute; left: -9999px; } [/code]

…and style the relevant label:

[code language="css"] label { background: #e4e3df; display: block; width: 100%; height: 50px; cursor: pointer; position: absolute; top: 0; } [/code]

Notice that we position our label absolutely and give it a top offset of 0 pixels. So now you might be wondering if we really need those two properties. At first glance they seem unnecessary. But as we’ll see in a moment, these are required declarations.

If you look back at the HTML structure, you’ll see that the label is an empty element. We made that assumption because we want its content to change depending on the checkbox state. To achieve this, we take advantage of CSS’s pseudo-elements. When the checkbox isn’t checked (default behavior), the More keyword appears. Also, for styling we use a few characters taken from the lovely CopyPasteCharacter web app.

Continue reading %Implementing “Show More/Less” Functionality with Pure CSS%

29 Jul

Using Selenium with PHPUnit

Testing is a really wide subject, whether it be unit testing, functional testing, acceptance testing, etc. In this article, we’re going to see how you can do acceptance testing using Selenium. I will use a practical example to illustrate a real use case. I will assume that you already know how to do unit testing using PHPUnit, or that you at least have a grasp of what it’s all about. Let’s get started.

What Is Acceptance Testing?

Acceptance testing is the process of telling user stories through tests, and I love this quote to describe it:

A formal test conducted to determine whether or not a system satisfies its acceptance criteria and to enable the customer to determine whether or not to accept the system.

What Is Selenium?

Selenium is a tool to automate user interface testing. It helps with testing your application against the browser. The process could be described like so:

Go to the page http://myapp.dev/videos. Assert the page contains a list of 20 videos. Click number two on the pagination. Assert the page contains a list of 20 videos. Quit the browser.

You may be wondering: “How does it manipulate the web page using the described tests?”

The answer is “it depends”. If you’re using Selenium RC (previously named Selenium 1), it will inject auto generated JavaScript code to the page to perform the desired actions. Selenium RC is deprecated and is only supported in maintenance mode; you should be using Selenium WebDriver.

When using Selenium WebDriver (Selenium 2), the tests are translated into commands and passed to the Selenium server (more about that in a moment), then passed to the browser using the web browser native API.

Continue reading %Using Selenium with PHPUnit%