Statically Compiled Go on Alibaba Cloud Container Service

The third prize of the Alibaba Cloud competition goes to David Banham. His winning entry is a succinct tutorial on statically compiling a Go program, and using Docker to containerize and distribute it.

Alibaba Cloud’s Container Service is a great example of how Docker and Kubernetes are revolutionising the cloud landscape. The curmudgeons will rail that it’s all still just some software running on someone else’s computer, but the transformative difference is that k8s and Docker provide what is effectively a platform-agnostic management API. If you build your DevOps pipelines against k8s you have the lowest possible switching friction between AWS, Google Cloud, Azure and Alibaba. The closer we can get to the dream of write once, run anywhere, the better!

Another tool I love for enhancing software portability is the Go language. Cross compilation in Go is as easy as falling off a log. I develop software on my Linux laptop and in the blink of an eye I can have binaries built for Windows, OSX, WASM, etc! Here’s the Makefile snippet I use to do it:

name = demo

PLATFORMS := linux/amd64 windows/amd64 linux/arm darwin/amd64

temp = $(subst /, ,$@)
os = $(word 1, $(temp))
arch = $(word 2, $(temp))

release:

make -l inner_release

inner_release: $(PLATFORMS)

$(PLATFORMS):
@-mkdir -p ../web/api/clients/$(os)-$(arch)
@-rm ../web/api/clients/$(os)-$(arch)/*
GOOS=$(os) GOARCH=$(arch) go build -o '../web/api/clients/$(os)-$(arch)/$(name) .
@chmod +x ../web/api/clients/$(os)-$(arch)/$(name)
@if [ $(os) = windows ]; then mv ../web/api/clients/$(os)-$(arch)/$(name) ../web/api/clients/$(os)-$(arch)/$(name).exe; fi
zip --junk-paths ../web/api/clients/$(os)-$(arch)/$(name)$(os)-$(arch).zip ../web/api/clients/$(os)-$(arch)/*
@if [ $(os) = windows ]; then cp ../web/api/clients/$(os)-$(arch)/$(name).exe ../web/api/clients/$(os)-$(arch)/$(name); fi

Neat! That will get you a tidy little binary that will run on your target operating systems. Even that is overkill if you’re targeting a Docker host like Cloud Container Service. All you need to do there is just GOOS=linux GOARCH=amd64 go build and you’re done! Then, you just need to choose your favorite Linux distribution and build that into the Dockerfile.

What if we wanted to simplify our lives even further, though? What if we could do away with the Linux distribution entirely?

Go supports the compilation of statically linked binaries. That means we can write code that doesn’t rely on any external DLLs at all. Observe this magic Dockerfile:

The post Statically Compiled Go on Alibaba Cloud Container Service appeared first on SitePoint.


Source: Sitepoint

Colorful Inspiration For Gray Days (November 2018 Wallpapers)

Colorful Inspiration For Gray Days (November 2018 Wallpapers)

Colorful Inspiration For Gray Days (November 2018 Wallpapers)

Cosima Mielke

2018-10-31T10:38:11+01:00
2018-10-31T09:53:16+00:00

How about some colorful inspiration for those gray and misty November days? We might have something for you. Just like every month since more than nine years already, artists and designers from across the globe once again tickled their creativity and designed unique wallpapers that are bound to breathe some fresh life into your desktop.

The wallpapers all come in versions with and without a calendar for November 2018 and can be downloaded for free. As a little bonus goodie, we added a selection of favorites from past November editions to this post. Because, well, some things are too good to be forgotten somewhere down in the archives, right? Enjoy!

Further Reading on SmashingMag:

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Outer Space

“This November, we are inspired by the nature around us and the universe above us, so we created an out of this world calendar. Now, let us all stop for a second and contemplate on preserving our forests, let us send birds of passage off to warmer places, and let us think to ourselves — if not on Earth, could we find a home somewhere else in outer space?” — Designed by PopArt Studio from Serbia.

Outer Space

Stars

“I don’t know anyone who hasn’t enjoyed a cold night looking at the stars.” — Designed by Ema Rede from Portugal.

Stars

Running Through Autumn Mist

“A small tribute to my German Shepherd who adds joy to those grey November days.” — Designed by Franke Margrete from The Netherlands.

Running Through Autumn Mist

Magical Foliage

“Foliage is the most mystical process of nature to ever occur. Leaves bursting and falling in shades of red, orange, yellow and making the landscape look magical.” — Designed by ATop Digital from India.

Magical Foliage

Sad Kitty

Designed by Ricardo Gimenes from Sweden.

Sad Kitty

The Light Of Lights

“Diwali is all about celebrating the victory of good over evil and light over darkness. The hearts of the vast majority are as dark as the night of the new moon. The house is lit with lamps, but the heart is full of the darkness of ignorance. Wake up from the slumber of ignorance. Realize the constant and eternal light of the Soul which neither rises nor sets through meditation and make this festive month even brighter and more vibrant.” — Designed by Intranet Software from India.

The Light Of Lights

Her

“I already had an old sketch that I wanted to try to convert to a digital illustration. The colors of the drawing were inspired by nature that at this time of the year has both the warm of fallen leaves as it has the cold greens of the leaves that make it through winter.” — Designed by Ana Matos from Portugal.

Her

Mesmerizing Monsoon

“Monsoon is all about the chill, the tranquillity that whizzes around, a light drizzle that splashes off our faces, the musty aroma of the earth and more than anything – a sense of liberation. The designer here has depicted the soul of monsoon, one that you would want to heartily soak in.” — Designed by Nafis Mohamed from London.

Mesmerizing Monsoon

Universal Children’s Day

“Universal Children’s Day, 20 November. It feels like a dream world, it invites you to let your imagination flow, see the details, and find the child inside you.” — Designed by Luis Costa from Portugal.

Universal Children Day

Stay Little

“It is believed that childhood is the happiest time cause this period of life cannot be matched with any other phases of life. During this month of November, let’s continue celebrating Children’s Day no matter how old you are, by sharing wishes to your children and childhood friends.” — Designed by Taxi Software from India.

Stay Little

Gezelligheid

“This month’s wallpaper is dedicated to the magical place of Barcelona that has filled my soul with renewed purpose and hope. I wanted to recreate the enchanting Parc Güell where I’m celebrating Thanksgiving with the people I’ve met that have given me so much in so little time.” — Designed by Priscilla Li from the United States.

Gezelligheid

Falling Rainbow

“I have a maple tree in my yard that sometimes turns these colors in the fall – red on the outer leaves, then yellow, and the inner leaves still green.” — Designed by Hannah Joy Patterson from South Carolina, USA.

Falling Rainbow

Origami In The Night Sky

Designed by Rita Gaspar from Portugal.

Origami In The Night Sky

Oldies But Goodies

Below you’ll find some November goodies from past years. Please note that these wallpapers don’t come with a calendar.

Colorful Autumn

“Autumn can be dreary, especially in November, when rain starts pouring every day. We wanted to summon better days, so that’s how this colourful November calendar was created. Open your umbrella and let’s roll!” — Designed by PopArt Studio from Serbia.

Colorful Autumn

Time To Give Thanks!

Designed by Glynnis Owen from Australia.

Time To Give Thanks!

No Shave Movember

“The goal of Movember is to ‘change the face of men’s health.’” — Designed by Suman Sil from India.

No Shave Movember

Welcome Home Dear Winter

“The smell of winter is lingering in the air. The time to be home! Winter reminds us of good food, of the warmth, the touch of a friendly hand, and a talk beside the fire. Keep calm and let us welcome winter.” — Designed by Acodez IT Solutions from India.

Welcome Home Dear Winter

Deer Fall, I Love You!

Designed by Maria Porter from the United States.

Deer Fall, I Love You!

Mushroom Season!

“It is autumn! It is raining and thus… it is mushroom season! It is the perfect moment to go to the forest and get the best mushrooms to do the best recipe.” — Designed by Verónica Valenzuela from Spain.

Mushroom Season!

Little Mademoiselle P

“Black-and-white drawing of a little girl.” Designed by Jelena Tšekulajeva from Estonia.

Smashing Wallpaper - november 11

Autumn Wreath

“I love the changing seasons — especially the autumn colors and festivals here around this time of year!” — Designed by Rachel Litzinger from the United States.

Autumn Wreath

November Nights On Mountains

“Those chill November nights when you see mountain tops covered with the first snow sparkling in the moonlight.” — Designed by Jovana Djokic from Serbia.

November Nights On Mountains

Hello World, Happy November!

“I often read messages at Smashing Magazine from the people in the southern hemisphere ‘it’s spring, not autumn!’ so I’d liked to design a wallpaper for the northern and the southern hemispheres. Here it is, northerners and southerns, hope you like it!” — Designed by Agnes Swart from the Netherlands.

Hello world, happy November!

A Gentleman’s November

Designed by Cedric Bloem from Belgium.

A Gentleman's November

Branches

“The design of trees has always fascinated me. Each one has it’s own unique entanglement of branches. With or without leaves they are always intriguing. Take some time to enjoy the trees around you — and the one on this wallpaper if you’d like!” — Designed by Rachel Litzinger from Chiang Rai, Thailand.

Branches

Simple Leaves

Designed by Nicky Somers from Belgium.

Simple leaves

Captain’s Home

Designed by Elise Vanoorbeek (Doud) from Belgium.

Captain’s Home

Me And the Key Three

“This wallpaper is based on screenshots from my latest browser game (I’m an indie games designer).” — Designed by Bart Bonte from Belgium.

me and the key three

Red Leaves

Designed by Evacomics from Singapore.

Red Leaves

Autumn Choir

Designed by Hatchers from Ukraine / China.

Smashing Wallpaper - november 12

Real Artists Ship

“A tribute to Steve Jobs, from the crew at Busy Building Things.” Designed by Andrew Power from Canada.

Smashing Wallpaper - november 11

Late Autumn

“The late arrival of Autumn.” Designed by Maria Castello Solbes from Spain.

Smashing Wallpaper - november 11

Autumn Impression

Designed by Agnieszka Malarczyk from Poland.

Smashing Wallpaper - november 11

Flying

Designed by Nindze.com from Russia.

Smashing Wallpaper - november 11

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

Thank you to all designers for their participation. Join in next month!


Source: Smashing Magazine

Building a WordPress Plugin with Vue

In this tutorial, we’ll learn how to integrate Vue.js with a WordPress plugin to provide a modern UI experience to our WordPress users.

Vue.js is a very popular progressive JavaScript library for building modern and rich user interfaces similar to Angular and React in terms of popularity, performance and component-based architecture. We’ll dive into the entire process of building a very simple WordPress plugin with a Vue interface that interacts with the WordPress REST API through the JavaScript Fetch API.

We’ll create a shortcode that will allow us to add a latest published posts widget in our WordPress website. The UI of the widget is a Vue app which fetches the latest published posts via the /wp-json/wp/v2/posts?filter[orderby]=date WP-API endpoint.

This tutorial assumes some familiarity with Vue.js. We’ll see how to create a Vue instance, use life-cycle hooks like mounted(), and also the JavaScript Fetch API to interact with the WordPress REST API.

Creating a WordPress Plugin

In this section, we’ll see how to create a WordPress plugin that registers a shortcode in a few steps.

Create a Folder in wp-content/plugins

Let’s start by creating the back-end part of our plugin. Plugins live inside the wp-content/plugins folder. Navigate to this folder inside your WordPress installation folder and create a sub-folder for your plugin. Let’s call it vueplugin:

cd /var/www/html/wp-content/plugins
mkdir vueplugin

Inside your plugin folder, create a vueplugin.php file and add the initial content:

<?php
/*
Plugin Name: Latest Posts
Description: Latest posts shortcode
Version: 1.0
*/

