News dév web

Upgrading Sylius the TDD Way: Exploring PhpSpec - il y a 3 hours 53 min

The post on developing and testing new Sylius features was an introduction to the three types of tests that are used in Sylius - PHPUnit, Phpspec and Behat.

In this part, we'll extend some core classes to indicate color-coded inventory status. First, we'll deal with the back end part. In a followup post, we'll use Behat and test the visual changes. Please follow the instructions in the previous post to get a working instance up and running.

Sylius has an excellent inventory management solution. However, there's always some room for a tweak or two. If you look at the list of products (admin/products) there's no information about available stock. Looking at the variants of a product, we see inventory data, whether it's tracked or not, and the number of total items in stock, if tracked. It would be nice to see that kind of information on the product listing page, too. In addition, the stock level is all or nothing - for example, a green label says "10 Available on hand" or red "0 Available on hand". How about something in-between, say a yellow label for "3 Available on hand" to indicate that stock is low? Then, the store admin can decide it's time to replenish.

Extend ProductVariant and Product models

We want to extend the behavior of both the ProductVariant and Product models provided by Sylius, so we can see extra information on stock availability when viewing products.

Create a Bundle

First, we create the src/AppBundle/AppBundle.php file and register it in app/AppKernel.php.

<?php // src/AppBundle/AppBundle.php namespace AppBundle; use Symfony\Component\HttpKernel\Bundle\Bundle; class AppBundle extends Bundle { } <?php // app/AppKernel.php public function registerBundles() { $bundles = [ // ... new AppBundle\AppBundle(), ]; }

Next, we inform the autoloader about the new bundle by adding it to the "autoload" section of composer.json.

Continue reading %Upgrading Sylius the TDD Way: Exploring PhpSpec%

Catégories: News dév web

YouTube: High-Resolution Content Easily Downloaded - il y a 11 hours 52 min

Like yourself a fast YouTube download? The video platform that used to be filled with shaky, private videos has become an entire media world of its own – with its own stars and “TV channels.” From a technological standpoint, we went through the evolution from 240p to 1080p and were happy about a higher resolution. The 4K trend is supported as well, with YouTube’s 2160p, for instance. Good content in perfect quality? This makes us want to save this content. The 4K Video Downloader supplies us with a darn fast download.

Handy Features

Is your goal to get the videos from YouTube onto your computer in high resolution as easily as possible? Here’s how to save your favorite flix, and watch them independent of internet access, or the risk of videos being removed from the platform for some reason. First, get yourself a copy of the 4k Video Downloader and start it.

Then, simply copy the YouTube video link from the browser, and click on “Paste Link” in the software. Done! This results in videos in HD 1080p, HD 720p or even 4K quality. Very handy when trying to watch them on an HD TV, or iPad without searching, or hoping that the WLAN connection works.

It is also possible to download entire playlists and channels from YouTube if desired. You can even subscribe to channels from within the software. Once a channel uploads a new video, the YouTube download starts automatically.

Excellent Extras

Even 360° videos are supported. As usual, after the download, you can adjust the video’s point of view by dragging the mouse. Embedded YouTube videos on a homepage will be detected, and offered for download, as well. Once again, all it takes is a copy of the link to enter into the software. Aside from 360°, 3D format videos are also supported.

Good to Know

It’s possible to save videos in MP4, MKV, M4A, MP3, FLV, and 3G formats. .m3u files for playlists are also possible. If you need the subtitles, use the respective subtitle downloader. It creates a .srt file or embedded subtitles directly within the videos.

If you want the chosen settings to be applicable to all downloads, activate “Smart Mode.” This allows you to download videos from Vimeo, SoundCloud, Flickr, Facebook, and DailyMotion as well.

Aside From the Video Download: Music as MP3

If you’re more into music, and less into videos, you’ll be happy to hear that the Downloader’s developers also let you extract music. Just get yourself the app “4K YouTube to MP3”, which is a software specialized on that. Whether it’s from YouTube, Vimeo, or Facebook: the audio track is recognized, and separated as an MP3, M4A, or OGG. SoundCloud, Flickr, and DailyMotion are other possible sources.

Material From Instagram

“4K Stogram” is another app and the expert for Instagram. It turns the download, or storage of Instagram photos or videos into a cakewalk, even from private accounts. Whether you’re saving photos from multiple accounts at once, or automatically download the newest photos from your favorite photgrapher: everything can be done very easily.

By the way: all programs run on PC, Mac, and Linux, are completely free, and don’t come with an annoying toolbar, adware, or malware.

The 5 Best YouTube Channels For Web Designers

To make sure that installing the 4K Video Downloader is worth it, we have curated five great YouTube channels that are sure to enhance your skills as a designer.

01 The Futur

The Futur is a very high-quality YouTube channel founded by Chris Do, who often puts out reports on his life in an agency. The content is about branding, UX design, pricing, logo design, and stylescapes.


02 Roberto Blake

Every monday, Roberto reports on graphic design, design education, logo design, and web design. On the other days of the week, he presents us tutorials and reviews.


03 CharliMarieTV

Charli is a web and graphic designer from New Zealand (although she’s currently living in London). Her channel is about pixel perfect icons, design portfolios, layouts, and inspiration.


04 Unleashed Design

Tthe channel Unleashed Design by Johannes Schiel is run in German language. His topics include JavaScript, webdesign trends and principles, as well as responsive design.


05 1stWebDesigner

1stWebDesigner has not posted in a while, but their archive includes a couple of contemporary gems. These include videos on their web design portfolio, tricks to stick out of the masses of web designers, as well as pricing tips.



The 4K Video Downloader is one of those small helpers that greatly facilitate our everyday lives: how often have you wished to quickly download a YouTube video, or to save some cool music from another video. Of course, all of this can also be done online, right from within the browser, and thus, there’s a simple version of the software available as a web app. However, the installable software provides more functions, settings, and automatisms. Easily installed, we recommend the test for YouTube fans that want to save content on a regular basis.

Catégories: News dév web

Functional Programming with Phunkie: Funky Parser Combinators - 27 avril, 2017 - 18:00

Phunkie is a library with functional structures for PHP. In this tutorial, Phunkie creator Marcello Duarte, head of training at Inviqa, explains how to create Parser combinators using the functional library. This post first appeared on the Inviqa blog, and was republished here with their permission.

Learning functional programming

Functional programming really matters. Pure functions (or functions with no side effect) are the perfect units of behaviour because we can rely on them to build larger and more complex systems. The greatness of functional programming relies on this power of composability.

That’s something I first came to believe back in the days of my licentiate degree on Computing for Management, during a semester in AI with Lisp. My course curriculum was mostly focused on C/C++, therefore I had to stay focused on where the skills demand was.

Thankfully, I’ve been able to reignite my love of studying functional programming here at Inviqa where we’re delivering more and more projects based on Scala, the general purpose programming language.

I’ve read "the red book" about three times (the Chiusano & Bjarnason one, not the Vaughn Vernon’s one). I took all the Martin Odersky’s Coursera courses, and I spent hours of my weekends watching videos and reading papers.

And I set myself a challenge: to do with functional programming what I did when I was learning TDD and created PHPSpec (a BDD testing and design tool for PHP developers) to help me learn; I decided to write my own functional programming dialect in PHP. And so Phunkie was born!

Now over to you. Learning functional programming means immersing yourself in a new paradigm, which can be challenging. It requires a totally different mindset for approaching problems.

So, by the time you can use functional programming to solve real-world problems, you’ll have spent hours grasping the new thinking or getting clued-up on the theory.

In this tutorial, my aim is to help fast-track your journey by going over my implementation of Hutton & Meijer’s Monadic Parser Combinators. Hopefully you will be able to see both the thinking and the usefulness of functional programming.

