#dust.js

[vuejs2]

Dust.js 3.0: Asynchronous JS Templating for Browser and Server - https://t.co/thB6YLxZqZ

[jobsaggregationco]

UI Engineer

Job Title : UI Engineer Location : San Diego, CA Duration: Long-term Primary Job Responsibilities · Experience with angular.js, Node.JS and supporting frameworks · Experience with Dust.js or other templating engines · Experience with Grunt or other build/packaging systems · Experience in core web front-end technologies including HTML5, CSS3, and JavaScript · Experience creating user interfaces and addressing cross-browser and backward compatibility issues · Understanding of key web development concepts (TCP, DNS, HTTP Protocol, SSL/TLS, certificates, etc.) · Experience with RESTful web services and SOA concepts · Experience addressing concurrency, transactions, and related run-time application concepts · Experience developing automated unit, integration and functional test suites · Experience with Git source control and effective branching and release management practices -- Reference : UI Engineer jobs source http://jobsaggregation.com/jobs/technology/ui-engineer_i1227

[mbaljeetsingh]

Fresh Resources for Web Developers — December 2017

“Headless CMS” is gaining much attention these days. In a nutshell, “headless CMS” does not deal with the front-end; the CMS only exposes the content usually in a form of RESTful API while the developers may use whatever they prefer to render the content. With the increasing popularity of this practice, new frameworks arise to set it up and running quickly.

So, in this round up, I’ve put together a few of these frameworks along with some other helpful tools that are worth checking out.

Read Also: CMS.js – The Newest Free JavaScript Site Generator

This is a WordPress starter theme but unlike the others, this starter theme leverages the WP-API to get the content and then render it into a static HTML using Node and React making your website “headless”.

VueStoreFront is another “Headless CMS” framework. Built on top of Vue.js and Node, VueStoreFront and is designed for e-Commerce platforms like Magento, Prestashop, and Shopware through the APIs. It also incorporates PWA approach which allows the site to be usable offline.

Gatsby is a site static generator built with React.js. You can use CMSs with API like WordPress, Markdown, JSON to feed the content. Similarly it utilizes some recent technologies such Node, PWA, and React that allow it to load incredibly fast.

DustPress is a WordPress starter theme with modern development approach. Leveraging the Dust.js template language, DustPress separates the HTML template layout from the PHP logic allowing developers to produce a much cleaner code. It also makes development faster, more maintainable and gives the theme a organized structure.

Visual Studio Code has quickly become one of the most popular code editors. It is lightweight, has plenty of plugins, and now it has selections of different icons. If you feel the default Visual Studio Code icon is boring, switch to any of these icons.

TailWindCSS is another CSS frameworks. But it differs from popular CSS framework like Bootstrap and Foundation in a way that it does not provide UI components. Instead, TailWindCSS comes with small pieces of CSS classes that allows you to compose your own UI.

I was experimenting with Docker and was wondering how to route domain name to several different containers on a single machine. Then I found Traefik, a modern HTTP reverse proxy and load balancers. Aside of Docker, it also support other services such Kubernetes, Rancher, and Amazon Elastic Container.

Built on top of Vue.js, CubeUI is a fantastic UI component to build mobile apps. Consisting with a lot of components such as Button, Popup, TimePicker, Slide, and Checkbox. Each component is quipped with a TestUnit ensuring continous integration and also minimizing bug on each component.

Air is minimal WordPress starter theme. Extending the _s, Air adds some additional components such as Slides, Sticky Navigation Bar, and WooCommerce-ready.

EmptyStates is a collection of empty state pages on the web and mobile apps for inspiration. The empty state page is the kind of page that is often overlooked.

Read Also: How To Design Empty State Pages for Websites & Mobile Apps

This website provides a collection of shortcuts of populars applications and tools used by developers and designers. Here you’ll find shortcuts for Sketch, Photoshop, InDesign, Sublime Text, WordPress, and many more to come. The list currently only contains shortcuts for macOS, but it would be great to see Windows shortcuts to also be added in.

Uppy is a JavaScript frameworks to build a file upload interface. With Uppy, you can retrieve files, not only from local drive, but also from external storage service like Google Drive, Dropbox, Instagram, and other services. It’s lightweight, modular, and extendabled with custom plugins.

VuetifyJS is an initiative from John Leider to build Material Design around Vue.js. Google has similar initiative with MDL or Material Design Lite, but it does not seem to get enough traction in the community and the development seems to progress really slow in the last couple of months now. So if you’re looking for an alternative, VuetifyJS might be the right choice.

WP Ulike is a WordPress plugin to add “Like” to your content whether in the built-in WordPress post type, custom post types, and bbPress as well as BuddyPress. It also comes with some other cool features such Notification System, Analytics, and Widgets which make it one of the most compelling “Like” system for your WordPress site.

