News dév web

Fresh Tools For Designers and Developers in June 2017 - 28 juin, 2017 - 10:00

Great tools and online services make the work of designers and developers a lot easier. They allow you to make many workflows simpler and more efficient. This small collection stirs creativity and provides solutions to various problems.

New Tools For Designers and Developers

So, here’s my list of the newest, and most exciting tools that I found for you:

1 – Authentiq Modern User Access With Multi-Factor Authentication.

Authentiq offers a multi-factor authentication that does not require any passwords for the login on websites. AuthentiqConnect allows your users to decide when to increase their security if they want to add a second factor or go without a password. The service is compatible with OAuth 2.0, and OpenID Connect. The service is freely usable up to 500 active users.

Visit Website » 2 – Better Font Finder

This interesting tool allows you to group similar Google Fonts, and find the optimal font for your project using different filters. Grouping fonts with similar characteristics will get you to the desired result a lot faster.

Visit Website » 3 – Vectr

Vectr is an easy and intuitive way to create vector graphics. You can either use it online or install it on your computer. You can get the app for Mac, Windows, Linux, and Chromebook. Vectr is free to use. A WordPress plugin was created as well.

Visit Website »

Vectr – Embedded Graphics Editor (Free, WordPress) →

4 – Data Gif Maker

Google’s new project allows you to create a simple Gif that compares two elements. All you need to do is fill in a simple form, add data points, and select a color scheme. You’ll receive a visual data element to embed in websites.

Visit Website » 5 – Colorion Gradient Buttons

If you are done seeing the standard flat buttons, this is a really neat alternative option with gradient effects in all kinds of colors.

Visit Website » 6 – Buttercup

Buttercup is a free open source password manager for Max, Windows, and Linux. A browser add-on for Firefox is available as well.

Visit Website » 7 – Word Counter

Word Counter calculates the number of characters, words, or paragraphs in real time. Just enter a text in the box, or copy and paste texts from other pages. You’ll get to see the statistics right away.

The tool is also able to display the required character count for social networks like Twitter and Facebook. Additionally, it’s possible to show the correct character count for the Google meta description.

Visit Website » 8 – Trendy CSS Text Shadows

More and more web projects go away from the flat design and want to use cooler effects. Here, the fascinating text effects provided by Mixfont are a perfect pick. The CSS of each effect can be downloaded for free.

Visit Website » 9 – docsify

docsify is a smart little tool able to create a documentation website for Github projects. It loads your markdown data, resolves it, and displays it as a website.

Visit Website » 10 – Free Minimalistic Phone Mockups

The Free Minimalistic Phone Mockup comprises Sketch and Photoshop files and comes with a very high resolution of 6962 x 4350 pixels. Background and telephone colors can be adjusted.

Visit Website » 11 – Emojify

Emojify is a different kind of link shortener. If you don’t want to deal with standard URLs anymore, you can also have your shortened links be displayed with neat emojis.

Visit Website » 12 – Omg-img

You can write each of the provided icons directly into your HTML code, and the tool will find the right pictogram and adjust the colors and sizes. The free usage requires a backlink. You can either use the tool online or download the app for Mac or Windows.

Visit Website » Conclusion

The presented tools and services should be interesting to a lot of designers and developers. Some tools provide a significant added value, like Authentic, Better Font Finder, and Vectr. I will take a closer look at a couple of them.

Catégories: News dév web

Tool Tip: The Really Good Email Design Checklist - 27 juin, 2017 - 10:00

Email design is not an easy task. Especially the many, oftentimes undercooked, rendering engines are what makes it so difficult. On top of that, there’s also the problem that, in terms of content, emails need to get to the point as fast as possible. Thus, this challenge is not a purely design-related one, but a marketing challenge as well. The following infographic provides – what I believe is – a complete overview of everything you should keep in mind.Marketing is a domain that too many people believe they had knowledge on. In that regard, it can definitely be compared to design. Anyone can do that too. Now, if these two misconceptions unite in the one person that is supposed to create an email for your business, you are in a pretty bad spot. So, don’t be too surprised if the number of people unsubscribing from the newsletter is rather high, while the number of people turning into customers is very low.

But you can’t just ram the required knowledge into someone. If you want to stay away from commissioning an expert, or if you are not an expert in both categories yourself, at least follow the email design checklist by CampaignMonitor, which you will find at the bottom of this article.

Roughly summarized, of course, today’s email is responsive and minimalistic. This allows mobile clients to comfortably read them, and mobile clients are already dominating emails. 53 percent of all of today’s emails are first opened on a mobile device.

As clear and smooth as the design, is how you should design the texts. Prose is undesirable. Get to the point. People don’t have time anymore. At the end, there’s always a clear call to action, to prevent readers from being left indifferently, asking themselves what your email wants them to do.

If possible, personalize the emails. Here, you should not only focus on the individual reader that you will address with the proper name. Instead, you should differentiate the content for different groups of readers, like the ones that have never bought something from you, the ones that have bought something once, and those that have already bought something several times. Of course, other differentiations using dynamic content are possible as well. You know your readers better than I do.

For the creation of your strongly selling email, I have already recommended the tool a few days ago.

Source: The Really Good Email Design Checklist by Campaign Monitor

Catégories: News dév web Creating Beautiful Email Newsletters Made Easy - 26 juin, 2017 - 10:00

The free web app makes newsletter design as simple as writing a letter in Word. Word-Like Newsletters

Email newsletter design is not an easy thing. There are ways to simplify the process, but the effort needed is never low. The main reason for that is the variety of different technological implementations in the various mail clients. In contrast to browsers, here, everyone likes to stick to themselves.

That’s one, but not the only, reason why it’s important to be able to rely on a technologically stable, and compatible solution. So, if your main goal is to get your content to the people, rather than a completely striking newsletter design, you shouldn’t miss out on the free tool by Sendmark.

Te editor is a part of the Sendmark feature set, but it is also available as a web app. Developers that want to implement their own email editor can license The editor’s key features are its intuitivity, and being significantly easier to understand than the Editor from Mailchimp.

How to Build a Newsletter Using

Getting started with is simple. First, select one of the templates. There are seven different ones available. At a glance, this doesn’t seem like a lot, but that’s not an issue as they are a raw frame anyways, allowing you to fully customize each of them. Looking at it like this, the templates are nothing more than structural design patterns.

Once you’ve selected a template, the editor opens right away. On the right, you’ll find the chosen template in the WYSIWYG view, with the toolbox being on the left, with a dark background. The toolkit is divided into the sections content, structure, and settings.

In the settings, you choose options regarding the entire email, such as the color scheme, line height, as well as fonts, and their sizes for the different text elements.

Under Structure, you’ll find six basic structures, each representing a different column layout. Use the mouse to drag the desired structure from the toolbox into the editor, right to the place where you want the structure to be provided. You’ll get a stripe across the entire width of the editor window. Within that, there are ashlars highlighted in blue, with an icon that is commonly used to depict downloads.

These blue fields are where you should drag the elements from the content area. This can be text, images, animated GIFs, buttons, dividers, spacers, social media integration, videos, or HTML source code. The content block GIF is equipped with a Giphy integration, so you can search for, and integrate fitting animations right off the bat. The content block HTML provides an HTML editor within the toolbox. Any changes made to the source code are immediately displayed in the WYSIWYG view on the right.

In-page Editing of Text Elements. (Screenshot: Noupe)

Here, there is no defined scheme to follow step by step. At any point, you can add another structure template to any desired spot, and fill it with content. The individual structural elements can also be moved to their new position via drag & drop in the email. It is possible to easily duplicate or delete both individual content, as well as entire structure templates.

The content element spacer serves as a separator between the templates. The desired space is adjustable using the mouse. Each element tells you which actions can be triggered at this element when hovering above it with the mouse. Normally, these are move, duplicate, and delete. After clicking an element, the toolbox selection on the left opens, presenting further editing options that are fitting for the particular selection.

If you are not sure if your design still works after a bunch of changes, you shouldn’t be afraid of clicking “Preview & Testing” in the top left above the WYSIWYG view. Here, you are also able to switch between the desktop and the mobile view.

Images that you add to the layout are loaded into the producer’s AWS cloud, for the WYSIWYG view to work. Once you’re done and satisfied with your newsletter, click “Save & Download.” creates a Zip file, which contains the newsletter as an index.html, as well as all used images packed into a subfolder called Images.

Conclusion: Creating Working Email Newsletters Doesn’t Get Any Easier is a modern, easy to use tool that turns the creation of email newsletters into a trifle. Anyone can use this without any accidents. And, on top of that, it’s free.

Catégories: News dév web

Little Snitch: What WordPress Theme is That? - 23 juin, 2017 - 10:00

Going through the WordPress theme index is nice and all, but most of the time, we end up finding the fascinating themes out in the wild. Unfortunately, it is not always easy to tell which setup is hidden behind the attractive appearance. A simple web app changes that.

