Thursday, June 22, 2017

How to Apply CSS3 Transforms to Background Images

CSS3 Transforms on Background Images

Updated version of article published on September 27, 2012. Updates include latest data on current browser support, removing unnecessary vendor prefixes from code samples, and addition of live demo on CodePen.

Scaling, skewing and rotating any element is possible with the CSS3 transform property. It's supported in all modern browsers without vendor prefixes. If you need to support Blackberry Browser and UC Browser for Android, you'll need to use the -webkit- prefix, e.g.

[code language="css"]
#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
[/code]

Great stuff. However, this rotates the whole element -- its content, border and background image. What if you only want to rotate the background image? Or what if you want the background to remain fixed while the element is rotated?

Currently, there's no W3C proposal for background-image transformations. It would be incredibly useful so I suspect one will appear eventually, but that doesn't help developers who want to use similar effects today.

Fortunately, there is a solution. In essence, it's a hack which applies the background image to a before or after pseudo element rather than the parent container. The pseudo element can then be transformed independently.

Transforming the Background Only

The container element can have any styles applied but it must be set to position: relative since our pseudo element will be positioned within it. You should also set overflow: hidden unless you're happy for the background to spill out beyond the container.

[code language="css"]
#myelement {
position: relative;
overflow: hidden;
}
[/code]

We can now create an absolutely-positioned pseudo element with a transformed background. The z-index is set to -1 to ensure it appears below the container's content.

[code language="css"]
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
[/code]

Note you may need to adjust the pseudo element's width, height and position. For example, if you're using a repeated image, a rotated area must be larger than its container to fully cover the background:

CSS3 transformation on background

Fixing the Background on a Transformed Element

Continue reading %How to Apply CSS3 Transforms to Background Images%


by Craig Buckler via SitePoint

AmplitudeJS – HTML5 Audio Player For The Modern Era

Amplitude.js is a lightweight JavaScript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies, Amplitude.js is available under the MIT License.


by via jQuery-Plugins.net RSS Feed

Adding a Contextual Help Tab to Custom Post Type Screens

That little “Help” tab that sits in the top-right corner of the WordPress admin dashboard which, when clicked, reveals helpful information about the various admin pages and how they work is referred to as a contextual help tab. It is contextual because the information it displays pertains to the admin page that is currently being […]

Continue reading %Adding a Contextual Help Tab to Custom Post Type Screens%


by Collins Agbonghama via SitePoint

How to Build a Virtual Design Team with 99designs

99designs is an on-demand marketplace where companies seek to find their dream design by running design contests (anything from business cards, to logos, to websites…I could go on). Many companies also use 99designs to curate their own on-call virtual design team. Think: The Avengers, but for teams of super-designers handpicked by you.

Projects” is useful for large or unexpected campaigns with tight deadlines, where agencies have the benefit of being able to access the best talent — quickly, easily, and securely. Let’s take a look at how that works exactly.

Step 1: Discovering Designers

Finding your dream designer (or dream team of designers) is the first step. Begin by navigating to /discover (link in the menu), where you’ll see an endless list of stunning designs. Your designer is here, somewhere. Let's find them.

Discovering new designers

Next, click “Show Filters” (on the right-hand side) so that we can narrow our search a little bit — these filters are instrumental in refining the relevancy of your search result. We're getting closer, our first designer isn't too far away.

How to find a designer

Let’s see how smart these filters are:

  • Categories: choose which type of designs you need (you can choose anything from book covers to Facebook covers!)
  • Industries: many designers specialise in a certain industry (i.e. restaurants, technology, cosmetics and beauty, etc)
  • Search: add specific keywords to your search
  • Advanced: narrow your search even further by finding designers that speak a specific language, or specifically limit your options to Platinum designers, or those have won contests

Platinum designers are those that have been handpicked by 99designs. These are designers that have won numerous design contests and have demonstrated the highest caliber of conceptual thought and technical execution. Platinum designers go far beyond generic designs, and have a thorough understanding of typography, visual hierarchy, composition and colour, and use these skills to meet the client’s specific needs. These guys are like the Captain America's of design teams.

Activating the search filters

When you've discovered a design that you like (you’ll probably find several, actually!), click on it to find out who the designer is. From here you can read about the story behind the design itself (the best designers talk about their work passionately, and with plenty of enthusiasm!) and also view the designer’s profile.

Viewing a designer's profile