These comments are used as meta information for the plugin. In our case, we simply provide a plugin name, description and version.

If you visit the plugins page in the admin interface you should be able to see your plugin listed:

Our new plugin listed on the plugins page

Creating a Shortcode

Shortcodes are used via WordPress plugins to enable users to add content to posts and pages. To register a shortcode you need to add the following minimal code in your plugin file:

function handle_shortcode() {
    return 'My Latest Posts Widget';
}
add_shortcode('latestPosts', 'handle_shortcode');

We’re registering a shortcode named latestPosts.

WordPress provides the built-in add_shortcode() function to create the shortcode in your WordPress plugin. The function takes a name as the first parameter and the handler function that processes your shortcode logic and returns an output as a second parameter.

At this point, we’re only returning a static string from our shortcode, but shortcodes are more useful when used to insert dynamic content.

Now, let’s activate the plugin from the admin interface by clicking on the Activate link below the plugin name:

Activating the plugin

You can use a shortcode by enclosing it in square brackets — that is, [SHORTCODE_NAME]. The text inside the brackets is the name we passed as the first parameter to the add_shortcode() function. It gets replaced by the output returned by the PHP function passed as the second parameter.

To test if our shortcode is successfully registered, we can create a new post and add [latestPosts] in the post content:

Testing the shortcode

You should see My Latest Posts Widget sentence rendered:

The test sentence rendered

Now, instead of displaying the static My Latest Posts Widget string, let’s display the latest posts using Vue.js.

The post Building a WordPress Plugin with Vue appeared first on SitePoint.


Source: Sitepoint

15 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js

Are you building an app and looking for tools that can help you streamline your build? Take the effort out of your next front-end app build with one of these powerful admin templates.

Whether you prefer to work with React, Angular, or Vue.js, there are a range of templates available on ThemeForest that make it painless to create beautiful, interactive UIs. Built using cutting-edge technology, these templates offer flexibility and dependability for your app build. Create a stunning UI easily by selecting from modular components and clean layouts so that you can focus on the business logic of your app build.