What WordPress Theme is That?

Using the slim snooper called “What WordPress Theme is That?”, you can figure out which theme is responsible for the layout of any website you like. On top of that, the tool also checks which plugins are being used. This way, you don’t only know the visual cornerstone, as you also get to look how the respective website provides its functionality.

The Application Doesn’t Raise Any Questions. (Screenshot: Noupe)

However, the tool is not perfect. Heavily modified designs can not be assigned to a theme anymore, resulting in no information being displayed in these cases. The determination of the used plugins is not flawless either. Whether the app finds it or not depends on the method and aim of the plugin. Thus, you shouldn’t rely on the list. The chances are high that there are more add-ons working in the background than you get to see.

Using the web app is as simple as using Google. Just copy or enter the URL of the website you want to check into the centered input field, and click the magnifier icon, or confirm your entry via enter or return.

The List of Ingredients of One of My Blogs. (Screenshot: Noupe)

Subsequently, you’ll receive an overview of the data that the web app was able to draw from the website. For my private blog, it found quite a bit, but it didn’t find anything for Noupe. Although there is a chance of not receiving any information, “What WordPress Theme is That?” is a useful starting point whenever you need to solve these types of questions. Of course, you could also go hunt for the name of the theme in its HTML and CSS source code, but the web app is significantly faster.

Catégories: News dév web

10 Fresh and Free Plugins for Your WordPress - 22 juin, 2017 - 10:00

We all love our WordPress and the option of quickly extending its functionality. Thus I went for a deep dive into the ocean of the public plugin repository and found ten cool free plugins with useful functions for your WordPress. Enjoy trying them out.

1 – Contact Form 7 Multi-Step

The plugin is an expansion for the popular contact from plugin Contact Form 7. If you happen to have created contact forms with a lot of fields, “Contact Form 7 Multi-Step” makes for more clarity by turning your form into a multi-step form.

Contact Form 7 Multi-Step (Free, WordPress) →

2 – Custom Product Stickers for Woocommerce

The name says it all: set yourself apart from your competition using unique, very customizable stickers on your product images. You can easily edit the color, text, and placement of the stickers, allowing you to create a unique WooCommerce shop.

Custom Product Stickers for Woocommerce (Free, WordPress) →

3 – Contact Page With Google Map

An easy and efficient way of designing independent contact pages with a cool Google map.

Contact Page With Google Map (Free, WordPress) →

4 – Tabbed Editor

The Tabbed Editor is your anti-box charm. If your “Create Post” page is filled to the brim with plenty of meta boxes for tons of possible functions, this plugin clears it up by only displaying boxes that are not needed if you click a particular button. Highly recommended!

A Screenshot:

Tabbed Editor (Free, WordPress) →

5 – WooCommerce Fly Cart

A unique shopping cart for WooCommerce shops. Whenever a button like “Add to cart” is clicked, this Ajax shopping cart window opens. Of course, the design can be adjusted to your needs.

WooCommerce Fly Cart (Free, WordPress) →

6 – Secure Frontend Ajax Login

You have a member website or a WooCommerce shop? If so, you should consider this plugin. It provides you with an Ajax-based login form for your frontend. After a click on a “login button,” the login window opens and allows for logins without having to leave the website.

The option to guide users to a specific page after the login is another goodie.

Secure Frontend Ajax Login (Free, WordPress) →

7 – Custom Landing Pages – LeadMagic

After installation, you have to register for a free account at RegistrationMagic, allowing you to use the plugin for free from that point onwards. This way, you get to create and design new landing pages in no time.

Custom Landing Pages – LeadMagic (Free, WordPress) →

8 – Nzymes

You want to be able to execute PHP code in your posts or pages? This tiny plugin allows you to do just that.

Nzymes (Free, WordPress) →

9 – WooAdvance Settings

This plugin contains additional, useful settings for your WooCommerce shop. For instance, you can easily alter the amount of displayed products in a column.

An Extract of the Possible Settings.

WooAdvance Settings (Free, WordPress) →

10 – Accordions or FAQs

If you want to create an FAQ page in your project, this plugin is just what you’re looking for. It provides plenty of customization options, helping you find a design you like. Watch the video on the plugin.

Accordions or FAQs (Free, WordPress) →


There are a couple of excellent plugins in this selection. The “Tabbed Editor,” as well as the “Secure Frontend Ajax Login” impressed me. I’ll definitely use the login plugin in a customer project, as it generates a real added value for the user.

Catégories: News dév web

How Long Does it Take For Your Website to Reach Page 1 of the Google Search Results? - 21 juin, 2017 - 10:00

It’s a question asked by virtually every web design client ever: “When will we be among the top spots in the search results?” Serious web designers will give a reserved reply, while the common SEO will say “tomorrow.” But how long does it really take?

A serious answer can only be given on the basis of tons of data, and even then, it’s more of an approximate value. The parameters and variables that need to be factored in are too different for each case.

How Old is the Average Website Ranking in the Top 10 For Keywords?

The team of ahrefs, a toolset for search engine marketing, tried to figure it out nonetheless and took a systematic approach on their database, which contains a couple million of domain data pools. The results of a large-scale project like that can’t be entirely wrong.

(Source: ahrefs)

First, they compiled a set of two million randomly selected keywords, and checked the top 10 domains for each of those keywords. Here, they found out that no website in the top 10 was less than two years old. On average, the frontrunners were about three years old.

22 percent of sites that were younger than a year old, but still in the top 10, contributed to this average, although they only provided about two to four percent of the top rankings.

Interim Conclusion: Search result pages are heavily dominated by older domains. While there are young sites, they are only represented in single digit percentage numbers. You could call them exceptions.

How Fast Can a New Website Establish Itself in the Google Ranking?

To figure out how long it takes until a site is ranked in Google, the team of ahrefs took a dataset of two million randomly selected websites, which were first seen by the in-house crawler about a year ago. About three-quarters of all of these websites were not even in the top 100 of results. Anyway, 19.5 percent of them made it to the spots 11 to 100, and only 5.7 percent made it into the top 10. Websites with especially stable backlink profiles had a better performance to boast.

Now, they took a look at the top 5.7 percent, trying to find out how long it took these exceptions to reach the top 10. This value is between two and six months.

(Source: ahrefs)

Furthermore, it was discovered that the ranking was only that positive for keywords with a low search volume. Only 0.3 percent of websites trying to get a keyword ranking for words with high search volumes, got into the top 10 in the first six months. Even these whizkid sizes were only successful after about a year when going for keywords with high search frequencies.

Conclusion: About 95 percent of all new websites won’t make it to the top 10 in their first year. 75 percent won’t even make top 100. Nonetheless, the study shows that effort and hard work makes it possible to achieve high rankings.

But, what’s our answer to our customer’s question? I recommend: “It depends.” ;)

Find all numbers, data, and charts over at ahrefs.

Catégories: News dév web

Another Look At Webydo: Professional Websites Without Code - 20 juin, 2017 - 10:00

Noupe readers have known Webydo for a while. We had already introduced you to the web design software in 2013. Today, we want to take a look at how the website builder has evolved since then.

2013 was an exciting year for Webydo. While the system already existed for two years at that point, the public didn’t know about it. These two years were used to finish the software for the market release in a private beta. This way, it was no surprise that Webydo boasted references from over 13,000 designers and more than 70,000 websites from the get-go. Today, the website is a matured product maintained by a matured company. What it offers is a wide array of solutions directed towards designers, and drawn from their B2B needs.


Webydo, Clear Separation From Homepage Building Kits

What makes Webydo so unique? At a glance, you might think of Webydo as just another one of those homepage builder specimen. There’s a lot of competition in that space, and all website builders are mainly aimed towards consumers.

Modern Websites Created With Webydo.

This is where Webydo clearly sets itself apart. Its clear focus on designers and the support of their business models stays present throughout the software’s entire philosophy. Designers that open Webydo for the first time will feel at home right away, as the interface, the controls, the style, and everything else reminds us of the design products made in the house of Adobe.

Webydo’s Outstanding Features

To an extent, the precise orientation towards designers as the target group already defined the design of the user interface, and the entire feature set. As mentioned before, Webydo is close to the giants of graphic design software. This makes the learning effort accordingly low. Especially Photoshop aficionados will love Webydo, as a beloved, old friend is also available here: layers.

Design without code is Webydo’s motto.

Different modes allow you to view and evaluate the websites from the perspective of the designer, the customer that is supposed to add content, and the casual internet visitor. Although it’s almost standard these days, I still want to mention that Webydo creates responsive websites.

There are a few fascinating features that deserve to be mentioned separately.

The Automatic Layout Tool, Smart Grouping, and Drag Handle

The Automatic Layout Tool lets you move elements into new layouts automatically. This makes it possible to display a bunch of elements as a grid, and – on click – turn it into a single column for the responsive variant. Always keep in mind that we’re talking about a solution that does not require any coding knowledge. The author of this article is fully aware that such can be done with CSS ;-)