Vee Validate is a JavaScript library to add input field with the validation built-in. It supports many type of inputs such as Email, Number, Dates, URL, IP address, etc.

Another handy Vue.js plugin. VueDataTables is a simple plugin to build customizable and pageable table with Vue.js. The plugin is build with scale in mind that it can render massive data on the table flawlessly. It is also shipped with some extra components to power up your table like Pagination, Searchbox and Filter.

Googler is a CLI that allows you perform search in Google through the command lines. Similar to the interface, it will also retrieve the title, description, URL, and the pagination. It’s handy tool for macOS and Linux power users.

Bolt is CMS built with PHP. It is quick to set up, uses Twig as its templating engine, fully supports PHP7, easy to customize through a simple YAML file. Overall it looks interesting to me; I’ll definitely spend some time to explore it further whenver I have a chance.

Teletype is a new a new initiative from the Atom Editor. This new feature allows you to collaborate with your peers on writing code. To use it, you’ll need to install the official Teletype plugin.

Plyr (pronounced as Player) is a modern media player library with just 10kb in size. With this you’ll be able to customize the HTML video and audio player, Youtube and Vimeo, and a Live streaming media. It’s in active development with more planned features to be added incuding support for Wistia and Facebook embedded video.

via Hongkiat http://ift.tt/2ACwxnF

[mobilunity]

Review of the Best Template Builders

Nowadays you can hire frontend developers or even full stack ones, and they will create a website for your needs. In order to make it faster, but still create a high-quality product, they will use Pug template engine or the one that fits not only JavaScript, but other languages as well, like Mustache, for example. But we surely jump into the topic too fast.

In case you are not familiar with the term, template builders or engines, how they are called sometimes – are a special type of software, which provides developers with half-ready solutions for writing a cleaner code. They are created in order to make life of frontend and backend developers easier. They allow to write code pieces much faster, without extra time-consuming movements. There are many of them for different programming languages, allowing to work with a variety of frameworks, which is convenient due to the fact, that preferences of developers usually tend to vary, while they are making their choice of framework to code with. Template builders have many advantages and are surely worth to be used by programmers nowadays, especially in conjunction with numerous preprocessors, plugins, additional tools and packages. The only disadvantage they have, is the need to learn how to use them before actually applying your knowledge into the code. Maybe exactly this is the reason why there are so many of them: it’s naturally that different types of programmers would like to learn and use various types of engines.

Examples of Template Engines

JavaScript

Being one of the most popular programming languages nowadays, JavaScript conquers hearts of programmers and helps to create wonderful websites and applications with interactive and intuitive design, movement and performance. Anyway, even such a great and quite easy-to-learn language, can be very time-consuming, especially when developer has to write thousands of rows of code. This is the reason why website building tools are so popular nowadays and surely will continue to be for many more years. Let us introduce great examples of them for JavaScript language:

Pug/Jade

Pug template engine is created for Node.js. It has short, clean and logical syntax, it’s easy to read and its code templates can be reused in the other languages like Java, Python, Ruby, PHP, etc, which is a huge advantage that is appreciated by full stack developers, who code on several languages. Dedicated team of developers of Mobilunity has experience using this engine as it is very convenient solution when work needs to be done faster for a client.

Dust.js

Being a JavaScript template builder, it was vastly influenced by Mustache language and now is maintained by LinkedIn team of developers. Thanks to the provided interactive tutorial, this template builder is quite easy to begin with. There’s one more plus to the advantages of this engine: the code, compiled in Dust.js easily runs on the client and server side as well, thanks to the fact, that it’s fully written in JS.

EJS

Embedded JavaScript templates or EJS is supported by server-side and browser. It is  an engine for those, who love coding with JS, but don’t like to spend time on structuring HTML logic. EJS does all the job with HTML much easier. Programmers often use this one along with Pug template engine in order to make their coding even faster and cleaner.

Nunjucks

Nunjucks is available on all modern web browsers as well as in Node.js. Being supported by Mozilla corp., it gets updates regularly, therefore keeps up with the times. Nunjucks template engine was inspired by Jinja2, which is the engine for Python. This is also a reason why developers tend to wonder whether the same templates could be used between Jinja2 and Nunjucks, but there actually is a slight difference in syntax between these templating engines, which doesn’t allow fully integrate Nunjucks code pieces in Jinja.

Templates for Other Languages:

We are sure, that JavaScript is a very demanded language nowadays, that is why so many companies hire frontend developers for interesting projects. This is also a reason why numerous frameworks and website building tools are created by developers and for them, aiming to ease-up the whole coding process and allow them to work faster. The thing is, that JS is not the only language, which could be templated and needs to be. There are also PHP, C, Python and many other popular languages, that are used by lots of developers in web, mobile and software development. Let’s review just a couple of them:

Mustache

Mustache is a template engine, which is chosen by programmers all over the world, because it is open-source, clean, concise and it’s adapted for a big number of programming languages like C#, Ruby, Python, PHP, Objective-C, Swift, Java, and many others. This engine is as appreciates as it’s argued between developers as well, claiming that it is useless, regarding “logic-less” feature of Mustache as something, that should be eliminated from programming at all. Anyway, there are also many people, who claim that Mustache has much more advantages and can be quite handful sometimes or even capable of replacing traditional way of coding at all. We won’t choose the winner of the battle, because it’s up to anyone what way of coding they choose, especially since there are so many alternatives to Mustache nowadays.

Blade

It is a template builder for the most popular PHP framework – Laravel. It is a simple, but quite powerful engine, because it doesn’t force you to acquire additional knowledge. You can write simple PHP code, except with Blade it will be much easier than without it as it provides you with the ability to code in a more automatized manner.

ClearSilver

There are not so many template engines for C-family languages as there are for JavaScript, for example. ClearSilver is the one, which has to be mentioned for sure, because it is written in C and can be exported to Java, Python, Ruby and Perl, which is a great advantage for developers, who work with multiple languages.

Jinja

This Python template builder was already mentioned above as the one, which Nunjucks was inspired by. It is one of the most popular and widely used template engines among Python developers. There are many engines for Python, which are embedded in frameworks already and they are good only in case all hustle with code is performed within one library. In case some operations have to be executed with templates in outer-libraries, they won’t be processing in a good way. Here comes the Jinja, the best thing about which is the possibility to use the code, written with its help, multiple times in different frames, because it is an independent open-source project.

Overall, there are many more template builders we have not reviewed today, but the ones we’ve mentioned are definitely worth trying as they are regarded life-savers for many developers around the world.

If you want modern website being created exactly for your type of business – hire dedicated team of developers from Mobilunity.

from Review of the Best Template Builders

[allerint]

How to handle handle delay in loading the content from server side in any rails application, using javascript template engine.

[newsvi]

How to use Dust.js at Paypal and LinkedIn Jeff Harrell from PayPal talks about how he and his team at PayPalare using Dust and JavaScript templating to enable rapid, lean UX development from prototype to production, and to bridge their legacy and new UI technology stacks. From LinkedIn, Veena Basavarajpresents on how LinkedIn uses [3]Dust.js to render page templates, using JavaScript, on both the client and server. She will be talking about challenges and solutions for generating e-mails, site SEO, formatting / localization, and AB testing.

[sntran]

Using Dust.js with Express3.0alpha on Node.js 0.6.x

Dust.js is a nice template engine for Node.js, but its development has been idle for almost a year.

Now I'm trying to test it on Express with Node.js 0.6.x, and the easiest way turns out to be using consolidate.js.

Consolidate.js only support express.js 3.0.xbranch, which is not onnpm` yet, so we need to install the CLI from master branch on github

$ npm install -g https://github.com/visionmedia/express/tarball/master

Then create a default Express app named test:

$ express -s -e test && cd test

Now we need to install express module also from masterbranch on github:

$ npm install https://github.com/visionmedia/express/tarball/master

Then do regular npm install to install dependencies.

Consolidate.js author has not pushed dust.js support to npm, so we need to install from master branch.

$ npm install https://github.com/visionmedia/consolidate.js/tarball/master

Then install dust.js

$ npm install dust

There are a few changes you need to do before being able to run the app. See the below app.js for changes (old ones are commented out).

var express = require('express') , routes = require('./routes') , http = require('http') , fs = require('fs') , path = require('path') , cons = require('consolidate'); var app = express(); // assign dust engine to .dust files app.engine('dust', cons.dust); app.configure(function(){ app.set('view engine', 'dust'); app.set('views', __dirname + '/views'); app.use(express.favicon()); app.use(express.logger('dev')); //app.use(express.static(__dirname + '/public')); app.use(express.static(__dirname + '/public', {redirect: false})); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser('your secret here')); app.use(express.session()); app.use(app.router); }); app.configure('development', function(){ app.use(express.errorHandler()); }); //app.get('/', routes.index); app.get('/', function(req, res){ res.render('index', { title: 'Testing out dust.js server-side rendering' }); }); http.createServer(app).listen(3000); console.log("Express server listening on port 3000");

You also need to modify Dust to add support for Node 0.6.x by modifying node_modules\dust\lib\server.js as following:

- Script = process.binding('evals').Script; + Script = require("vm"); - require.paths.unshift(path.join(__dirname, '..'));

Then you can now run node app.js.