Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

dreamt up by webguru in Uncategorized | Comments Off on Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

Nick Babich



(This is a sponsored post.) For a long time, UI animation was an afterthought for designers. Even today, many designers think of animation as something that brings delight but does not necessarily improve usability. If you share this point of view, then this article is for you. I will discuss how animation can improve the user experience of landing pages, and I’ll provide the best examples of animation created using the Slides framework.

The Slides framework is an easy-to-use tool for creating websites. It allows anyone to create a sleek landing page in a few minutes. All you need to do is choose an appropriate design from the list of predefined slides.

A collection of predefined designs in Slides.

Four Ways Animation Supports Usability Of Landing Pages

Landing page design is more than just about visual presentation; it’s about interaction. Details of interaction design make a fundamental difference on modern websites. And animated effects can reinforce interactions. To improve the usability of a landing page, an animation must be a functional element, not just decoration. It should serve a clear functional purpose. Below are a few common ways that animation can improve usability.

1. Create A Narrative

Every designer is a storyteller. When we create a website, we are telling a story to our visitors. And it’s possible to tell a much more engaging story by using animation.

Animation can help bring content to life. One good example of such animation can be found on Ikonet. The animation there keeps users engaged as they scroll the page and learn about the company.

Animation can also be used to call the visitor’s attention to something they should notice and act upon. For example, if you have an important text section or a call to action, sliding them in (instead of having them just appear) can help visitors understand where they should focus. Take a look at the Preston Zeller example below. The way elements appear on the pages drives the user’s focus to those areas. The great thing about this animation is that it draws attention to important information without being disruptive.

When visitors scroll on Preston Zeller, elements gradually appear on the page. As a result, attention is drawn to vital information.

2. Provide Feedback

Human-computer interaction is based on two fundamentals: user input and system feedback. All interactive objects should react to user input with appropriate visual or audio feedback.

Below you can see the Custom Checkbox effect created using the Slides framework. The subtle bouncing animation the user sees when they change the state of the toggle reinforces the feeling of interactivity.

With Slides, you can create nice hover animations and encourage users to interact with objects. Take a look at Berry Visual. When you hover the mouse on “Send Message” or on the hamburger menu in the top-right corner, a nice animated effect occurs. It creates a sense that these elements are interactive.

Buf Antwerp is another excellent example of how on-hover animated feedback can improve the user experience. When visitors hover over a tile, a semi-transparent overlay appears, and text provides additional information about the item.

3. Create Relationships

A great place to add animation to a landing page is at moments of change. All too often, moments of change are abrupt &mdahs; for example, when users click on a link, a new screen suddenly appears. Because sudden changes are hard for users to process, such changes usually result in a loss of context — the brain has to scan the new page to understand how the new context is connected to the previous one.

Consider this example of an abrupt change:

This abrupt change feels unnatural and leads to unnecessary brain work (the brain has to scan entire layout to understand what has just happened). (Image: Adrian Zumbrunnen via Smashing Magazine)

Compare that to the following example, in which a smooth animated transition guides the user to the different parts of the screen:

A simple animated transition maintains context, making it easy to understand what has changed about a screen. (Image: Adrian Zumbrunnen via Smashing Magazine)

It’s clear that in the second example, animation prevents abrupt change — it fills the gap and connects two stages. As a result, visitors understand that the two stages belong together. This principle applies equally when you have a parent-to-child relationship between two objects:

Animated transition between preview and details. (Image: Tympanus)

It also applies when you create a transition between stages. The smooth transitions between slides in the example below create a sense of sequence, rather than separate unrelated parts of the page.

Using animation, it’s possible to define object relationships and hierarchies when introducing new elements.

4. Making Boring Tasks Fun

It might be difficult to imagine how to introduce playful elements into everyday experiences. But by adding a bit of surprise where it’s most unexpected, we can turn a familiar interaction into something unexpected and, thus, memorable.

When you visit Tympanus’ 3D Room Exhibition, it looks like any other gallery website that you’ve visited before. But your impression of the website changes immediately once you interact with a page. As you move the cursor, the page moves, and this effect creates a sense of 3D space. This feeling is reinforced when you go from one page to another; it looks like you’re traveling from one room to another within a 3D space.

Large preview

Now let’s talk about something much more familiar than 3D effects: web forms. Who loves filling out forms? Probably nobody. Still, filling out forms is one of the most common tasks on the web. And it is possible to turn this dull activity into a fun exercise. Take a look Darin Senneff’s Yeti character, which is used in a form. When the user starts typing their password, the mascot covers its eyes. Such an animated effect brings a lot of delight when you see it for the first time.

The Yeti character responds to user input.

Last but not least, it’s possible to make the scrolling experience not just more visually interesting, but also helpful for readers. Below is Storytelling Map, an interactive journey in which a path along a map is animated according to the content being scrolled through on the page. The idea ties the text, visuals and locations together; visitors read the information and see it in the context of the map).

Large preview

Six Best Practices For Landing Page Animation

Identifying the places where animation has utility is only half the story. Designers also need to implement animation properly. In this section, we’ll find out how to animate like a pro.

1. Don’t Animate Several Elements At Once

When a few objects are animated simultaneously, it becomes distracting for users. Because the human brain and eye are hardwired to pay attention to moving objects, the user’s focus will jump from one element to another, and the brain will need extra time to figure out what just happened (especially if the movement happens very quickly). Thus, it’s important to schedule animations properly.

It’s vital to understand the concept of transition choreography: the coordinated sequence of motions that maintain the visitor’s focus as the interface changes. Minimize the number of elements that move independently; only a few things should happen at the same time (typically, no more than two or three). Thus, if you want to move more than three objects, group some objects together and transform them as a single unit, rather than animating them independently.

Don’t animate everything at the same time. It will make the objects compete for attention and divide focus. (Image: Google)

Slides offers an excellent benefit to web designers: It prevents them from overusing motion in design. Each animated effect available in Slides has been carefully designed to deliver content in the best possible way.

2. Animation Shouldn’t Conflict With Landing Page’s Personality

Each time you add animation to a design, you introduce personality. This personality will largely depend on the animated effect you choose to use.

When people interact with a product, they have certain expectations. Imagine designing a landing page for a banking service, and you decide to use a bouncing animation to introduce a form that collects the user’s personal information. Many users will hesitate to provide their details because the form conflicts with their expectations.

An example of bouncing animation. Avoid bouncing animation in forms that collect bank account details. Users might hesitate to provide their data. (Image: Joel Besada)

The Slides framework allows you to choose from 10 animated styles, such as Stack, Zen, Film, Cards and Zoom. Experiment with different effects, and choose what’s best for your case.

Large preview

3. Watch The Time

When it comes to designing animation, timing is everything. The timing of your animation can mean the difference between a good interaction and a bad one. When working on animation, you’ll usually spend a third of your time finding the right animated effects and the other two thirds finding the right timing to make the animation feel smooth.

Generally, keep the animation short. Animation should never get in the way of the user completing a task, because even the most beautifully executed animation would be really annoying if it slows down users. The optimal speed for a UI animation is between 200 and 500 milliseconds. An animation that lasts less than 1 second is considered as instant, whereas an animation longer than 5 seconds can convey a feeling of delay.

When it comes to creating an animated effect, one parameter has a direct impact on how the animation is perceived: easing, or timing function in CSS terms. Easing helps designers make movement more natural.

The Slides framework enables web designers to customize easing. You’ll find easing along with other effects in the section “Effect Settings”.

Large preview

4. Think About Accessibility

Animation is a double-edged sword. It can improve usability for one group of users, while causing problems for another group. Apple’s release of iOS 7 was a recent example of the latter. iOS 7 was full of animated effects, and shortly after its release, iPhone users reported that the animated transitions were making them feel dizzy.

Your responsibility as a designer is to think about how people with visual disorders will interact with your design. Check the WCAG’s guidelines on animation, and be sure that your design aligns with them. Track whether a user wants to minimize the amount of animation or motion. A special CSS media feature, “prefers-reduced-motion“, detects whether the user has requested that the system minimize the amount of animation or motion used. When it is set to “reduce”, then it’s better to minimize the amount of movement and animation (for example, by removing all non-essential movement).

Also, conduct usability testing to check that users will all abilities, including people with visual disorders, won’t have any problem interacting with your design.

5. Prototype And Test Your Design Decisions

Animation is fun to play with. It’s easy to go overboard and end up with a design that overwhelms users with too much motion. Unfortunately, there is no silver bullet for great animation; it’s hard to set clear criteria of what is “just enough”. Be ready to spend time on prototyping, testing and optimizing animated effects.