The Automatic Layout Tool (GIF: Webydo)

Using smart grouping, users can group different elements, and edit that group as a whole. This is another essential tool for responsive sites.

The drag handle allows you to move elements around the design by mouse, while always keeping the element within the grid. Even small movements, to minimize whitespace, for instance, are smooth and straightforward.

Drag Handle (GIF: Webydo) Interface Design

Being able to freely arrange the toolboxes (called panels), should also come in handy to a designer’s workflow.

Flexible Panel Management (GIF: Webydo) Typography

Typography on the web has become more and more important over the past years. Here, Webydo provides access to all Google Fonts, a connection to Typekit, as well as the option to upload fonts.

Other Contemporary Features Sell Your Products with Webydo.

Of course, the website builder also offers all the features that are currently trending, including parallax, even in the 3D form, ghost buttons, galleries, and tons of other stuff.

Strengthen Your Brand with a Blog.

In the on-site Webydo blog, you’ll find explanations, inspirations, and general information on the Webydo feature set. The blog basically marks the link between the product and the wider design environment.

Just Like your Favorite Pixel Editor: Layers Webydo’s Business Functions

Webydo’s goal is to not only help you with a design tool but also provide you with the best possible support when it comes to handling your business. It does this in different ways.

First, Webydo gives you a very user-friendly CMS, enabling your customers to take care of his content on his own. In advance, you have already defined which areas they are permitted to alter in the layout.

Next, Webydo allows you to brand the entire system. This way, none of your customers will ever see the term Webydo. This white-labeling is also possible for the CMS backend. There are almost no others in the branch that are that altruistic.

To round out the feature set, you get to send bills for your services to your customers, directly from the backend. On this occasion, I should probably mention that all the traffic to, and away from Webydo is SSL-encrypted.

While this is not one of the traditional services designers usually offer, it does belong to a complete website package: SEO, the search engine optimization. The integrated tools can even be used for that. Thus, the SEO basics are always covered.

Webydo’s Knowledge Base Helps You Get Started And Going

As building a community had been a high priority from the beginning, Webydo was able to create an active, friendly following, willing to help you at any time. Webydo’s support staff is also available 24/7 and even helps you through difficulties via live chat.

An extensive video documentation educates you about all of the tool’s aspects. For direct requests or individual problems, there are feedback forms, but also the old reliable phone line available to you. You can also suggest new features, report bugs, or upvote new features in the roadmap.

In any case, you’ll never be left alone. Webydo doesn’t give you the impression that you’re just any random customer. Here, someone seems to be legitimately interested in improving your business.

Webydo and the Prices

At the latest, a look at Webydo’s pricing model will show you that this is not meant for the average consumer. Even the smallest package includes CMS and hosting for ten websites when used by one designer. The billing system is also included in the plan. With annual payment, you’ll pay 75 USD a month. Starting with the team account for 150 USD, aside from thirty websites, the above-mentioned white-labelling is possible. Find other plans with higher limits on this site.

At this point, you’ll realize that choosing Webydo is not like choosing other tools. Webydo represents the aspiration to fully support you in your design business, making it an all-or-nothing decision.

Of course, this is not easy to decide, and should always be looked at individually. However, there is nothing wrong with the feature set. If you don’t know Webydo, you should definitely give it a try.

Related Articles
  • Webydo: The Center of Your Web Design Business | Noupe
  • Put Straight! 8 Amazing Sites Created With Webydo, a Code-free Platform for Professional Designers | Noupe
  • There We Go: 25+ Incredible Sites Created Using Website Builders | Noupe

(Disclaimer: This article is sponsored by Webydo.)

Catégories: News dév web

40 Creative Screensavers and Wallpapers To Go - 19 juin, 2017 - 10:00

Every day, we’re sitting in front of the computer: thus, we’ll enjoy a nice wallpaper or a screensaver that welcomes us when we return from grabbing a coffee. We have collected fifteen screensavers, and a solid 25 creative wallpapers for you. Enjoy!

High-Quality Screensavers IMAX Hubble 3D

Cute slideshow with recordings of the IMAX film Hubble 3D.



fliqlo (for Mac and Windows) shows a stylish digital clock.

© fliqlo


A special clock that displays the time and current date in a circular shape, and 28 languages.

© Pixel Breaker


If you like Lego, you’ll love this screensaver. Here, bricks build up and turn into a tower.

© briblo

League of Legends

Complex Screensaver with plenty of images from League of Legends.

© League of Legends

Nintendo Screen Saver Features

As a retro gamer, you’ll enjoy this screensaver: here, NES games are simulated in real time.


Electric Sheep

Psychedelic interferences as a screensaver. Plenty of styles to choose from.


Apple TV Aerial Views

The screensaver from Apple TV, now for Windows.

© John Coates

Lost Watch 2 – NVIDIA Edition

This clock is in a flowing stream (but still shows the correct time).


Numbers dropping into water

Fascinating screensaver where the numbers fall into the water, displaying the current time.

© dropclock.en

Moonlit Ship Screensaver

A pirate ship in the distance, clouds over the full moon, and a handy clock on the side.


Lightning Bolt Screensaver

Cloudy, rainy skies, with lightning flashing.



Simple countdown, able to remind you of a particular appointment.

© soffes

Beautiful Fractals

Fractals are fascinating objects, made up of multiple smaller copies of themselves.


Featured Photo Screensaver

This screensaver by Google continuously displays new images from all around the world.


Creative Wallpapers Hd Car Wallpaper


The beauty and the beast


Free Think




pacific rim



© Battlefield











Creative Wallpaper



© Adobe

Creative Art Wallpaper


Wallpapers Abstract


People Fight


Art and Creative













Computer Wallpapers




Catégories: News dév web

June 2017: 10 Pretty, New and Free WordPress Themes - 16 juin, 2017 - 10:00

After a longer break, we’re back to present you the newest and prettiest free WordPress themes in the repository. Give your website a new look.

Sweeping through the site and installing a new theme creates a fresh, spring-like feeling, hopefully impressing your visitors. Here are the new stars of the official theme index:

1 – Excellent

Excellent is one of the prettiest themes I’ve noticed in the recent past. You can use it as a blogging, portfolio, or business theme. A closer look is worth it in any case.

Download on WordPressTheme-Demo

2 – Brilliant

Brilliant is the right theme for a blog or a magazine. You can use your own colors and upload a logo. A few layout settings can be altered as well.

Download on WordPress | Theme-Demo

3 – Glob

Glob is a well-conceived representative of magazine themes. You’ll get a rather quickly loading theme with a few setting options, and individual widgets that can be adjusted further.

Download on WordPress | Theme-Demo

4 – Zyloplus

Zyloplus is one of the so-called “Multi-Purpose Themes,” said to be suitable for every application purpose. To me, the theme appears to be an excellent choice for business websites. There are plenty of settings to adjust, and you get a lot considering it’s a free theme.

Download on WordPress | Theme-Demo

5 – Wlow

Wlow is a truly exciting one-pager with really cool parallax effects. It is a good pick for both business, and freelancer websites. The theme provides you with a lot of setting options for a perfect customization of your site.

Download on WordPress | Theme-Demo

6 – Juliet

Juliet is a fresh and modern blog theme that contains a lot of settings for you to use. Because of that, customizing Juliet the way you want to should be very easy. But it doesn’t stop there, as it’s also prepared for a nice WooCommerce shop.

Download on WordPress | Theme-Demo

7 – Blog Way

Blog Way is a stylish, minimalistic blog theme with plenty of settings via the theme customizer. It allows you to edit colors, background, and the logo.

Download on WordPress | Theme-Demo

8 – GreatMag

GreatMag is a pure magazine with a lovingly detailed design. A couple of widgets, tons of theme options, different blog layouts, and Google Fonts round out the package.

Download on WordPress | Theme-Demo

9 – Clean Commerce

Clean Commerce is a clean theme for your WooCommerce shop. It provides a couple of theme options, a “Featured Carousel,” and four widgets. The menu and the logo are adjustable as well.

Download on WordPress | Theme-Demo

10 – V12

Do you need a pretty new business theme? If yes, take a closer look at V12. It provides you with tons of options that you’d normally only find in pro versions of other themes. The V12 theme comes with everything you’d like to use.

Download on WordPress | Theme-Demo

Catégories: News dév web

Simbla 2017: Dynamic Pages Straight Out of the Website Builder - 15 juin, 2017 - 10:00

The website builder Simbla sets itself apart from the competition in several aspects. To the customer, the most noticeable one is the database connectivity. The new feature “Dynamic Pages” is another highlight from Simbla’s scope of functions.

Readers of Noupe Magazine have known the Simbla Website Builder for several years. Now and then, we reported on the product and its rapid progress in features. You can find all links to our past articles at the end of this post.