React Admin Templates

React is a JavaScript library for building user interfaces that has taken the web development world by storm. React is known for its blazing-fast performance and has spawned an ecosystem of thousands of related modules on NPM, including many tooling options. 

These admin templates and dashboards are a great starting point for your next React app.

1. Isomorphic Admin Dashboard

IsomorphicReact Redux Admin Dashboard

Isomorphic is a React and Redux-powered single-page admin dashboard. It’s based on a progressive web application pattern and is highly optimized for your next React app. With no need to install or configure tools like Webpack or Babel, you can get started building your app immediately. 

This template helps you write apps that behave consistently, run properly in different environments, and are easy to test. With Sass and CSS styling modules, multilingual support, a built-in Algolia search tool, Firestore CRUD, and easy-to-integrate code, you can use this template to build anything you want.

User justinr1234 says:

“Easily the most well-designed template using React out there, from both a code and design perspective. Integrating the code off the shelf was a breeze. If you have an existing app or are looking to roll a new one on the front end, this template successfully solves the problem for either use case. Excellent product!”

2. Clean UI React Admin Template

Clean UI ReactReact Redux Admin Template

Are you building a single-page app and interested in moving to React and Redux? Don’t start from scratch—build a scalable, highly polished admin app with this React, Redux, Bootstrap, and Ant Design template that works well on mobile, tablet, and desktop. 

Clean UI React is create-react-app based, so getting started is simple. Modular code allows you to add and remove components with ease. Developer friendly and highly customizable, this template includes 9 example apps, more than 50 pages, multiple layout options with easy-to-update Sass or CSS styling, and ample reusable React components.

User hermanaryadinata says:

“The quality is incredibly high and the flexibility is limitless! Highly recommended to buy!”

3. Jumbo React Admin Template

Jumbo React Admin Template

Kick-start your app project with Jumbo React, a complete admin template. This product includes two React templates, one based on Google Material Design and the other on the stunning flat style. Each template comes with multiple design concepts and hundreds of UI components and widgets, as well as an internationalization feature that allows you to develop a multilingual app. 

Think of this template package as a starter kit to build your app. With it, you can develop a scalable React app rapidly and effectively and save yourself time and money in the process.

User Ace_Cooper says:

“Love the amount of components out-of-the-box. Right what I needed to jump start a new project.”

4. Fuse Material Design Admin Template

Fuse Material Design Admin Template

Looking for a template to get your React project started? Fuse is a complete admin template that follows Google’s Material Design guidelines and will allow you to learn some of the advanced aspects of React while you build your app. 

This template uses Material UI as the primary UI library and Redux for state management. It comes with built-in page templates, routing, and authorization features, along with five example apps, more than 20 pages, and lots of reusable React components.

User DevX101 says:

“Very well organized template ready for building a real app. Not just visual templates, but includes authorization and modular design. Great starter kit.”

Angular Admin Templates

Angular is more than just the next version of a popular front-end framework. Angular takes all the best parts of AngularJS and improves them. It’s a powerful and feature-complete framework that you can use to build fast, professional web apps. 

Check out these templates that you can use to get your next Angular app off on the right foot with clean code and great design.

1. Fuse Material Design Admin Template

Fuse Material Design Admin Template

This best-selling template is a 3-in-1 bundle, with Angular 7+, Bootstrap 4, and 21 layered PSD designs. Fuse is based on Google Material Design and comes with AoT compiler support, as well as a complete NgRx example app. This template includes configurable layouts, a skeleton project, built-in apps such as calendar, e-commerce, mail, and chat, and more than 20 pages to get you started. 

Fuse supports all modern browsers (Chrome, Firefox, Safari, Edge) and comes with Bootstrap 4, HTML, and CSS versions, along with the Angular app.

User haseeb90 says:

“This is a great theme. Comes with pre-built apps that you just need to plug your logic and back end into. The code quality is great and stays up-to-date with the latest Angular versions.”

2. Pages Admin Dashboard Template

Pages Admin Dashboard Template

Pages is the simplest and fastest way to build a web UI for your dashboard or app. This beautifully designed UI framework comes with hundreds of customizable features, which means that you can style every layout to look exactly the way you want it to. 

Pages is built with a clean, intuitive, and fully responsive design that works on all major browsers and devices. Featuring developer-friendly code, full Sass and RTL support, and five unique dashboard layouts, this Angular 5+ ready template boasts flawless design and a 5-star rating.

User roly14 says:

“Masterpiece. Simply stunning.”

3. Clip-Two Bootstrap Admin Template For AngularJS

Clip-Two is an advanced, fully responsive admin template built with AngularJS. AngularJS, the original version of the popular Angular framework, lets you extend the HTML vocabulary. The resulting environment is expressive, readable, and quick to develop in. 

Using a Bootstrap UI, Clip-Two is mobile-friendly and comes with ready-to-customize themes with six different skins and infinite styles with SASS. This template includes features like four level sidebar menus, CSS3 page transitions, custom scrollbar for vertical scrollable content, dynamic pagination, and RTL functionality.

User hafizminhas says:

“This is one of the most outstanding Angular 1.x templates available in the market.”

4. Apex Admin Template

Apex Admin Template

Apex is a powerful and flexible admin template based on Angular 6+ and Bootstrap 4. The Angular CLI makes it easy to maintain and modify this app template. With easy-to-understand code and a handy starter kit, this template works right out of the box. Apex includes multiple solid and gradient menu color options and sizes, with an organized folder structure and more than 500 components and 50 widgets. 

This template is fully responsive, clean on every device and modern browser, and comes with AoT and lazy loading. Choose from a few pre-made layout options and customize with ready-to-use elements and popular UI components.

User jklayh says:

“These guys really know how to integrate everything well into one package, and the UI design is amazing. This is highly recommended.”

5. Stack Admin Template and Starter Kit

Stack Admin Template and Starter Kit

Stack Admin is a Bootstrap 4 modern admin template with unlimited possibilities. This product includes eight pre-built templates with an organized folder structure, clean and commented code, and more than 1,500 pages and 1,000 components. Stack Admin provides RTL support, searchable navigation, unique menu layouts, and advanced cards. 

With three niche dashboards, Stack Admin can be used for any type of web app: project management, e-commerce back ends, analytics, or any custom admin panels. This template looks great on all devices, and it comes with a kit to help developers get started quickly.

User sietzekeuning says:

“Beautifully designed and has loads of very useful components. An absolute tip for anybody looking for a very well designed CMS!”

6. Fury Material Design Admin Template

Fury Material Design Admin Template

Clean, unique, and blazing fast, Fury is an admin template that offers you everything you need to get started with your next project. Built with Angular and Material Design, this template is the perfect framework for building large enterprise apps, and it allows for a modular component setup. 