Here are a few tips worth taking into account during testing:

  • Test on different hardware.
    Many hardware factors can drastically affect animation performance: screen size, screen density, GPU performance, to name just a few. As a result, a user on a high-definition screen might have a completely different experience than a user on an older screen. Consider such factors when designing animation to prevent performance bottlenecks. Don’t blame slow hardware; optimize your animation to work great on all sort of devices.
  • Test on mobile.
    Most websites are built and tested on a desktop; the mobile experience and animation performance is often treated as an afterthought. Lack of testing on mobile could cause a lot of problems for mobile users, because some animated techniques work great on desktop but not as well on mobile. To avoid a negative experience, confirm that your design works fine on both desktop and mobile. Test on mobile early and often.
  • Watch animation at a slow speed.
    It might be hard to notice problems when an animation (especially a complex one) runs at full speed. When you slow the animation down (say, at one tenth the speed), such issues become evident. You can also record slow-motion video of your animations and show them to other people to get other perspectives.

With the Slides framework, you can create a high-fidelity interactive prototype in minutes. You can use a WYSIWYG editor to create animated effects, publish the design, and see how it works on both desktop and mobile devices.

6. Animation Shouldn’t Be An Afterthought

There’s a reason why so many designers think of animation as an unnecessary feature that overloads the user interface and makes it more complicated. In most cases, that’s true when designers introduce animation at the end of the design process, as lipstick for the design — in other words, animation for the sake of animation. Random motion without any purpose won’t benefit visitors much, and it can easily distract and annoy.

To make meaningful animation, take time at the beginning of the project to think about areas where animation would naturally fit. Only in this way will animation be natural to the user flow.

Conclusion

Good functional animation makes a landing page not just more appealing, but also more usable. When done correctly, animation can turn a landing page from a sequence of sections into a carefully choreographed, memorable experience. The Slides framework helps web designers use animation to communicate clearly.

Smashing Editorial
(ms, ra, al, yk, il)

Source: Smashing Magazine, Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

Collective #457

dreamt up by webguru in Uncategorized | Comments Off on Collective #457









C457_forgetica

Free Font: Sans Forgetica

A very interesting font that was designed using the principles of cognitive psychology to help remember study notes better.

Get it












C457_zet

Zet

Zet is an extension of ES6 Set for computing the union, intersection or difference of sets.

Check it out


C457_multiboxmenu

From Our Blog

Multibox Menu

A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.

Check it out

Collective #457 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #457

Getting Started With Gutenberg By Creating Your Own Block

dreamt up by webguru in Uncategorized | Comments Off on Getting Started With Gutenberg By Creating Your Own Block

Getting Started With Gutenberg By Creating Your Own Block

Getting Started With Gutenberg By Creating Your Own Block

Muhammad Muhsin



WordPress is the most popular Content Management System (CMS) by far —powering more than 30% of the web. It has undergone a huge metamorphosis during its 15 years of existence. Its latest addition is Gutenberg which is to be released in version 5.0.

Named after Johannes Gutenberg (the inventor of the printing press), Gutenberg is going to fundamentally change WordPress, further helping reach its goal to democratize publishing.

WordPress usually releases its major features as a plugin to test the waters before baking them into the core. Gutenberg is no exception. In this article, we will learn how to go about building your first Gutenberg block. We will be building a Testimonials Slider Block while dwelling on the basics of Gutenberg.

Here is an outline for this article:

  1. Installing The Gutenberg Plugin
  2. Installing The Testimonials Slider Block
  3. Getting Started With The Configuration
  4. Registering A Block
  5. Introducing Gutenberg Specific Syntax
  6. The attributes Object
  7. The edit And save Functions
  8. Continuing Development
  9. Starting A New Gutenberg Block
  10. Conclusion

This article assumes the following:

  • Some knowledge of WordPress such as how content is saved and basic plugin development;
  • Basic understanding of React and ES6;
  • Knowledge of both npm and webpack.

Recommended reading: The Complete Anatomy Of The Gutenberg WordPress Editor

Installing The Gutenberg Plugin

If you are a WordPress user, just go ahead and install the Gutenberg plugin from the <a href="WordPress.org plugin repository. This is what one should use in a production site.

However, if you’re developing a Gutenberg block, I recommend that you clone the development version of Gutenberg which is hosted at GitHub. For help with setting up a local environment, please read the contribution guide.

You get the latest development version of Gutenberg this way but the primary reason to do this is to be able to use the development version of React.js that comes bundled with Gutenberg. The development version has more verbose error reporting which helps greatly with debugging.

Now when you go and create a page or a post, you will be able to edit using the Gutenberg Editor.


Gutenberg Editor Demo
Gutenberg Editor Demo (Large preview)

Since this article is about creating a Gutenberg Block, we will not go into the introduction to the Editor, For a complete understanding of what is Gutenberg and how to use it, please refer to Manish Dudharejia’s article on Smashing Magazine.

Installing The Testimonials Slider Block

The plugin in question — the one we are going to go through is already published to the WordPress repository.

Please install the Testimonials Slider Block plugin to your local WordPress instance so that you have a feel for how the plugin works.

You can also fork or clone the project from GitHub.

After activating the plugin, you can go to your Gutenberg Editor and add a Testimonials Slider to your content:


Testimonials Slider Block
Selecting the Testimonials Slider Block (Large preview)

Adding content to the Testimonials Slider Block
Adding content to the Testimonials Slider Block (Large preview)

Testimonials Slider Block in the frontend
Testimonials Slider Block in the frontend (Large preview)

Now I will go through how I built the plugin and how you too can build a similar one. To keep the article concise, I will not share the entire code in here. However, after reading this you should be able to create your own Gutenberg block.

Getting Started With The Configuration

A Gutenberg block is generally created as part of a plugin. Our plugin is not going to be any different.

Navigate to the plugins directory in your local WordPress instance. Move to the testimonials-slider-block. Notice the following files and folders:

  1. gutenberg-testimonials-slider.php is the main file which has details of the plugin, such as name, description, author details and license. These details will be used in the plugin description in the Plugins menu in the dashboard. You will see that this file calls the init.php file.
  2. The init.php file enqueues the different JavaScript and CSS files. This includes both the external libraries like Bootstrap and Font Awesome and our build files.
  3. The .babelrc file instructs webpack what kind of JavaScript files we are writing.
  4. The package.json file contains all the npm modules that are used in the plugin. You will use the npm install command to install all those packages.
  5. webpack.config.js file contains the configuration for webpack to build our JavaScript and CSS. if you did not know, webpack is a package bundler mainly used for bundling our JavaScript modules and putting them into one file that is then enqueued by WordPress.

That was a lot of configuration files. Now we can go about actually building our Gutenberg block.

Registering A Block

Within the src folder you will see the index.js file. This is the fle that webpack looks for, to bundle the JavaScript. You can see that this file imports the slider.js file within the block folder.

The block folder has the following styles:

  • slider.js: contains the actual code for the block
  • editor.scss: the styles file describing the block within the Gutenberg Editor
  • style.scss: contains styles pertaining to how the block is displayed in the frontend.

Please open the slider.js file in your editor.

This file first imports both the editor and style scss files. Then it imports internationalization component, registerBlockType and the MediaUpload and PlainText components. The last two components will be used to upload the author image and to take in the different text inputs to save in the database.

Next you will see how a block is registered.

It takes in a name as the first parameter. The name must be prefixed with a namespace specific to your plugin in order to avoid any conflicts with another block with the same name.

The second parameter is an array with the following properties and functions:

  • Title
    The name of the block which will appear when you add a new block in the Gutenberg Editor.
  • Icon
    The block’s icon which will be picked up from dashicons. You can also specify your own SVG icons if you want to.
  • Category
    Under which category of blocks will the block appear. Some of the categories are: common, formatting, layout widgets and embed.
  • Keywords
    An array of strings that describe the block, similar to tags.
  • Attributes
    A JavaScript object which contains a description of the data that is saved by the block.
  • Edit
    The function that provides an interface for the block within the Gutenberg Editor.
  • Save
    The function that describes how the block will be rendered in the frontend.

To learn more, please refer to this documentation.

Introducing Gutenberg Specific Syntax

Gutenberg is built with React and the blocks that we build for Gutenberg use a similar syntax.

It certainly helps to know a bit of React to build custom Gutenberg blocks though you don’t have to be an expert.

The following things are useful to know before starting the block development:

  • The HTML class is replaced with className like in React.
  • The edit and save methods return JSX, which stands for JavaScript XML. If you are wondering, JSX is syntax exactly like HTML, except you can use HTML tags and other components like PlainText and RichText within it.
  • The setAttributes method works similar to React’s setState. What it does is, when you call setAttributes the data in the block is updated and the block within the editor is refreshed.
  • The block uses props in the edit and save functions, just like React. The props object contains the attributes object, the setAttributes function and a ton of other data.

The attributes Object

The attributes object that was mentioned previously define the data within the Gutenberg block. The WordPress Gutenberg Handbook says:

Attribute sources are used to define the strategy by which block attribute values are extracted from saved post content. They provide a mechanism to map from the saved markup to a JavaScript representation of a block.

Each source accepts an optional selector as the first argument. If a selector is specified, the source behavior will be run against the corresponding element(s) contained within the block. Otherwise, it will be run against the block’s root node.

For more details on how to use attributes, please refer to this guide.