Simbla’s concept of data connectivity is what impresses us the most. A simple visual user interface allows you to create databases, as well as content in a way that is so intuitive, that even almost entirely clueless users can do so without any issues. Professionals are also happy to have such a comfortable and flexible solution.

Creating and Managing Databases Using Simbla

A well thought-out detail is that the database section is a separate pillar, and independent from the actual website creation. This matches the approach of conventional database systems, which don’t operate with a fixed output medium either. This way, you get to take care of your content first, without being influenced by visual aspects.

You Don’t Need to Search For Long to Find the Database Feature.

After setting up a database, define your users and roles. The default user “Public” grants public access to the website. However, you’re also able to create further users that only gain access after a login.

The distribution of rights is appropriately differentiated. For instance, it is possible to give the user “Public” reading rights for one database, while granting writing rights to other users. Here, you can also distribute the rights “find”, to search, “get”, to display, “create”, “update”, and “delete”. Aside from the definition of individual users, and the declaration of individual sets of rights, using so-called roles to grant the necessary rights for a whole group of users can save time.

Sufficiently Differentiated Rights Distribution Via Click.

Once that’s done with, take care of the creation of the required data tables, the actual content. Comfortably add columns, and define the type of the column. Character strings, numbers, arrays, Boolean values, and files are possible. In contrast to other databases, such as MySQL, files, like images and documents, can be integrated into a table via an own type, allowing for easy access later on. In addition to that, you’ll receive a preview of image files.

The columns “Id”, “createdAt”, and “updateAt” are added and taken care of automatically. The visual user interface makes the creation, and management of databases as easy as it can be. Set up new rows, and fill them with content in no time.

If you want to use a table for non-web purposes, export it to the CSV format with a single click. However, embedded files will be ignored during the export. It is also possible to import data from the CSV format.

From Database to Dynamic Web App

Now, a database would be rather useless, if we were not able to integrate it into our website. Simbla has also found an intuitive solution for that functionality. The implementation is straightforward and comfortable.

First, you need to select the database in your website’s settings. After doing so, all contents of this database will be available from within the site editor. Here’s where the so-called app widgets come into play. These predefined content elements provide predefined database connections for certain purposes.

Thanks to the extensive options, you can create simple, or complex web applications, even without lots of effort, or knowledge on programming and database queries. It doesn’t matter if you’re dealing with registration forms, or the display of contents in a table, the app widgets speed up your website.

Dynamic Pages: Simbla Turns Into a CMS

Especially the brand new app widget combination of “Dynamic Grid,” and “Dynamic Pages” can give your website a real boost in terms of dynamics. With the help of these widgets, you’ll make sure that Simbla displays your content in a grid overview, creating a separate page for each data set from your database that shows the details of the respective set.

The Configuration Dialogs Are Very Comprehensible. Step 1: The Dynamic Grid

The first step is to create a dynamic grid within the Simbla Editor. This is done entirely visually and requires no programming in SQL or other languages. When it comes to defining what to display in the grid, you can make use of filters to limit the amount of data. It is also possible to use a search box so that only content actively sought for by the user makes its way into the grid. On top of that, define the number of results per page, as well as the order, and sorting, depending on a data field that also needs to be selected.

New Addition to the Toolbox, the Dynamic Grid.

In the page design, you place specific contents in the form of variables, which are enclosed by double curly brackets, like this {{Field Name}}. These variables can be formatted freely. Above all else, you can design the rest of the page however you like. Using the “Dynamic Grid” doesn’t bring in any new restrictions.

Design the Dynamic Grid However You Like.

The result is a self-filling grid with content from your database, filtered by you or your users. That’s a neat thing, but it’s only half of the solution.

Step 2: The Dynamic Pages

Here’s where our “Dynamic Pages” come into play. They start at the grid and expand it. This additional widget gives each of our dynamic grid’s contents a link to a detail page, where you get to freely design what the user should see.

A good example for the usage of the widget combo is this Escape Room Directory. Escape rooms are a new kind of group game. You, and a small group of fellow gamers get locked into a room, and have to escape within 60 minutes. To do so, it’s necessary to solve all kinds of tasks and riddles. Escape rooms exist all around the world, and the numbers are growing quickly.

The Escape Room Directory Begins With the Search Box as a Starting Point.

Thus, an index of these wonderful playgrounds is just the right task for a dynamic grid with attached dynamic pages. The designer doesn’t need to do any additional work, once the layout is done. Each additional database entry automatically causes another page to be generated and makes it accessible from the grid view.

Within the “Dynamic Pages” widget, you mainly define the URL structure behind the display of the detail pages. When it comes to content that only registered users should have access to, activate the according restriction to authorized roles.

The Template For the Detail Page Can be Defined Freely. All You Need to do is Add the Variables.

For the detail pages, set up a new page on your website. This will then serve as a template for the looks of the detail view. Of course, you can freely design this one as well. Add the content from the database in triple curly brackets, like this: {{{Field Name}}}. Next, connect your template to the same data table that you already selected for the grid, and activate the checkbox “Dynamic Pages” in the settings. That’s all you need to do.

Conclusion: Integrating Dynamic Content Doesn’t Get Easier Than This

With the new combination of “Dynamic Grid,” and “Dynamic Pages,” the Simbla Website Builder provides a flexible solution for the display of larger amounts of data on individual pages. I have yet to see this elsewhere in the competition. I also don’t know of any other solution that makes database content web-compatible this comfortably, without any additional programming efforts.

Find more articles on Simbla here, here, here, and here.

Catégories: News dév web

20 Tools for Web Developers and Designers from this Spring - 14 juin, 2017 - 10:00

Much of the success lies in the tools that you have at your fingertips. A well-chosen set of instruments helps to achieve your goals more efficiently. It saves you time, improves your daily routine, and can help you avoid banal mistakes. Today we have picked 20 valuable tools that were created for web developers and designers just this spring.


Shop.js is aimed to enrich your website with e-commerce functionality. It is a powerful set of universal UI components that works thanks to El.js and Hanzo.

Creator: David Tai
License: BSD.


SQLPad does what is said in its tagline: it allows you to run queries right inside a browser. It supports Postgres, MySQL, SQL Server, Vertica, Crate, and Presto.

Creator: Rick Bergfalk
License: MIT.


MiniCSS is a minimal yet robust CSS framework. It is made with both desktop and mobile devices in mind so that building fully responsive cross-device layouts of various kinds has become much easier.

Creator: Angelos Chalaris
License: MIT.


Tippy.js is a tiny JavaScript-powered tooltip library that has a dozen of engaging options. You can add classic, animated and modern tooltips in seconds. It is also quite friendly with touch screen devices.

Creator: Atomiks
License: MIT.


If you want to enhance forms with some zest then this small tool will provide you with 15 different ways how to do that. Here you will find a range of beautiful effects that embellish interaction with input fields.

Creator: Natali Davydova
License: MIT.


EnjoyCSS is a generator that offers tools to get the most out of CSS. It is great for newbies and those who do not want to waste their time on trivial routine.

Creator: XB Software
License: Declared as Free, no proper license given.


Sizzy is a basic instrument for testing responsiveness. It quickly shows a website in different dimensions including Android and Apple-powered devices and others.

Creator: Kitze
License: GNU General Public License v3.0.


Animista is a simple way to create animations. You can choose among the dozen of standard effects such as scale, rotate, swirl, slide etc. as well as assign an animation to text, background and even exits and entrances.

Creator:Ana Travas
License: Declared as Free, no proper license given.


The RAGrid promises to build intrinsic layouts that can have an offbeat structure. It is very easy to use thanks to similarities with regular image editors like Photoshop.

Creator: Adam Argyle
License: MIT.

App Iconizer

App Iconizer lets you escape the routine of creating pixel-perfect application icons both for Apple App Store and Google Play Store. Just choose the image that you want to convert into your piece of brand identity and upload it to the service.

Creator: Exevio
License: Royalty-free. is an extension for Sketch that injects some life into your designs.  Select event, transition and the artboard to compile a fantastic presentation

Creator: Normally
License: Declared as Free, no proper license given.


Strike the harmony in font combinations can be pretty challenging especially when it is not your sphere of expertise. Fontjoy helps you to avoid common mistakes in choosing the perfect pair of typefaces for the interface

Creator: Jack Qiao
License: MIT.


Need some excellent color combos? Turn to photography. Upload your beloved picture and extract the colors from it, getting a perfect color scheme ready-to-be-used in your projects.

Creator: ioi0
License: Declared as Free, no proper license given.


Thumbor is all about cropping, resizing and filtering images. It applies different advanced algorithms to bring about precision, neatness and pixel perfection.

Creator: Thumbor
License: MIT.


Britecharts will take your visualization to the next level. It is driven by D3.js v4, another popular and powerful data-targeted JavaScript library, and offers a simple API.

Creator: Eventbrite
License: Apache License, Version 2.0.