This template is designed to be lightweight and easy to customize. Features include completely customizable dashboard widgets and Angular Flex-Layout, to provide a fast and flexible way to create your layouts.

User CreativelyMe says:

“The code quality is exceptional. It’s clearly the work of a true craftsman. This template is truly a joy to work with, and continues to evolve over time. Excellent!!!”

7. Able Pro 7.0 Responsive Template

Able Pro 70 Responsive Template

Able Pro 7.0 is a fully responsive admin template that provides a flexible solution for your project development. Built with a Bootstrap 4 framework, this template has a Material look, with well structured and commented code. This retina-ready template comes with more than 150 pages and infinite design possibilities—use the Live Customizer feature to do one-click checks on color combinations and layout variations. 

With more than 100 external plugins included, advanced menu layout options, and ready-to-deploy dashboards and landing pages, Able Pro 7.0 will streamline your app development process to save you time and effort.

User macugi says:

“An amazing template. Very good design, good quality code and also very good customer support.”

Vue.js Admin Templates

Vue.js is a front-end JavaScript framework that is easy to learn if you already know HTML and CSS. The versatility of Vue is great for small and large-scale web apps alike. On top of all this, it’s blazing fast!

These Vue templates are sure to save you a lot of time and effort coding your next app.

1. Vuely—Material Design and Laravel Blade Admin Template

VuelyMaterial Design and Laravel Blade Admin Template

Vuely is a fully responsive admin template designed to give you a hassle-free development experience. Carefully crafted to look beautiful on mobile and tablet devices with pre-designed custom pages and integrated features like charts, graphs, and data tables, this template allows you to create your back-end panel with ease. More than 200 UI elements and 78 custom widgets simplify your development process. 

Vuely is translation ready with RTL support and comes with multiple color and theme options to give you the flexibility you need.

User alanoidster says:

“Good design quality, comprehensive components and features, great customer support!”

2. VueJS Laravel Admin Template

VueJS Laravel Admin Template

Looking for a full featured admin template for your Vue.js project? Look no further. This Vue.js admin template is completely modular, so you can modify layouts, colors, and other features without disturbing the rest of the code. Simply customize it with the provided Sass variables. This template is well documented, with seven layout and multiple color scheme options. With all the components you need, this Vue.js template will get you started on your next dashboard build.

User JimOQuinn says:

“Wow, the look and feel of the theme has progressed substantially since the initial release. Great job! Love the no-jQuery framework as I find VueJS much easier to work with. Looking forward to the next release. Keep up the good work!”

Multi-Framework Admin Templates

Finally, here are some templates that work with multiple frameworks.

1. Material Design Admin and Multipurpose Template

Material Design Admin and Multipurpose Template

This Material Design admin template provides you high performance and clean and modern Vue, React and Angular versions. This super flexible template uses SCSS, Gulp, Webpack, NPM Modern Workflow, and Flexbox, and has all the components you need to create your front-end app project. With stunning layouts, over 500 components and lifetime updates and customer support, this is the most complete admin app available.

User themeuser55 says:

“This is an absolutely amazing theme. It is done with quality in mind, regularly updated, and you can tell the developer cares about his work and clients. I would suggest using this template if you are looking for a production worthy front end for a basis to any modern web application.”

2. Primer—Angular and React Admin Template

PrimerAngular and React Admin Template

Primer is a creative Material Design admin template, with ahead-of-time (AoT) compilation for a more performant user experience. Fully responsive and packaged with both Angular and React versions, this template has left-to-right and right-to-left (LTR/RTL) support and light and dark colour schemes. Well documented and easy to customize, with this app template you get everything you need to start working on your SaaS, CRM, CMS, or dashboard based project.

User cjackett says:

“This is a very well built template with great flexibility and lots of options. The author continues to update and improve the template, extending its functionality and incorporating new angular packages. Excellent work.”

Conclusion

This is just a sample of the many app admin templates available on ThemeForest. There is a template for you, no matter what your style or specifications. These templates will make coding the front end of your app easier and help you deliver an app that provides a high-quality user experience. All this will save you time and effort, letting you focus on the real details of coding your project.


Source: Nettuts Web Development

Building a Serverless REST API with Function Compute and MongoDB

We received a lot of great entries in our recent competition to find the best tip for making the most out of Alibaba Cloud services. It was a fun but challenging task for our judges to pick the winners amongst so many helpful and interesting entries. But alas after fiery deliberations and heated debates they’ve decided that the second prize of the competition goes to Nhi Nam Ha. His winning tip is a part of a series on serverless app architecture on Alibaba Cloud, and it covers several Alibaba products.

This tutorial will show you how to deploy a MongoDB database on Alibaba Cloud and use Function Compute to develop a back-end API system to interact with the database.

Overview of NoSQL and MongoDB

Relational databases have been selected as the primary system to manage data in software development for a long time. Its ACID principals promote the data persistency, transaction integrity and concurrency control. Over the last few years, NoSQL (Not only SQL) has become popular. This model solves the impedance mismatch between the relational data structures (tables, rows, fields) and the in-memory data structures of the application (objects). Most importantly, NoSQL is designed to scale horizontally which makes it an excellent choice for modern web applications.

NoSQL could be categorized into 4 groups:

  • Key-Value
  • Document
  • Column family
  • Graph

MongoDB is the most popular system within the document database group. As defined on mongodb.com,

A record in MongoDB is a document, which is a data structure composed of field and value pairs. MongoDB documents are similar to JSON objects. The values of fields may include other documents, arrays, and arrays of documents.

Alibaba Cloud ApsaraDB for MongoDB

MongoDB databases can be deployed on Alibaba Cloud via its ApsaraDB for MongoDB service. Users can select among 3 pricing schemes:

  • Subscription (Replica Set)
  • PAYG (Pay-As-You-Go) (Replica Set)
  • PAYG (Sharding)

Replication and sharding refers to the data distribution models:

  • Replication copies data across multiple servers. The same piece of data is stored in different places. ApsaraDB for MongoDB uses a 3-server replica set. Replication may help with horizontal scaling of reads.
  • Sharding distributes data across multiple machines so different machine contains different subset of data. This model allows for horizontal scaling of writes.

Create an Instance

In the Alibaba Cloud console, click on Products and you will see ApsaraDB for MongoDB under the ApsaraDB group. Alternatively, you can use the search box to filter the desired service.

Select the pricing scheme, the region, the server specification, and set a password for your database. Alibaba Cloud will tell you how much the service cost you based on what you chose.

More info about the instance parameters is here.

Note: if you are using a free trial account, remember to select a subscription instance. PAYG instances do not include in the trial program.

Set IP Whitelists

To ensure database security Alibaba Cloud automatically block all access to the database. You have to specify IP addresses in the whitelist to gain access to the target instance.

ip

Connection String

After you set your IP whitelist, click on “Database Connection” to see the connection parameters