And, by using Phunkie, you can eliminate the need to learn Haskell to understand the topic. All you should need is some familiarity with PHP.

So let’s get started!

Continue reading %Functional Programming with Phunkie: Funky Parser Combinators%

Catégories: News dév web

Boilrplate: Developer Central for Rational Project Processing - 27 avril, 2017 - 10:00

Being a developer without boilerplates and frameworks is hard to imagine. By now, all of us got used to these more or less slim project accelerators. The only problem is keeping an overview.

Boilrplate: Transboundary Overview of Developer Tools Boilrplate: Boilerplates for App and Web Development. (Screenshot: Noupe)

With Boilrplate, Julien Coulaud from Paris has brought us an overview of all the current boilerplates and frameworks used in the development of software products. He doesn’t limit himself to web development alone but also supplies developers of native apps for iOS, Android, as well as C#. As would seem natural, the area of web development still takes up a significant part of the collection.

Here, Coulaud categorizes even further, by dividing boilerplates depending on the frameworks. For instance, there are own sections for Node.js, Angular, jQuery, Meteor, React, and others. The WordPress developer was not forgotten either, nor was the HTML coder.

Boilrplate itself is available for active contribution on Github, and only collects projects that can be found on Github as well. This way, you get the same valuable data on each project, like the number of stars, the latest update, and so on. Clicking on “More Details” will take you directly to the respective project’s Github page.

Boilrplate, Cleanly Sorted Lists of Common Development Tools. (Screenshot: Noupe) Boilrplate: No Search Function, But Specific Sorting

Boilrplate does not offer a search function. But it’s not needed. After all, you’ll precisely look for tools for React, for example, or other targetable areas. In the individual sections, the number of listed tools is not significant enough for you to lose track.

The option to alter the order of the list is helpful, however. It lets you sort the list by criteria like the number of stars, the age of the project, the date of the most recent update, or the lowest file weight, for example. Personally, I always go after the date of the most recent update if the project isn’t brand-new and also pay attention to the weight. Different criteria may be more important to other people.

Boilrplate is not an automated collection but is manually taken care of, and curated by Julien Coulaud. Julien himself is a programmer. So we can safely assume that he knows what he’s doing.

Catégories: News dév web

5 Excellent Tools Your UX and UI Design Tasks - 26 avril, 2017 - 12:08

Advertise here via BSA

UI Design – UX Design: Tightly Coupled, But Not the Same

User interface (UI), and user experience (UX), are both critical elements in website design. The two terms are often confused, and are even used interchangeably by some; but they are not one and the same. Sure, it’s important to understand the differences between these two design elements when selecting tools to incorporate their features and attributes into your websites. Yet, many premium website and mobile application design tools take both into account.

The two can be summed up thusly:

The UI is a website’s presentation, and focuses on its look and feel. UI design is digital in nature, and may even involve coding in those cases where the boundary between design and development has become blurred.

The UX gives the website life, with a focus on usability and customer satisfaction. UX design is more closely related to market research. It does not involve digital techniques or coding.


More than a tool, InVision is a complete digital product design platform, with features and capabilities tailored to each stage of the design process. Brainstorm with Freehand, a limitless whiteboard for creative exploration. Test your UI with real users and get real-time, live feedback. Share your screens and prototypes with your entire team for centralized commentary, and integrate it all with your favorite tools to create a seamless, efficient workflow.

Clients, team members, and stakeholders can comment directly on your prototypes for clear and actionable feedback; then, any changes you make will automatically sync across everyone’s account, so you’ll never work on an old version ever again.

With InVision’s high fidelity prototypes, your users will feel like they’re trying out a real, live product, so their feedback is focused on the experience above all else—giving you the information you need to make better design decisions. Sign up for a free trial, and learn why the world’s leading brands, from Airbnb to Netflix to IBM, rely on InVision.

As one of the industry leading prototyping tool, facilitates all the design, collaboration, and testing abilities a designer, entrepreneur, or developer needs to create low or high-fidelity prototypes.

You can easily design your prototypes directly within using its drag & drop functionality, and you’ll be impressed with its rich Interactive UI Libraries (iOS, Material Design). Alternately, you can import your designs from Sketch or Photoshop. When your designs are ready, you can transform them into clickable, interactive prototypes, complete with popular transitions and animations; without writing a single line of code.

With you can share your prototypes for collaboration and feedback and even preview on real devices. Let’s not forget about usability testing.’s usability testing capabilities go far beyond as it’s integration with popular user testing platforms allow you to see and hear what users are saying while trying out your prototype.


Sketch gives you the power, flexibility and speed you always wanted, but were rarely able to find in a lightweight and easy-to-use package. Finally, you can focus on what you do best – Design.

Sketch is built for modern web and graphic designers, and you’ll find that to be true everywhere in the app. Sketch’s vector-based workflow makes creating complex shapes easy; and that’s just a start. Powerful features like Symbols and Shared Styles are there to make reusing elements quick and easy.


Notism is a real-time design and collaboration platform that enables its users to share and review creative content, build and share prototypes and give real-time presentations. With Notism, you can easily transform static screens into interactive web prototypes, or iOS and Android prototypes for mobile applications. 

Notism’s rock-solid task management features will help you get organized, stay organized, and get priority tasks done. This versatile tool also allows you to maintain strict version control over your prototyping and presentation activities, including the ability to switch between versions. 

Great Simple Studio

If you’re looking for some of the best and most popular UI and wireframe kits or core elements look no further than Great Simple.

All their products are built with a terrific attention to detail that will satisfy even the most pretentious designer. And their bestsellers: iOS Design Kit and Material Design Kit should be in every designer’s toolbox. They also offer free GUI Kits for iOS and Android which have been downloaded more than 70.000 times.
Do you prefer working with Sketch rather than Adobe Photoshop? No problem, since all their products are Sketch compatible. Check them out!

Tips for Making a Better User Interface

Users are becoming more experienced with digital displays, and they are expecting better experiences that they were willing to accept just a few short years ago. It’s imperative that businesses carefully consider the quality of the experience they create for their customers; but what makes a quality user interface?

Keep it Simple

Great user interfaces are nearly invisible. They are not made up of gaudy adornments, or unnecessary elements. A quality user interface is made up of necessary, logical, and concise elements.

Limit your interface designs to user-essential items. Don’t add items just to feed your ego.

Your user interface exists for the sole purpose of facilitating those who are interacting with your system. To do this, it must clearly communicate with the users. If users can’t figure out how to use your interface easily, they’ll opt out.

To help improve clarity, create clear and concise labels for buttons and actions. You want to keep your messaging simple, to improve the experience as well. The easier your labels, navigation, and content are to read, the easier it is for users to know what to do.

Make the Interactions Efficient

Make sure users complete their main task in the most efficient way, and never lose the result of their work.

There’s nothing bad about designing powerful software, but the core interface should be simple and functional. You can always hide options in your context menus or app settings.

Be Consistent in Your Design

With your user interface, you’ll want to maintain consistency throughout the user experience. Consistent interfaces will allow your users to rely on and develop usage patterns that will improve that experience. Since people crave consistency, give your users the opportunity to be proven correct when they rely on it.

Use Familiar Design Patterns

Our eyes love seeing simple and familiar things; But, for whatever reason, some designers and clients feel obligated to bring something creative into everything they create.

You want your app to be memorable, but it doesn’t have to be a brain-twister to the user.

Understand How UI Plays into UX

To create a great interface, UI designers should rely on information from the user experience angle, by identifying which problems need to be solved, how the user flow will play out, and determining key product areas and hierarchies.