The following is the attributes object that is used in the Testimonials Slider Block:

attributes: {
   id: {
     source: "attribute",
     selector: ".carousel.slide",
     attribute: "id"
   },
   testimonials: {
     source: "query",
     default: [],
     selector: "blockquote.testimonial",
     query: {
       image: {
         source: "attribute",
         selector: "img",
         attribute: "src"
       },
       index: {
         source: "text",
         selector: "span.testimonial-index"
       },
       content: {
         source: "text",
         selector: "span.testimonial-text"
       },
       author: {
         source: "text",
         selector: "span.testimonial-author span"
       },
       link: {
         source: "text",
         selector: ".testimonial-author-link"
       }
     }
   }
 },

The source tells Gutenberg where to look for data within the markup.

Use attribute to extract the value of an attribute from markup, such as the src from img element. The selector and attribute tell what element to look for and what exact attribute to pick the data from respectively. Notice that the selector string picks up an HTML element from the save function.

Use text to extract the inner text from markup and html to extract the inner HTML from markup.

Use query to extract an array of values from markup. Entries of the array are determined by the selector argument, where each matched element within the block will have an entry structured corresponding to the query argument, an object of attribute and text sources.

You can access the attributes in the edit and save functions through props.attributes.

When you use console.log(props.attributes.testimonials) in the edit function, you get the following result:

  (2) [{...}, {...}]
    ▼0:
      author:"Muhammad"
      content: "This is a testimonial"
      image: "http://localhost/react-gutenberg/wp-content/uploads/2018/08/0.jpg"
      index: 0
      link: "https://twitter.com/muhsinlk"
    ▶__proto__: Object
  ▼1:
    author: "Matt"
    content: "This is another testimonial"
    image: "http://localhost/react-gutenberg/wp-content/uploads/2018/08/767fc115a1b989744c755db47feb60.jpeg"
    index: 1
    link: "https://twitter.com/photomatt"
   ▶__proto__: Object
   length: 2
  ▶__proto__: Array (0)

Therefore, in the above code, id is a text that uniquely describes each testimonial block whereas testimonials is an array of objects where each object has the properties as shown in the above screenshot.

The edit And save Functions

As mentioned above, these two functions describe how the block is rendered in the editor as well as in the frontend respectively.

Please read the full description here.

The edit Function

If you look at the edit function, you will notice the following:

  1. I first get the props.attributes.testimonials array to a const variable. Notice the ES6 Object Destructuring to set the const value.
  2. Then generate an id for the block which will be used to make each block unique when you add more than one Testimonials Slider Block to your content.
  3. Then the testimonialsList is generated, which is got from sorting then mapping the testimonials array that we got in step 1.
  4. Then, the return function gives out JSX, which we discussed earlier. The testimonialsList, which we constructed in step 3 is rendered. The + button is also rendered, pressing which will create a new testimonial inside the block.

If you dig into testimonialsList, you will see that it contains the PlainText and MediaUpload components. These provide the interface for entering the different texts and uploading the author image respectively.

The PlainText component looks like this:

<PlainText
  className="content-plain-text"
  style={{ height: 58 }}
  placeholder="Testimonial Text"
  value={testimonial.content}
  autoFocus
  onChange={content => {
  const newObject = Object.assign({}, testimonial, {
    content: content
  });
  props.setAttributes({
    testimonials: [
      ...testimonials.filter(
        item => item.index != testimonial.index
      ),
      newObject
    ]
    });
  }}
/>

The attributes I have used for the PlainText component are:

  • className
    The CSS class of the component in order to style it.
  • style
    To give a minimum height so that the content does not look like a one-line text. Specifying the height using the class selector did not work.
  • placeholder
    The text that will be displayed when no content is added.
  • value
    The value of the component from the object within the testimonials array.
  • autoFocus
    To tell the browser to focus on this component (input field) as soon as the user adds a new testimonial by clicking the + button.
  • onChange
    What looks like the most complex attribute in this list. This function first gets a copy of the current testimonial and assigns the changed content to newObject. Then it spreads the array of objects, filters out the current object using index and then replaces the newObject within the array. This is set using the the props.setAttributes function to the testimonials array.

The save Function

This function does the following:

  1. I first get the props.attributes.testimonials array and props.attributes.id string to const variables. Again, notice the ES6 Object Destructuring being used to set the values for the two const variables id and testimonials.
  2. Then I create the carouselIndicators variable, which is essentially JSX constructed from the testimonials array.
  3. Then the testimonialsList is created from the testimonials array. The snippet below is from the mapped function callback return.
    {testimonial.content && (
      <p className="testimonial-text-container">
        <i className="fa fa-quote-left pull-left" aria-hidden="true" />
        <span className="testimonial-text">{testimonial.content}</span>
        <i class="fa fa-quote-right pull-right" aria-hidden="true" />
      </p>
    )}
    

    Notice the conditional rendering. The markup will not be rendered for content if the content is not set.

  4. Next, if the testimonials array has objects within it, the HTML is rendered. This is what will be serialized and saved to the database, and this is what will be shown in the frontend (not verbatim).

Continuing Development

I’m sure you want to tinker around this plugin and see what happens. You can continue developing the plugin:

  1. Open up the terminal
  2. Navigate to the plugin’s root directory
  3. npm install
  4. npm start

This will install all the packages, build the files and watch for changes. Every time you make a change to the files, webpack will rebuild the JS and CSS files.

Please note: Markup changes to the blocks will mess up the block in the Gutenberg Editor if you had added it before. Don’t be alarmed — you simply have to remove the block and add it again.

If you are done with developing you can npm run build to minify the files to make it ready for production!

Hopefully, you are now convinced Gutenberg block development is more approachable than it sounds.

I have the following plans in mind for this plugin:

  • Allow users to select color of text, background and accent.
  • Allow users to select the size of slider and font.
  • Avoid depending on libraries like Bootstrap and Font Awesome.

I encourage you to make a pull request with your improvements and extra features.

Starting A New Gutenberg Block

There are many ways to develop a Gutenberg block. One of the recommended ways is to use create-guten-block created by Ahmad Awais. In fact, this project was built based on guten-testimonial-block which was bootstrapped from create-guten-block.

You can also check out Zac Gordon’s repository where he shows how to use the different Gutenberg components in your new block.

Conclusion

We covered the following in today’s article:

  • Installing and using Gutenberg and Testimonials Slider Block plugins
  • Configuration for a typical Gutenberg block plugin
  • Registering a Gutenberg block
  • How to use the attributes object
  • The edit and save functions and how to use them.

I hope this article was useful for you. I can’t wait to see what you will build with and for Gutenberg!

Smashing Editorial
(dm, ra, yk, il)

Source: Smashing Magazine, Getting Started With Gutenberg By Creating Your Own Block

SmashingConf Toronto Videos

dreamt up by webguru in Uncategorized | Comments Off on SmashingConf Toronto Videos

SmashingConf Toronto Videos

SmashingConf Toronto Videos

The Smashing Editorial



The Smashing Toronto conference featured many of your favorite speakers, however, there was a difference. They had been asked to present without slides. In this pairing of videos discover sketching with Eva-Lotta Lamm and SVG Animation with Sarah Drasner.

How I Think When I Think Visually: Eva-Lotta Lamm

Sketching is something which lends itself perfectly to the no-slides format. In this talk, Eva-Lotta demonstrates her process for visual thinking. A method which helps her order her thoughts, create sketchnotes, and visualize processes such as user journeys.

SVG And Vue Together From Start To Finish: Sarah Drasner

In this talk, Sarah starts with only an Illustrator document and by the end, makes it move! In this talk, which has an included GitHub repository to help you follow along, Sarah uses animation and Vue.js to create the final piece.

Smashing Editorial
(ra, il)

Source: Smashing Magazine, SmashingConf Toronto Videos

Taming <code>this</code> In JavaScript With Bind Operator

dreamt up by webguru in Uncategorized | Comments Off on Taming <code>this</code> In JavaScript With Bind Operator

Taming <code>this</code> In JavaScript With Bind Operator

Taming <code>this</code> In JavaScript With Bind Operator

Willian Martins



Do you want to discover the next exciting JavaScript features that you didn’t even know you needed? In this article, I will introduce one of these proposals that if accepted may change the way you write code the same way the spread operator did.

However, here’s a small disclaimer: This feature is under development and discussion. The goal here is to add some hype around it and create awareness of the hard work that TC39 is doing to find consensus, fix all the syntax and semantics issues and have it shipped with the next releases of ECMAScript. If you have any concerns, comments or desire to express your support, please go to the TC39 proposals repository, add a star to this feature to show your support, open an issue to voice your concerns and get involved.

But before, I want to ask a simple (but tricky) question:

What is this?

In ECMAScript, this has a different semantic than this in many other programming languages, where this often refers to the lexical scope. In general, this behaves differently in the global scope, within a function, in non-strict mode and strict mode. Let’s break this behavior down into small examples.

this In The Global Scope

What is the value of this in this example?