connection

Use this connection string to connect to the database in your Node.js code.

Function Compute

Function Compute lets you run code without provisioning or managing servers. This service prepares computing resources for you and runs your codes on your behalf elastically and reliably. You only pay for resources actually consumed when running the codes. If your code isn’t executed, you don’t pay.

Function Compute runs your code in response to events. When the event source service triggers an event, the associated function is automatically called to process the event.

From the Alibaba Cloud console, select Function Compute and click on the “+” icon to create a new service

1

In the newly created service, click on the “+” icon to create a new function. You will go through a multi-step wizard to select options for your function.

For Function Template, select “Empty Function”

2

In the “Configure Triggers” step, select “HTTP Trigger” and give it a name. Other settings are as the image below

trigger

In the “Configure Function Settings” step, set a name for your function and select “nodejs6” as runtime

4

Click “Next” in the last two steps to finish the wizard and create the fucntion.

Program Your Function

Click on the function you have just created and click on the “Code” tab. This is where you provide your code for the function to run

code

Use the connection string from your MongoDB server.

Also in this screen you can view the HTTP trigger that will invoke your function. You can also run the trigger to test you function here.

run

Summary

In this tutorial we have learnt about NoSQL database with MongoDB as a popular example. Alibaba Cloud provides its ApsaraDB for MongoDB service to those who want to run MongoDB servers on its cloud. The tutorial then moves to discuss the Function Compute service as a new way to build your application following the emerging Serverless architecture. It shows an example of a Node.js function triggered by an HTTP request to connect to the MongoDB database and perform an “insert” command.

The post Building a Serverless REST API with Function Compute and MongoDB appeared first on SitePoint.


Source: Sitepoint

Measuring Performance With Server Timing

Measuring Performance With Server Timing

Measuring Performance With Server Timing

Drew McLellan

2018-10-30T03:40:14+02:00
2018-10-30T14:13:13+00:00

When undertaking any sort of performance optimisation work, one of the very first things we learn is that before you can improve performance you must first measure it. Without being able to measure the speed at which something is working, we can’t tell if the changes being made are improving the performance, having no effect, or even making things worse.

Many of us will be familiar with working on a performance problem at some level. That might be something as simple as trying to figure out why JavaScript on your page isn’t kicking in soon enough, or why images are taking too long to appear on bad hotel wifi. The answer to these sorts of questions is often found in a very familiar place: your browser’s developer tools.

Over the years developer tools have been improved to help us troubleshoot these sorts of performance issues in the front end of our applications. Browsers now even have performance audits built right in. This can help track down front end issues, but these audits can show up another source of slowness that we can’t fix in the browser. That issue is slow server response times.

Time to First Byte

There’s very little browser optimisations can do to improve a page that is simply slow to build on the server. That cost is incurred between the browser making the request for the file and receiving the response. Studying your network waterfall chart in developer tools will show this delay up under the category of “Waiting (TTFB)”. This is how long the browser waits between making the request and receiving the response.

In performance terms this is know as Time to First Byte – the amount of time it takes before the server starts sending something the browser can begin to work with. Encompassed in that wait time is everything the server needs to do to build the page. For a typical site, that might involve routing the request to the correct part of the application, authenticating the request, making multiple calls to backend systems such as databases and so on. It could involve running content through templating systems, making API calls out to third party services, and maybe even things like sending emails or resizing images. Any work that the server does to complete a request is squashed into that TTFB wait that the user experiences in their browser.

The Network panel in Chrome DevTools showing the inspection of a single page request
Inspecting a document request shows the time the browser spends waiting for the response from the server.

So how do we reduce that time and start delivering the page more quickly to the user? Well, that’s a big question, and the answer depends on your application. That is the work of performance optimisation itself. What we need to do first is measure the performance so that the benefit of any changes can be judged.

The Server Timing Header

The job of Server Timing is not to help you actually time activity on your server. You’ll need to do the timing yourself using whatever toolset your backend platform makes available to you. Rather, the purpose of Server Timing is to specify how those measurements can be communicated to the browser.

The way this is done is very simple, transparent to the user, and has minimal impact on your page weight. The information is sent as a simple set of HTTP response headers.

Server-Timing: db;dur=123, tmpl;dur=56

This example communicates two different timing points named db and tmpl. These aren’t part of the spec – these are names that we’ve picked, in this case to represent some database and template timings respectively.

The dur property is stating the number of milliseconds the operation took to complete. If we look at the request in the Network section of Developer Tools, we can see that the timings have been added to the chart.

The Timings panel of a page request in Chrome DevTools showing a new Server Timing section.
A new Server Timing section appears, showing the timings set with the Server-Timing HTTP header.

The Server-Timing header can take multiple metrics separated by commas:

Server-Timing: metric, metric, metric

Each metric can specify three possible properties

  1. A short name for the metric (such as db in our example)
  2. A duration in milliseconds (expressed as dur=123)
  3. A description (expressed as desc="My Description")

Each property is separated with a semicolon as the delimiter. We could add descriptions to our example like so:

Server-Timing: db;dur=123;desc="Database", tmpl;dur=56;desc="Template processing"
The Timings panel of a page request in Chrome DevTools showing descriptions used for Server Timing metrics.
The names are replaced with descriptions when provided.

The only property that is required is name. Both dur and desc are optional, and can be used optionally where required. For example, if you needed to debug a timing problem that was happening on one server or data center and not another, it might be useful to add that information into the response without an associated timing.

Server-Timing: datacenter;desc="East coast data center", db;dur=123;desc="Database", tmpl;dur=56;desc="Template processing”

This would then show up along with the timings.

The Timings panel of a page request in Chrome DevTools showing a Server Timing with no time set.
The “East coast data center” value is shown, even though it has no timings.

One thing you might notice is that the timing bars don’t show up in a waterfall pattern. This is simply because Server Timing doesn’t attempt to communicate the sequence of timings, just the raw metrics themselves.

Implementing Server Timing

The exact implementation within your own application is going to depend on your specific circumstance, but the principles are the same. The steps are always going to be:

  1. Time some operations
  2. Collect together the timing results
  3. Output the HTTP header

In pseudocode, the generation of response might look like this:

startTimer('db')
getInfoFromDatabase()  
stopTimer('db')

startTimer('geo')
geolocatePostalAddressWithAPI('10 Downing Street, London, UK')
endTimer('geo')

outputHeader('Server-Timing', getTimerOutput())

The basics of implementing something along those lines should be straightforward in any language. A very simple PHP implementation could use the microtime() function for timing operations, and might look something along the lines of the following.

class Timers
{
    private $timers = [];

    public function startTimer($name, $description = null)
    {
        $this->timers[$name] = [
            'start' => microtime(true),
            'desc' => $description,
        ];
    }

    public function endTimer($name)
    {
        $this->timers[$name]['end'] = microtime(true);
    }