You don’t need to be a detective to learn more about the designer — use the tabs on the left-hand side to see more of their work, what experience they have in certain fields, read reviews from previous clients, and finally, browse through the list of pre-made design packages that the designer offers. It’s really, really easy — and pleasantly transparent.

Viewing a designer's portfolio

Step 2: Building Your Virtual Design Team

When you think you’ve matched with the right designer, click the “Invite to work” button (on the right-hand side), where you’ll either be able to choose one of those pre-made packages, or discuss your custom needs. Alternatively, click the favourite icon (next to the designer’s name) to add them to your favourites, where you can then reach out at a later date.

Continue reading %How to Build a Virtual Design Team with 99designs%


by Daniel Schwarz via SitePoint

Creating a Grocery List Manager Using Angular, Part 2: Managing Items

What Does it Mean to be a Junior or a Senior UX Professional?

It was the end of 1994 and fresh out of college, I was hired for my first UX role as a research consultant. I proudly started out in the workforce as a “human factors engineer.” In today’s parlance, I was neither doing human factors nor anything related to engineering, but the evolution of UX terminology is a story for another day.

What’s important to this discussion, is that I wasn’t a junior anything—I was just a no-prefix practitioner. There were other roles in the company I was working for that were specifically earmarked as senior, however.

So why was that? I’ve always figured that for a consulting agency, referring to a senior-level practitioner and a no-prefix practitioner probably sounded better to a client as we bid on projects – and there’s probably still some truth in that.

I’d like to take this discussion one step further, however, by saying that both practitioners and employers should be aware that these “junior” and “senior” categorisations are fuzzy at best. They don’t always tell the full story of your experience when it comes to expertise and years of experience. Knowing which roles are right for you will help you navigate the job market and pave your own career pathway.

It’s simpler to classify job experience into buckets – but it’s not always so simple

People like categorising others into buckets. This is certainly true for job background and experience, where there is some value to this categorization in the employment sphere. Does a job candidate have enough experience or not? Does this person have a UX brand or not? Is this person a UX leader or a leader in any way?

When all these experience-based considerations get rolled up into the title of a job description, they are often simply classified as “junior” or “mid-level” or “senior” or perhaps “director” or “principal” or (occasionally) “intern”.

UX roles are fuzzy to begin with. And while these titles may be a good place to start, it’s also important to remember that along a number of axes, these titles may always remain fuzzy.

Years of experience

Back before my freelancing days when I was responsible for hiring, I recall candidates who had limited experience yet came across so polished that I couldn’t help but imagine them in a senior-level role. On the other hand, some candidates had years of experience but couldn’t fully explain their background or their understanding of UX. Then when I looked them up online, I found little more than self-created and not particularly impressive social media profiles.

I’ve seen job descriptions that demand 10+ years for a senior-level practitioner, and I’ve seen job descriptions that ascribe only a minimum of 3 years of relevant experience to such a role (with “relevant” being a way to add even more fuzz).

Years of experience could be considered a rough—if not the roughest—way to classify a job description. I’d encourage employers to approach this classification with caution, or at least with an allowance for *very* wide ranges of experience.

Practitioner experience

While years of experience may be a bit fuzzy, it’s certainly fair for job descriptions to ask for certain kinds of experiences. A senior-level hire should already have decent experience—if not expertise—in whatever UX areas are most core to the job. On the other hand, a junior-level hire should have enough basic knowledge to get started, but experience can be limited and expertise is not necessary.

Always remember that as long as you have a good UX base knowledge and demonstrate fit in some functional areas of UX, other areas can be learned. So good employers should prioritise a desire to learn over exact match skillsets.

As a word of caution to employers looking for a UX unicorn —those with the ability to do everything, be it design, research, coding, information architecture, strategy, etc.— These hires are fine for a junior role which lets them sample a little bit of this and a little bit of that. But positions classified as “senior-level” will likely require solid experience and an area of expertise.

Wanting this solid experience and expertise everywhere is not fair to the designated hiring manager (good luck to them!) and not fair to you if you’re a senior-level hire who needs to be everywhere with less opportunity to build expert skills – a topic which I delve deeper into in The UX Careers Handbook.

Leadership

While senior-level positions may be equated with leadership, just what does leadership mean anyway? It could mean that you’re a manager of people—responsible for hiring, employee reviews and overall management of other individuals. Or it could mean that you’re a leader of UX projects and managing UX workflow of others within a particular project. Or perhaps you’re a senior-level practitioner on a project with one or two others—and if it’s a consulting project, perhaps you’re the person who interacts most with the client.