Ambiance includes a collection of gorgeous handcrafted color palettes that will not only inspire you on creating something beautiful but also can be used as a base for your future designs.

Creator: Sudipto Mondal
License: COLOURlovers Terms of Use Agreement.


Slinky converts designs into HTML-based email templates. The only drawback is that the plugin is applicable only for SketchApp

License: Apache License, Version 2.0.


LogoMak is a generator for logotypes. Describe your business through tags and activity types and the service will provide you with the fonts and colors that are inherent to your industry as well as show excellent samples.

Creator: Logomak
License: Declared as Free, no proper license given.


Dummy text is always on demand. In case you are a bit tired of Lipsum you can always diversify your workflow with some real data in your own language.

Creator: Julien Perriere
License: MIT.

Android adaptive icon templates

Create your Android O adaptive icons with this template without much trouble. It is available for Photoshop, Sketch, Illustrator, and Affinity Designer.

Creator: Marc Edwards
License: BSD.

Catégories: News dév web

Modern Web Design: Common Mistakes You Should Avoid - 13 juin, 2017 - 10:00

Web design and development have changed a lot over the past years. Mobile internet is mainly responsible for this, changing when and where we use the internet. Many things that were common ten years ago are now considered outdated. This even applies to a lot of things that were completely up to date two to three years ago. What should you avoid doing when it comes to designing and developing modern websites?

Layouts For Desktop Devices and Smartphones Only

The days of developing your website for one view only have been over for a while. By now, you’ll only find very few websites without a responsive layout.

However, in a lot of cases, only two devices, or types of displays, are considered when it comes to responsive layouts: the classic monitor and the smartphone. Here, the desktop layout receives a fixed width, while the mobile layout is often stretched across the browser window’s entire width.

The differentiation between desktop and smartphones alone is not sufficient anymore. Nowadays, there are tablets, phablets, and a bunch of other different devices with various resolutions. Differentiating between two types does not do this evolution justice. Thus, you should keep your layout flexible enough for it to work on all resolutions.

On large monitors, your layout shouldn’t have any lavishly large borders on the left and right. And on tablets, the layout for mobile devices shouldn’t be displayed.

Mobile Version of Your Website

Let’s stick with mobile web design. When the options of responsive websites were very limited, own mobile versions for websites were developed. Even today, a lot of major news portals have an own mobile version, which is often accessible via an own subdomain.

Of course, this makes us face the same layout problem. On top of that, you’ll always have to take care of two versions of a website. The display of the correct version also fails to work in many cases. For instance, the mobile version is often loaded on tablets, although displaying the desktop version would actually be entirely possible given the resolution.

Hiding Content From the Mobile Internet

Websites are becoming increasingly more complex. This applies to the content, but also for the design. Large format images and graphics are combined with multi-column texts and additional sidebars.

The difference between the display sizes is becoming increasingly larger. Thus, nowadays, the goal is to design websites that look equally good on large monitors, and small smartphones.

This certainly is a challenge. A lot of web designers take the simple, but not recommended route. Supposedly expendable content is simply hidden on smartphones. This may make sense at a glance, making the website a lot clearer on a smartphone.

However, this approach is not beneficial for the visitor, as websites are accessed via mobile devices more often than via desktop devices. Because of that, no content should be withheld from smartphones. Instead, you should figure out a way to present all content in a clear, and space-saving way. This can be done by using sliders, or hiding content via the sidebar, and displaying it via a button.

Unsolicitedly Placing Windows and Videos Above the Content

So-called “Modal Boxes”, which are placed above a website’s entire content when a user tries to leave it, have turned into an annoying custom. These areas are often used to tell the visitor about the newsletter, or certain offers.

If you’re actually about to leave a site, they are not annoying. However, if you accidentally leave the top area of the site with your mouse, you’ll already get molested by said screen.

So, if you don’t want to annoy your visitors, you should stay away from these popups in modern web design – as beneficial as they may be for a website operator.

The same applies to videos that hide a website’s content without asking the user.

Simple Resolutions and Wrong Image Formats

The internet did not only become more mobile; the resolution increased as well. For displays and monitors, the size is not the only factor anymore, the resolution is one as well. This way, the pixel density increases, and the resolution becomes sharper.

This becomes increasingly noticeable with images. In a simple resolution, an image looks blurry and fuzzy on a high-resolution display. But HTML5 and CSS3 allow you to set different images for different pixel densities.

Use this option to make sure that your website looks good and razor-sharp on new devices. Alos select the right format for your images and graphics. Use JPEGs for photos, PNGs for graphics, and SVGs for vector drawings.

System Fonts and Too Small Fonts

Since web fonts have made it into all browser after many years, using system fonts is not necessary anymore. There are tons of free and charged fonts that you can take over into your web project. Make sure that these fonts are available in the new format WOFF2. This replaces the previous default format WOFF, and saves, even more, space thanks to better compression. Especially on the mobile internet, this is a big advantage.

Also, make sure to not make your fonts too small. And don’t use a single, set font size. On smartphones, fonts should have a different size than on large monitors.

Making the Visitor Wait

Today, users expect websites to load fast. Thus, you should develop your website in a way that makes that happen. Optimize images and use the right format.

Use techniques like the “<picture>” element, to always deliver the appropriate image size. Load lower resolution images on smartphones, instead of resolutions that are required on a large monitor.

Make sure that JavaScript doesn’t block or slow down the distribution of HTML, and ensure that externally integrated files don’t have a negative effect on your loading times.

Catégories: News dév web

Family CRMs, Guzzle Wrappers and PHP Machine Learning? Sourcehunt! - 12 juin, 2017 - 18:00

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.

monicahq/monica [2,067 ★]

Monica blew up on Hacker News and ProductHunt the other day, and it was only fitting we mention it here despite having racked up well over 2000 stars already.

Monica is a Laravel-based single-user-CRM for personal relationships. Not for business, but literally for people in your life - tracking whom you haven't bought gifts yet, money loans, birthdays, meetings, and more.

We think it's half way through refreshing (because it's something you don't see often) and depressing (because do we really need apps to track the people in our life now?), but interesting nonetheless.

Due to the massive influx of interest from all over, Monica now has dozens of issues and several PRs ready for inspection, not to mention docs in need of fixing, a roadmap to plan, and more. If you want a popular project to contribute to, here it is!

genkgo/mail [3 ★]

Gengko/mail claims to be a modern reinvention of the PHP mailing libraries. In their own words:

While analyzing what mail library to use when refactoring a code base, we discovered that the available ones are mostly legacy libraries. Some do not use namespaces and every library we encountered were merely a collection of scalar property bags than objects using encapsulation. This is not a critique to these libraries. We all used them, and used them with joy. However, we think there is a need for new libraries that use modern principles.

Gengko's mail is supposed to be used if you want to send e-mails over different transports and protocols using immutable messages and streams and if streams and Gengko in the same sentence sound familiar, it's because we sourcehunted them before - only back then they were streaming zip files. Usage is dead simple and intuitive:

$message = (new FormattedMessageFactory()) ->withHtml('<html><body><p>Hello World</p></body></html>') ->withAttachment(new FileAttachment('/order1.pdf', new ContentType('application/pdf'))) ->createMessage() ->withHeader(new From(new Address(new EmailAddress(''), 'name'))) ->withHeader(new Subject('Hello World')) ->withHeader(new To(new AddressList([new Address(new EmailAddress(''), 'name')]))) ->withHeader(new Cc(new AddressList([new Address(new EmailAddress(''), 'name')]))); $transport = new SmtpTransport( ClientFactory::fromString('smtp://user:pass@host/')->newClient(), EnvelopeFactory::useExtractedHeader() ); $transport->send($message);

This repo is in dire need of love: it needs stars, contributors, and mainly testers, so please dive in an help the team provide the PHP community with a new, modern, namespaced and encapsulated library ready for the PHP 7+ era.

kitetail/zttp [526 ★]

If you're not familiar with the evolution of Guzzle (a PHP HTTP client we explore in the premium Exploring PHP course that's available for purchase now), the library has basically gotten more professional and less usable with each new version. New layers upon layers of specification-respecting abstractions and rules made Guzzle incredibly difficult to get started with. Coupled with further abstractions like HTTPlug designed to prevent the old-Guzzle vs new-Guzzle conflicts, the situation in general just isn't a pleasant one to develop in.

Enter ZTTP - a package that wraps Guzzle with some easy to use and approachable helper methods so that it once again becomes as usable as it once was. It was created by the testing god of Laravel: Adam Wathan, and knowing his code there's not much to contribute with, but docs could use help and there's always a need for usage examples and PRs with more convenient helper methods.

Continue reading %Family CRMs, Guzzle Wrappers and PHP Machine Learning? Sourcehunt!%

Catégories: News dév web

SEO in a Nutshell: To Reach Google’s Page 1 Pay Attention to Links, Content, Keywords, and Performance - 12 juin, 2017 - 10:00