console.info(this);

At the global scope, this refers to the global object, like the window in the browser, self on web workers and the module.exports object in NodeJS.

this In The Function Scope

At the function scope, this behaves depending on how the function is called, and this aspect makes it tricky to predict its value. We can understand it better by checking the following examples:

What Is The Value Of this Here?

function foo() {
  return this;
}

console.info(this);

Inside a function, this starts to have an interesting behavior since its value depends on how the function is called. In the example above, this still refers to the global scope, with one difference. In NodeJs, this will point to the global object instead of module.exports.

Setting A Value Into this:

function foo() {
  this.bar = 'baz';
  return this;
}

console.info(foo());
console.info(new foo());

Setting a value into this sets the value into the current context. The example above logs the global scope with the property bar with the value baz in the first console.info, but it logs only { bar: ‘baz’ } in the second console.info. It happens because the new operator among other things bounds the value of this to the newly created object.

This Keyword In The Strict Mode

In strict mode, the this variable doesn’t carry the value of the context implicitly, this means if its context isn’t set, the value of this is default to undefined as shown in the following snippet.

function foo() {
  "use strict";
  return this;
}

console.info(foo()); //undefined

To set the context of this in strict mode you can set the function as member of an object, use new operator, Function.prototype.call(), Function.prototype.apply() or Function.prototype.bind() methods for example.

function foo() {
  "use strict";
  return this;
}

var a = { foo };

foo(); // undefined
a.foo(); // { foo: ƒunction }
new foo(); // Object foo {}
foo.call(this); // Window / Global Object
foo.apply(this); // Window / Global Object
foo.bind(this)(); // Window / Global Object

Making this Variable Predictable

At this point, you may realize that the value of this in ECMAScript is quite tricky to predict. To demonstrate the available techniques to make it predictable, I’d like to present the following example that mimics a common use case of this.

<button id="button">🐱 🐾</button>

  class MeowctComponent {
    constructor() {
      this.paw = document.getElementById('button');
    }

    meow() {
      console.info('🐱 on this: ', this.paw);
    }
  }

  const cat = new MeowctComponent();
  cat.paw.addEventListener('click', cat.meow);

In the example above, I created a MeowctComponent, which has only one property paw that points to the button element and one method called meow that should print the paw instance property into the console.

The tricky part is that the meow method is executed only when the button is clicked, and because of that, this has the button tag as context, and since the button tag does not have any paw property, it logs the undefined value into the console. Tricky, isn’t it?

To fix this specific behavior we can leverage on the Function.prototype.bind() method to explicitly bind this to the cat instance, like in the following example:

<button id="button">Meow</button>

  class MeowctComponent {
    constructor() {
      this.paw = document.getElementById('button');
    }

    meow() {
      console.info('🐱 on this: ', this.paw);
    }
  }

  const cat = new MeowctComponent();
  cat.paw.addEventListener('click', cat.meow.bind(cat));

The method .bind() returns a new permanently bound function to the first given parameter, which is the context. Now, because we bound the cat.meow method to the cat instance, this.paw inside the meow method correctly points to the button element.

As an alternative to the Function.prototype.bind() method, we can use the arrow function to achieve the same result. It keeps the value of the lexical this of the surrounding context and dispenses the need to bind the context explicitly, like in the next example:

<button id="button">🐱 Meow</button>

  class MeowctComponent {
    constructor() {
      this.paw = document.getElementById('button');
    }

    meow() {
      console.info('🐱 on this: ', this.paw);
    }
  }

  const cat = new MeowctComponent();
  cat.paw.addEventListener('click', () => cat.meow());

Although arrow functions solve the majority of use cases where we need to bind the lexical this explicitly, we still have two use cases for which the use of the explicit bind is needed.

Calling A Known Function Using this To Provide Context:

let hasOwnProp = Object.prototype.hasOwnProperty;
let obj = Object.create(null);

obj.hasOwnProperty('x') // Type Error...

hasOwnProp.call(obj, "x"); //false

obj.x = 100;

hasOwnProp.call(obj, "x"); // true

Let’s suppose for any reason we have this obj object that doesn’t extend Object.prototype but we need to check if obj has an x property by using the hasOwnProperty method from Object.prototype. To achieve that, we have to use the call method and explicitly pass obj as the first parameter to make it work as expected, which appears not to be so idiomatic.

Extracting A Method

The second case can be spotted when we need to extract a method from an object like in our MeowctComponent example:

<button id="button">🐱 🐾</button>

  class MeowctComponent {
    constructor() {
      this.paw = document.getElementById('button');
    }

    meow() {
      console.info('🐱 on this: ', this.paw);
    }
  }

  const cat = new MeowctComponent();
  cat.paw.addEventListener('click', cat.meow.bind(cat));

These use cases are the baseline problem that the bind operator tries to solve.

The Bind Operator ::

The Bind operator consists of an introduction of a new operator :: (double colon), which acts as syntax sugar for the previous two use cases. It comes in two formats: binary and unary.

In its binary form, the bind operator creates a function with its left side is bound to this of the right side, like in the following example:

let hasOwnProp = Object.prototype.hasOwnProperty;
let obj = Object.create(null);

obj.hasOwnProperty('x') // Type Error...

obj::hasOwnProp("x"); //false

obj.x = 100;

obj::hasOwnProp("x"); // true

That looks more natural, doesn’t it?

In its unary form, the operator creates a function bound to the base of the provided reference as a value for this variable, like in the following example:

...
cat.paw.addEventListener('click', ::cat.meow);
// which desugars to
cat.paw.addEventListener('click', cat.meow.bind(cat));
...

What’s so cool about the bind operator is the fact that it opens up new opportunities for creating virtual methods, as in this example of lib for iterable.

import { map, takeWhile, forEach } from "iterlib";

getPlayers()
  ::map(x => x.character())
  ::takeWhile(x => x.strength > 100)
  ::forEach(x => console.log(x));

It’s super useful because the developer doesn’t need to download the whole lib to do small stuff, which reduces the amount of imported JavaScript. Besides, it makes those kinds of libs easier to extend.

How To Develop Using Bind Operator

To keep the example simple, let’s suppose we need to create a math module which the developer can chain the operations to form an math expression that, given a number as an entry it could make all calculations into a pipeline. The code to achieve this is simple and could be written as the following.

function plus(x) {
  return this + x;
}

function minus(x) {
  return this - x;
}

function times(x) {
  return this * x;
}

function div(x) {
  return this / x;
}

As you can spot in the example above, we expect to have the value as a context and we use this to make the calculation, so then using the bind operator, we could make an expression like the following:

1::plus(2)::times(4)::div(3)::minus(1); // returns 3

Which is equivalent to:

minus.call(div.call(times.call(plus.call(1, 2), 4), 3), 1);

The first snippet looks more idiomatic, isn’t?

Going a little further, we can use it to convert a temperature from Celsius to Fahrenheit, this can be accomplished by the following function expression:

const toFahrenheit = x => x::times(9)::div(5)::plus(32);
console.info(toFahrenheit(20)); // 68

So far, we demonstrate how create functions to interact with the values, but what about extending the object with virtual methods? We can do new stream compositions mixing built-in methods with custom ones. To demonstrate it, we can compose string methods with custom ones. First, let’s check the module with the custom methods with its implementation.

function capitalize() {
  return this.replace(/(?:^|s)S/g, a => a.toUpperCase());
}

function doubleSay() {
  return `${this} ${this}`;
}

function exclamation() {
  return `${this}!`;
}

With this module in place we can do cool things like the following:

const { trim, padEnd } = String.prototype;

console.info(
  '   hello world   '
    ::trim()
    ::capitalize()
    ::doubleSay()
    ::exclamation()
    ::padEnd(30)
);

// "Hello World Hello World!      "

In the example above, you can spot that I extracted two methods from the String.prototype, trim() and padEnd(). Since these methods are extracted, I can use them to compose my stream of methods alongside with my virtual methods capitalize(), doubleSay() and exclamation(). This aspect is what makes bind operator so exciting and promising.

Advantages And Disadvantages Of Bind Operator

As you may realize at this point, there are some aspects that Bind Operator shines. Those are the following:

  • It covers the only two missing use cases that explicit bind is necessary;
  • It makes easy to make this variable to be predictable;
  • It adds a new way to extend functionality by using virtual methods;
  • It helps to extend built-in objects without extending the prototype chain. Do you remember Smoosh Gate?

In the other side, to compose functions with bind operator you need to rely on this to be bound, that can lead to some issues like in this example:

const plus = (x) => this + x;

console.info(1::plus(1));
// "[object Window]1"

As it becomes clear in the example above, it’s not possible to compose arrow function with bind operator, since it’s not possible to bind this to an arrow function. Sometimes users don’t want to rely on this to be bound to compose their behavior through a function chain, which could be a problem if you only use bind operator to achieve this.