But leadership isn’t only at work, and UX leadership value can be found in thought-leadership (writing, speaking, and posting on social media about UX) as well as UX voluntary leadership, such as running a meetup. While these examples may not represent exact matches of leadership experience with most job descriptions, they can feed into a big bucket definition of leadership seniority.

Finally, with respect to leadership, leadership has to start somewhere, so being a senior-level hire may also mean that you are at least ready for workplace leadership of some kind. As a junior-level hire, on the other hand, you certainly have no need or employer expectation of any kind of leadership, at least for the short term.

What should employers do?

It’s okay to use classifying terms like junior, or senior, or mid-level as a general description, but beware that these can be interpreted by potential candidates along a wide range of expectations.

So keep your funnel wide! Remember that UX-ers are often hard to find, so don’t eliminate good candidates by implying hard and fast rules. And when you do talk with or meet these candidates, even if you’ve set specific criteria, be ready to bend the rules when you see alternative backgrounds that you may not have anticipated.

Look beyond the UX work experience – A passion for UX that extends beyond the workplace is a good indicator of someone who will be passionate about the UX work that they do for you. A desire to continually learn and grow even beyond the job is a good sign that as a new hire they’ll have a passion for learning things that you need them to learn.

What should you do when you’re looking for a job?

Look beyond the classification – If you’re truly just starting out, a junior-level job is probably a good place to start. But if you’ve been in the field a few years, focus on the job description more than the junior/senior/something else marker in the job title.

Be ready to challenge – If you truly believe that your background and experience are a good fit for a position but you don’t quite qualify in some area, such as years of experience, remember that it’s okay to make the case for why you really are someone they want. Just remember that you’ll need to provide solid evidence for your case.

Build up your UX brand now – When an employer looks you up, if you truly end up being liminal to UX seniority, remember that your UX brand—what an employer will find when you are Googled—could be the thing that offers you credibility and the opportunity to take on a position that you really want.

Let’s leave these levels vague

There are no hard and fast definitions for junior, senior, director, principal or anything else. And let’s leave it that way. Loose ideas of what should make a good fit are fine for some general guidance, but both employers and potential hires should do what they can to keep their options open and see what UX adventures may await them!

What strategies have you used to navigate the UX job market? Leave a comment or let us know in the forums.

Just starting out in your UX career? Make sure you consult our ebook: Get Started in UX

The post What Does it Mean to be a Junior or a Senior UX Professional? appeared first on UX Mastery.


by Cory Lebson via UX Mastery

Using Celery With Django for Background Task Processing

Web applications usually start out simple but can become quite complex, and most of them quickly exceed the responsibility of only responding to HTTP requests.

When that happens, one must make a distinction between what has to happen instantly (usually in the HTTP request lifecycle) and what can happen eventually. Why is that? Well, because when your application becomes overloaded with traffic, simple things like this make the difference. 

Operations in a web application can be classified as critical or request-time operations and background tasks, the ones that happen outside request time. These map to the ones described above: 

  • needs to happen instantly: request-time operations
  • needs to happen eventually: background tasks

Request-time operations can be done on a single request/response cycle without worrying that the operation will time out or that the user might have a bad experience. Common examples include CRUD (Create, Read, Update, Delete) database operations and user management (Login/Logout routines).

Background tasks are different as they are usually quite time-consuming and are prone to failure, mostly due to external dependencies. Some common scenarios among complex web applications include:

  • sending confirmation or activity emails
  • daily crawling and scraping some information from various sources and storing them
  • performing data analysis
  • deleting unneeded resources
  • exporting documents/photos in various formats

Background tasks are the main focus of this tutorial. The most common programming pattern used for this scenario is the Producer Consumer Architecture. 

In simple terms, this architecture can be described like this: 

  • Producers create data or tasks.
  • Tasks are put into a queue that is referred to as the task queue. 
  • Consumers are responsible for consuming the data or running the tasks. 

Usually, the consumers retrieve tasks from the queue in a first-in-first-out (FIFO) fashion or according to their priorities. The consumers are also referred to as workers, and that is the term we will be using throughout, as it is consistent with the terminology used by the technologies discussed.

What kind of tasks can be processed in the background? Tasks that:

  • are not essential for the basic functionality of the web application
  • can't be run in the request/response cycle since they are slow (I/O intensive, etc.)
  • depend on external resources that might not be available or not behave as expected
  • might need to be retried at least once
  • have to be executed on a schedule

Celery is the de facto choice for doing background task processing in the Python/Django ecosystem. It has a simple and clear API, and it integrates beautifully with Django. It supports various technologies for the task queue and various paradigms for the workers.

In this tutorial, we're going to create a Django toy web application (dealing with real-world scenarios) that uses background task processing.

Setting Things Up

Assuming you are already familiar with Python package management and virtual environments, let's install Django:

I've decided to build yet another blogging application. The focus of the application will be on simplicity. A user can simply create an account and without too much fuss can create a post and publish it to the platform. 

Set up the quick_publisher Django project:

Let's get the app started:

When starting a new Django project, I like to create a main application that contains, among other things, a custom user model. More often than not, I encounter limitations of the default Django User model. Having a custom User model gives us the benefit of flexibility.

Make sure to check out the Django documentation if you are not familiar with how custom user models work.

Now we need to tell Django to use this User model instead of the default one. Add this line to the quick_publisher/settings.py file:

We also need to add the main application to the INSTALLED_APPS list in the quick_publisher/settings.py file. We can now create the migrations, apply them, and create a superuser to be able to log in to the Django admin panel:

Let's now create a separate Django application that's responsible for posts:

Let's define a simple Post model in publisher/models.py:

Hooking the Post model with the Django admin is done in the publisher/admin.py file like this:

Finally, let's hook the publisher application with our project by adding it to the INSTALLED_APPS list.

We can now run the server and head over to http://localhost:8000/admin/ and create our first posts so that we have something to play with:

I trust you've done your homework and you've created the posts. 

Let's move on. The next obvious step is to create a way to view the published posts. 

Let's associate our new view with an URL in: quick_publisher/urls.py

Finally, let's create the template that renders the post in: publisher/templates/post.html

We can now head to http://localhost:8000/the-slug-of-the-post-you-created/ in the browser. It's not exactly a miracle of web design, but making good-looking posts is beyond the scope of this tutorial.

Sending Confirmation Emails

Here's the classic scenario:

  • You create an account on a platform.
  • You provide an email address to be uniquely identified on the platform.
  • The platform checks you are indeed the owner of the email address by sending an email with a confirmation link.
  • Until you perform the verification, you are not able to (fully) use the platform.

Let's add an is_verified flag and the verification_uuid on the User model:

Let's use this occasion to add the User model to the admin:

Let's make the changes reflect in the database:

We now need to write a piece of code that sends an email when a user instance is created. This is what Django signals are for, and this is a perfect occasion to touch this subject. 

Signals are fired before/after certain events occur in the application. We can define callback functions that are triggered automatically when the signals are fired. To make a callback trigger, we must first connect it to a signal.

We're going to create a callback that will be triggered after a User model has been created. We'll add this code after the User model definition in: main/models.py

What we've done here is we've defined a user_post_save function and connected it to the post_save signal (one that is triggered after a model has been saved) sent by the User model.

Django doesn't just send emails out on its own; it needs to be tied to an email service. For the sake of simplicity, you can add your Gmail credentials in quick_publisher/settings.py, or you can add your favourite email provider. 

Here's what Gmail configuration looks like:

To test things out, go into the admin panel and create a new user with a valid email address you can quickly check. If all went well, you'll receive an email with a verification link. The verification routine is not ready yet. 

Here's how to verify the account:

Hook the views up in: quick_publisher/urls.py

Also, remember to create a home.html file under main/templates/home.html. It will be rendered by the home view.

Try to run the entire scenario all over again. If all is well, you'll receive an email with a valid verification URL. If you'll follow the URL and then check in the admin, you can see how the account has been verified.

Sending Emails Asynchronously

Here's the problem with what we've done so far. You might have noticed that creating a user is a bit slow. That's because Django sends the verification email inside the request time. 

This is how it works: we send the user data to the Django application. The application creates a User model and then creates a connection to Gmail (or another service you selected). Django waits for the response, and only then does it return a response to our browser. 

Here is where Celery comes in. First, make sure it is installed:

We now need to create a Celery application in our Django application:

Celery is a task queue. It receives tasks from our Django application, and it will run them in the background. Celery needs to be paired with other services that act as brokers. 

Brokers intermediate the sending of messages between the web application and Celery. In this tutorial, we'll be using Redis. Redis is easy to install, and we can easily get started with it without too much fuss.