Ideally, serious work on the interface begins after gaining access to all this information. Then, mockups will be made, tested, and approved by UX designers and the product can be launched without hiccups.

Implement a Visual Hierarchy

The most important elements of an interface should be highlighted to help users focus on them. Design practices provide nearly unlimited methods to achieve this effect.

The simplest example of this technique, would be to make an element bigger, to turn it into a focal point.


It takes a knowledgeable designer working with the right tools to design the UI and UX necessary to create an attractive, smoothly-functioning website. Select the right tools, like those described here, and keep in mind what the driving forces behind UI and UX design consist of, and you should experience one website/mobile app design success after another.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Integrating Responsive Video Into Your Web Designs - 26 avril, 2017 - 10:11

Responsive web design has become the norm as modern applications and websites are expected to adapt and fit into different screen sizes. It provides an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution. Content, images and videos should be fluid enough to accommodate different viewports.

Websites can be viewed on a range of devices. The list of devices users employ in watching videos on your platform is endless: phones, laptops, and iPads, to name a few. Ultimately, you have no influence on how people are going to view your videos or your websites. Sure, you can restrict users to a certain device, browser or orientation(landscape or portrait). But do that, and you’ll easily lose your audience.

You might be familiar with the concept of responsive images and art direction. These concepts provide developers with the power to make images scale responsively in a way that prevents distortion and enables delivery of specific content across various devices, resolutions, viewports and orientations. If you are new to this concept, check out the excellent article written by Eric Portis on responsive images in practice.

Having this knowledge about responsive images means you already possess the arsenal to properly design your websites with the proper specifications to meet visitors’ expectations. But, what about videos? Are your videos responsive, too? Don’t let your users’ choice of devices take you by surprise. Be the Samuel L. Jackson of every situation, especially with regard to the responsiveness of your videos. Let’s dive in!

How many of you have embedded YouTube or Vimeo videos on your site? I’m guessing everyone, well… almost everyone. By default, you might expect that these embedded videos would be responsive, but are they really?

Video Embed Case Study

Take a sample YouTube video, for example

Grab the embed code from the page, and insert into an html page like so:

< !DOCTYPE html> Responsive Videos

Result: Not responsive!

How do we make this embedded video responsive? In our example here, we used YouTube. But it could be from any other video hosting platform, such as Vimeo.

Responsive Solutions

There are a couple of ways to make your videos responsive on your websites. Let’s take a look at the available CSS and JavaScript tricks for crafting responsive videos.


This is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was developed by Chris Coyier and Paravel. This plugin automates the intrinsic ratio method by Thierry Koblentz to achieve fluid width videos. It wraps each video in a div.fluid-width-video-wrapper and applies the necessary CSS. After the first JavaScript call, the CSS takes over and performs the responsiveness. Let’s attempt to make our video embed case study responsive with this proposed solution.

Codepen solution here:

Let’s take another look at Pure CSS solutions for making videos responsive.


Fluidvids.js was developed by Todd Motto. It targets the iframe, checks for the source of the video and also applies the intrinsic ratio method to perform an aspect ratio calculation. The advantage of this script is that it doesn’t depend on any third-party plugin, library or script.

With minimal scripting, it enables faster rendering and enhanced performance.

Let’s attempt to make our video embed case study responsive with this proposed solution.

Codepen solution here:

ZURB Foundation

The ZURB Foundation came up with a CSS solution that is incredibly simple to use. With flex-video, you can automatically create an intrinsic ratio that will properly scale your video on any device. It requires you to use the Foundation framework.

Let’s attempt to make our video embed case study responsive with this proposed solution.

Codepen solution here:

Bare Bone CSS

We don’t want to involve any CSS framework. How do we make it responsive using vanilla CSS? We want to make the video responsive without any magical solution.

Huge thanks to Thierry Koblentz for coming up with this technique. He came up with the idea of using intrinsic ratios for video. With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do.

Many of the other CSS framework and plugin solutions use this technique under the hood to implement video responsiveness in web design.

The first thing we need to do is wrap the embedded video in a div and give it a class like so:

Now that we have wrapped the iframe within a div container, we need to give the child elements of the video-wrapper (the iframe, object and embed) a width and height of 100% so that they expand to the full width of the wrapper, like so:

.video-wrapper iframe, .video-wrapper object, .video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Now, let’s add style to the video-wrapper class like so:

.video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

Note: The padding-bottom property is actually very key in making this technique work depending on the ratio of height-to-wdith of your video. 56.25 percent is for a 16:9 ratio, 74.25 percent is for a 4:3 ratio and 50 percent is for a 16:10 ratio!

Codepen solution here:

A similar implementation can be found on this post at nosecreek’s blog.

HTML5 Video Case Study

Apart from using the video embed codes that are loaded using an iframe, you can also use the well-known HTML5 video element. How do you make your videos responsive in this case?

Fortunately for developers, it’s quite easy. You simply style it by setting the max-width to 100 percent and the height to auto. This is exactly how it works for responsive images too. Let’s check that out.

Codepen solution here:

Enter Cloudinary

Using Cloudinary, you can resize and crop videos in order to match the design of your website. Whether videos are uploaded in your server-side code or by your users, the originals are stored in the cloud.

You can then dynamically create multiple resized, cropped and manipulated videos on-the-fly and deliver them via dynamic URLs, or use code to either add video tags or build video URLs.

Cloudinary enables you to change the size of a video with the width and height parameters, represented as w and h in URLs.

Programmatically getting the width and height from the browser’s viewport and passing it to the url can automatically make your videos responsive as the user shuffles between different device sizes and resolutions.

For example, you can resize an uploaded video to a certain width and height like so:

You also can change the height while maintaining the aspect ratio like so: c_fit

While retaining the original aspect ratio, you can change a video size to fit into a given width and height. For example, this video below is fitted to a width and height of 150 pixels while retaining the aspect ratio using c_fit. Conclusion

We have highlighted different solutions you can use to achieve responsive videos depending on your use case and web project.

Your users should be able to access your content from virtually any type of device, browser and operating system. But it’s not just about access alone, videos also should be beautifully rendered. Responsive video helps you achieve that goal as well.

For more information, or to sign up for an account and test these features, visit the Cloudinary website.

(Disclaimer: This post is sponsored by Cloudinary.)

Catégories: News dév web

Error Pages: 35 Creative 404s For Your Inspiration (Edition 2017) - 26 avril, 2017 - 10:00

404 is a common thing and occurs on any website now and then. Your visitor may have typed an URL wrong or a once active link is no more. A useful 404 not only informs the user about that error but also tries to keep him on the page.

Designing these 404 error pages is not what any designer loves to do. Still, there are a few sites that have 404 jewels to show. We’ve searched for these jewels to help you with your inspiration.

1 –

2 – CSS-Tricks

3 – Starbucks

4 – Walk With You

5 – eHarmony

6 – Dailymotion

7 – Mike Kus

8 – Wufoo

9 – Dropbox

10 –

11 – Hillary Clinton

12 – Dan Woodger

13 – South West Trains

14 – Hot Dog Production

15 – Airbnb

16 – Lego

17 – Github

18 – CSS Ninjas

19 – Daniel Karcher Film Design

20 – MailChimp

21 – Tin Sanity

22 – Audiko

23 – Bret Victor

24 –

25 – Bloomberg

26 – Spotify

27 – Good Old Games

28 – BrandCrowd

29 – Cooklet

30 – Moveline

31 – IconFinder

32 – HubSpot

33 – Cloud Sigma

34 – Grant Burke

35 – Hoppermagic

Catégories: News dév web

Deal of the Week: 30% Off Discount for Noupe Readers on ionMag Premium WordPress Theme - 25 avril, 2017 - 10:37