Another issue that is often said is the possible syntax overload that the bind operator can bring which can be a problem to onboard newcomers to the language. Realizing that a specific operator works in binary and unary form is tricky as well. One possible solution for this is to introduce the binary form to the language separately of the unary form. So once the binary form is integrated to the language, the committee can reassess if the unary form is still necessary. Meanwhile, users can get used to the binary form, and the syntax overload could potentially be mitigated.

Conclusion

Predict the value of this in JavaScript is trick. The language has some rules to explain how the context is assigned to this, but in the daily basis we want to make this value predictable. The Function.prototype.bind() method and arrow functions help us to make the value of this predictable. The bind operator comes to play to cover the two use cases that we still need to explicitly bind this.

The advent of bind operator opens an opportunity to create a new set of function composition via virtual methods, but it can add a syntax overload making difficult to onboard newcomers to the language.

The author of the bind operator is Kevin Smith, and this proposal is in Stage 0. The TC39 is open to feedback. If you like this feature and think that it’s useful, please add a star in the repository, if you have an Idea to solve the issues presented here, if you have another way to shape the syntax or semantics of this features or if you spot another issue with it, please open an issue in the repo and share your thoughts/ideas with the committee.

Smashing Editorial
(dm, ra, yk, il)

Source: Smashing Magazine, Taming <code>this</code> In JavaScript With Bind Operator

Collective #456

dreamt up by webguru in Uncategorized | Comments Off on Collective #456









C456_ferret

Ferret

A web scraping system aiming to simplify data extraction from the web for things like UI testing, machine learning and analytics.

Check it out


C456_sourcegraph

Sourcegraph

Sourcegraph is a fast, open-source, fully-featured code search and navigation engine. It’s now open source.

Check it out


C456_stitch

Stitch

Stitch is a simple, powerful database to store and manage creative talent.

Check it out





C456_payments

Web Payments Overview

Google’s Web Fundamentals comprehensive entry for Web Payments by Eiji Kitamura, Dave Gash and Durga Pandey.

Read it



C456_linksplit

linksplit

With linksplit you can easily split traffic between two or more URLs for instant A/B tests.

Check it out


C456_consent

re:consent

An open source tool that shows which data you share with websites that adhere to the “Transparency & Consent Framework” of the Interactive Advertising Bureau (IAB), as well as Google and Facebook.

Check it out


Collective #456 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #456

Use Cases For Flexbox

dreamt up by webguru in Uncategorized | Comments Off on Use Cases For Flexbox

Use Cases For Flexbox

Use Cases For Flexbox

Rachel Andrew



We come to the final part in my Flexbox series here at Smashing Magazine. In this post, I am going to spend some time thinking about what the use cases for Flexbox really are, given that we now have CSS Grid Layout, giving some suggestions for what you might use when and a way to decide.

Earlier In This Series

If you haven’t picked up the other articles yet, this is essentially a concluding post so check those out first. I began by describing exactly what happens when you create a flex container. In the second article in the series, I took a look at alignment, and how we align items on the main and cross axis in flexbox. In the third article, I unpack how sizing works in Flexbox, and how the browser figures out how big a flex item should be. Now that we know exactly how Flexbox works, we can wrap up by thinking about the use cases it is best for.

Should I Use Grid Or Flexbox?

This is still the top question that I’m asked when teaching layout, and in general, I find that as people become more used to working with newer layout methods, it becomes a question you need to ask yourself less. As you build more components you will get a feel for which layout method to use.

If you are just getting to grips with the idea, however, the thing to remember is that both CSS Grid Layout and Flexbox are both CSS. Whether you have specified display: grid or display: flex, you often use more that is common than is different. Both Grid and Flexbox use the properties which are part of the Box Alignment specification; they both draw on concepts detailed in CSS Intrinsic and Extrinsic Sizing.

Asking whether your design should use Grid or Flexbox is a bit like asking if your design should use font-size or color. You should probably use both, as required. And, no-one is going to come to chase you if you use the wrong one.

So, we are not picking between Vue.js and React, Bootstrap or Foundation. We are using CSS to do layout, and we need to use the bits of CSS which make most sense for the particular bit of our design that we are working on. Consider each component, and decide what is best for it, or what combination of things are best for it.

That might be Grid, or it might be Flexbox. It might be a grid outer container with some of your grid items becoming flex items or the reverse. There is no issue in nesting a grid inside a flex item if that is what your design calls for.

What Is Flexbox Really For?

The Flexbox specification describes the layout method like this,

“Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return, it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.”

I think the key phrase here is “distributing space and aligning content”. Flexbox is all about taking a bunch of things (which have varying sizes) and fitting them into a container (which itself has a varying size). Flexbox is squishy. Flexbox tries to create the best possible layout for our items, giving bigger items more space and smaller items less space, thus preserving readability of content.

When people find Flexbox hard and weird, it is often because they are trying to use Flexbox as a grid system — trying to take back control over sizing and space distribution. When you do this, Flexbox can seem weird and hard as you are fighting against the very thing that makes it Flexbox, i.e. that inherent flexibility.

Therefore, patterns which suit flex layout very well are those where we are not so interested in having a pixel-perfect size for each item. We just want those items to display well alongside each other.

See the Pen Smashing Flexbox Series 4: Items Sharing Space by Rachel Andrew (@rachelandrew) on CodePen.

There are also patterns where you want to have wrapped lines, however, you do not want a strict grid. If we take the seminal grid versus the Flexbox example where we use the repeat auto-fill syntax in grid, and then a flex container with wrapped flex lines. Here we immediately see the difference between the two methods.

In the grid example, the grid items line up in rows and columns. While the number of column tracks changes (depending on space), the items always go into the next grid cell that is available. In fact, there is no way to ask a grid item to span tracks if there are some empty cells to fill in that auto-flow scenario.

See the Pen Smashing Flexbox Series 4: Grid Example by Rachel Andrew (@rachelandrew) on CodePen.

In the flex example, the final items share any space left over between them; this way, we do not have alignment horizontally and vertically.

See the Pen Smashing Flexbox Series 4: Wrapped Items flex-basis: auto by Rachel Andrew (@rachelandrew) on CodePen.

If we have a flex-basis of auto and any of the flex items are larger, they will also be given more space so that the alignment could be quite different line by line.

See the Pen Smashing Flexbox Series 4: Wrapped Items by Rachel Andrew (@rachelandrew) on CodePen.

This then is a very clear example of where we would want to use Flexbox over Grid Layout. If we want the items to wrap but to take up the space they need on a line-by-line basis. That is a very different kind of layout to a grid. Patterns like this might be a set of tags (one or two-word elements that you wish to display nicely as a set of items), taking up the space they need and not rigidly being forced into a strict grid.

See the Pen Smashing Flexbox Series 4: Tags example by Rachel Andrew (@rachelandrew) on CodePen.

At the present time, Flexbox is also the best way to perform vertical and horizontal centering of an item inside a container.

See the Pen Smashing Flexbox Series 4: Center an Item by Rachel Andrew (@rachelandrew) on CodePen.

In the future (when there is browser support for the Box Alignment properties outside of flex layout), we may be able to do this without needing to add display: flex to the container. For now, however, that is what you need to do — that extra line of CSS is really not an issue.

Flexbox is very good at dealing with small, one-dimensional components. Sets of form fields, icons, or other information can be easily laid out and allowed to be flexible without needing to carefully set the sizing on each item.

See the Pen Smashing Flexbox Series 4: Simple Row of Form Elements by Rachel Andrew (@rachelandrew) on CodePen.

You might also choose Flexbox in a scenario where all you need to do is cause content at the bottom of a layout to stick to the bottom of a container rather than popping up. In this example, I make the container a flex container by displaying the contents as a column, then allowing the middle to grow by pushing the footer to the bottom of the component.

See the Pen Smashing Flexbox Series 4: Sticky Footer Card by Rachel Andrew (@rachelandrew) on CodePen.

In production, I am finding that Flexbox is useful for lots of little jobs, making sure that things align properly, that space is shared out nicely between items. You could absolutely use a one-dimensional grid container for some of those things, and don’t worry about it if that is what you decide to do.

What I think Flexbox does very well, however, is to cope with the situation where extra items might need to be added that I didn’t expect in my design. For example, if I have a navigation component using Grid I would be creating enough tracks for all items, as I wouldn’t want a new row to be created if I had “too many” items. With flexbox, as long as I was allowing the items to be flexible from a flex-basis of 0 (or auto) then the items would allow their new companion into the row and make space for it.

When Should I Not Use Flexbox?

We have looked at some of the reasons that I think you should choose Flexbox over Grid Layout, so we can now look at some of the places where Flexbox might not be the best choice. We have already looked at our Flexbox versus grid example with items aligned horizontally and vertically versus items which take up space line by line. And, that distinction is the first thing to consider.

The grid example is of two-dimensional layout. Layout in rows and columns at the same time. The Flexbox example is one-dimensional layout. We have wrapped flex lines but space distribution is happening on a line by line basis. Each line is essentially acting as a new flex container in the flex-direction.