    public function getTimers()
    {
        $metrics = [];

        if (count($this->timers)) {
            foreach($this->timers as $name => $timer) {
                $timeTaken = ($timer['end'] - $timer['start']) * 1000;
                $output = sprintf('%s;dur=%f', $name, $timeTaken);

                if ($timer['desc'] != null) {
                    $output .= sprintf(';desc="%s"', addslashes($timer['desc']));
                } 
                $metrics[] = $output;
            }
        }

        return implode($metrics, ', ');
    }
}

A test script would use it as below, here using the usleep() function to artificially create a delay in the running of the script to simulate a process that takes time to complete.

$Timers = new Timers();

$Timers->startTimer('db');
usleep('200000');
$Timers->endTimer('db');

$Timers->startTimer('tpl', 'Templating');
usleep('300000');
$Timers->endTimer('tpl');

$Timers->startTimer('geo', 'Geocoding');
usleep('400000');
$Timers->endTimer('geo');

header('Server-Timing: '.$Timers->getTimers());

Running this code generated a header that looked like this:

Server-Timing: db;dur=201.098919, tpl;dur=301.271915;desc="Templating", geo;dur=404.520988;desc="Geocoding"
The Timings panel of a page request in Chrome DevTools showing the test values correctly displayed.
The Server Timings set in the example show up in the Timings panel with the delays configured in our test script.

Existing Implementations

Considering how handy Server Timing is, there are relatively few implementations that I could find. The server-timing NPM package offers a convenient way to use Server Timing from Node projects.

If you use a middleware based PHP framework tuupola/server-timing-middleware provides a handy option too. I’ve been using that in production on Notist for a few months, and I always leave a few basic timings enabled if you’d like to see an example in the wild.

For browser support, the best I’ve seen is in Chrome DevTools, and that’s what I’ve used for the screenshots in this article.

Considerations

Server Timing itself adds very minimal overhead to the HTTP response sent back over the wire. The header is very minimal and is generally safe to be sending without worrying about targeting to only internal users. Even so, it’s worth keeping names and descriptions short so that you’re not adding unnecessary overhead.

More of a concern is the extra work you might be doing on the server to time your page or application. Adding extra timing and logging can itself have an impact on performance, so it’s worth implementing a way to turn this on and off when required.

Using a Server Timing header is a great way to make sure all timing information from both the front-end and the back-end of your application are accessible in one location. Provided your application isn’t too complex, it can be easy to implement and you can be up and running within a very short amount of time.

If you’d like to read more about Server Timing, you might try the following:

Smashing Editorial
(ra)


Source: Smashing Magazine

Deploy a Laravel App to Alibaba Cloud Using Docker

In this tutorial, we will deploy a Laravel application using Docker and Alibaba Cloud Container Service.

Prerequisites

Before you begin this guide you’ll need the following:

  • Docker installed on your local machine (if you can’t install the latest version you can use Docker Toolbox)
  • Composer installed on your computer

Preparing the Application for Deployment

First of all, you need a Laravel application that you can Dockerize. You can just copy my example from GitHub and push to your own git repository or you can create a new Laravel app using Composer with this command: composer create-project --prefer-dist laravel/laravel appname

We need to add some files to the root of the Laravel app.

You have to create an environment configuration file for the production environment, let’s call it .env.prod. You can copy your existing .env file, but don’t forget to modify the values(for example, set APP_ENV to production).

We will need a configuration file for the web server as well(we will use Apache), create a vhost.conf file for our virtual host.

<VirtualHost *:80>
  DocumentRoot /app/public

  <Directory "/app/public">
    AllowOverride all
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

To build our container we need a Dockerfile, we will use multi-stage build:

#Install the dependencies using composer

FROM composer:1.7 as build

WORKDIR /app

COPY . /app

RUN composer install

COPY .env.prod .env

#Application

FROM php:7.2-apache

RUN docker-php-ext-install mysqli pdo pdo_mysql

EXPOSE 80

COPY --from=build /app /app

COPY vhost.conf /etc/apache2/sites-available/000-default.conf

RUN chown -R www-data:www-data /app 
&& a2enmod rewrite

We also need to exclude some files and folders from the container, so you should create a .dockerignore file (you can extend this list if you want):

.git/
vendor/
node_modules/
yarn-error.log

Creating a Repository in Alibaba Cloud Container Registry

On the Alibaba Cloud Console, go to Products > Elastic Computing > Container Registry.

1_menu

First, you need to set the registry login password.

3_registry

We have to create a namespace, then we can create a repository for the application.

6_registry

Make sure that you set the repository type to Private, otherwise the repository will be accessible without the password. You can select the region of your repository as well.

7_registry

The Container Registry supports GitHub, GitLab and Bitbucket as a code source which is really useful. If you use one of them you can choose that, but for the simplicity, we will use the Local repository option in this tutorial.

You need to build the container on your local computer and push it to the registry (if you choose a Git hosting service Container Registry will build the containers automatically, so you can skip these steps.)

Run the following command in the root of your Laravel app to build the container (you can replace test/laravel:1.0 tag with your own).

docker build -t test/laravel:1.0 .

If you click on manage at the right of your repository in the Container Registry, you can find the address of your repository and a guide about how to log in to the registry and push an image to the repository.

repo_info

So you have to run the following commands, but with your own region, namespace and repository:

docker login --username=user@example.com registry-intl.eu-central-1.aliyuncs.com
docker tag test/laravel:1.0 registry-intl.eu-central-1.aliyuncs.com/ma_test/laravel1:1.0
docker push registry-intl.eu-central-1.aliyuncs.com/ma_test/laravel1:1.0

When you successfully pushed the image, you will see it under the Tags tab.

tags

Creating a VPC

On the Alibaba Cloud Console go to Products > Networking > Virtual Private Cloud and activate VPC.

Choose your region from the top menu and create a VPC and a VSwitch.

vpc1

vpc2

Creating a Cluster

First you need to enable RAM (Products > Monitor and Management > Resource Access Management), then you can go to Products > Elastic Computing > Container Service.

Container Service supports both Swarm and Kubernetes. Now we will use Swarm, so you should select Swarm from the left menu.

swarm

Click on the Create Cluster button and configure your cluster (don’t forget to select the same region that you selected for your VPC).

cs2

cs3

I chose 2x (2 nodes) 1 Core 1GB ECS instances for the demo, but you can choose a different configuration if you want.

In the Login section, you need to create SSH keys or set a password. I highly recommend SSH keys, but for the simplicity, you can use passwords for now.

When you have finished with the configuration you can click on the Create button (a confirm dialog will show up with pricing information).

When the cluster creation is finished and you can see your cluster in the cluster list, click on Manage.