Welcome to our Deal of the Week. This time the deal is powered by tagDiv. You already know them, as they are building some of the best WordPress Themes dedicated to blog and news, websites on the web. The ionMag Premium WordPress Theme is the latest tagDiv template, powered by a one-of-a-kind front end, drag-n-drop page builder – tagDiv Composer.  So, if you’re planning to redesign your WordPress site, don’t miss this great deal!

IonMag is an amazing WordPress Theme designed to make your blog, news or magazine-styled website stand out from the crowd. With an elegant design and clean coding, this responsive and retina ready theme will help you build your site with ease. IonMag brings you adaptive blocks, custom widgets, multiple headers, footer and post templates, intelligent ads and much more. Everything you need to build beautiful pages without any coding skills!

ionMag Premium WordPress Theme – dedicated to blogs and news websites The front-end customizer Composer elements ionMag Premium News WordPress theme features
  • Beautiful and modern design, so you don’t have to build the websites from scratch. ionMag comes with five pre-built demos that you can quickly install with just one click
  • Powered by the only page builder developed for news and magazine websites
  • Built using the latest technologies, it can power any modern website: HTML5, CSS3, PHP 5.2.4+
  • Clean code, optimized and tested for high-performance
  • Comprehensive documentation and a dedicated user support center
  • Compatible with the most popular plugins like WordPress SEO by Yoast, WooCommerce, bbPress, BuddyPress, WP Super Cache, Contact form 7, Font Awesome 4 Menus, Jetpack
  • Eight beautiful, smart lists – The theme auto-generates the smart lists for you
  • Smart sidebar
  • Intelligent Ad System – 19 ads spots where you can insert your ad code and quickly monetize your website
  • Custom widgets: Social counter, Instagram Widget, Popular Category, Ad box widget, Live Search with Ajax
  • And more…
Deal of the week

The tagDiv team offers our valued readers an exclusive discount coupon. Simply use the NOUPE30 code on checkout and can grab this deal with an extra 30% discount!
Not to mention that ionMag theme comes with an extended license, allowing you to use it for unlimited commercial purposes without any additional fees!

So, what are you waiting for? Get this deal now!!

Catégories: News dév web

CSS Grid Garden Teaches You CSS Grid in a Playful Way - 25 avril, 2017 - 10:00

CSS Grid is the new trend in web design. After the modern browsers have been supporting this set of different CSS attributes for a while now, it is time to look into it. “CSS Grid Garden” helps you with that.

CSS Grid Garden: Water Your Carrots

CSS Grid Garden is an online game from the digital quill of Thomas Park. Park is well known in developer circles, not least because of his game Flexbox Froggy. That one taught us the basic knowledge for using CSS Flexbox. In “CSS Grid Garden,” Park deals with the attribute package of the CSS Grid.

CSS Grid Garden: A Low-Threshold Novice Game CSS Grid. (Screenshot: Noupe)

Of course, you can’t expect to be the CSS Grid Zen master, just because you made it through the game. But the grid garden is a perfect choice for getting started. You won’t even notice that you’re learning something.

Park leads you through 28 levels, in which you have to take care of a garden in different ways. First, you have to water single specific plants in a grid, using water that is located in another spot on the grid.

To do that, you need to write the correct CSS commands, which hopefully get you the desired result. Park takes you by the hand and increases the difficulty very carefully. You can see the result of the CSS you entered directly in the grid on the right. The principle is the same one used in its predecessor “Flexbox Froggy.”

Flexbox Froggy, Learning Game on CSS Flexbox. (Screenshot: Noupe) CSS Grid Garden: Polyglot and Open Source

“CSS Grid Garden” is available in English, Spanish, Polish, Russian, French, and Portuguese. Park provides the game via Github, under the MIT license, allowing you to add translations if you wanted to. Park is always working on new levels. After all, the game is still missing some aspects of the CSS Grid concept.

In this article, Park gives a more detailed explanation of his approach.

If you didn’t look into CSS Grid yet, the online game “CSS Grid Garden” is the perfect entry. You’ll even learn to assess the differences to Flexbox accurately. This aspect still seems to cause a lot of confusion in developer circles.

Catégories: News dév web

How Privileged Are Programmers? Are You a John, Too? - 24 avril, 2017 - 19:00

John was a developer. To be specific, he was a young, white, straight, young, self-taught developer. He wasn't rare, but he was special. John grew up with a couple parents, who paid for everything he needed. John regularly filled his belly, with the finest food his family could provide. John got every toy he asked for, once he learn that asking for 3 toys was a good way to get at least 1 toy.

John got average grades, but it was ok because [according to mum]; "he's just bored of schooling, and too clever". He walked right out of high-school and into a programming job. The pay wasn't great; only enough for a small apartment and modest groceries [for one]. In time he'd earn more.

Over the years, John quickly got bored of programming. He loved the thought of the career, but it was all so boring. He moved jobs every year or so, and only then when his idiot bosses stopped seeing how much he mattered to their company.

It was just as well, because most of the other developers he worked with were idiots too. Did they even know how to program? All they wanted to do was talk and ask questions and they weren't as interested in John's work as intelligent people should be. He did once work with a girl developer, though. She was so pretty for a programmer. I mean, if you can call CSS and HTML programming.

I am angry.

For the longest time, I was John. I thought every boring task beneath me, every other developer mediocre at best. I was my own hero, and my mom was right (albeit annoying) that I was brilliant. If only those around me could see this.

Continue reading %How Privileged Are Programmers? Are You a John, Too?%

Catégories: News dév web – A Free & Easy Website Builder - 24 avril, 2017 - 10:31

Advertise here via BSA

There are so many ways through which a business can start off their campaign in a newly designed competitive environment. As such, there is the need to bring in capable hands that can help facilitate better service delivery.

These services could be projected better by organizations that have studied the marketability trend which will promote profitability and employability of individuals in a socio-economic scene. In this regard, has built its capacity to address key issues in the area of business advertisement and socio-economic relevance. So some of the directions adopted by this organization can be traceable to the opportunities Wix is offering in helping organizations fulfill their duties. Some of these benefits shall be discussed in further details.

Benefits of using

Firstly, the experts or new users belonging to this arena will ensure that Wix makes use of aesthetics and advanced technology to help individuals build an irresistible web page. Most successful businesses are thriving on a unique knowledge that many Public Relations organizations help to generate for sustainability and relevance.

What maintains relevance is the freshness of ideas of varying concepts in a socio-economic atmosphere. With the emergence of Wix, there is a better chance for individuals to recognize new trends that can help facilitate productivity and profitability in their markets.

Secondly, the Wix Artificial Design Intelligence is an apparatus that is used to learn the services companies have outlined to offer the users. With a combination of text, layouts, and images, a website that has passed through the Wix process is well built. So, the ADI helps to provide features that are common to a web page, but such ideas are presented in an astonishing format.

Thirdly, this website builder allows users to become active participants in creating their own world. There is a great tension in the digital world when it comes to carving a niche for an individual’s company. This is because some level of expertise is required in the development of online platforms and websites.

But with the emergence of Wix, the problem has been resolved. All of the tools needed for describing a viable market are embedded in this software. So, users do not necessarily need an existing or prior knowledge to facilitate the development of an astonishing web page. This gives individuals the opportunity to present their ideas in a style that requires no consultation from web design experts.

On this note, all of these points are directions to the ways a business idea can be developed in a large proportion to facilitate economic growth. Advertisement as one of the forces that drive the sustainability of a market comes in handy when creativity and good technology are available for users at various levels. So, how a business will serve as a benchmark for competitiveness boils down to choosing the right advertising tools on an entirely different broad based platform.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Burst and Two New Providers of Free Photos - 24 avril, 2017 - 09:00