Therefore, if your component needs two-dimensional layout, you would be better placed to use Grid over Flexbox. It doesn’t matter whether your component is large or small. If you take one thing from this article, it is to remove the idea from your brain that Grid is somehow only meant for main page layout, and Flexbox for components. You can have a tiny component that requires two-dimensional layout, and main page structures which better suit one-dimensional layout.

Another good point at which Grid may be considered the better solution is if you are applying a width, or a flex-basis set as a length unit to your flex items in order to line them up with another row of flex items, or just to restrict the flexibility in some way. Quite often that indicates either than you really need a two-dimensional layout method or that the control from the container of grid would suit your layout better.

For example, we could make our flex layout display more like a grid, by restricting the flexibility of our items. Setting flex-grow to 0 and sizing the items with percentages, in a similar way to the way we would size items in a floated “grid”. If you find that you are doing that, I would suggest that Grid Layout is a much better approach as it is designed for this type of layout.

See the Pen Smashing Flexbox Series 4: Wrapped Flex Items with Percentage Widths by Rachel Andrew (@rachelandrew) on CodePen.

With all that said, remember that there is very often not a clear right or wrong answer. Sometimes the only thing you can do is to try different ways and see what suits the component best. Remember that you can also switch layout methods, using Flexbox at one breakpoint and Grid at another.

And That’s A (Flex) Wrap!

I hope this series on Flexbox has been helpful and demonstrated how understanding some of the logic behind alignment and sizing of flex items, makes life easier when working with it. If you are left with any outstanding questions or have a pattern which seems not to have an obvious answer in terms of the layout method to use, post a comment.

Smashing Editorial
(il)

Source: Smashing Magazine, Use Cases For Flexbox

How To Build A News Application With Angular 6 And Material Design

dreamt up by webguru in Uncategorized | Comments Off on How To Build A News Application With Angular 6 And Material Design

How To Build A News Application With Angular 6 And Material Design

How To Build A News Application With Angular 6 And Material Design

Rachid Sakara



Are you looking to combine Google’s material design with Angular applications? Well, look no further!

In this tutorial, we’re going to build a news application using two of the most powerful and popular resources out there, Angular 6 and material design. You’ll learn how to incorporate Google’s material design components into Angular application templates to change and style your application in a professional way. The tutorial also serves as a reminder of how to make HTTP requests to bring live news articles to an application using the News API.

Before we get started building the app, let’s quickly review the resources we’re going to use, Angular and material design, and see why we’ve paired them to build this application?


A news application with Angular 6 and Material Design
A news application with Angular 6 and Material Design. (Large preview)

What Is Angular?

Angular — according to the official documentation — is described as follows:

“Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.”

In short, it’s the most powerful JavaScript framework for building highly interactive and dynamic web applications.

“As mentioned, Angular is powerful, but also popular, which is why companies such as Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase are using it.”

What Is Google’s Material Design?

Material design is a design language introduced by Google in the summer of 2014 for Android’s new OS. Although its initial focus was touch-based mobile apps, now its functionality has been extended to reach the web design world.

It’s an adaptable system of guidelines, components, and tools that support the best practices of user interface design. It’s also backed by open-source code and supported by a large community of designers and developers who are collaborating together to build beautiful products.

Why Angular And Google’s Material Design Specifically?

It’s a matter of choice. No JavaScript framework is better than another. It’s all about what your project needs. The same goes for programming languages.

Now, I’m not going to outline the benefits and features of Angular. Instead, I’m going to share with you why I’ve picked Angular specifically to build a news application.

As is always the case with any news application, communicating with back-end services over the HTTP protocol is a crucial part. This is where the newer Angular HttpClient module, which is an improved version of the old Http, can help us easily interact with the service API.

The model-view-viewmodel (MVVM) of Angular will be handy when it comes to binding the remote data that will be stored in objects into our application template, where the component plays the part of the controller/viewmodel and where the template represents the view. This is what we call the Angular template language.

The two-way binding system, which means that any changes in the application’s state will be automatically reflected into the view, and vice versa. You’ll notice that when selecting the news resources from the side menu, that will change the state of our news article.

What I like most about Angular is the SPA technology. Loading only the part of the page that needs to be changed will definitely help our application load and perform more quickly and smoothly.

Of course, there are many other benefits and features of Angular, which you can look up with a quick online search.

What About The Visual Aspect?

We’ve chosen material design because its language is a suitable fit for Angular, and it’s easy to implement.

It’s also a very popular visual language; it’s responsive, and most Google apps are built with it. We want our app to look as much like a Google app as possible.

As an introduction, that’s all we need. It’s time to look at the project overview and then jump into the build process.

Project Overview

“Getting the latest live news articles from a range of sources, including BBC News, CNN, TechCrunch, Huffington Post and more, along with different categories, like technology, sports, business, science and entertainment.”

This is how your application will look when you finish it:


A news application overview
Project overview. (Large preview)

That should get you excited, shouldn’t it? Let’s start by building the app.

Prerequisites

This is what you’re going to need in order to follow along with this tutorial:

  • Node.js and npm installed on your machine;
  • Angular CLI installed on your machine;
  • A basic understanding of Angular.

Once that stuff is out of the way, we can proceed.

Setting up the Angular Project

In this section, we’re going to use the Angular command line interface (CLI) to generate a new Angular project. To do so, head over to the CLI and run this:

ng new news-app

Next, point your command line to the project’s root folder by running the following:

cd news-app

Installing Dependencies

To set up our dependencies, we’re going to install, with just one command, all of the dependencies necessary for this tutorial. Don’t worry, I’ll explain this in a second:

npm install --save @angular/material @angular/animations @angular/cdk

We have three packages being installed with this command.

@angular/material

This is the official material design package for the Angular framework.

@angular/animations

Installing the Angular animation package separately from the Angular core library is necessary. Certain material components need access to the animation libraries, which is why we’re installing it here.

@angular/cdk

The CDK part stands for “component dev kit”, which provides us with high-quality predefined behaviors for your components, since modern web development is all about components.

It is recommended to include the Angular CDK any time you want to link Google’s material design to an Angular application.

To find out more about Angular CDK, check out this article.

Let’s run our app to see that everything works just fine. You can start a development server by running the following command:

ng serve

Now, if you visit http://localhost:4200/ in a browser, you should see the following page:


Welcome to news app
Running the Angular project on development server. (Large preview)

Now, in your code editor, navigate to the file /src/app/app.module.ts, and add the following packages that we’ve just installed:

… Other imports …
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule } from '@angular/material';

It is important to understand what’s going on here. First, we’re importing the animations package to animate our application a bit.

The next import is what’s unique to Angular material. Before, we just included a single material module. Now, we have to import each material component that we intend to use.

As you can see, we’ve added seven different modules here for material buttons, cards, menus, lists toolbars, side navigation, and icons.

After adding those packages to your app.module.ts file, make sure that your file matches the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { NewsApiService } from './news-api.service';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule } from '@angular/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
  ],
  providers: [NewsApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note: The statement import { HttpClientModule } from @angular/common/http in the file above wasn’t generated automatically, but rather added manually. So, make sure you do that, too. And don’t worry about the NewsApiService service provider because we’re going to take care of that later on.

You might be wondering, though, how did I know the names of the modules to import? The official Angular material documentation gives you the exact code needed to import each module.

If you click on any of the components in the left menu and then click on the “API” tab, it provides you with the exact import line that you need to use.


API reference for Angular Material Components
API reference for Angular Material Component. (Large preview)

In terms of setup, that’s all we need to do before we actually begin using and integrating material components in our templates.

You just have to remember to import each unique component that you plan to use.

Acquiring Free API Key

We’re going to use the News API to feed us some news headlines as JSON data, which we’ll implement in the application template.

What is the News API service?

The News API is a simple HTTP REST API for searching and retrieving live articles from all over the web.

Now that you know what the News API is, the next step is to get a free API Key, which will help us make some call requests to the server and grab the news articles.

You can sign up for just 30 seconds. You’ll only need to provide your first name, email address, and password. That’s all.

After signing up, you’ll find the API key already generated for you in the dashboard. Just save it in a text file somewhere on your desktop; because we’ll use it in the next chapter.

Working On The Components

To start working on the components, you need to create a service provider to manage the interaction with the News API service.

Creating The Service Provider

Enter this command to generate a new service provider:

ng generate service NewsApi

After that, go to the generated /src/app/news-api.service.ts file, and add the following code to it:

import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class NewsApiService {

  api_key = 'PUT_YOUR_API_KEY_HERE';

  constructor(private http:HttpClient) { }
  initSources(){
     return this.http.get('https://newsapi.org/v2/sources?language=en&apiKey='+this.api_key);
  }
  initArticles(){
   return this.http.get('https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey='+this.api_key);
  }
  getArticlesByID(source: String){
   return this.http.get('https://newsapi.org/v2/top-headlines?sources='+source+'&apiKey='+this.api_key);
  }
} 

It’s time to use our API Key. Just paste it where it says, “Put_YOUR_API_KEY_HERE”.

We’ve imported HttpClient, which will be responsible for making API calls to our endpoints and fetching news headlines for us.

Now, for the initSources function, we simply prepare our left-side menu with some news resources. After that, we’ve created another function, initArticles which retrieves the first articles from TechCrunch once the application gets started.

As for the last function, getArticlesByID, it’s going to simply bring some articles for the passing parameter.

The Main Component

The service provider is done. Let’s move to the /src/app/app.component.ts file and add this code:

import { Component } from '@angular/core';
import { NewsApiService } from './news-api.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

mArticles:Array;
mSources:Array;
    
constructor(private newsapi:NewsApiService){}

ngOnInit() {
        //load articles
       this.newsapi.initArticles().subscribe(data => this.mArticles = data['articles']);
      //load news resources
     this.newsapi.initSources().subscribe(data=> this.mSources = data['sources']);    
}

searchArticles(source){
     this.newsapi.getArticlesByID(source).subscribe(data => this.mArticles = data['articles']);
}
}

