Demystifying JavaScript Closures, Callbacks And IIFEs

We have already taken a close look at the contexts of variables and elevation, so today we will end our exploration by examining three of the most important and heavily used in modern JavaScript development concepts - closures, callbacks and IIFEs.
Closures

In JavaScript, a closure is any function that holds the reference to the variables of the scope of his father, even after the parent has returned.

This means practically any function can be considered a close, because, as we have seen in section variable range of the first part of this tutorial, a function can refer to, or have access to -

•       variables and parameters in its own sphere of function
•       the variables and parameters of external functions (parents)
•       global variables.

So, chances are you've already used closures without knowing it. But our goal is not just to use them - is to understand them. If you do not understand how they work, we cannot use them properly. Therefore, we will divide the definition previous close in three easy points to understand.

Item 1: You can refer to variables defined outside the current function.



Try the example of JS Bin

In this code example, the PrintLocation () function refers to the variable of country and city parameter envelope function (father) setLocation (). And the result is that when setLocation () is called, PrintLocation () successfully used the variables and parameters from the old to the exit "You are in Paris, France."

Point 2: internal functions can refer to variables defined in the outer function, even after he has returned.



Try the example of JS Bin

this is almost identical to the first example, except this time PrintLocation () is returned within the outer setLocation (function), instead of being called immediately. Thus, the value is the inner PrintLocation CurrentLocation () function.

If alerted CurrentLocation like this - alert (CurrentLocation); - Let's get the following result:



As we can see, PrintLocation () is executed outside its lexical scope. It seems that setLocation () is gone, but PrintLocation () still have access to, and "remembers" its variable (country) and the (city) parameter.

A closure (internal function) is able to remember its surrounding area (external functions), even when running outside its lexical scope. Therefore, it can be called at any later point in your program.

Point 3: Functions stored inside variables external function by reference, not by value.



Try the example of JS Bin

Here CityLocation () returns an object containing two locks - get () and set () - and both refer to the city the external variable. Get () gets the current value of the city, while set () updates. "Sydney" - - instead of the default "Paris" option when myLocation.get () is called a second time, the (current) present value of the city is issued.

Thus, the closures can read and update your stored variables, and updates are visible to any closure have access to them. This means that the store closings references to their external variables, instead of copying their values. This is a very important point to remember, because they know that can lead to some difficult point logical errors - as discussed in "expressions of immediately invoked function (IIFEs)" section.

An interesting feature of closures is that the variables in a closure are automatically hidden. Closing data centers closed their variables without providing direct access to them. The only way to alter these variables is by accessing them indirectly. For example, in the last part of the code we saw that we can modify the variable town only obliquely using the get () and set () closures.

We can use this behavior to store private data on an object. Instead of storing the data as properties of an object, we can store it as variables in the constructor, and then use the closures and methods relating to these variables.

As you can see, there is nothing mystical or esoteric about closures - just three simple points to remember.

CALLBACKS:

In JavaScript, functions are first-class objects. One consequence of this is that the functions can be passed as arguments to other functions, and can also be returned by another
functions.

A function that takes other functions as arguments or return functions as its result is called a higher order function, and the function that is passed as an argument is called a callback function. It's called "callback", because at some point in time that is "called back" by higher order function.

Callbacks have many everyday uses. One is when we use the setTimeout () and setInterval () of the Object Browser - methods that accept and execute callbacks:



Try the example of JS Bin

Another example is when an event is attached to an element on a page. By doing that we are actually providing a pointer to a callback function to be called when the event occurs.

Try the example of JS Bin

The easiest way to understand how higher-order functions and callbacks job is to create his own. Therefore, we will create one now:



Try the example of JS Bin

Here we create a fullName () function takes three arguments - two for the name, and one for the callback function. Then, after the console.log () statement, put a function call that triggered the callback function actual call - function Card () defined below the fullName (). And finally, we call fullName (), which is passed Card () as a variable - without brackets - because we want to run immediately, but simply want to point out that for later use by fullName ().

We are moving from the definition of the function, not the function call. This prevents the callback to be executed immediately, which is not the idea behind callbacks. He spent the definition of functions that can be executed at any time and at any point of the function containing. Furthermore, because callbacks behave as if placed actually within that function, are closing practice: you can access variables and parameters of the function containing, and even variables from a global scope.

The callback can be an existing function as shown in the example above, or it can be an anonymous function, we create when we called the higher order function, as shown in the following example:



Callbacks are used heavily on JavaScript libraries to provide generalization and reuse. Allow for easy library methods and / or extended customization. In addition, the code is easier to maintain, and much more concise and easy to read. Whenever you need to transform your model repeated unnecessary based on more abstract / generic callbacks come to the rescue code.

Say we have two functions - one that prints information about the published and another that prints information about messages sent. We believe, but we realize that some of our logic is repeated in both functions. We know that having one and the same piece of code in different places is unnecessary and difficult to maintain. So what is the solution? We will illustrate in the following example:



what we have done here is to the pattern of repeated code (console.log (point) and var date = new Date ()) in a separate function, generic (publish ()), and leave only the specific data within other functions - who are now callbacks. Thus, with one and the same function that can print information for all things related - posts, articles, books, magazines and others. All you have to do is create a callback function for each type specialized call and pass it as an argument to the publish () function.

IBM's Design Language Is No Bootstrap killer

Reinventing IBM in recent years has revolved mainly around the cloud and analysis. But Big Blue has also been imposed in areas normally populated by startups and small businesses, faster - not that their efforts in these new areas have been entirely successful.



  IBM's latest move in this vein is a set of web design guidelines that bring the material mind design Google or Twitter Bootstrap. But IBM's goals are much more modest projects - and from the look of it, much less immediately useful.

The IBM design language, the new framework has been in the works for about a year, according to a blog detailing the project. IBM justification for the design language is "unity, not uniformity", and aims to be "more instructive than prescriptive". This translates into less emphasis on stock designs or templates and more emphasis on the guidelines and concepts.

"Patterns Off-the-shelf and templates would actually stifle innovation we designed the language to encourage" says the blog. Rather, the design concepts revolve around a set of experiences - how users discover something, start working with him, get help with it, expand it, and so on.

To this end, do not look to the resources provided by IBM for the design language for a site experience outside the box similar to Bootstrap design or even a set of elements of Web visualization in line with Design of Materials. Among the few resources provided are a template for icons Adobe Illustrator, calculator-type scale and color analysis online tool (both provided by websites that are not IBM), and a set of color palettes.

The IBM component provides that most resembles nothing Bootstrap materials or design is a color mixing system-SASS. The rest of what IBM is offering advice and design philosophies along with some examples.

If I Design Language is not out of eclipsing Bootstrap or materials design, what is the real plan? One possibility is that IBM aims to provide a comprehensive set of design guidelines to influence applications emerging from its recent partnership with Apple, and the future work of Watson and Bluemix use the services of ramp. It makes sense that everything has a consistent appearance and behavior.

IBM declared strategy is to Design Language "intentionally created to evolve through feedback from product teams and users." But if IBM wants others to draw on what it's created, you may find you have specific, concrete examples that can releveraged is a privileged way to do that - in other words, the same templates and widgets that IBM avoided in the name of not stifle innovation.

Find A Coding Buddy To Make Learning Easier And More Fun

There are plenty of resources for learning code, but none is better than a real person who can explain concepts to you, logic brainstorming with you and answer questions for you. That is why, if you are an experienced programmer or a beginner, you should get a co-coding.

Coding with another person will help you learn a new language more efficiently. Not only have a knowledgeable give you the backup you need to figure out a language, but also gives you someone to teach, it's a great way of learning companion. Belle night of his life, developer exist, explains why she finds her mate so valuable coding:



      I have yet to find a method of learning that better than having a real person to talk to.

      My co-founder Josh, who is primarily a Python developer, has practically learned Objective-C by me thanks to my many theoretical align programming questions ("How does a statement whether the job again?") And help with debugging when I'm really stuck.

      At least, having a fellow patient coding that can explain the fundamentals of programming is a big help. Josh often help me think through the most logical way to approach a problem, before I resolve the details of in Objective-C.

Having a partner could be the difference between learning to code in a few months and learn to code in a few weeks.

7 CSS Units You Might Not Know About

It's easy to get working with CSS techniques that we know well, but doing so puts us at a disadvantage when new problems emerge.

As the Web continues to grow, the demand for new solutions will also grow. Therefore, as web designers and front-end developers, we have no choice but to meet our set of tools, and know well.

That means knowing even specialty tools - which are not used as often, but when needed, are exactly the right tool for the job.

Today, I'll introduce you to some CSS tools you may not have known before. These tools are each units of measurement, such as pixels or ems, but chances are you've never heard of them! Let us enter.

Rem

Let's start with something that is similar to something you are probably already familiar. The em unit is defined as the size of the current font. Thus, for example, if a font size in the body element, the value em any child elements within the body is equal to the font size is set.




Here, we have said that the div will have a font size of 1.2em. That's 1.2 times what the size of the font that has inherited, in this case 14px. The result is 16.8px.

However, what happens when the font sizes defined cascading em inside the other? In the following excerpt we apply exactly the same as the above CSS. Each div inherits its font-size from his father, who gives us gradually increasing font sizes.





While this may be desirable in some cases, often you may want to simply rely on a single metric to scale against. In this case, you must use rem. The "r" in rem means "root"; this is equal to the font size set on the root element; in most cases be the html element.






In the three divs nested in the above example, the font would evaluate 16.8px.
Good for Grids

Rems are not only useful to determine the font size. For example, you could base a complete network system library or user interface styles in the HTML root using rem font-size, scale and use em in specific locations. This would give more predictable size and font scaling.





Conceptually, the idea behind such a strategy is to allow the interface to scale with the size of its content. However, it may not necessarily make the most sense for all cases.
vh and vw

Responsive web design techniques rely heavily on the percentage rules. However the percentage of CSS is not always the best solution for each problem. CSS width is on the array element containing nearest. What if you want to use the width or height of the view instead of the width of the parent element? That's exactly what the VH and vw units provided.

The vh element is equal to 1/100 of the height of the viewport. For example, if the height of the browser is 900px, 1VH evaluate to 9px. Similarly, if the viewport width is 750px, 1vw evaluate to 7.5px.

There are seemingly endless uses for these standards. For example, a very simple way to make slideshow full-height or full-height fence can be achieved with a single line of CSS:





Imagine you wanted a holder that was created to fill the width of the screen. To accomplish this, you must set a font size in vw. That size will scale with browser width.

Vmin and Vmax

While vh and vm are always related to the height and display width, respectively, Vmin and Vmax are related to such maximum or minimum widths and heights, depending on which is smaller and larger. For example, if the browser is set to 1100px width and 700px height, and 1vmin would 1vmax would 7px 11px. However, if the width is set to 800px and height set to 1080px, Vmin would equal 8px while vmax would be set to 10.8px.

So, when might you use these values?

Imagine you need an item that is always visible on the screen. The use of a height and width set to a value below 100 vmin allow this. For example, an element of the square that always plays at least two sides of the screen may be defined as:




If you need a square box that always covers the visible viewport (touching all four sides of the screen at all times), using the same rules, except vmax.






Combinations of these rules provide a flexible way to use the size of the viewport in new and exciting ways.

ex and ch

Former and ch units, similar to them and real, are based on the font and size of the current font. However, unlike them and real, these units are also based on the font family, as determined based on the measurements of the specific source.

The ch unit or character unit is defined as the "new measure" the width of the zero character, 0. Some very interesting about what this means can be found on the blog of Eric Meyers discussion, but the basic concept is that, given a monospace font, a box with a width of N character units, such as width: 40CH;, can always contain a string with 40 characters from that particular source. While conventional uses of this particular rule refer to trace the braille, the possibilities for creativity here certainly extend beyond these simple applications.

The former unit is defined as the "height x of the current source or half an em." Thex a given source height is the height of the lowercase x from that source. Often, it is the mark of the source media.
There are many uses for this type of unit, most of them for micro-typographic settings. For example, the sup element superscript means, can be pushed up in the line using the relative position and a lower value of 1ex. Similarly, you can pull down an element subscript. The default browser to utilize these rules and specific vertical-align subscript superscript-, but if you wanted more granular control that could handle the explicit type this:

Design Tip: The Value Of White Space

"Above the fold" is not just a newspaper term. On the Web, it refers to the part of a Web page displayed in the browser of a visitor without scrolling. It is the most valuable part of the page - and everyone in an organization wants privileged. But, in trying to please everyone, web designers often try to cram too much within too small a space.

Remember that the value of white space. It makes your page look more attractive, professional, and readable. All are key components of a successful website!
Activate your blank

White space is a term that refers to the design of space that is not occupied by text, images, or other elements of the visible page. The amount and use of white space is a key component of legibility and readability of a page. There are two types:

      Active White Space: Space that is deliberately left blank for a better structure of the page and to emphasize the different content areas.
      Passive white space: The empty space around the outside of the blank page or within the content areas as a result of poor design.

 

A page with very little white space makes visitors feel uncomfortable because the page seems cluttered and difficult to read. Visitors get overwhelmed quickly and move to a more welcoming place. Conversely, pages with lots of white space seem empty, as if there is not enough content to fill the page. Visitors may wonder, "why bother with anything?" and go somewhere else.

If properly used, the blank is an integral part of the design of a page and a major contributor to the ease of use. The content is structured feel, it's easy to find information, and the page layout works with the content to highlight the most important information.
The design with white space in mind

So when you are designing or redesigning your page layout, consider using the active whitespace to create a consistent look. Create your own or choose a ready-made template with white space in mind template.

A good page template includes an active whitespace as an intentional element that visually separates page navigation, content, header, and footer. Visitors can predict where the areas of navigation and content will, as they jump from page to page.

Often, it is best to make your first page layout design on paper instead of coding it. Avoid the temptation to start adding site logo and "just a little content" and focus on how the individual elements combine to create the overall effect instead. When you've spent a lot of time coding example, are less likely to change - even if the page is not as great.

Consider creating shadowboxes as placeholders for content. You get a better sense of weight and contrast page without being distracted by the content.

Here's an example. At a glance, you can immediately identify areas blank white space on liability:

9 Tricks To Design The Perfect HTML Newsletter

An email newsletter is the perfect way to stay in touch with your customers or followers. Often, your business or website will have numerous product updates, upcoming events or possibly you would like to share. It is always possible to publish new information to your blog or social media streams, but your audience can only go so far to get to you. In this case, the email is certainly not dead technology, merely untapped potential.




he process of creating and sending a newsletter is much easier than one might think, but designing a custom template and build your own code - this may take a little longer.

We have compiled some great tips to get the design HTML newsletters quality like never before. Even if you are a novice in the subject will surely find some valuable information to begin the process of e-mail marketing.

Objectives of a newsletter

Before entering the design aspects we should clarify its intent to build a newsletter. Depending on the type of website you run, the information in your newsletter can vary dramatically from the others, but the primary purpose of a newsletter is to provide convenient updates right to your Inbox for your reader.

Regular Internet users are likely to check their email more than twice a day. Even those who are constantly busy will take the time to go through your posts at least once a day. This is the perfect place to grab attention, even without visits to your site now. Even if no one is accessing your links, information is being received, which is ideal for building a brand.

Consider some of the issues that would have to offer in their design. Are you including links to register for the service; Blog links possibly, or more recently published articles on your site? Design your newsletter to reflect how you want your readers to respond, but ultimately it aims to promote interest and pass around some interesting tidbits of information for the masses.

1. Use the tables in their designs

This may seem a bit contradictory to modern web standards of today, but emails are still archaic in their rendering engines, so you have to build to older models. Unfortunately tables are the easiest way to get everything working properly between different email clients. Depending on your knowledge of the construction of table-based designs, this reality could come as good news!

You may also wonder why the div block elements and others are not so good idea. Most email clients are built to shed any weird CSS content. This means you will not be able to use much of anything except for online providers (and even full support is poor). Clients such as Microsoft Outlook 2007 and Gmail from Google have little support for floating bodies and direct positioning.

The best solution would be to nest multiple tables within. The padding and margins are not adjusted to a particular scale and many email clients. This is one reason to stick to use width = "value" in its cellular elements of the table. They always show the same width no matter which email client of your readers are using, so it's much safer and more coherent set padding and margins using empty tables cells.

2. Positioning fixed width

You have some options in building design projects newsletter, however, the best option to take is to set fixed widths for the table that contains. There are many varying monitor resolutions - you will not be able to please everyone. If you do not have static widths particular elements, you can always use width = "100%" in your table that contains. This will allow your content to fill the entire width of all email clients.

However, for many this method is a little too loose. Newsletters constructive require a fixed width in most cases, especially if you plan to use banners and images set to a particular size. I recommend working with 500px - 600px maximum width of the document. The horizontal screen size of the iPhone and some BlackBerry models are limited to 320px by 500px so even in your email template will be reduced to fit properly.

Given that many mobile users choose to view the email without HTML anyway, this should not be a big problem. Users of desktop clients and webmail likely experience a similar configuration, regardless of operating system they use. When in doubt create a template designs and choose the ones you like!

3. Pixel Units

Unless you plan to use the elements of the fluid in your newsletter you probably have to size some things. Try to keep it in pixels (px), more than any other type of unit. Percentages may easily be confused with the many customers webmail and windows software. With fewer page elements, fluid designs can emerge unscathed, though with some errors.

But pixels are always a sure thing. Working within the 600px width limit max, you can actually fit a lot of content inside. The exhibition is easier if you split your designs in two or three columns, and always write your sizes in pixels. The only exception may be the font sizes where EMS can not support their better readers, but differ em similarly sized percentages - so for the sake of simplicity, stick to the pixel-based alignments.

4. The possibilities with CSS

It may seem that the email design is to destroy using CSS styles. Although there are a lot of unsupported functions, CSS is still perfectly acceptable in many cases. Campaign Monitor has a beautiful table supported CSS properties listed email client. All basic support such as font-family and font-style concepts, so you can ignore the <font> tag if desired.



Be careful about your font styles to not push the limits too far. If you are uncomfortable with inline styles, it is always possible to use the HTML font tag though has been deprecated. If you're a CSS designer, you do not have to leave the system, but any abbreviated CSS coding can lead to faulty designs. For example the font: 12px / 14px Arial, sans-serif; Shorthand can save a lot of space, but is not fully accepted in the design of email, even when used with inline styles.

Even your color choices should be written out longhand. Hex Color as #ccc or # E3F must be written in full as #cccccc or # ee33ff respectively. If you can build what you need without CSS I recommend that path, but does not completely shy away from CSS email designs that contrary to popular belief that it is compatible with the majority of cases.

5. Anchor Links Best Practices

You probably want to include some links in your newsletter. These could be the outgoing links to other pages on the web, or maybe links that lead to the most popular pages to this website. Moreover, most of the footnotes contain a link to unsubscribe to your readers to opt for the process e-mail, but how should handle all these links in your design?

Well, it should be noted first that the email clients are very picky about their designs. Many will choose to overwrite your link styles, even CSS online. A good trick is to include both color and line and additional span tag inside the anchor element. If the color and style of your links are important to the overall design you'll want to take extra caution. I added a small code example below:



Hover effects not supported in Outlook 2007/2010, Gmail, iOS or Android. You can still include the style of: hover for all clients support: 2000/2003 Outlook, Hotmail, Apple Mail and Yahoo! Mail, but I personally do not see much benefit in partial user experience, since no anchor selectors are strongly supported recommend only offer 2-3 link colors used throughout the design.

As a presumption users also expect their links open in a new tab or window. Ideally, the target = "_ blank" attribute should be enough for all browsers recognize this functionality, and the inclusion of this attribute in your anchor links should not jeopardize email software such as Lotus Notes, or as Outlook either.

6. Test all major clients

A recent study of the most popular email clients (made by Campaign Monitor) shows ten of the most popular clients email in the last year. It may seem a bit tedious, but designers should get into the habit of reviewing your newsletters in all major email clients, at least in some of the most common clients such as Gmail, Hotmail or Yahoo! Mail.




This does not include webmail only, but the software also runs on both Mac OS X and Windows. Also according to your diagram mailing iOS and Android have shot both in the top 10 in recent years. In fact the iPhone, iPod Touch and iPad Mail ranks # 2 most popular Outlook right on! Unfortunately there is no way to prove this without owning one device - so you'll have to settle for other options.

An error with mobile stand comes in many models of iPhone and Android. Mobile email provision often resize the text in your template. This may not affect the design very much, but can be annoying to some readers. Using the CSS -webkit-text-size-adjust: none;, will ensure default text size, even throughout all the parsing engine without a try.

If you know friends or coworkers who use alternative software, you may want to ask for your help in testing the newsletter. You can send a copy of the email to check on your device or borrow the equipment out actively clear coding errors. Luckily Outlook offers a Mac version to install so you do not have to locate a Windows user for these optimizations, but when it comes to Lotus Notes or Windows Mail, you may be out of luck.

The alternative is to pay for a solution as my E-mail Preview, unfortunately, do not provide any free demo accounts, but their service is well known for offering fabulous views prior to its design. Email acid is a similar service that does offer a free account, but does not allow you to test on all clients, which kind of defeats the purpose. Representation services online should be useful if you need to test many newsletter templates in the long run without the use of alternative equipment, however, are not critical, so do not stress if you can not test everyone!

7. Always offer Web-based views

Readers will not always be able (or willing) to see your email natively. Offering another version somewhere on the web will give you a sense of ease and compatibility. This process can not be fully automated unless you are looking to include a plain text version.

Thus, would strip all HTML tags design newsletter. You would not be able to include links or styles for anything. All content is presented simply as a plain text file for readers without rendering capabilities. This is certainly a good alternative, but they offer a full web version of the newsletter that removes the damage caused by any misrepresentation. Most readers will be running a web browser until the day you can style and build your newsletter on and for perfection.

How do you set the page is entirely your decision. Some websites dedicated blog a post all to double the content of the email, perhaps with some additional information. Others will create a separate page on the main website without direct links in the navigation bar. This method can be beneficial because readers are not distracted by their primary content website template or sidebar.

8. Adding image content

Images are another reason to offer its readers a web-based solution. By default, the email clients are configured to strip images from the contents. If your address is added to a safe list, all images are displayed by default, but the user has to accept this configuration so it is certainly not a guarantee. Just make sure that the images are not required as part of the main content, but included as extra padding for aesthetics page.

Once you get to exporters graphics are some tips to building images specifically for email. You always want to set the width and height attributes in img tags. Without these specifications in order, some clients will distort the image content. An alt tag is also useful for visitors to know what is in the content of the image before it is loaded.

As mentioned above, the positioning of images in your email can be tricky. Avoid at all costs floats! The attribute align = "left" image will work much better, or, alternatively, an exact map of cells in tables to meet your images at the top, left, or right of your newsletter. You will not be able to get a perfect match-up with so many customers out there (especially mobile clients), but optimizing your images and maintain small file size for best results.

As for image storage, it is recommended that you keep all the files on your own web server. This is the best option instead of using another host of images or by uploading files to an online news service. Also you should separate the content of your newsletters, away from the rest of the images in a folder structure like this / img / mail or / img / email / 2011.

9. Avoid the Spam folder!

This may be hard to hear, but not all email clients are friendly towards newsletters. There are billions of emails sent every day and most contain spam or malicious content, so having these safety measures incorporated into the inbox is clearly the safety precautions.

However when it comes to internet marketing, you can easily be discouraged to see their latest newsletter ending away. To reduce the chances of this happening you should clean your design for simplicity. No images or make annoying popping their title text with hundreds of keywords.

Also, try to keep your content brief and on-topic. It is not necessary to include the full content of all articles or pages. Try adding one or two sentences with an alternate link out of your website instead of a long list. The shorter your email looks, the more likely it will pass inspection spam.

Moving Meta Boxes In The WordPress Editor

WordPress 3.8 introduced a new way to display messages in the old design of filters using a single column. A filter is a function that processes the data at certain points in the page life cycle. As the name suggests, a filter can be used to filter and / or manipulate certain data before displaying it in the browser or save the data to the database. Using a combination of filters and hooks action is not only possible to set the number of columns, but also to organize the order of the goal boxes within a column. In today's article, we will be building on what we have learned in the article Introduction to WordPress Meta Boxes much force a single column layout and the position of the goal boxes within the column.
One Column Layout

Meta boxes arrange a column one design requires the use of two filters. They are screen_layout_columns and get_user_option_screen_layout_ <post_type>. The first sets the number of columns in the design for each type of message, for $ columns [message] = 2; establishes a 2-column layout post and $ columns [message] = 1; 1. fit in "get_user_option_screen_layout_ <post_type>" does the same but in a different way. The message type specified in the filter name for the function to simply return the number of columns.

my_screen_layout_columns function ($ column) {
      $ Columns [<post_type>] = 1;
      return $ columns;
}

my_screen_layout function () {
      return 1;
}

add_filter ('screen_layout_columns', 'my_screen_layout_columns');
add_filter ('get_user_option_screen_layout_ <post_type>', 'my_screen_layout');

Implement the above, here is the code to define the layout for a custom message type called "menu". Note that in the my_screen_layout_columns () function, you must set the $ columns array element before returning:

my_screen_layout_columns function ($ column) {
      $ Columns ['menu'] = 1;
      return $ columns;
}

my_screen_layout_menu function () {
      return 1;
}

add_filter ('screen_layout_columns', 'my_screen_layout_columns');
add_filter ('get_user_option_screen_layout_menu', 'my_screen_layout_menu');

Change Order Meta Box

Once you have all Meta Boxes in a column, it is possible that your order is not to your liking. The position of a meta box on the page can be changed by removing and then including the $ context and $ priority arguments to re-add. The two arguments may seem too much, but they really work well together to provide precise control over the meta-box positioning.