Although there’s a large market with suppliers of free photos, newcomers are always welcome. First, because you can never have enough image material as it is. Second, the topical variety can always use some reinforcements, even with that many providers. Especially Burst is very convincing here.

Burst: Free Photos From the Shopify Makers

You can tell that the new service Burst originates from the house of Shopify simply by looking at the URL. Burst is being operated as a subdomain under Shopify is an e-commerce platform for everyone, which already boasts more than 350,000 shop providers.

Burst is an expanded content marketing approach, where the e-commerce experts provide high-quality photo material for free under the Creative Commons Zero license, which can be compared to the public domain. Here, they are very careful, and thus, they are not the tenth clone of the third photo service.

The images on Burst are different from the ones we can find on other platforms in various, similar perspectives, regarding the topic, as well as their design. Shopify values professional quality. Images are added weekly.

If you want to be kept updated on new image material, you could subscribe to the email newsletter. However, neither that nor any other type of registration is required. If you find an image you like, you can download it right away.

The photos on Burst come in resolutions of 13 megapixels. At least, this was the default resolution during my test. Thus, the material is also suitable for print projects, as long as it’s not used for billboards and other large formats.

How to Find the Right Image

Accessing the photos can be done in multiple ways. For one, you could scroll through the images sorted by currentness directly from the landing page. A pagination at the page’s bottom end also allows you to browse through the photo grid. Shopify doesn’t use lazy loading. Personally, I like that, as I simply prefer a page-based structure. On top of that, most photo pages using it do load lazily, in the sense of slow, which would most likely annoy the majority of web users.

Another way to find the desired image is the free text search function. Here, the system searches the image catalog for previously entered tags. A mix of name fragments and different tags results in no result being found. This means that the search function isn’t all that smart.

If you like an image, it is likely that you will enjoy similar images as well. Here, it’s useful that the pictures are tagged, as the used tags are clickable, allowing you to generate another list of results.

The last way to go through the images is ready-made collections by Shopify, called “Popular Collections.” Here, you’ll find all images that can clearly be assigned to one particular topic, such as yoga, coffee, breakfast, baby, etc.

Clicking on a photo within the grid overview makes the site switch into a detail view, allowing you to immediately download the respective image. Here, you also get to see which photographer deserves your thanks. The link to the license conditions always leads to this default page, which shows the service’s general service conditions.

Burst: Detail View of an Individual Photo. (Screenshot: Noupe)

Aside from image material, Burst also offers business ideas, as well as short guides to their realization. For example, this can teach you how to sell coffee using the world wide web. Burst comes with the fitting image material for your respective online shop as it is.

Overall, Burst is an enrichment for your collection of free photo providers and should become part of your bookmark collection. Photo Tap Integrates Different Suppliers is more of a central access point for the offers of different providers of free photos than a provider of free pictures. Savvy? uses the APIs of existing services, like Unsplash or Pexels, to access their supply, and accumulates them on its platform. Here, you get to access the image supply either by using an infinitely scrolling landing page, which constantly fills the grid while scrolling or by using a free text search. Central Starting Point for Multiple Services. (Screenshot: Noupe) doesn’t have detail pages like Burst does. A click on an image in the grid makes the site display a larger version of the image. While hovering, a download button appears, also allowing you to download it immediately, without having to switch to the full-size view first.

You won’t find any tags or other categorizations. The operator states, that all photos are under the Creative Commons Zero license, allowing you to use them completely for free, for any purpose. I recommend checking the license for every single image, though. Typically, this does not take a lot of effort, as a click on the download button takes you to the respective image’s original page on the according source service as it is. There, you can make sure which guidelines you need to follow. is not a must have. Nonetheless, it can be useful to have it in your portfolio for a large-scale image search. It’s worth taking a look at either way.

Catégories: News dév web

Make Your Own Social Network, Game Server, or Knowledgebase! – Sourcehunt - 22 avril, 2017 - 18:00

It's time for our monthly hunt for new open source libraries to use and contribute to!

If you're new to Sourcehunt, it's our monthly post for promoting open source projects that seem interesting or promising and could use help in terms of Github stars or pull requests.

It's our way of giving back - promoting projects that we use (or could use) so that they gain enough exposure to attract a wider audience, a powerful community and, possibly, new contributors or sponsors.

Continue reading %Make Your Own Social Network, Game Server, or Knowledgebase! – Sourcehunt%

Catégories: News dév web

5 Web Design Trends to Follow this Spring - 21 avril, 2017 - 10:00

Trends in web design sphere are similar to trends in fashion. There are trends that are available only for people with a generous budget (aka those that buy items only from the first line); and there are trends that are available for the majority (like items from the second line). Today we are going to take a look at 5 trends from the second category: those that are widely adopted by web designers and developers these days.


Artistic approach never gets old, even in the era when abstract animations with a high-tech vibe like in Digital Design Days, dominate the Web. Illustrations of various sorts mark both web and app interfaces. Although the artificial solutions have their perks and awe effects, but we as human beings are craving for the personal touch of artistry that can be easily found in artworks.

It can be a part of a splash screen like in Raiseyourwebsite that establishes the general mood and immediately draws everyone in; or it can be a primary medium for building an overall environment like in Thirsty Planet where fully illustrated surrounding that is set in motion creates the whole buzz.

Image source – Raiseyourwebsite

Image source – Thirsty Planet


Although Pantone has chosen green, aka Greenery, as a color of 2017, it seems that the pastel pink, the tone that hit all the runways and won over Gucci and Oscar de la Renta takes over this spring. Beautiful, gentle and utterly charming, it goes perfectly well with different shades.

Both Victoire Douy’s and Cedric Pereira’s personal websites open with this tone. It makes the first impression incredibly voguish.

Image source – Victoire Douy

Image source – Cedric Pereira

Geometry + Asymmetry

Both geometry and asymmetry are two main trends that rule the roost nowadays. These two directions open tremendous opportunities to the creative folks despite being straightforward and rather primitive. How can a bunch of basic triangle shapes or uneven layout of content blocks force the design to stand out, to say nothing about attracting visitors? Take a look at two examples that are featured below, and you will see. This pair can do wonders. In tandem, they form a close and fruitful partnership resulting in an inspiring and harmonious environment.

Make feels fresh, crisp, robust and techy: modest coloring, spacious layout, and boxy vibe nicely interact with each other.

Image source – Make

Unlike the previous example, Taste of Summer takes another approach. It is here where the lavish and savory artistry meets the pragmatic and relatively insipid branch of mathematics.

Image source – Taste of Summer

Small subtle effects

It is hard to find a website without any dynamic effects today. Static interfaces are no longer in fashion. Everyone wants to astound users with interactive, meaningful and in some way playful experience. While WebGL, Three.js and some other powerful high-end experimental libraries can be beyond your means (since they are items from the first line), little subtle effects are within any budget. As a result, bouncing, shaking, swinging, fading, sliding, zooming and of course, parallax enliven pages and please visitor’s eyes.

Both Fowec and Atlis go for a businesslike vibe; nevertheless, tiny subtle effects make these interfaces less formal and more engaging.

Image source – Fowec

Image source – Atlis


The trend started in 2016, and it is still relevant. The technique is simple: just provide tangible indentations along the perimeter of a page. In this way, your users will naturally focus their attention on the important content like portfolio pieces, slogan, etc.

Portfolio of Erminando Aliaj adopts this approach in a creative manner whereas NEORig strongly relies on a clean and solid structure. Both interfaces benefit from the wide white edges that place the content into the limelight and at the same time strike an organizational balance.

Image source – Erminando Aliaj

Image source – NEORig

Which trends are you into? Do you prefer more creative solutions or vice versa stick to the pragmatic and robust ones?

Catégories: News dév web

40 Photoshop Add-ons: Discover Actions, Filters, Plugins, and Panels - 20 avril, 2017 - 10:00

Photoshop can be expanded in nearly every way imaginable. There are the large plugins, effectively supporting Photoshop as independent programs, actions that act out previously defined command sequences, and the panels, which offer functions in their own control panels. This turns an already powerful image editor into a far larger, customized program.

ON1 Effects 10.5

Photoshop plugin with dozens of filters, presets, frames, and textures for the realization of an image style.

© ON1


Both as an addon, as well as directly within the browser: Flaticon not only allows for the selection of high-quality icons in flat design but also provides a rudimentary customization.

© Flaticon


Composer can refresh multiple layers with a single click. This allows you to change the position, the layer styles, visibility, or everything at once.


CSS3 Plugin

A plugin that converts layers into CSS3. Perfect for web designers.

© CSS3Ps

Long Shadow Generator

A Photoshop panel to create loooooooong shadows with.


App Design Mockups

If you have created the most beautiful app interface and would like to see how it looks on your phone, this is the page for you.


Isometric Transform Tool

Isometric is a free Photoshop plugin for the transformation of individual shapes in isometric perspectives.


Nik Collection

A while ago, Google released the Nik Collection plugin package for free usage. This includes a total of seven treasured add-ons.

© Google

Polar Projection

This plugin turns panorama shots into small planets or platforms.



At the touch of a button, this Photoshop panel provides us with display options, regarding aspects like an element’s measurements, or its colors, for instance.

© Chrometaphore


A single click turns a pixel graphic into a path or vector.



This adds a massive palette of tools for realistic drawing and painting to Photoshop.


Color CC

No direct add-on for Photoshop, but an ingenious service that adds color schemes to the service that can be implemented into the program.

© Adobe

Subtle Patterns

Subtle patterns to fill backgrounds or use as a texture.


Make it flat! Turn three-dimensional graphics into 2D-style picture elements.


HDR Aktion

Photoshop action that can create an HDR simulation from a single photo.


Black & White

Action for Photoshop, allowing you to create altered black-white shots at the push of a button.


Action to turn a regular photo into a slightly bleached shot with reduced colors.


Blue Evening

Dark, blue shadows and yellow highlights are the results of this Photoshop action.


Forest actions exclusive

Color variants in yellow, green, or beige tones, thanks to the action Forest Action.


Remove the banding of Photoshop Gradients

When drawing gradients, it often comes to level effects. This action helps to reduce them.

© Jeff Broderick

Action Preset

Different free actions for the realization of retro effects.


Engraved Illustration Effect

Here, a photo is turned into an engraved graphic. A complex, but free action for Photoshop.


Action 3D

This action generates a simulated 3D version of a photo in a red-green style.


Gum Bichromate Print

Create an old, yellowed, and dirty shot at the flick of a switch.


iOS Blur

A simulation of the iPhone screen’s typical blur effect.


American Wood Type

The result of this action looks like old paint that dried on wood and is already crumbling in some spots.

© Retro Supply

3D Isometric Map Mockup

Action for the design of 3D map material in a comic style.


Stitched Denim Generator

An action that whipstitches a piece of “denim” in a creative way.

© Graphicsoulz

Matte Photoshop Action

This action turns colorful images into a heavily desaturated version, creating a pretty retro look.


Wallpaper Maker

Here, a wallpaper is automatically exported into plenty of formats and resolutions.


ScreenShot Photoshop Action

Simulation of a screenshot from a diagonal point of view.

© Vasjen Katro


Artistic effect that creates a painted style.

© Nuwan Panditha

Layer to SVG

Conversion of vector graphics into the SVG format.



Another action to reduce the so-called bending.


Free Glitch Photoshop Action

A short image interference in video games is called a glitch. This action simulates this exact effect.

© Syed Faraz Ahmad


A typical duotone effect. Two colors colorate photos in creative ways.

© Zi Jewel

Vintage Photo

A free photo effect that makes for a cool vintage look.


3D Action

A flat 2D graphic is turned into a 3D shape via a button push.


Free Color Moderator Photoshop

These actions result in lovely color plays. Duotone effects or bleached versions are available to choose from.

© Photoshop Action

Catégories: News dév web

Introducing the New Installer for Be’s 250+ Awesome Pre-built Websites - 19 avril, 2017 - 16:40

Advertise here via BSA

The New Be Pre-Built Installer

The old Be prebuilt-website installer got the job done, but it wasn’t entirely free of issues. Installing a website was easy, but the actions you had to take before doing the install were not all that user friendly. Quite simply, neither the UI nor the UX were the best.

The old Be pre-built website installer lacked some important features.

  • Searching for a pre-built website was manual and cumbersome; and you had to move back and forth from the presentation page to the admin area to zero in on the website you wanted.
  • The old website installer didn’t tell you ahead of time which plugins you might need for a given pre-built website; or which ones were already installed.
  • Insofar as importing a pre-built website was concerned, it was an all-or-nothing affair.

Muffin Group fixed all of that before releasing their new pre-built website installer.

    Muffin Groups new Be pre-built website installer.

The new installer works like a charm.

  • Now you can view thumbnails of all 250+ prebuilt websites in the admin area. No more scrolling, or checking back and forth. To preview or select a pre-built website, just click on its thumbnail depiction.
  • The new filtering feature allows to search by category from the admin area. Filtering by category lets you quickly zero in on candidate pre-built websites, so you can preview one or more before making a final choice. This will be a great help as the number of pre-built website continues to increase.
  • The new installer tells you which plugins you’ll need for the pre-built website you’re about to install; so it will perform exactly as in the preview. It will also tell you which plugins are already installed, and give you the opportunity to install any which are not – a real time saver.


See which plugins a pre-built website requires to perform as anticipated.


  • You also have the advantage of being able to import only what you need from a pre-built website; whether it is the content, the default pages, page options, or all the above.

                        Install what you need, and only what you need

Check out this video to see it in action:

Check out Be’s Latest Pre-Built Websites

Be Sports Club

Just about any gym would want their website to feature a modern design like the one featured in this Be Sports Club pre-built website. The neat fade-in animations you’ll see when first entering the site are especially engaging. They are followed up on following pages by special parallax effects.

Be Productions

Be Productions relies on a smooth parallax scroll effect to help deliver its message. This is an idea pre-built website to build upon when creating a site for a motion graphics studio, or an advertising agency. The dark background serves to emphasize the brand’s colors and message.

Be Diet

There’s no better way to showcase great food than through large, high-quality images; images that nearly look good enough to eat. Muffin Group designed this website to help your clients present their culinary talents in beautiful and delightful ways. Be Diet also features several compelling, yet subtle, special effects.

Be Boutique

If you think it’s about time you tried using a background video in a website’s home page, Be Boutique shows you the way. Using video to help present your message can be very effective, without being gaudy or flashy. The challenge is to choose the right video; incorporating it is the easy part.

Be Stone

With a pre-built website like Be Stone in your designer’s tool kit, you should never have to worry about creating a dull, uninspiring, or flat-out bad looking website again. Neat animations contribute to a final product that features the look and feel you want.

Be Guest House

This Be Guest House pre-built website will be a great help in presenting a guest house or cabin you want to rent or sell. It’s also a good starting point for a hotel’s website, or for a realtor offering condominium sales or rentals.

Be Wildlife

Be Wildlife is a good example of why there will always be a place for fixed layouts. This pre-built website could be destined for a wildlife photographer’s studio, but it has many other potential uses as well. Notable features include a slider effect, reinforced by a parallax effect as you scroll down.

Be Restaurant

This dashing restaurant design practically compels a visitor to pick up the phone and make a reservation. A nice slider effect, together with its overlaid design elements, gives Be Restaurant a dynamic look; one that you are unlikely to find in any other restaurant’s website.

Be Furniture

If you have a client that sells furniture, this is a great looking design to work with. Be Furniture utilizes an attractive slider effect and large images to showcase your client’s products, and by using a hip, modern, and uncluttered design approach.

Be Theme’s Key Features

  • The abundance of features that make Be so popular, include its 250+ pre-built websites, that address nearly every website niche you can think of.
  • The Muffin Builder and Options Panel lets you customize a pre-built website as you see fit, without any need for coding.
  • When you decide to build a page from scratch, Be’s Layout Configurator makes doing so a piece of cake. Add some added spice and variety to your products, instead of having all your pages look like they came from the same mold.
  • Add important details and useful functionality to your website without coding by using Be’s 200+ Shortcodes.
  • Advanced Typography Options permit you to use Google fonts, or upload your own.
  • Incorporate special effects that everyone loves, including a smooth Parallax Effect and Video Background. Be’s special effects make creating awesome-looking pages easy.
  • Once you take ownership of a Be license, Lifetime Updates, including future monthly releases of new pre-built websites are yours for free.


When you purchase a Be Theme license, you can expect solid support. In addition to the top-notch support team, a selection of video tutorials will help you along the way. When you join up with Be, you’ll become the proud owner of a Themeforest top seller, and a product that has sold over 62,000 licenses.

Find out more about Be Theme here.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Email is Not Dead: 33 Free Newsletter Templates for Daily Use - 19 avril, 2017 - 10:00

Although messenger services are a thing: Newsletters are still in fashion. The share of recipients that receive emails on mobile devices is increasing. Thus, using extraordinary newsletter templates in the background is even more important. The keyword is responsive. “Free” is another one. We have compiled 33 sources on the topic.

7 Free Email Templates

A total of seven responsive newsletter templates.

© Stamplia

Building Templates

Free online tool for the creation of newsletter templates.

© Campaign Monitor

Email Template PSD

Blue and gray newsletter theme. Its colors can be altered slightly.

© Asif Aleem

Responsive Email Template

An email template in three different sizes.


Responsive HTML Templates

35 responsive email templates you can download immediately.


Responsive Email Template

Email template as a PSD and HTML version.

© Marco Lopes

HTML & PSD Email Template

An HTML version of this email template is supplemented by a PSD version, allowing for easy adjustment of colors and shapes.

© Tarah S

Email Template PSD Set 3

Three newsletter templates, including the Photoshop files.


Green Village HTML Template

The ZIP contains the PSD file, as well as the HTML source code.


Flat and Responsive

Responsive newsletter template in flat design.



Download code for a responsive newsletter design.

© Derek Punsalan

Elena Email Template Free PSD

A free version of the PSD for the Elena email design.


Free PSD Email Template

Red newsletter template with fine line-style icons.

© pixel hint

BOXI Email Theme

Email template with differently sized boxes.


Newsletter PSD Template Set 1

Three more free templates. Newsletters come as an open PSD Photoshop file.



Clean code fundamentals for different designs.

© Cerberus

Slate: Responsive Email Templates

Here, five pre-tested email templates that work with any email client are promised here.


An entire HTML email framework for you to build your design on.


Responsive Email Templates

Different templates as a basis for a newsletter design.


Responsive Email Patterns

A collection of simple, basic layouts in email design.

© Responsive Email Patterns


Discover different responsive email templates here.


Free Newsletter Template

This email template is compatible with 34 clients. A PSD file is offered as well.


Email Template: Malibu

Free newsletter template Malibu in green and blue.

© AWeber

Free Graphic Design Templates

Free newsletter layout in the Illustrator, InDesign, Word, and Apple Pages format.


Pook: Newsletter

A beautiful modern, graphic set for a newsletter design that is easy to customize.



An HTML responsive email template with a large header.



Free email newsletter template Kreative (compatible with MailChimp and Campaign Monitor).

© ZippyPixels

Freebie: The Passion Email Template

Elaborate newsletter template in a subtle red-blue color scheme.

© PixelBuddha

Management Templates

Newsletter template in five color variations.


Responsive Email Newsletter Template

Newsletter foundation with icons and smartphone as a realization example.

© Themesforce

Halloween Email Template

Theme-related design for a Halloween newsletter.


Ecommerce Templates

7 Ecommerce-templates with extracts from the latest order or special offers.


Free Email Template

Nicely designed newsletter with a lovely background graphic.

© Aurélien Salomon

Catégories: News dév web

Getting to Know and Love Xdebug - 18 avril, 2017 - 19:00

It's been 15 years since Xdebug first came out. We think this is the perfect opportunity to re-introduce it to the world, and explain how and why it does what it does.

Xdebug is a PHP extension (meaning it needs to be compiled and installed into a PHP installation) which provides the developer with some features for debugging. Those include:

  • stack traces - detailed output of the path the application took to reach a given error, including parameters passed to functions, in order to easily track the error down.
  • a prettier var_dump output which produces color coded information and structured views, similar to VarDumper, along with a a super-globals dumper
  • a profiler for finding out where the bottlenecks in your code are, and the ability to visualize those performance graphs in external tools. What this results in is a graph similar to that which Blackfire produces.
  • a remote debugger which can be used to remotely connect Xdebug with running code and an end-client like an IDE or a browser to step through breakpoints in code and execute line by line of your application.
  • code coverage which tells you how much of your code was executed during a request. This is almost exclusively meant to help with unit tests and finding our how much of your code is test-covered.
How do I use it?

Xdebug comes with a detailed installation page which handles most if not all use cases, but if you'd like to play with the functionality presented below, we recommend using Homestead Improved which comes with the extension pre-installed and activated.

With modern IDEs and Blackfire, is there even a need for Xdebug?

IDEs do provide good code lookup functionality, so the link format functionality's usefulness can seem questionable. There's also loggers of all kinds now which can handle errors and exceptions. Likewise, function traces and profiling are done really well in Blackfire. However, file link formats are just one part of Xdebug, and using Blackfire has its own hurdles - installing the extension, setting up the keys, and then paying to keep trace history. Loggers also need to be used with a lot of foresight, and aren't very easy to add into an application later on.

There's more to Xdebug than just this, though - it's still required for proper unit testing (testing frameworks depend on it for code coverage reports), it's far from easy to get remote break-point debugging going via other means, and it's a tool so old and stable it's been ironed out to near perfection.

If your current tools can handle everything it offers or you don't need the features it offers then of course, there's no need for Xdebug, but I've yet to start a single project that could be completed just as efficiently without it.

Let's Try It Out

I'll assume you have a working Xdebug installation at this point. If not, please consider using Homestead Improved.

Let's make a new project folder with a simple index.php file, and echo out a non-existent variable like $foo:

<?php echo $foo;

This is what we get:

Turning Xdebug Off

Screens like these are so ubiquitous these days, and such a common default, that most people don't even realize this is already Xdebug-styled. To prove it, let's see how it looks without Xdebug. To disable Xdebug, we edit the file /etc/php/7.1/fpm/conf.d/20-xdebug.ini in Homestead Improved, and comment out the first line:

; xdebug.remote_enable = 1 xdebug.remote_connect_back = 1 xdebug.remote_port = 9000 xdebug.max_nesting_level = 512

We need to restart PHP-FPM afterwards:

sudo service php7.1-fpm restart

Continue reading %Getting to Know and Love Xdebug%

Catégories: News dév web