We’re defining two properties here: mArticles, for holding news articles, and mSources, for holding news resources. Both are defined as an array.

In the constructor, we’re simply creating a NewsAPIService instance.

Next, we’re using that instance on the ngOnInit() function to initialize our two properties.

For the searchArticles function, it will be triggered whenever the user selects a specific resource from the left-side menu. Then we’re passing this parameter to the getArticlesByID service provider function to retrieves articles for it.

Defining Material’s Default Style

In our /src/styles.css file, which is generated by the Angular CLI, let’s add the following:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
body {
    padding: 2em 23em;
    background:lightgray;
}

Based on your preference, you can change indigo-pink.css to:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

I’m also adding some CSS to the body tag, only to demonstrate this layout. This helps it look more like an app, even on desktop.

Let’s also add two lines to our /src/index.html file just before the closing head tag:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

The first line imports the material design icon font, and the second one is the Roboto font, which is used by the material design team.

Defining A Template

Let’s start off by adding the following template in the /src/app/app.component.html file:

<mat-toolbar color="primary">
  <button mat-button (click)="sidenav.open ()" ><mat-icon>menu</mat-icon></button>
  <span>News Headlines</span>  
  <span class="example-spacer"></span>
  <button mat-button [matMenuTriggerFor]="appMenu"><mat-icon>settings</mat-icon></button>
</mat-toolbar>
<mat-menu #appMenu="matMenu">
  <button mat-menu-item> Settings </button>
  <button mat-menu-item> Help </button>
</mat-menu>
<mat-sidenav-container class="example-container">
  
  <mat-sidenav #sidenav class="example-sidenav">
    <mat-list class="list-nav">
        <mat-list-item class="list-item" *ngFor="let source of mSources" (click)="searchArticles(source.id);sidenav.close();">
          
          
<span class="source-name"> {{source.name}}</span> </mat-list-item> </mat-list> </mat-sidenav> <mat-card class="example-card" *ngFor="let article of mArticles"> <mat-card-header>
<mat-card-title class="title">{{article.title}}</mat-card-title> <mat-card-subtitle>{{article.source.name}}</mat-card-subtitle> </mat-card-header> <img mat-card-image class="img-article" src={{article.urlToImage}} alt=""> <mat-card-content> <p> {{article.description}} </p> </mat-card-content> <mat-card-actions class="action-buttons"> <button mat-button color="primary"><mat-icon>thumb_up_alt</mat-icon> 12 Likes</button> <button mat-button color="primary"><mat-icon>comment</mat-icon> Comments</button> <button mat-button color="primary"><mat-icon>share</mat-icon> Share</button> <a mat-button color="primary" href={{article.url}} target="_blank" ><mat-icon>visibility</mat-icon> More</a> </mat-card-actions> </mat-card> </mat-sidenav-container>

So, what have we done here?

First, we define a toolbar with a left-side menu, along with the application’s main title and the settings’ right menu.

Next, we’re using *ngFor for both sources and articles, and in doing so, our left-side menu will hold the news resources, and the main contents will hold the news articles.

One thing to notice is that on the click event of our list items, we’ve added two functions because that event executes any JavaScript code. The first function is searchArticles, which we’ve already explain, and the second one is sidenav.close() which will automatically close our left-side menu once the user has selected a resource.

Styling Our Component

The last thing to do with the components is to visit the /src/app.component.css file and paste the following code in it:

.example-spacer {
  flex: 1 1 auto;
}

.example-card{
    margin-top: 4px;
}

.example-header-image { 
  background-size: cover;
}

.title{
    font-weight: bold;
}

.img-article{
    height: 350px;
}

.action-buttons{
    text-align: center;
}
    
.example-container {
    width: 100%;
    height: auto;
    border: 1px solid rgba(111, 111, 111, 0.50);
}
  
.example-sidenav-content {
    display: flex;
    height: 75%;
    align-items: center;
    justify-content: center;
}
  
.example-sidenav {
    padding: 20px;
}

.source-name {
    margin-left:5px; 
}

.list-item:hover{
    cursor: pointer;
    background-color: #3f51b5;
    color: white;
}

Set Up Images For News Resources

Move to the /src/assets directory, and create a new folder named images. Then, download these images either from a Google Drive link or the GitHub repository.

They are the logos of our news resources. Once you download them, copy and paste all of the image files into the images folder that you just created.

Once everything is complete, run this:

ng serve

Now, your app should look like the screenshot below. Pretty awesome, huh!


the news application final product
Launching the app after everything is complete. (Large preview)

Note that when the news snippets are loaded on the main page, a “More” button (as you can see in the picture above) takes the user to read the whole story.

Conclusion

There you have it! I hope this tutorial was useful and that you’ve enjoyed building this application. If so, feel free to leave your feedback and comments below. In the meantime, the Angular Material documentation is pretty cool. It provides you with an overview of each component, an API and an example.

The entire source code of this app is available on GitHub. You can also check out this website, which already implements the service API used in this tutorial.

Smashing Editorial
(ra, al, yk, il)

Source: Smashing Magazine, How To Build A News Application With Angular 6 And Material Design

How To Build A Website With The WP Page Builder Plugin

dreamt up by webguru in Uncategorized | Comments Off on How To Build A Website With The WP Page Builder Plugin

How To Build A Website With The WP Page Builder Plugin

How To Build A Website With The WP Page Builder Plugin

Jakub Mikita



(This is a sponsored post.) WordPress page builders are the first choice for creating a perfect website without any help from a developer. And a new one is on the market that we are going to test in this article. It’s WP Page Builder. We’ll learn how to use this page builder plugin to create a website.

WP Page Builder is a free plugin that integrates with any WordPress theme. You can easily drag and drop elements onto the pages you are building, and you don’t need any coding skills to do so.

At least, that is the developer Themeum’s point of view, which I’ll put to the test in this article. Does the plugin really help us build a website so easily? Are we able to achieve our goals for a website with it? We’re about to find out.

Let’s go through the process of building a real website using the WP Page Builder plugin. We’ll build a website of a few simple pages related to the fictional Rockhedge Park. We’ll learn about the plugin from installation to website launch.

Our goals are to:

  • quickly create the website,
  • create a home page with the park’s features and highlights,
  • create a page to help visitors find the park,
  • create a contact page.

Let’s start with a blank WordPress website, with the Twenty Seventeen theme installed.


a blank WordPress website, with the Twenty Seventeen theme installed
(Large preview)

Installing The Plugin

WP Page Builder is free, and you can download it from Themeum’s website. It’s also easy to install via WordPress’ admin panel, but because the plugin is new, you’ll have to scroll down the list to find it.

Look for the one with the cool blue “P” icon with a square inside.

gif showing how to download WP Page Builder from Themeum’s website
(Large preview)

After installation, you will not be bugged with any splash screen, and the only new thing in the admin area you might notice is a new item in the menu. This is the plugin’s general settings page, where you can control a few things such as which post types the plugin should support and who should be able to edit a page with the page builder.

After installing the WP Page Builder, you will notice a new item in the menu within the admin area.

I like that the plugin does not take over the whole admin panel. It’s discreet, and you are not even forced to use it to create pages or posts:


the plugin does not take over the whole admin panel
(Large preview)

After clicking the button, you are taken to a new screen where the page builder really makes an appearance.

After clicking the button, you are taken to a new screen where the page builder really makes an appearance.
(Large preview)

The overall look and feel are very good. I particularly like the way the responsive options work; the whole website shrinks with a nice animation when you click the tablet or mobile icon.

All of the content and options you can tweak are on the left side, which is pretty convenient because the editing panels are not mixed up with the actual page content.

What I find not so great are the row and addon toolbar icons. They are just too small, and you cannot really distinguish them from each other without getting closer to the monitor. Also, I had to think a while about the menu items on the left, because the name “Addons” was a bit confusing to me. In this plugin, addons are the pieces of content you place on your website, not premium addons that you can install to make your website even cooler.