Search engine optimization (SEO) is not rocket science, and anyone can do it with a rather small effort. You just shouldn’t believe the gurus and focus on a few aspects that make up the majority of your ranking success instead.

SEO: Pseudo-Scientifical Shamanism Dancing Around the Holy Grail of Google SERPs

Did I mention that I have a rather reserved stance on the SEO branch? The highly complicated, pseudo-scientific style is what scares me off. There’s no way that you either have to learn a 700-page book on the topic by heart or pay for an expensive SEO service just to get your website a proper ranking in the Google search results.

And you know what? That actually isn’t the case. Actually, there are only a few aspects that you need to pay attention to if you want a proper placement for your site. Of course, you can always dive into more details, dig even deeper. But keep in mind that the old Pareto rule also applies here. With 20 percent of the effort, you’ll achieve 80 percent of the success. That’s enough for me, what about you?

These are the aspects you should actually focus on:


It has always been like that, and it’s probably always going to stay this way. The more pages the Google Crawler finds that have placed a link to your pages, the higher the guys from Mountain View will rank you in the results. This logic is feasible. If there are that many external websites agreeing that your content is good enough to link it, there has to be some truth in that. That’s Google’s way of referral marketing.

However, to prevent you from turning this referral marketing into a multi-level approach, the Californians also make sure that the incoming links are relevant as well. So, if you run a magazine on paragliding, Google will acknowledge links to your magazine coming from the sanitary wholesale, but it won’t consider them for the ranking.

This is supposed to make sure that backlinks are not only good in terms of quantity but quality as well. How do you get to this kind of backlinks?


This leads us to the second important aspect, your content. If you’re looking around on the web for a bit, you’ll have an easy time finding content that has clearly been written for ranking purposes only.

These texts are often very long, and full of keywords, while being weak in terms of actual content, and not worth reading. This type of content does not help you in your overall concept.

In order to get external links in an organic way, without buying them, you need excellent content. Otherwise, there is no reason for an external page to link to your content. Excellent content is well researched, clearly worded, interesting, and exhaustive. It deals with a subject in a way that requires no further sources, as everything users need to know is already included.

Naturally, these texts are long, which generally is a good thing.

An important factor, related to the quality of your content, is the bounce rate. Google checks, how long your visitors stay on the website. If the leave the area within seconds, Google rates that as a negative sign. This would mean that your content is not as relevant as you thought.

However, if your content is good, but you still have a high bounce rate, you should check if your definition of “good” is not a bit lackluster.

I know fantastic texts that are 100 percent true and profound, yet nobody wants to read them. This has many reasons. It can be because of the typography, or because of a generally messy page design. It may be because there are no images or another type of structural clearing up.

In other words: content without design doesn’t work. Clear up your texts, so that not only Google but also your real readers like them. If you do that, the chance of the latter to stay on your website for longer increases, and the bounce rate improves.


It’s also good to define relevant keywords, and use them in the text. All of this has to stay natural, though, and shouldn’t seem constructed. The only construction that’s allowed is when it comes to headings and your website’s title tag. Here, the keyword coming first is always positive. This way, the Google crawler gains the impression that this is content that specifically deals with the respective topic. While you can bend the title tag however you want to, please make sure to keep the headings legible.

Similar to the previously mentioned backlinks, Google also pays attention to the relevance of the used keywords. So you can’t just sprinkle keywords into your texts that don’t have anything to do with the content. This used to be very popular in the past, but nowadays, the search engine giant notices when people try to fool it like that.


On Dr. Web, you’ll find entire series of articles on this topic. Ever since performance, meaning a website’s loading speed, became a ranking factor in 2010, you should have looked very deep into it. Visitors will thank you for that by not leaving your website right away.

Experts are not sure to what extent Google currently uses the loading speed as a ranking factor. Some claim the topic was done with by now. I think, that the general speed increase in the web since 2010 may have lead to loading speeds being less problematic.

Nonetheless, going for a loading speed of at least below two seconds is recommended. WordPress users can find our big series on the topic here.

In general, responsive web design results in a better performance, as slim layouts are preferred here. As mobile friendliness is also a Google ranking factor, you can kill two birds with one stone here.


You need a slim, fast design, for both your website overall and your individual contents. Backlinks are generated via top-notch content that doesn’t leave any questions unanswered, doesn’t have an ad-like character, and is interesting enough to make users want to read it. Use keywords to make Google notice that your content is relevant.

Is this a shortened way of explaining this? Of course, it is. But that’s why I wrote the entire text above the conclusion. Now, go follow the mentioned aspects, and bring your Pareto effect to life.

Catégories: News dév web

How to Set up an Online Multi-Language Magazine with Sulu - 9 juin, 2017 - 18:00

We previously demonstrated the proper way to get started with Sulu CMS by setting up a Hello World installation on a Vagrant machine. Simple stuff, but can be tricky.

If you're a stranger to Vagrant and isolated environments, our excellent book about that very thing is available for purchase.

This time we'll look into basic Sulu terminology, explain how content is formed, created, stored, and cached, and look into building a simple online magazine with different locales (languages).

Recommended reading before you continue:

Pages and Page Templates

A page is exactly what you'd expect it to be: a block of content, often composed of smaller blocks. A page template is a two-part recipe for how a page is assembled.

A page template has two parts: the twig template, and the XML configuration. The Twig part is responsible for rendering the content of the page's sub-blocks, like so:

{% extends "master.html.twig" %} {% block meta %} {% autoescape false %} {{ sulu_seo(extension.seo, content, urls, shadowBaseLocale) }} {% endautoescape %} {% endblock %} {% block content %} <h1 property="title">{{ content.title }}</h1> <div property="article"> {{ content.article|raw }} </div> {% endblock %}

This is the full content of the default twig template that comes with sulu-minimal, found at app/Resources/Views/Templates/default.html.twig. It extends a master layout, defines some blocks, and renders their content.

The XML configuration on the other hand is a bit more convoluted (as most things with XML are):

... <key>default</key> <view>templates/default</view> <controller>SuluWebsiteBundle:Default:index</controller> <cacheLifetime>2400</cacheLifetime> <meta> <title lang="en">Default</title> <title lang="de">Standard</title> </meta> <properties> <section name="highlight"> <properties> <property name="title" type="text_line" mandatory="true"> <meta> <title lang="en">Title</title> <title lang="de">Titel</title> </meta> <params> <param name="headline" value="true"/> </params> <tag name="sulu.rlp.part"/> </property> ...

If you're new to Sulu, none of this will make sense yet - but we'll get there. For now, we're introducing concepts. The main takeaways from the above snippet of XML are:

  • the key is the unique slug of the template, and its entry into the admin template selection menu (it must be identical to the filename of the xml file, without the extension).
  • the view is where its twig counterpart can be found. A template will only appear in the menu if it has both the XML and corresponding Twig file!
  • the controller is where its logic is executed. We'll go into more detail on controllers later on, but in general you can leave this at its default value for simple content.
  • meta data is how the template will appear in the admin template selection menu, depending on the language selected in the UI:
  • properties are various elements of the page - in this case, a field to input a title and a non-editable URL field

You define new page types (templates) by defining new combinations of properties in this XML file, and then rendering them out in the corresponding twig file.

As an experiment, try using the menu in the admin interface to switch the Homepage to the Default template, then in the master.html.twig layout file (one folder above), add nonsense into the HTML. Feel free to also populate the article property in the UI.

... <form action="{{ path('sulu_search.website_search') }}" method="GET"> <input name="q" type="text" placeholder="Search" /> <input type="submit" value="Go" /> </form> Lalala <section id="content" vocab="" typeof="Content"> {% block content %}{% endblock %} </section> ...

If you click Save and Publish in the top left corner now and refresh the homepage, you should see the changes.

For the curious: you may be wondering why they took the XML route instead of having users manage everything in the database. Reason one is being able to version-control these files. Reason two is that even if one were to add a property in a GUI, it would still be missing from the twig template. At that point, they would either have to make twig templates editable in the GUI via a DB too, or the user would again be forced to edit files - and if they're already editing them, they may as well edit XML files.

Pages Vs Themes

So what's a theme in all this?

A theme is a collection of page types. Contrary to popular belief, a theme is not a master layout which is then extended by the page template twigs - it's a whole collection of page templates and master layouts to use. A theme will also contain all the necessary assets to fully render a site: CSS, JS, images, fonts, and more.

For the curious: We won't be dealing with themes in this tutorial but feel free to read up on them here.

About Caching

If the homepage content doesn't change when you modify it and refresh, it might have something to do with cache. Here are important things to keep in mind:

  • during development, your server setup should set Symfony development environment variables. This allows you to deploy the app directly to production without modifying the environment value manually in files like web/admin.php or web/website.php, and makes your app highly debuggable in development. The values are SYMFONY_ENV and SYMFONY_DEBUG, and are automatically set if you're using Homestead Improved. If not, copy them over from here if you're on Nginx.
  • the command line of Symfony apps (so, when using bin/adminconsole or bin/websiteconsole in the project) defaults to the dev environment. In order to execute commands for another environment, pass the --env= flag with the environment to match, like so: bin/adminconsole cache:clear --env=prod. This might trip you up if your app is in prod mode and you're trying to clear cache but nothing is happening - could be the environments don't match, and the command is clearing the wrong cache.
An Online Magazine

Let's consider wanting to launch an online magazine. By definition, such a magazine has:

  • pages that explain things, like "About", "Contact", "Careers", etc.
  • many articles, often grouped by month (as evident by the common URL pattern:
  • different permissions for different staff member levels (author, editor, guest, admin...)
  • a media library in which to store static files for inclusion in posts and pages (images, CSS, JS, etc.)

These are all things Sulu supports, with a caveat. When building something like this, we need keep storage in Sulu in mind.


This section might sound confusing. There's no way to make it easier to understand. Be comforted by the fact that you don't need to know anything about it at all, and treat it as "for those who want to know more" material.

Jackalope is a PHP implementation of PHPCR which is a version of JCR. The rabbit hole is very deep with these terms, so I recommend avoiding trying to learn more about them. If you insist, it's somewhat covered in this gist.

In a nutshell, if you don't need to version your content, you're fine with the default Jackalope-Doctrine-DBAL package that Sulu pulls in automatically. It'll store content in a usual RDBMS (e.g. MySQL) but without versions.

If you do need versioning, you need to install Jackrabbit - an Apache product that's basically a database server with a non-obvious twist, and use a different PHP implementation to store the content: Jackalope-Jackrabbit (also pulled in automatically). Note that an RDBMS is still needed - Jackrabbit merely augments it by providing a different storage mechanism for the actual content, but permissions, settings, etc. are still stored in a regular database.

The catch is that Jackrabbit (and PHPCR in general) has a limit of 10000 children per node. Since articles on online magazines and blogs are usually sequential and don't have a hierarchy (i.e. they're flat), they would end up being children of "root", and after 10k posts you'd be in trouble.

This is why the Sulu team have developed a bundle which will auto-shard content by month and emulate a flat structure. By setting each month as a parent, each month can have 10000 posts. If need be, this can be further fragmented by week, or even by day. Keep this in mind:

The ArticleBundle is a prerequisite if you're building a news site, blog site, or magazine because otherwise, after 10000 units of content, you'd be in trouble.

Note: The ArticleBundle is currently under heavy development, and is likely to have some API changes before a 1.0 release. Use with caution.

Okay, let's install the ArticleBundle to get support for our online magazine website.

Continue reading %How to Set up an Online Multi-Language Magazine with Sulu%

Catégories: News dév web

JavaScript and Search Engines: What You Should Keep in Mind - 9 juin, 2017 - 10:00

Just a few years ago, JavaScript was very controversial. Annoying ad popups were the reason why the programming language was often blocked by default. Now, it’s become hard to imagine modern web design without JavaScript. JavaScript is especially important in the mobile internet – as a means of playing media, but also for geolocations and navigations. But how well do JavaScript and search engines get along? What should you keep in mind?

Search Engines Have Learned

First things first, it should be said that the times when search engines were unable to handle JavaScript are over. While content loaded via JavaScript used to be invisible for search engines, they have learned something new by now. And when talking about search engines, I obviously mean Google, for the most part. The search giant is still the measure of all things.

To Google, JavaScript is no hazard by default anymore. However, that doesn’t mean that you can use JavaScript without any hesitation. As Google keeps the ways their search algorithm works secret, the following tips are to be taken with a grain of salt.

Loading Content Via Load Instead of User Events

Oftentimes, events are used to alter a website’s content via JavaScript. Here, search engines usually only consider content loaded via Load events.

These results are fired from the browser as soon as a site’s DOM tree is loaded. Search engines like Google allow for load events during crawling, so that the site’s content is usually only indexed after the execution of the load events.

User events are not loaded, though. Thus, all changes triggered via click or touch events, for instance, will not be considered during indexing.

Push-States and URLs

In order to allow Google to index a site, it always has to be accessible via a URL. Thus, click events cannot be considered either, as they always display content triggered by an individual user.

Thanks to JavaScript’s push state API, it is possible to influence a website’s URL. This allows you to realize a website’s entire navigation via JavaScript, by using “pushState()” to alter the URL displayed in the browser, while loading and replacing content via JavaScript at the same time.

As Google can’t index URLs that are exclusively realized via push state API, each URL created using “pushState()” also needs to have a “real, existing” URL.

By the way, this is not only interesting for search engines, but for social networks as well. That’s because you can only share sites that have a “real” URL. Facebook and Twitter also need to extract content from a site, which only works if there’s a URL.

It’s important to always use “pushState()” to create correct URLs that also always have the right content via JavaScript. A wrong push state URL that doesn’t load any new content may lead to double content. And search engines don’t like that either.

Don’t Exclude JavaScript

It may be self-evident, but should still be mentioned. Of course, you have to make sure that JavaScript files are not excluded for search engines. If the “robots.txt” generally prohibits JavaScript files, search engines don’t have a way to access them.

As JavaScript itself doesn’t contain indexable content, it is often hidden from search engines.

Progressive Enhancement

Regardless of all options that Google and other search engines give you to allow you to crawl content created via JavaScript, the safest method is still the so-called “Progressive Enhancement”.

This principle pursues the approach that content has to be prepared in a way that makes them available, regardless of the browser, or crawler.

Concretely, this means that texts, images, and other content supposed to be found and searched by a search engine, should function without JavaScript, if possible.

However, this is often related to a significant additional effort for the web developer. Each website basically has to provide all content even without JavaScript. Depending on the type and preparation of the content, certain compromises where only important content is displayed without JavaScript can be viable options.

Here, you have to judge which effort is reasonable for your project.

Correct Semantics

With and without JavaScript: in any case, it’s important that your content is labeled semantically correct. Headings loaded via JavaScript need to be labeled with the respective HTML elements as well.

Here, the same rules that apply to normal content apply. In the end, for Google, the decisive factor is what the HTML source text looks like after the execution of JavaScript. Thus, choosing the right elements is crucial.

Testing Crawler View

If you choose to load content exclusively via JavaScript (not following the “Progressive Enhancement” principle), you should test to see if search engines can correctly, and completely see and crawl your content.

Google’s “Search Console” is one of the things helping you here. Under “Crawl”, you’ll find the function “Fetch as Google”. Here, you can display a website for mobile and desktop devices, in the way that Google actually crawls it.

However, there are other, mostly charged, tools like SEO.JS, and which have specialized on checking if a website’s JavaScript contents are properly displayed during crawling. This may be a sensible addition for complex projects.

Catégories: News dév web

Webdesign Inspiration: 10 Unusual Navigation Menus - 8 juin, 2017 - 10:00

Sick and tired of overused hamburger buttons and boring streamlined top navbars that stick to the header? Lack of ideas how to take your navigation to the next level, keeping its UX properties but making it a design’s star? We have got you covered.

In today’s article, we are going to examine ten different websites whose owners had guts to stand out from the crowd by transforming their navigation menus into original components. Some of these solutions are refreshing takes on the classic approaches while others are the new kids on the block.  Explore our collection and tell us which one is your favorite? And what do you think about the extraordinary menus?

Cesare’s Personal Portfolio

Cesare’s personal portfolio has an intriguing isometric navigation. Presented as a classic template wireframe in eye-pleasing ¾ view with all the functional blocks neatly animated it recreates truly powerful impression and engaging user experience.

Dino Balliana

Dino Balliana offers its online visitors two styles for the navigation menu. The first option is standard: it is regular and plane; whereas the second one is three-dimensional and solid. You can switch between these two and choose your preferred one.

Block Studio

Block Studio’s front page has a distinct high-tech vibe enhanced with some corresponding animations. Although the menu is merely a set of 4 links, nevertheless, thanks to a skillful organization they ideally blend into the environment, finishing off the look and playing an integral part of the composition.


Off-Box goes for a simplicity that is subtly reinvented. Line style, clean and neat classy 3d presentation, a ton of fresh air and dominant white color generate a fantastic user interface.

Hi-Pointe Drive-In

Hi-Pointe Drive-In is bursting with energy and positive emotions. Its main navigation is displayed as a bunch of whimsical photo-based blocks that are jazzed with vibrant splashes of color. It is a great example of how to inject some life into a common menu.

Compact Disk Dummies

Compact Disk Dummies welcomes the online audience with a 3D scene populated with numerous objects. This slightly untidy room hides all the navigation links. It is your job to find them all. Hint, hover the mouse cursor over the old-timey TV set and you will see a link to the video section.

Bar Formations

Bar Formations is up to producing a strong visual impact from the get-go. Much like in the previous examples, the navigation takes in its possession the entire screen. It combines the regular sidebar panel with links and image- and video-based blocks that represent the most important sections of the website. Brilliant typographic pieces give a design special appeal.


Gibeon is succeeded in embracing chaos. There are so many things happening here. However, the boxy structure with rigid organizational layout effectively glues everything together bringing about a more less harmonious homepage. It serves as a navigating tool.

Do you Speak Human?

If the previous example overwhelms you with its content-heavy solution then this example will delight you with its neatness, accuracy and spacious. Although Do you speak human? adopts the same grid-like structure, its navigation feels much cleaner and tidy.


Down with the artificial angular graphics with sharp and robust feeling. Truff takes the advantage of the illustrative approach. The website is impregnated with an artistic vibe so does its navigation through the inner structure. Each section is introduced as a lively mysterious drawing.

Catégories: News dév web

Functional Programming with Phunkie: Building a PHP JSON Parser - 7 juin, 2017 - 20:12

Phunkie is a library with functional structures for PHP. In this two-part tutorial, Phunkie’s 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. For an exploration of PHP's "non-exotic" features, we have great paid course.

In the first part of this series we explored parsers and combinators to help you start getting values from functional programming with PHP. We covered the basics using examples, and now we’ll move onto more sequencing and other strategies.

Let’s pick up where we left off!

Sequencing Combinators

Ok, let’s now try a more useful parser. A parser that, given a predicate, keeps the character if it satisfies the predicate and fails otherwise. We will call this parser sat, from satisfies.

describe("sat", function() { it("parses one character when it satisfies the predicate", function(){ expect(sat("is_numeric")->run("4L"))->toEqual(ImmList(Pair('4', 'L'))); }); it("returns Nil when the character does not satisfy the predicate", function(){ expect(sat("is_numeric")->run("L4"))->toEqual(Nil()); }); });

The implementation, using the primitive parsers item, result and zero, looks like this:

function sat(callable $predicate): Parser { return item()->flatMap(function($x) use ($predicate) { return $predicate($x) ? result($x) : zero(); }); }

You can see how the building blocks are now put to work. We call the item parser, flatMap on its result, and apply the predicate. If the predicate succeeds, we return the result parser, which basically lifts the $x into the parser context. Otherwise, zero will just do the same, but with Nil instead of any result.

We can quickly capitalize on sat, by creating a few other sequencing combinators.

context("Sequencing combinators", function() { describe("char", function() { it("parses a character", function() { expect(char('h')->run("hello"))->toEqual(ImmList(Pair('h', "ello"))); }); }); describe("digit", function() { it("parses a digit", function() { expect(digit()->run("42"))->toEqual(ImmList(Pair('4', '2'))); }); }); describe("lower", function() { it("parses a lowercase character", function() { expect(lower()->run("hello"))->toEqual(ImmList(Pair('h', "ello"))); }); }); describe("upper", function() { it("parses an upper case character", function() { expect(upper()->run("Hello"))->toEqual(ImmList(Pair('H', "ello"))); }); }); });

You will laugh at how simple the implementation is!

function char($c): Parser { return sat(function($input) use ($c) { return $input === $c; }); } function digit(): Parser { return sat('is_numeric'); } function lower(): Parser { return sat(function($c) { return ctype_lower($c); }); } function upper(): Parser { return sat(function($c) { return ctype_upper($c); }); } Choice Combinators

In the real world of grammars, if we had to return an empty list as soon as the first parser failed, we would not survive. Parsers have to deal with grammatical choice constructs. A very common scenario is either matching one pattern or another pattern. We do that by adding the plus combinator to our arsenal of parsers.

Continue reading %Functional Programming with Phunkie: Building a PHP JSON Parser%

Catégories: News dév web

Free for Commercial Use: Another Load of Free Stock Photos - 7 juin, 2017 - 10:00

FFCU is the abbreviation of the new stock photo provider “Free for Commercial Use,” and that name says it all. All you’ll find on FFCU are completely free to use photos. You probably already know the mind behind the service.

FFCU: Public Domain For Every Legal Purpose

Regular readers of Noupe already know the name Markus Spiske. The photographer and media designer from the German city of Erlangen is also responsible for the stock photo page Raumrot, which we also presented here, back in 2014.

Of course, brain-active readers will immediately ask why you’d need two of these websites. The answer is simple. On Raumrot, all images are under the license CC-BY-2.0, requiring users to mention the creator, origin, and license.

Spiske gets rid of this requirement on Free for Commercial Use (FFCU) entirely. Of course, he’ll be happy to see you give back attribution, but it is not required for you to be allowed to use them. The contrary is the case, as Spiske clearly labels all images on FFCU under CC0 and public domain. This means the photos are completely free to use for any legal purpose.

The photographer stays true to his style on FFCU. Spiske’s photos always have a vintage touch, and always focus things in detail or off the common perspective. You won’t find random snapshots in his arsenal. Nonetheless, he manages to take images in a way that still makes them good options for general purposes. The following photo can serve as a good example:

FFCU already contains 1,000 images, and Raumrot has also grown to more than 1,000 photos. The delivery of the FFCU photos is done via the photographer’s Strato Hi-Drive. All images are provided in 300dpi resolution and weigh about 10 MB. Only time can tell how long Strato will let this slide. In the worst case, it should be possible to find an alternative solution for the distribution pretty quickly.

Clean: Wanted and Found

On FFCU, photos are sorted by topics, and displayed in grid overviews. You get to like, and share individual images on Facebook, Twitter, or Pinterest, directly from the grid. One click on the photo preview opens the respective image’s detail page. Here, you’ll receive some background information on the picture.

However, information that would be interesting for photographers, such as the entire EXIF area, is missing. Alternatively, you can use the free text search to go through the individual subject areas. As a result, you won’t get a grid overview, but a list of results.

If you’re looking for public domain images that don’t look just like a million others, FFCU is definitely worth visiting. The photographers’ special style won’t appeal to everyone, but, in the times of the omnipresent Instagram filters, it is entirely suitable for the masses, without obviously trying to be.

Catégories: News dév web

Getting Started with Sulu CMS on Vagrant The Right Way™ - 5 juin, 2017 - 18:00

In this tutorial, we'll learn how to get started with Sulu CMS the right way - meaning, we'll deploy a Sulu "Hello World" instance using Homestead Improved and be mindful of performance issues and configuration values while we're at it. We'll also cover some common pitfalls, all in an attempt to get a good base set up for future Sulu tutorials. It is recommended you follow along with the instructions in this post and drop a comment with any problems you might run into.

Many thanks to Daniel Rotter and Patrik Karisch for helping me iron this process out!

Note that it's highly recommended to be familiar with Homestead Improved before starting out. If you're not at that level yet, you should buy our amazing book about PHP Environment Basics.

[Sidenote] Enter your project's name

This tutorial is dynamic in that it will replace all placeholders in the text below with the project name you define in the field under this paragraph. That way, the commands become very copy/paste friendly.

Project name:

Generated slug: {{my_project}}

OS X Vagrant Folder Sharing Problems

When using the NFS folder-sharing mode on OS X hosts, the vagrant-bindfs plugin will be necessary. Install it alongside your Vagrant installation with vagrant install plugin vagrant-bindfs. This is a one-time thing that'll prevent many, many headaches down the line if OS X is your main OS.

The rest is all automatic and already configured in the Homestead Improved instance, you don't need to do anything else.

Vagrant up

The first thing we do is, of course, clone the HI repo.

git clone {{my_project}} cd {{my_project}}

Next, let's configure the shared folders:


This made the current working directory shared with the /Code directory inside the VM. That way, the changes made in this folder will be reflected inside the virtual machine and vice versa.

Like with any Symfony app, Sulu requires a custom virtualhost configuration for Nginx. We've made things easier by turning it into a "project type" in Homestead Improved, so all you need to do is the following modification on Homestead.yaml:

  • add the nfs folder sharing type (on OS X and Windows 10)
  • add the sulu project type and change its document root subfolder to web

The relevant sections should end up looking like this:

... folders: - map: /Users/swader/vagrant_boxes/homestead/{{my_project}} to: /home/vagrant/Code type: nfs sites: - map: {{my_project}}.app to: /home/vagrant/Code/{{my_project}}/web type: sulu

Finally, let's fire up the VM.

vagrant up; vagrant ssh

Protip: Useful aliases to set up for future use:

alias vh='vagrant halt; cd ..' alias vush='vagrant up; vagrant ssh' Setting up Sulu Creating the Project

Let's install Sulu's standard edition (the minimal edition is actually "standard" now, whereas the old "standard" is deprecated - they're working on renaming this).

cd Code composer create-project sulu/sulu-minimal {{my_project}}

Note that the docs currently suggest adding a -n flag at the end of that Composer command which means "No interactive questions". I like it when an installer asks me about things I'm supposed to configure anyway, so I omitted it.

Continue reading %Getting Started with Sulu CMS on Vagrant The Right Way™%

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