You need to log in to your private repository to access the images, so click on the Log on to Hub button. If you don’t know what the repository’s domain name is, you should go to the Container Registry control panel and click on Manage at the right of your repository. Copy the VPC address (for example: registry-intl-vpc.eu-central-1.aliyuncs.com/ma_test/laravel1) — that is your Repository Domain Name. Your username and password is the username and password of your registry.

password2

Now the cluster nodes can pull your image from the private repository.

Deploying the Application

On the Container Service control panel click on Applications from the left menu, then click on Create Application.

1

Set the name and the version, check Pull Docker Image (this will ensure that you definitely end up with the latest version), then click on Create with Image button.

The post Deploy a Laravel App to Alibaba Cloud Using Docker appeared first on SitePoint.


Source: Sitepoint

The Importance of Resilience in Business

Mini Latif decided she wanted to run her own business at the age of seven and that nothing was going to stand in her way. Turns out she was right.

She grew up thinking that everyone had their own business; in her mind it was just how it was done. Her Cypriot parents, who moved to Melbourne to escape the war, owned milk bars and worked in cafes long before the term barista even existed. And so it was here, living above her family’s milk bar, where the seven-year-old Mini decided on her career path: go work for a corporate organization to learn the policies and procedures behind running a business and then head out on her own. Not bad for a seven-year-old. And when asked if she’s ever doubted that decision, her reply is a swift: “Never.”

True to her word, Latif would eventually make the move to London to work for big corporate agencies with huge clients and even bigger budgets. She enjoyed her work, yet that plan for her own business never wavered.

I knew that I didn’t love the corporate world but understood that I needed the insight. It was through this work I learned the importance of policies, procedures and that I needed to be controlled with my thinking. When one of the agencies offered me as job as an Account Director, I stopped my internal train for five minutes and considered it but I couldn’t shake off the feeling that time was not on my side to take a career detour and it would only be a matter of time before someone else would beat me to my idea.

The idea she speaks of is her business Ottoman3, a brow bar, the seed of which was sown during her time overseas.

I would spend my lunch hour in John Lewis, a UK department store, getting my nails done and my eyebrows threaded and find myself there every three weeks. One day I just thought: “what if I could get these two things done at the same time?” That was where the idea for Ottoman3 came from.

The move back to Australia came with the sole aim of her opening the first Ottoman3.

I assumed it would take time, so I first got myself a good paying corporate job as I didn’t want to compromise my quality of life. What I mean by that is financial quality. I had already sacrificed so much to be able to take this chance on myself, that I didn’t want to have to count the pennies to survive. I think that would have affected my mental health. So before I contacted Myer, I first secured a good paying corporate job that was going to “support” my lifestyle financially. Once I had that secured, then I continued on with my business plan without having to worry about how I would pay the mortgage. I didn’t have my daughter then so it was easier to fit in an extra few hours of work a day. All the Ottoman3 stuff was done in addition to my “real job”.

That real job was working as an online specialist for Medibank Private, something she did from 9am–5pm, five days a week.

It’s the biggest challenge with start-ups: there’s no money, and you need to be able to pay your mortgage and your bills at the same time as starting your business. Once we opened in Myer I was working full-time at Medibank, and then Thursday and Friday nights. As well as that, on Saturdays and Sundays I was in Myer at the brow bar and on the tools.

Mini Latif at WeTeachMeMini Latif (right) at WeTeachMe’s Masters Series

The post The Importance of Resilience in Business appeared first on SitePoint.


Source: Sitepoint

The CSS Working Group At TPAC: What’s New In CSS?

The CSS Working Group At TPAC: What’s New In CSS?

The CSS Working Group At TPAC: What’s New In CSS?

Rachel Andrew

2018-10-26T22:30:30+02:00
2018-10-29T13:56:10+00:00

Last week, I attended W3C TPAC as well as the CSS Working Group meeting there. Various changes were made to specifications, and discussions had which I feel are of interest to web designers and developers. In this article, I’ll explain a little bit about what happens at TPAC, and show some examples and demos of the things we discussed at TPAC for CSS in particular.

What Is TPAC?

TPAC is the Technical Plenary / Advisory Committee Meetings Week of the W3C. A chance for all of the various working groups that are part of the W3C to get together under one roof. The event is in a different part of the world each year, this year it was held in Lyon, France. At TPAC, Working Groups such as the CSS Working Group have their own meetings, just as we do at other times of the year. However, because we are all in one building, it means that people from other groups can more easily come as observers, and cross-working group interests can be discussed.

Attendees of TPAC are typically members of one or more of the Working Groups, working on W3C technologies. They will either be representatives of a member organization or Invited Experts. As with any other meetings of W3C Working Groups, the minutes of all of the discussions held at TPAC will be openly available, usually as IRC logs scribed during the meetings.

The CSS Working Group

The CSS Working Group meet face-to-face at TPAC and on at least two other occasions during the year; this is in addition to our weekly phone calls. At all of our meetings, the various issues raised on the specifications are discussed, and decisions made. Some issues are kept for face-to-face discussions due to the benefits of being able to have them with the whole group, or just being able to all get around a whiteboard or see a demo on screen.

When an issue is discussed in any meeting (whether face-to-face or teleconference), the relevant GitHub issue is updated with the minutes of the discussion. This means if you have an issue you want to keep track of, you can star it and see when it is updated. The full IRC minutes are also posted to the www-style mailing list.

Here is a selection of the things we discussed that I think will be of most interest to you.

CSS Scrollbars

The CSS Scrollbars specification seeks to give a standard way of styling the size and color of scrollbars. If you have Firefox Nightly, you can test it out. To see the examples below, use Firefox Nightly and enable the flags layout.css.scrollbar-width.enabled and layout.css.scrollbar-color.enabled by visiting http://about:config in Firefox Nightly.

The specification gives us two new properties: scrollbar-width and scrollbar-color. The scrollbar-width property can take a value of auto, thin, none, or length (such as 1em). It looks as if the length value may be removed from the specification. As you can imagine, it would be possible for a web developer to make a very unusable scrollbar by playing with the width, so it may be better to allow the browser to decide the exact width that makes sense but instead to either show thin or thick scrollbars. Firefox has not implemented the length option.

If you use auto as the value, then the browser will use the default scrollbars: thin will give you a thin scrollbar, and none will show no visible scrollbar (but the element will still be scrollable).


A scrolling element with a thin scrollbar
In this example I have set scrollbar-width: thin.(Large preview)

In a browser with support for CSS Scrollbars, you can see this in action in the demo:

See the Pen CSS Scrollbars: scrollbar-width by Rachel Andrew (@rachelandrew) on CodePen.

The scrollbar-color property deals with — as you would expect — scrollbar colors. A scrollbar has two parts which you may wish to color independently:

  • thumb
    The slider that moves up and down as you scroll.
  • track
    The scrollbar background.

The values for the scrollbar-color property are auto, dark, light and <color> <color>.

Using auto as a keyword value will give you the default scrollbar colors for that browser, dark will provide a dark scrollbar, either in the dark mode of that platform or a custom dark mode, light the light mode of the platform or a custom light mode.

To set your own colors, you add two colors as the value that are separated by a space. The first color will be used for the thumb and the second one for the track. You should take care that there is enough contrast between the colors, as otherwise the scrollbar may be difficult to use for some people.


A scrolling element with a purple and white scrollbar
In this example, I have set custom colors for the scrollbar elements. (Large preview)

In a browser with support for CSS Scrollbars, you can see this in the demo:

See the Pen CSS Scrollbars: scrollbar-color by Rachel Andrew (@rachelandrew) on CodePen.

Aspect Ratio Units

We’ve been using the padding hack in CSS to achieve aspect ratio boxes for some time, however, with the advent of Grid Layout and better ways of sizing content, having a real way to do aspect ratios in CSS has become a more pressing need.

There are two issues raised on GitHub which relate to this requirement:

There is now a draft spec in Level 4 of CSS Sizing, and the decision of the meeting was that this needed further discussion on GitHub before any decisions can be made. So, if you are interested in this, or have additional use cases, the CSS Working Group would be interested in your comments on those issues.

The :where() Functional Pseudo-Class

Last year, the CSSWG resolved to add a pseudo-class which acted like :matches() but with zero specificity, thus making it easy to override without needing to artificially inflate the specificity of later elements to override something in a default stylesheet.

The :matches() pseudo-class might be new to you as it is a Level 4 Selector, however, it allows you to specify a group of selectors to apply some CSS, too. For example, you could write:

.foo a:hover,
p a:hover {
  color: green;
}

Or with :matches()

:matches(.foo, p) a:hover {
  color: green;
}

If you have ever had a big stack of selectors just in order to set the same couple of rules, you will see how useful this will be. The following CodePen uses the prefixed names of webkit-any and -moz-any to demonstrate the matches() functionality. You can also read more about matches() on MDN.

See the Pen :matches() and prefixed versions by Rachel Andrew (@rachelandrew) on CodePen.

Where we often do this kind of stacking of selectors, and thus where :matches() will be most useful is in some kind of initial, default stylesheet. However, we then need to be careful when overwriting those defaults that any overwriting is done in a way that will ensure it is more specific than the defaults. It is for this reason that a zero specificity version was proposed.

The issue that was discussed in the meeting was in regard to naming this pseudo-class, you can see the final resolution here, and if you wonder why various names were ruled out take a look at the full thread. Naming things in CSS is very hard &mdashbecause we are all going to have to live with it forever! After a lot of debate, the group voted and decided to call this selector :where().

Since the meeting, and while I was writing up this post, a suggestion has been raised to rename matches() to is(). Take a look at the issue and comment if you have any strong feelings either way!

Logical Shorthands For Margins And Padding

On the subject of naming things, I’ve written about Logical Properties and Values here on Smashing Magazine in the past, take a look at “Understanding Logical Properties and Values”. These properties and values provide flow relative mappings. This means that if you are using Writing Modes other than a horizontal top to bottom writing mode, such as English, things like margins and padding, widths and height follow the text direction and are not linked to the physical screen dimensions.

For example, for physical margins we have:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

The logical mappings for these (assuming horizontal-tb) are:

  • margin-block-start
  • margin-inline-end
  • margin-block-end
  • margin-inline-start

We can have two value shorthands. For example, to set both margin-block-start and margin-block-end as a shorthand, we can use margin-block: 20px 1em. The first value representing the start edge in the block dimension, the second value the end edge in the block dimension.

We hit a problem, however, when we come to the four-value shorthand margin. That property name is used for physical margins — how do we denote the logical four-value version? Various things have been suggested, including a switch at the top of the file:

@mode "logical";

Or, to use a block that looks a little like a media query:

@mode (flow-mode: relative) {

}

Then various suggestions for keyword modifiers, using some punctuation character, or creating a brand new property name:

margin: relative 1em 2em 3em 4em;
margin: 1em 2em 3em 4em !relative;
margin-relative: 1em 2em 3em 4em;
~margin: 1em 2em 3em 4em;

You can read the issue to see the various things that are being considered. Issues discussed were that while the logical version may well end up being generally the default, sometimes you will want things to relate to the screen geometry; we need to be able to have both options in one stylesheet. Having a @mode setting at the top of the CSS could be confusing; it would fail if someone were to copy and paste a chunk of the stylesheet.

My preference is to have some sort of keyword value. That way, if you look at the rule, you can see exactly which mode is being used, even if it does seem slightly inelegant. It is the sort of thing that a preprocessor could deal with for you; if you did indeed want all of your properties and values to use the logical versions.

We didn’t manage to resolve on the issue, so if you do have thoughts on which of these might be best, or can see problems with them that we haven’t described, please comment on the issue on GitHub.

Web Platform Tests Discussion

At the CSS Working Group meeting and then during the unconference style Technical Plenary Day, I was involved in discussing how to get more people involved in writing tests for CSS specifications. The Web Platform Tests project aims to provide tests for all of the web platform. These tests then help browser vendors check whether their browser is correct as to the spec. In the CSS Working Group, the aim is that any normative change to a specification which has reached Candidate Recommendation (CR) status, should be accompanied by a test. This makes sense as once a spec is in CR, we are asking browsers to implement that spec and provide feedback. They need to know if anything in the spec changes so they can update their code.

The problem is that we have very few people writing specs, so for spec writers to have to write all the tests will slow the progress of CSS down. We would love to see other people writing tests, as it is a way to contribute to the web platform and to gain deep knowledge of how specifications work. So we met to think about how we could encourage people to participate in the effort. I’ve written on this subject in the past; if the idea of writing tests for the platform interests you, take a look at my 24 Ways article on “Testing the Web Platform”.

On With The Work!

TPAC has added to my personal to-do list considerably. However, I’ve been able to pick up tips about specification editing, test writing, and to come up with a plan to get the Multi-Column Layout specification — of which I’m the co-editor — back to CR status. As someone who is not a fan of meetings, I’ve come to see how valuable these face-to-face meetings are for the web platform, giving those of us contributing to it a chance to share the knowledge we individually are developing. I feel it is important though to then take that knowledge and share it outside of the group in order to help more people get involved with developing as well as using the platform.

If you are interested in how the CSS Working Group functions, and how new CSS is invented and ends up in browsers, check out my 2017 CSSConf.eu presentation “Where Does CSS Come From?” and the information from fantasai in her posts “An Inside View of the CSS Working Group at W3C”.

Smashing Editorial
(il)


Source: Smashing Magazine

Build a Single-Page App with Go and Vue

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. Single-Page Applications (SPAs) improve user experience by offering rich UI interactions, fast feedback, and the relief of knowing you don’t need to download and install a traditional application. Browsers are now operating systems and websites […]

The post Build a Single-Page App with Go and Vue appeared first on SitePoint.


Source: Sitepoint