Another thing needed is support. There is none. It would be very nice to have some help text, even though the page builder seems to be very easy to use. For example, the “Library” tab doesn’t have any content, and I don’t really know what it is or what I can do with it.

Aside from these small things, I like this editor. Let’s proceed to set up our first page!

Creating The Home Page

By default, you can put the content created with WP Page Builder in one spot, where standard content would appear. While this would be the expected behavior with most themes, it’s not in my case. I don’t want my content to be squished together in the default template:


By default, you can put the content created with WP Page Builder in one spot, where standard content would appear.
(Large preview)

This is probably why the plugin comes bundled with a page template called WP Page Builder Template. It spreads the content you build across the whole page, and only the header and footer of the theme are used.

The content looks way better now. I think this page builder could fit into any theme using this page template.


WP Page Builder spreads the content you build across the whole page, and only the header and footer of the theme are used.
(Large preview)

OK, the theme is installed, the page builder is installed, and the page is prepared. What do we do next? I’m sure you’ve been in this position when using page builders before; you just don’t know what to do with the page. You don’t even know what you can do with the page. It’s the standard “blank canvas” problem.

However, I discovered something called “Layouts” in the plugin’s sidebar. And the way it works impressed me.

Page Layouts

Page layouts are complete pages, ready to be imported in your WordPress website. Sounds cool, doesn’t it? Watch this:

a quick preview of page layouts that are ready to be imported into your template
(Large preview)

As you can see, there are many templates, and most of them are paid. A few are free, though, and you can use them to get some inspiration.

The best part with this importing is that it doesn’t bloat WordPress. You can wipe out the page content with two clicks, and nothing is left. Even the images are not loaded to WordPress’ library.

You can test many concepts and options, and adjust everything to your needs without ending up with a ton of unused things imported into your WordPress installation. I really like that.

Composing The Home Page

My initial idea for the home page was a few images of the park and some features highlighted.

After getting inspired by the layouts prepared by Themeum, I started with a header image, and I created my other pages, as well as the main navigation.

I decided not to use any layouts because the blocks and addons are very simple to use, and they come with default content.

I started with a big image section just beneath the header, with a fixed background and a generic title.


The template has a big image section just beneath the header, with a fixed background and a generic title
(Large preview)

Configuring this section was very easy, but I had some trouble with the custom font for the headings. I figured out that I have to remove my previous selection, and then I’m able to pick a new font family.

One thing I like is the way you can adjust the addon’s padding live on the screen:

WP Page Builder lets you adjust the addon’s padding live on the screen
(Large preview)

For the next section, I decided to use a predefined content block, which looks perfect for me. Adding it to the page is also very simple: Just drop it in the desired spot, and adjust the sample content.

A predefined content block can be dropped in any desired spot, while the sample content can easily be adjusted.
(Large preview)

Filling in the content was a breeze, and I quickly reached the last section, the call to action. There, I used the call-to-action block with very simple content.


A call-to-action block with very simple content
(Large preview)

Et voilà! The process of creating the page was very simple, and I enjoyed it.

Creating The “Find Us” Page

The next page is the one where people can easily find our park. This involved the use of more advanced sections, like a map.

Unfortunately, the map addon isn’t available in the free version of the plugin, so I decided to write that one myself and see how the plugin’s code base looks.

The code is not bad at all. It’s clear and easy to read, despite the fact that there are almost no inline comments. I haven’t found any documentation whatsoever, so I had to dig in to see how I could extend the plugin. And it didn’t look like I needed much — just an addon class and filter.

Custom Google Map Addon

When you don’t have any documentation, the best approach is to copy and adjust existing code.

A lot of configuration options seem to be available, some of which really need strong documentation. But for our case, we’ll make a simple Google Map iframe using a Google API key, with a place to query and the iframe’s height.

This is what our class looks like:

class JakubMikita_Addon_GoogleMap{

    public function get_name(){
        return 'jakubmikita_googlemap_block';
    }
    public function get_title(){
        return 'Google Map';
    }
    public function get_icon() {
        return 'wppb-font-location-map';
    }

    // Google Map block Settings Fields
    public function get_settings() {

        $settings = array(
            'apikey' => array(
                'type' => 'text',
                'title' => __('Google Maps API key','wp-pagebuilder'),
            ),
            'place' => array(
                'type' => 'text',
                'title' => __('Map place','wp-pagebuilder'),
            ),
            'height' => array(
                'type' => 'number',
                'title' => 'Height',
                'unit' => array( 'px','em','%' ),
                'responsive' => true,
                'std' => array(
                    'md' => '500px',
                    'sm' => '500px',
                    'xs' => '500px',
                ),
                'tab' => 'style',
                'selector' => '{{SELECTOR}} iframe { height: {{data.height}}; }',
            ),
        );
        return $settings;
    }

    // Google Map Render HTML
    public function render($data = null){
        $settings       = $data['settings'];
        $apikey         = isset($settings['apikey']) ? $settings['apikey'] : false;
        $place          = isset($settings['place']) ? $settings['place'] : false;

        $output = '
'; return $output; } // Google Map Template public function getTemplate(){ $output = '
'; return $output; } }

Looks simple, right? At the top, we have three methods that identify the addon: name, title and icon.

The next method, get_settings(), is where we define all of the user inputs. We define them as an array; I just looked at other addons to figure out the fields I can add. Pretty simple and easy to implement.

I figured out that the next method, render(), is used on the front end. It gets all of the user settings and returns the map iframe.

The last method, getTemplate(), is used on the page builder screen. Having two methods render the same code is not great, but I suppose the reason for it is that the second one has to be parsed with JavaScript.

Another thing that would work better is the method of registering an addon. If this were a more advanced addon, I’d want to include the CSS and JavaScript in separate files. Not very convenient, but also not the end of the world.

The last thing we have to do to register the addon is include it in the array, which we can do with a simple filter:

add_filter('wppb_available_addons', function( $addons) {
    $addons[] = 'JakubMikita_Addon_GoogleMap';
    return $addons;
} );

That’s all. The process is quick and simple. Here is our custom addon:

A gif showing a full-page map on the template

We’ve now got an awesome full-page map on this page.

Creating The “Contact Us” Page

For the last page, let’s put a contact form. I was about to install one of the popular contact form plugins when I noticed the “Form” addon. I gave it a try.

Surprisingly, when I dropped the addon onto the page, I saw all of the fields I wanted already configured and aligned nicely.


The “Form” addon lets you easily create a Contact Us page
(Large preview)

The most interesting part is that WP Page Builder integrates with the Contact Form 7 and weForms plugins. You can even add a simple CAPTCHA or use Google’s reCAPTCHA after providing the website’s keys.

Very cool addon. Submissions to the form come to my inbox without any problem, including all of the fields, and the user sees a nice confirmation message upon submitting the form.

Summary

I must say that WP Page Builder is a solid plugin. Obviously, it have some flaws, but it’s still a young product, and I’m sure Themeum will fix all of the bugs and implement the improvements mentioned in this article.

The overall feel of the plugin is great. The plugin does most of the heavy lifting, and you don’t have to think about how to do what you want because it’s mostly already done. The default content does a really good job and speeds up the work.

Themeum is right: Building a page with its plugin is simple, but not because the plugin is basic. The plugin is intuitive, yet packed with cool addons.

I used only a few of the addons, but the plugin comes with a lot more. Blocks you’d normally spend hours trying to figure how to implement are a drag-and-drop away when using the WP Page Builder plugin.

For example, progress bars, social icons, testimonials and flipping content boxes are ready and waiting to be used. It’s hard to convey the experience in writing. You just have to install the plugin and see for yourself.

Smashing Editorial
(ms, ra, al, il)

Source: Smashing Magazine, How To Build A Website With The WP Page Builder Plugin

Collective #455

dreamt up by webguru in Uncategorized | Comments Off on Collective #455


C455_Divi

Our Sponsor

Real Time Design in WordPress

Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.

Check it out




C455_zipsell

Zipsell

Zipsell is a free, open source and self-hosted platform for selling digital downloads.

Check it out



C455_slang

Slang

Slang is a simple audio programming language that was created to explore implementing a programming language entirely in the browser. By Kyle Stetz.

Check it out





C455_flocking

Flocking

A great article by Drew Cutchins on how to create flocking behavior in code.

Read it






C455_W3c

Representing Web Developers In The W3C

Rachel Andrew writes about her involvement with the CSS Working Group, and why she feels it is important that web developers understand what is being worked on in CSS, and have a way to offer feedback.

Read it


C455_miscrosoft

Designing for Scale and Complexity

Read how the Fluent Design System was implemented across Microsoft Azure to improve usability, consistency, and accessibility for a highly complex and evolving cloud. By Joe Hallock and Leon Welicki.

Read it





C455_Skip

Skip

Skip is an experimental programming language developed at Facebook from 2015-2018.

Check it out


C455_Chromium

Ungoogled-chromium

More relevant than ever, in case you didn’t know about it: Modifications to Google Chromium for removing Google integration and enhancing privacy, control, and transparency.

Check it out

Collective #455 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #455