Since seven years, we welcome the new month with a collection of unique desktop wallpapers. And it’s not any different this time around. Created by designers and artists from across the globe, they are just waiting to give your desktop a makeover and provide you with some fresh inspiration.
This post features their artwork for February 2016. Each wallpaper comes in two versions, with and without a calendar, and can be downloaded for free. Now you only need to decide which one will accompany you through the month — and that won’t be easy given all the creative ideas the community has come up with. A big thank-you to everyone who participated!
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
The 9 Graphic Design Trends You Need to Be Aware of in 2016
The Future is Near: 13 Design Predictions for 2017
WordPress – we all love the variety and the endless possibilities it offers. Sometimes it simply needs a new look, just like you need new clothes. That’s why we roamed the official WordPress theme index again, as usual coming back up with the prettiest new free WordPress themes of this month. What are you waiting for? Here are our findings.
The Quidus theme is useful for many different use cases, as you can tell by the number of demo pages. This theme comes with six demo pages. You can choose from two magazine variants, a business version, a version for portfolios, a version for creatives and a version for photographers. All of them can be realized with this theme.
Created by: QerraPress
License: Free for personal and commercial purposes | GNU General Public License
Clean Box is a responsive theme for bloggers and other users that value content and prefer a more minimalist design approach. The theme allows you to alter the background, the layout, and the logo. A slider is included as well.
Created by: Catch Themes
License: Free for personal and commercial purposes | GNU General Public License
The Kerinci Lite Theme is an appealing, minimalist and clean theme for bloggers and users that produce a lot of content. It is supposedly just as fitting for news websites and magazines. The Lite version comes with a sidebar widget.
Created by: awesomethemes
License: Free for personal and commercial purposes | GNU General Public License
Krakatau presents itself as a modern and clear theme aimed at bloggers that work a lot with photos and videos. This theme’s strengths are text, photos, and videos.
Created by: awesomethemes
License: Free for personal and commercial purposes | GNU General Public License
The Modulus theme is a fitting choice for many different use cases. Portfolios, business websites, and personal blogs are all feasible. It’s worth taking a closer look, as it comes with an adjustable background and many settings through the theme customizer.
Created by: Venkat Raj
License: Free for personal and commercial purposes | GNU General Public License
Aqueduct considers itself a magazine theme and comes up with an appealing appearance. The theme colors, the logo, and the favicon can be edited. You can also choose from the 500+ Google fonts and two homepage layouts. The theme’s speed is optimized by default and achieves a YSlow score of 84 percent without further optimization being done beforehand.
Created by: aumkar
License: Free for personal and commercial purposes | GNU General Public License
Beat Mix is the right theme for concert agencies, events, music websites and blogs. It has a unique design and comes with many options including three footer sidebars and two blog styles.
Created by: Kopa Theme
License: Free for personal and commercial purposes | GNU General Public License
PressNews is a magazine theme and comes with a slider on the landing page. Below that, the single articles are lined up in a mirror-inverted way. This adds an appealing and unique design to the landing page. The background can be adjusted to your personal desire. The theme is suitable for blogs and portfolios.
Created by: Theme4wp
License: Free for personal and commercial purposes | GNU General Public License
MH Edition Lite is the right theme choice for news and magazine websites. It offers a customizable background, custom colors and a header to which you can also add a logo. Additionally, it includes three particular widgets and prepared advertisement sections.
Created by: MH Themes
License: Free for personal and commercial purposes | GNU General Public License
MaxStore is a shop theme for the popular WordPress shop extension WooCommerce. All kinds of online shops can be realized using MaxStore. However, MaxStore can also be used as a business theme, waiving shop functionality. The developer claims that this theme is the fastest available theme for online shops based on WooCommerce.
Created by: Themes4wp
License: Free for personal and commercial purposes | GNU General Public License
Virtual reality plays an increasingly important role in the worldwide web. JavaScript and modern browsers make three-dimensional worlds possible. The JavaScript framework A-Frame allows you to create virtual realities quickly, based on its own markup language.
A-Frame: Integrating the JavaScript and Constructing Your First 3D World
First of all, you need to incorporate the A-Frame JavaScript file into your HTML head. The compressed file is about 700 kb large and contains everything you need. Other libraries, like jQuery, are not necessary.
In this example, a sphere, a cube as well as a cylinder are placed in the scenery. You can use attributes to define the size, color, position and rotation of the object. The parameter set for “position” requires three values to be able to place an object on the x, y and z-axis. “rotation” also needs three values which define the angle of rotation on the three axes.
Experiencing VR on Smartphone, Tablet, and Google Cardboard
To allow the browser to display the virtual reality, A-Frame translates its custom markup language into an HTML5 canvas. In this example, the A-Frame source code turns into a drawing area in which the framework displays the scenery using the JavaScript drawing methods.
Just like a virtual world is supposed to, A-Frame’s three-dimensionality is not static, but dynamic. On the desktop, you can change the scenery’s angle using your mouse. However, it gets fascinating when you look at the scenery with your smartphone or tablet, as A-Frame interprets the orientation of your device and adjusts the scenery’s perspective accordingly.
Display for Google Cardboard on a Smartphone
For real 3D pleasure, you can also use the VR mode in combination with e.g. Google Cardboard. When looking at a created scenery on your mobile device, you can switch into the VR mode using an icon shaped like glasses. Then, A-Frame displays the view divided. You will see the same scenery on both the left and the right side, but with slightly altered points of view. When using your smartphone with Google Cardboard, you’ll experience true virtual reality.
A-Frame also works with Oculus Rift. However, at this time, experimental versions of Firefox and Chrome need to be installed as the current browsers don’t come with the needed support for WebVR. In any case, your browser has to support WebGL to be able to work with A-Frame.
In the example, a cube is rotated by 360 degrees on the y-axis. To do so, the type of animation is defined via “attribute” and the goal of the animation is defined by “to”. “dur” defines the duration and “fill” determines what should happen at the end of the animation. The value “forwards” makes sure that the animation is not reset back to the beginning. “repeat” allows you to set the number of repeats.
Own Camera, Light, Interactivity, and Materials
A-Frame can do much more than I presented here. If desired, you can add a custom camera and light, for example. You have the option to establish interactive elements and to add materials. Unfortunately, A-Frame’s documentation is not complete. Some of the options can not be found there yet.
360-Degree Panorama as VR
You can also implement images and videos. This allows you to create a 360-degree panorama as a virtual reality, for example.
Conclusion
A-Frame is an interesting framework for simple but thoroughly complex VR worlds. The support of mobile devices like Oculus Rift or Google Cardboard enables vivid 3D sceneries. The operation of A-Frame is very easy. While other 3D frameworks require you to manually code in JavaScript, with A-Frame, everything works much simpler due to the unique markup language.
Additionally, there are plenty of easy and also complex examples that display all of A-Frame’s options in a detailed way. A-Frame is distributed under the popular and liberal MIT license. Thus, private and commercial use, even in client projects, is possible.
(dpe)
* You might also be interested in the following articles
I wouldn’t normally devote an entire post to a single set of Photoshop brushes, but if there is ever a set of Photoshop brushes that deserves it, it’s this one. A few weeks ago, Niki Brown told us how Design Is In The Details. The level of detail in these brushes is astonishing. According to the artist, well over 150 hours of work and thought went into these brushes over the course of 3 months.
Here you can download the complete set.
Want this freebie? Enter your email and get it now!
Simply enter your email address and the download link will be sent right to your inbox.
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Watch the cutlery
A different point of view
Politics aside
Can you relate to these situations? Please share your funny stories and comments below…
Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:
…instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.
Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will see the switch between the fallback font and the fancy web font: the first stage is only 9kb in size, which then gets replaced with a complete 25kb version.
The difficulty here being that a lot of type foundries don’t provide developers with the option to subset a font file.
Recently, Google announced that it has started considering HTTPS as a metric when deciding the pagerank of a given website. Thus, all other elements being equal, HTTPS websites get preference over HTTP ones.
However, Google has also decided to go a step further: pretty soon, it will mark HTTP websites as “unsafe”, and warn users about websites that are not using HTTPS.
An upcoming change proposed to the Google Chrome web browser will ensure that when a user visits a non-secure website, a red X mark will be displayed in the address bar: as of now, Google Chrome uses this mark when the SSL certificate of a website is incorrectly configured, thereby warning user that there is a problem with the SSL certificate of the active website.
However, after the new change is in effect, even otherwise safe websites that have no malware, say your photoblog or a casual blog, will be marked as “unsafe” in Google Chrome.
This change, though being promoted as something to safeguard the web, is being viewed as more of a monopolistic move by Google. By “forcing” webmasters to use HTTPS, Google may or may not make a safer internet, but it surely is making life difficult for the average user who just wishes to have a generic blog or website.
The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What’s causing this scrollbar? There is also mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I expect? Hopefully Przemek’s tool can help.
When dealing with webhooks, accepting or sending form data, or simply issuing standard HTTP requests, you can find yourself puzzled about what exactly was in the payload. What were the HTTP headers? What exactly happened to your multipart uploads?
Luckily there’s a nifty tool called Hookbin (disclaimer: I created it) that greatly reduces the pain of debugging HTTP requests. Let’s take a quick look at the tool and what we can achieve with it.
What is Hookbin?
Hookbin is a free service which allows you to intercept, parse, and debug HTTP requests of any kind. By offering a volatile unique URL (called an “Endpoint”), it enables you to issue requests against that endpoint and check what exactly has been transmitted. The are numerous possible use cases. To name a few:
Debugging webhooks from external providers, for example payment systems like Stripe or Recurly before going to production
Debugging forms in your applications to help set up controllers properly
Parsing multipart requests (file uploads)
How To Use Hookbin
The first thing you will see when landing on the Hookbin home page is a large button which reads “Create New Endpoint”. Right below, there’s an option called “Make it Private” to create an Endpoint whose results will only be visible in the browser with which you created it (read below on private Endpoints). For now let’s create a standard Endpoint. Click the button and your browser will navigate to your unique Endpoint’s result list.
At the top of a page you’ll see the actual Endpoint URL which you can use within your applications, for example https://hookb.in/voOD1NJ8. Note that the domain name for Endpoints is different — hookb.in instead of hookbin.com. Hookbin.com is where you view your requests, while hookb.in is used only for Endpoints.
Hookbin keeps each unique Endpoint alive for 7 days from when it’s been created, and allows you to store up to 100 requests per Endpoint. Once an Endpoint hits that limit, the oldest results will be removed to free up space for new ones.
Once we’ve acquired our unique Endpoint URL we can start playing with it. At the bottom of the page you’ll find several examples of POST requests with a JSON payload against that Endpoint in various programming languages.
Let’s start with something super simple: GET requests. Copy your unique Endpoint URL and navigate to it in a new browser tab. Upon a successful request Hookbin will always return 200 OK status code with a JSON {"success": true}
Cool. Now close the tab and go back to Hookbin.com, where you can view your results (refresh the page).
You’ll see the results of that HTTP GET request stored. Let’s see what’s in the request. Every result is broken down into the following easily collapsible sections:
HTTP Headers (Request and Response)
Query String
Body
File Uploads
Cookies
HTTP Headers
The first section gives you the HTTP headers transmitted in the request. What’s unique about Hookbin is that it gives you both the request and the response headers. It is also important to note that Hookbin filters out any headers which might have been added by proxy servers between the origin of a request and the Hookbin servers. That means you will only actually see the headers you have explicitly set in the request, and those transmitted back with a response. No more noise or unknown headers you have not explicitly set.
Query String
It is very common to transmit data as a part of a URL. All query strings appended to the Endpoint URL will be presented here as key-value pairs. To check how it looks simply append a query string to your unique Endpoint URL, for example ?name=john, open that URL in another tab and go back to Hookbin.com.
Body
This section gives you the POST body of a request, beautifully highlighted. It is now 2016 and most services out there send their data in JSON format. Let’s now issue such a request with cURL and see how it looks:
Hookbin is request-type-agnostic, meaning it will parse and store all kinds of requests: JSON, XML, YAML, multipart or URL-Encoded.
File Uploads
Who doesn’t send files over HTTP nowadays? Let’s now find out how to intercept mutlipart requests (file uploads) with Hookbin. Assuming you have image.jpg in your current working directory you can upload a file with cURL like so:
curl -X POST --form upload=@image.jpg https://hookb.in/voOD1NJ8
Hookbin stores all uploads in ephemeral AWS S3 buckets with TTL (Time To Live, or expiration time) set to 7 days from the moment the file has been uploaded. After that time they are automatically and irreversibly deleted. If you don’t feel like waiting a full 7-day cycle, you may delete individual files on demand with a single click.
Please note that Hookbin will parse and save HTTP requests up to 1MB in size — both body and headers. If you send a request that is larger than 1MB, Hookbin will respond with 413 Request Entity Too Large and reject it.
Cookies
Any HTTP cookies transmitted within the request will be presented here as key-value pairs. Want to try it out? Here’s a cURL one-liner:
curl -X GET --cookie "motto=never_gonna_give_you_up" https://hookb.in/voOD1NJ8
Private Endpoints
Remember that checkbox on Hookbin’s homepage when creating a new Endpoint? When checked the Endpoint you create will become “Private” meaning it will only be viewable in the browser you’ve used to create such endpoint. No one else will have access to stored results.
Adding Notes
What good are stored HTTP requests if we can’t add quick notes to each one of them to keep track of changes in our applications? Hookbin allows you to do this. In the top-right corner of each request you will find a button called “Add Note”. That allows you to store up to 1,000 characters of text. You can delete and edit your notes.
Deleting Results
If you don’t need all stored results you can remove individual ones with the red button labeled “Delete Result” at the top-right corner of each result.
Hidden Features
Hookbin offers a wide-open CORS implementation so you can test HTTP requests from within your JS applications
Hookbin supports method overriding
Security connections only — Hookbin offers only SSL-secured Endpoints and scores A+ grade on SSL Labs test
Hookbin runs in a Highly Available setup
Technology
Hookbin is a pair of Node applications. The “Interceptor” behind hookb.in and the Web interface available at hookbin.com. In front of the Node applications there are Nginx servers running, which are used for SSL termination and preliminary validation of requests which are then reverse-proxied to the Node backends. The Web interface app has been written with Angular and all the assets are delivered by a CDN.
Why did we build Hookbin?
Here at Kraken.io we deal with Webhooks every day, delivering hundreds of thousands (sometimes millions) of them around the world to notify applications of completed image resizing and optimization processing. We first developed the service in-house for our own purposes. Once we realised the product was polished and platform-agnostic we decided to spread the love, making it publicly available. We hope you will find it useful!
Many posts on PostCSS compare it’s features to Sass equivalents, but PostCSS doesn’t have to be used as an alternative to Sass. It can instead be used to add additional features to your workflow that Sass doesn’t provide. … These extra tasks can run either before or after your Sass compilation, as PostCSS can parse both SCSS and CSS.
PostCSS has proven to be much easier for developers to write add-ons for. There are tons of add-ons that are highly compelling. But I think it would be a mistake to pick out, say, a dozen add-ons trying to replicate what what Sass already does, in addition to the others you find useful. Your CSS code base risks becoming this weird highly customized syntax – you’ll be coding on an island so to speak. Not to mention at the mercy of untold third-party maintainers.
I think the trick is to use Sass (which has so many strong battle-tested syntax choices over the year) and sprinkle in PostCSS processing with good add-ons. Good, meaning actively maintained and that don’t mess with the language. I prefer add-ons that have a familiar looking syntax, but it’s invented, so it will never awkwardly conflict with current CSS, future CSS, or other preprocessing.