SEO: How to Optimize Your Content for Voice Search - 18 avril, 2017 - 11:00

The era of voice assistants has come. It’s time to take this technology seriously and to optimize your content for voice search.

Suddenly, it Works: the Quick Rise of Voice Assistants

Surprisingly, neither Siri nor the Google assistant were the ones bringing the breakthrough for voice-based searching. It’s Amazon’s Alexa who ultimately turned the market around. I personally didn’t keep an eye on that technology at all, but the US Americans keep buying Alexa like hot cake.

Samsung is up next with its approach, which will be called Bixby, and come with a large array of app integrations from the get go. Google also follows after Alexa and shows its Home Assistant. It may take another year, but at last, voice controls, and voice search will have become the norm.

For a couple of years now, the number of voice searches has been increasing continuously. However, the primary focus has always been on mobile devices. Alexa and the Home Assistant will definitely cause some serious momentum here.

Aside from the increased acceptance for people that talk to their smartphones, the technological progress is the primary factor responsible for the strengthening of voice assistants. By now, the processing power of mobile devices is high enough to handle the bandwidth of the internet, as is the processing power of the server farms that turn the voice input into actual data using artificial intelligence to generate logical answers.

The sub-type of machine learning that gets us this progress is called deep learning. Via neuronal webs, the machines learn to improve their answers on their own – in a way that’s similar to how the human brain does it.

Voice Search Works Like a Conversation

For the optimization of our content, and the detection and processing via voice-controlled searches, we have to acknowledge a couple of changes. Above all else, voice searches are no searches for one or two keywords, in contrast to desktop searches, or text-based searches in general. Voice search is always done as a complete sentence, mostly as questions.

Conversation is the Natural Way of Mining for Information.

Instead of “Weather Freiburg,” you ask “Hey Siri, how’s the weather in Freiburg today?”. Of course, this is a poor example, as Siri doesn’t look this answer up on the web. But I think this clarifies the principle.

Thus, pages that have this exact question, and the respective answer in mind when creating their content give the best results. So, soon, we will not only optimize our content for one or two keywords, but also for key phrases which, in the ideal case, match the asked questions.

Relevance is Even More Relevant For Voice Search

When answering voice-controlled searches, giving the most relevant answer is even more important to the search engine. After all, it can’t pump out 500 pages of results and leave the rest to the user, but instead, it has to decide on the most relevant ones, at least if it wants to answer via speech as well. It’s also to be assumed that answers like “I found this on the web” won’t be around for too long anymore. Even here, expectations are rising.

So this will come down to a content race. The one with the most valuable content wins. Our current situation is similar when looking at the featured snippets. Those are the information boxes that are on top of the search result list, which are selected by Google, without their operators having any way of influencing that.

Google’s Featured Snippets: Spot Zero in the SERPs.”No way of influencing it” is not entirely correct, as there is no direct, but an indirect way of increasing the chances of being included in a featured snippet. This way is the following: Provide highly valuable content.

High-quality content is factually impeccable and proven. It contains supporting visuals, such as images, videos, or infographics. If it makes sense, statements are supported by extracts from publicly accessible databases. The topic is always covered to exhaustion so that there is no reason for the searching users to look into further sources.

This is how content optimization for featured snippets works, and it applies to voice search as well. There’s another parallel. Google seems to prefer question-and-answer pages when filling their featured snippets. Thus, I’d bet that this will apply to voice search as well, as covering both questions and answers doesn’t get much easier than that.

Short Questions and Short Answers Are to be Preferred

Especially looking at conversation-based interfaces, checking your content on comprehensibility is advantageous. Conversationally, short, concise statements are a good pick. Long, convoluted sentences lower the chances of being relevant for voice searching.

This applies to questions in the same way. Voice assistants are treated with short questions. “How is,” “Where is,” “Who has,” and so on. Short questions are asked, so, in the ideal case, they are answered in an equally short fashion. If your answer has to be more complex, divide it into list items. At least for featured snippets, it has been proven that the tags ol, and li are included in plenty of the highlighted snippets. In return, we can assume that Google prefers this type of presentation.

Another important aspect is the optimization of your page for mobile devices. After mobile-friendly has become a ranking factor, this should be one of your priorities as it is. Under the viewpoint of voice-based searching, it becomes even more significant.

Conclusion: Do it

If your website still needs optimization in the named aspects, do it now. The rise of voice assistants is more likely to speed up than to slow down. The required changes are partial of structural nature, and not that easy to take care of. So, use the remaining time to improve your starting position.

(By the way: This article contains a couple of interesting statistics on the topic.)

Catégories: News dév web

Building a Social Network with Laravel and Stream? Easy! - 14 avril, 2017 - 19:00

In the previous post, we saw how to add the follow functionality to a Laravel app. We also looked at how to configure our app to use Stream. This part will focus on:

  • configuring our models in order to make it possible to track activities.
  • the different types of feeds that Stream provides.
  • getting feeds from Stream.
  • rendering the different types of feeds in a view.

Activity Fields

When using Stream, models are stored in feeds as activities. An activity is composed of at least the following data fields: actor, verb, object, time. You can also add more custom data if needed.

  • object is a reference to the model instance itself
  • actor is a reference to the user attribute of the instance
  • verb is a string representation of the class name

Let's define the activity verb inside our Post model:

[...] class Post extends Model { [...] /** * Stream: Change activity verb to 'created': */ public function activityVerb() { return 'created'; } } Feed Manager

We'll leverage the FeedManager to make our app lively. Stream Laravel comes with a FeedManager class that helps with all common feed operations. We can get an instance of the manager with FeedManager which we set as the facade alias earlier inside the config/app.php file.

Pre-Bundled Feeds

To get us started, the manager has feeds pre-configured. We could also add more feeds if our app needed them. The three feeds are divided into three categories: User Feed, News Feed and Notification Feed. The User feed, for example, stores all activities for a user. Let's think of it as our personal Facebook page. We can easily get this feed from the manager.

For this application, however, we are more interested in getting notifications for posts created by people we follow and also notifications for new follows, thus we'll just stick to the News Feed and the Notification Feed. For more information on the other types of feeds and how to use them visit this link.

Follow / Unfollow Functionality – Using FeedManager

We need to update the follow and unfollow methods inside the FollowController, to take note of the FeedManager:


[...] public function follow(User $user) { if (!Auth::user()->isFollowing($user->id)) { // Create a new follow instance for the authenticated user Auth::user()->follows()->create([ 'target_id' => $user->id, ]); \FeedManager::followUser(Auth::id(), $user->id); return back()->with('success', 'You are now friends with '. $user->name); } else { return back()->with('error', 'You are already following this person'); } } public function unfollow(User $user) { if (Auth::user()->isFollowing($user->id)) { $follow = Auth::user()->follows()->where('target_id', $user->id)->first(); \FeedManager::unfollowUser(Auth::id(), $follow->target_id); $follow->delete(); return back()->with('success', 'You are no longer friends with '. $user->name); } else { return back()->with('error', 'You are not following this person'); } } [...]

This code inside the follow method lets the current user's timeline and timeline_aggregated feeds follow another user's personal feed. Inside the unfollow method, we unsubscribe from another user's personal feed.

Continue reading %Building a Social Network with Laravel and Stream? Easy!%

Catégories: News dév web


S'abonner à agrégateur - News dév web


Une question, une remarque ?
Une demande de devis ?


A propos...

Yves Bresson, ingénieur en informatique, consultant freelance, spécialisé dans le développement web (CMS, PHP, Laravel, Ajax, jQuery, Bootstrap, HTML5, CSS3) et d'applications mobiles (iPhone, Android). Voir le profil de Yves Bresson sur LinkedIn