You can install Redis by following the instructions on the Redis Quick Start page. You'll need to install the Redis Python library, pip install redis, and the bundle necessary for using Redis and Celery: pip install celery[redis].

Start the Redis server in a separate console like this: $ redis-server

Let's add the Celery/Redis related configs into quick_publisher/settings.py:

Before anything can be run in Celery, it must be declared as a task. 

Here's how to do this:

What we've done here is this: we moved the sending verification email functionality in another file called tasks.py

A few notes:

  • The name of the file is important. Celery goes through all the apps in INSTALLED_APPS and registers the tasks in tasks.py files.
  • Notice how we decorated the send_verification_email function with @app.task. This tells Celery this is a task that will be run in the task queue.
  • Notice how we expect as argument user_id rather than a User object. This is because we might have trouble serializing complex objects when sending the tasks to Celery. It's best to keep them simple.

Going back to main/models.py, the signal code turns into:

Notice how we call the .delay method on the task object. This means we're sending the task off to Celery and we don't wait for the result. If we used send_verification_email(instance.pk) instead, we would still be sending it to Celery, but would be waiting for the task to finish, which is not what we want.

Before you start creating a new user, there's a catch. Celery is a service, and we need to start it. Open a new console, make sure you activate the appropriate virtualenv, and navigate to the project folder.

This starts four Celery process workers. Yes, now you can finally go and create another user. Notice how there's no delay, and make sure to watch the logs in the Celery console and see if the tasks are properly executed. This should look something like this:

Periodic Tasks With Celery

Here's another common scenario. Most mature web applications send their users lifecycle emails in order to keep them engaged. Some common examples of lifecycle emails:

  • monthly reports
  • activity notifications (likes, friendship requests, etc.)
  • reminders to accomplish certain actions ("Don't forget to activate your account")

Here's what we're going to do in our app. We're going to count how many times every post has been viewed and send a daily report to the author. Once every single day, we're going to go through all the users, fetch their posts, and send an email with a table containing the posts and view counts.

Let's change the Post model so that we can accommodate the view counts scenario.

As always, when we change a model, we need to migrate the database:

Let's also modify the view_post Django view to count views:

It would be useful to display the view_count in the template. Add this <p>Viewed times</p> somewhere inside the publisher/templates/post.html file. Do a few views on a post now and see how the counter increases.

Let's create a Celery task. Since it is about posts, I'm going to place it in publisher/tasks.py:

Every time you make changes to the Celery tasks, remember to restart the Celery process. Celery needs to discover and reload tasks. Before creating a periodic task, we should test this out in the Django shell to make sure everything works as intended:

Hopefully, you received a nifty little report in your email. 

Let's now create a periodic task. Open up quick_publisher/celery.py and register the periodic tasks:

So far, we created a schedule that would run the task publisher.tasks.send_view_count_report every minute as indicated by the crontab() notation. You can also specify various Celery Crontab schedules

Open up another console, activate the appropriate environment, and start the Celery Beat service. 

The Beat service's job is to push tasks in Celery according to the schedule. Take into account that the schedule makes the send_view_count_report task run every minute according to the setup. It's good for testing but not recommended for a real-world web application.

Making Tasks More Reliable

Tasks are often used to perform unreliable operations, operations that depend on external resources or that can easily fail due to various reasons. Here's a guideline for making them more reliable:

  • Make tasks idempotent. An idempotent task is a task that, if stopped midway, doesn't change the state of the system in any way. The task either makes full changes to the system or none at all.
  • Retry the tasks. If the task fails, it's a good idea to try it again and again until it's executed successfully. You can do this in Celery with Celery Retry. One other interesting thing to look at is the Exponential Backoff algorithm. This could come in handy when thinking about limiting unnecessary load on the server from retried tasks.

Conclusions

I hope this has been an interesting tutorial for you and a good introduction to using Celery with Django. 

Here are a few conclusions we can draw:

  • It's good practice to keep unreliable and time-consuming tasks outside the request time.
  • Long-running tasks should be executed in the background by worker processes (or other paradigms).
  • Background tasks can be used for various tasks that are not critical for the basic functioning of the application.
  • Celery can also handle periodic tasks using the celery beat service.
  • Tasks can be more reliable if made idempotent and retried (maybe using exponential backoff).

by George-Bogdan Ivanov via Envato Tuts+ Code