Among the many wonders of modern web design is the emergence of codeless design tools. Whether it’s a WordPress page builder plugin (or the Gutenberg block editor), a drag-and-drop UI app, or even a ready-to-use framework, writing code has become optional.
For someone who wants to break into the industry, there’s a temptation to head straight for these types of solutions. And plenty of folks have done just that. Marketers who want to add web design to their menu of services are but one example.
The initial results can be quite good. Many of these tools allow for creating an attractive, fully-responsive website. Functionality can be rapidly added in via plugins. So, what’s the worry?
Even for the simplest of websites, code is still worth knowing. Here are a few reasons why learning it will serve you (and your clients) well in the long run.
How many websites have you built for a client? Now, how many of them haven’t included any design or layout revisions?
Clients are bound to ask for changes. And, as a designer, you’re likely to want to make your own tweaks as well. Sometimes, these changes will go beyond the capabilities of a code-free tool.
To do more than what your tool of choice offers, you’ll need to know some code. Basic HTML and CSS could be the difference between getting things exactly the way you want them or settling for what you have.
It’s often the little things that turn a decent website into a great one. Even with advancements in technology, code is likely to be the difference-maker. Without those skills, your projects may never get to where you want them to go.
Plugins and code frameworks are capable of some incredibly advanced functionality. You can add anything from a support ticket system to a shopping cart with minimal effort. It’s easy to see why so many of us are taking advantage.
The availability of such canned software might make it seem as if code is unnecessary. Who needs the hassle of writing your own functionality when you can achieve the same thing with a few clicks?
Well, things aren’t quite so simple. None of these packages can cover every possible use case. And clients are famous for adding at least one or two “gotcha” features into projects. Thus, some customization is going to be needed.
This is where it pays to know your way around languages such as JavaScript and PHP. They allow you to not only create your own custom features, but also extend existing products as well.
Just as with design, the right programming skills are key to making a website work in a way that suits your needs. Plus, there’s a sense of pride and accomplishment with being able to tackle these types of tasks yourself.
In order to grow as a designer or as a business, leveling up your knowledge is crucial. And the reality is that tools can only get you so far along on that journey.
Having a fundamental understanding of code lays a great foundation to build upon. It lets you go beyond the ordinary and create truly custom solutions for your clients. This results in the ability to take on more complex projects and increase your revenue stream.
It should be noted that there is another option here: hiring a developer or two to handle whatever needs arise. That would theoretically allow you to avoid digging into programming. But even that has its limits.
Part of knowing a particular language is having the ability to accurately assess a project’s needs. Even if you’re simply passing along those details to another developer, it’s still nice to have a grasp of what is required. This facilitates better communication and is likely to increase efficiency as well.
And there will likely be situations where it’s just easier and more budget-friendly to take care of something yourself. Having those skills means that you have options. Otherwise, you’re forever at the mercy of someone else.
There’s nothing wrong with utilizing tools that write code for us. They save precious time and allow us to achieve some impressive results.
Yet, code is the underlying foundation of it all. If there’s something one of these tools or products doesn’t do, the odds are that a knowledgeable developer can fill in the gap.
If you’re a non-coder, the whole idea of learning may sound intimidating. After all, there are so many potential languages to master. But don’t let that stop you.
You don’t have to be a full-on expert in any one area to be successful. No one will expect you to write the next great plugin shortly after studying PHP. Likewise, you don’t have to break any layout barriers once you know a bit of CSS.
It’s more about developing a working knowledge of the technologies you’re using. A basic understanding of HTML and CSS, for example, will be a big help in troubleshooting layout issues. Once you figure out the solution, it’s yet another feather to put in your cap.
Start small and work your way up. Over time, you’ll find that a little bit of code can take you a long way.
The post Web Designers Can Get by Without Knowing Code. Here’s Why They Should Learn Anyway. appeared first on Speckyboy Design Magazine.
Copy and Design by @critterverse
WordPress 5.8 brings the power of Gutenberg blocks to widget areas — which means the highly customizable layout and styling options bring you closer to a WYSIWYG editing experience. I made a test site based on the oldie-but-goodie Twenty Sixteen theme, with three separate widget areas. In this post, I’ll highlight a few cool things that are now possible to do with your widgets and where things may be heading next.
Appearance-wise, users have a lot more control over widget areas than ever before — especially through the use of blocks with customization options like the Cover and Image block. Here’s what I can create in the classic widgets editor (above) versus what I can create in the new block-based widget editor (below).
Container blocks like Cover and Columns make it easy to weave dynamic or interactive elements into your designs. While this is a given for many widgets, the block versions of widgets can be easily wrapped and layered within container blocks to integrate them into your layout more fully.
In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also inserted Custom HTML blocks within a Columns block to display different messaging depending on the time of day. (jQuery script)
Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.
Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.
While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:
FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior — consider this feature to be a preview of what’s coming next for widget editing!
Latest PEAR Releases:
Split-screen UIs have become a popular way to showcase content. We often think of them as being utilized in areas where we want users to choose between two options. But we’re also seeing other creative uses of the technique.
For example, a split-screen can also be used to great effect as a full-page layout or even as a transitional animation.
Here are 10 examples of split-screen UIs, complete with source code that you can edit to fit your needs. Each has something unique to offer.
This is certainly the most common way to use a split-screen. A website visitor is presented with two options. Here, the background image colors help provide nice separation, while the rounded logo in the middle ties everything together.
See the Pen Website – Split Screen by Bridget Reed
A split-screen also makes for an interesting transitional effect, as we see with the slideshow example below. Scrolling down causes each half of the screen to split and reveal the next image in the queue. The result is a very smooth and high-end UI.
See the Pen Split Slick Slideshow by Fabio Ottaviani
With HD screens dominating and 4k gaining ground, more designers are taking advantage of that extra screen real estate. This example layout provides a static sidebar with a bold background image. But it also looks great on smaller screens, as that sidebar becomes a header. It’s both attractive and functional.
See the Pen Split screen layout by Travis
Another trend gaining traction is utilizing the split-screen to compare “before” and “after” images. Here we have a setup that allows users to simply move their mouse to see the differences between two images. Utilizing just a little bit of JavaScript, this UI is an interesting twist on the technique.
See the Pen Split-Screen UI by Envato Tuts+
The “half by half” scrolling effect with this example adds a unique touch. It almost seems as if the cards and photos are alternately stacked on top of each other as you scroll. And since it uses less than 150 lines of pure CSS, load time shouldn’t be much of a concern.
See the Pen Scrolling half by half pure #CSS by @Kseso by Kseso
This layout emulates something you might find in a print magazine. The bold title and introductory text on the left provides terrific contrast with the photo and multicolumn article on the right. Overall, it makes for a very slick and professional look.
See the Pen Personal Profile // Keanu Reeves by Brian Haferkamp
The concept here is really cool from a branding perspective. It uses a split-screen within a page with a static branding message on the left, combined with a scrollable listing of services offered on the right. It’s just different and a way to stand out from the crowd a bit.
The transitions between slides in this carousel literally add a new dimension to split screens. Each slide “splits” in half as the next one is revealed in a cool 3D format. There’s a certain machine-like quality here that could be a great fit for an engineering or industrial firm.
See the Pen Split 3D Carousel by Paul Noble
What started as a way to choose between A or B has become something more. Split layouts and animations are offering designers another creative avenue for encouraging interaction.
While we still see them in their traditional form, we also find that they are being used to enhance things like scrolling through content and image galleries. It’s even being used to mimic print design techniques.
Hopefully, the examples above will serve as an inspiration for ways you can add a split UI to your own projects. Have fun experimenting and implement features that both look great and add something unique to the mix.
The post 8 CSS Snippets for Creating Split-Screen Layouts appeared first on Speckyboy Design Magazine.
There have been a number of articles published over the years that discuss best practices techniques for JavaScript. I thought I would go a little bit beyond the scope of those articles and outline a number of advanced JavaScript concepts and techniques that I have personally used or read about that could be invaluable in certain circumstances.
This article doesn’t necessarily cover every detail of the methods I’m describing, but provides an overview, along with advanced JavaScript examples with code.
Closures in JavaScript are a fairly straightforward concept, and have been discussed online in a number of in-depth articles. The fact that they are straightforward doesn’t necessarily mean they’re simple however, as seen by the extensive articles that cover the subject.
Simply put, closures allow variable scope to be extended past the common scope restrictions of functions. I like the way Jeremy Keith describes closures in his book Bulletproof Ajax:
“Think of closures as a kind of regional scope: broader than local but not as broad as global.”
To create a closure, you nest a function inside of a function. That inner function has access to all variables in its parent function’s scope. This comes in handy when creating methods and properties in object oriented scripts. Here is a simple example that demonstrates the use of a closure:
function myObject() {
this.property1 = "value1";
this.property2 = "value2";
var newValue = this.property1;
this.performMethod = function() {
myMethodValue = newValue;
return myMethodValue;
};
}
var myObjectInstance = new myObject();
alert(myObjectInstance.performMethod());
The key portions of the script are the nested anonymous function are highlighted in green and the method call in the alert function (last line). Because the method in the alert is actually calling a nested function, that method is able to read the value of the variable called newValue, even thought that variable is not within the scope of the anonymous function, or method.
Developers use closures all the time, probably unknowingly, since a closure is created any time an anonymous function is nested inside another function and utilizes variables from the parent function’s scope. The power of the closure is revealed when that method (the inner function) is called, and values that normally wouldn’t be accessible are within “regional” scope and are thus able to be used as any other value.
See the references below for some deeper explanations of closures and their relation to scope. I also highly recommend you pick up a good advanced JavaScript book that offers a good discussion of the concepts associated with closures.
Here is a handy coding tip to keep in mind when dealing with functions that can accept a large number of optional arguments. Instead of passing the large number of arguments in the conventional fashion, which could unnecessarily complicate the function, you can pass just one argument which ends up being a collection of arguments declared in an object literal.
Let’s look, first of all, at how we might do this in the typical manner, so we can see the contrast:
function showStatistics(name, team, position, average, homeruns, rbi) {
document.write("<p><strong>Name:</strong> " + arguments[0] + "<br />");
document.write("<strong>Team:</strong> " + arguments[1] + "<br />");
if (typeof arguments[2] === "string") {
document.write("<strong>Position:</strong> " + position + "<br />");
}
if (typeof arguments[3] === "number") {
document.write("<strong>Batting Average:</strong> " + average + "<br />");
}
if (typeof arguments[4] === "number") {
document.write("<strong>Home Runs:</strong> " + homeruns + "<br />");
}
if (typeof arguments[5] === "number") {
document.write("<strong>Runs Batted In:</strong> " + rbi + "</p>");
}
}
showStatistics("Mark Teixeira");
showStatistics("Mark Teixeira", "New York Yankees");
showStatistics("Mark Teixeira", "New York Yankees", "1st Base", .284, 32, 101);
The function above can take up to 6 arguments. The first two arguments are mandatory, so inside the function, we don’t check for their existence. The last 4 arguments are not mandatory, so we only display their values if they exist.
We call the function 3 different times (last 3 lines), with different numbers of arguments each time. You can see that if the number of passed arguments was in the dozens, or more, the code could look a little messy, and would be harder to maintain, or read.
Now let’s look at the same code using object literals to pass the arguments:
function showStatistics(args) {
document.write("<p><strong>Name:</strong> " + args.name + "<br />");
document.write("<strong>Team:</strong> " + args.team + "<br />");
if (typeof args.position === "string") {
document.write("<strong>Position:</strong> " + args.position + "<br />");
}
if (typeof args.average === "number") {
document.write("<strong>Average:</strong> " + args.average + "<br />");
}
if (typeof args.homeruns === "number") {
document.write("<strong>Home Runs:</strong> " + args.homeruns + "<br />");
}
if (typeof args.rbi === "number") {
document.write("<strong>Runs Batted In:</strong> " + args.rbi + "</p>");
}
}
showStatistics({
name: "Mark Teixeira"
});
showStatistics({
name: "Mark Teixeira",
team: "New York Yankees"
});
showStatistics({
name: "Mark Teixeira",
team: "New York Yankees",
position: "1st Base",
average: .284,
homeruns: 32,
rbi: 101
});
Technically, this second method of passing the arguments might require a little bit more code, but with a large collection of arguments, there are a few advantages.
First, the function itself is simplified because it accepts only one argument (args), which is a collection of all the values passed from the object literal (name, team, position, etc). Plus, the actual argument values are easy to read, and can easily be understood, updated, or modified, since the correlation between the values and the argument references are more direct.
If the function required only a small number of arguments, then this method would not be necessary, and might actually have the opposite effect. So, use this technique sparingly, and only in situations where you foresee the collection of arguments being hard to maintain over time.
There are sometimes instances where you need to traverse the DOM and gain access to a specific element, or group of elements, but due to certain restrictions, you may not have direct access to the elements via a CSS class name or ID in the HTML code. This might be because of user-generated content produced through a rich text editor, or dynamic content pulled from a database.
Whatever the case, it’s not impossible to access those unidentified DOM elements via JavaScript. Using what I call “contextual targeting”, you can gain access to, and modify, almost any element in the DOM. As long as you have a map of the general template that contains the element you want to target, you can access that element and manipulate it the same way you would an element that has a class name or ID.
Let’s create some basic HTML code that will serve as our example page:
<div id="header">
<h1>Site Title</h1>
</div>
<div id="sidebar">
<ul>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>
</div>
<div id="content">
<h2>Page Title</h2>
<p><a href="#">Lorum Ipsum link here</a>. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.</p>
<p><span style="color: red;">Pellentesque habitant morbi</span>
tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
eleifend leo.</p>
</div>
<div id="footer">
<p>Copyright | <a href="#">contact</a> | <a href="#">policy</a> |
<a href="#">privacy</a></p>
</div>
Using the HTML code above, if we wanted to target all the anchor tags on the page, we could collect them and manipulate them like this:
var myLinkCollection = document.getElementsByTagName("a");
for (i=0;i<myLinkCollection.length;i++) {
// do something with the anchor tags here
}
If we wanted to target only the anchor tags in the footer, however, we would target them based on their context, or surrounding elements, like this:
var myFooterElement = document.getElementById("footer");
var myLinksInFooter = myFooterElement.getElementsByTagName("a");
for (i=0;i<myLinksInFooter.length;i++) {
// do something with footer anchor tags here
}
The first line grabs a reference to the footer element. The second line collects all <a> tags inside the footer. Then we loop through them and do what we want with them. Thus, they are accessible even though they are not grouped via class names.
You can accomplish the same thing by using node properties, as shown below.
var myLinkCollection = document.getElementsByTagName("a");
for (i=0;i<myLinkCollection.length;i++) {
if (myLinkCollection[i].parentNode.parentNode.id === "footer") {
// do something with footer anchor tags here
}
}
Similar code could be used to target the lone anchor tag inside the “content” section.
We could also limit our anchor tag search to include only tags that have the href attribute set, so as to avoid finding any in-page links. We do this by using the getAttribute method:
var myLinkCollection = document.getElementsByTagName("a");
for (i=0;i<myLinkCollection.length;i++) {
if (myLinkCollection[i].getAttribute("href")) {
// do something with the anchor tags here
}
}
Finally, you’ll notice that there is a <span> tag with an inline style. The inline style could have been generated through a content management system, so you may not have the ability to edit it directly. You can target all <span> elements with inline styles like this:
var myLinkCollection = document.getElementsByTagName("span");
for (i=0;i<myLinkCollection.length;i++) {
if (myLinkCollection[i].getAttribute("style")) {
// do something with all anchors that have inline styles
}
}
The possibilities are endless with contextual targeting, and there are even more options available if you’re using a JavaScript library that normalizes browser differences and simplifies DOM manipulation.
If you’re doing an extensive amount of raw JavaScript coding and suspect that additions could be made to the same pages you’re working on, you can prevent any future conflicts with your code by giving your code its own namespace.
Object-oriented JavaScript implements namespace-like principles due to the fact that properties and methods are declared inside of objects, thus there are less likely to be conflicts. A conflict could arise, however, through object names. And very likely, the conflict will occur “silently”, thus you may not be alerted to the issue immediately.
You can prevent all conflicts by creating a unique namespace. Let’s use the showStatistics function to demonstrate how we can encapsulate code into its own namespace:
if (typeof MY == "undefined") {
MY = new Object();
MY.CUSTOM = new Object();
}
MY.CUSTOM.namespace = function() {
function showStatistics(args) {
document.write("<p><strong>Name:</strong> " + args.name + "<br />");
document.write("<strong>Team:</strong> " + args.team + "<br />");
if (typeof args.position === "string") {
document.write("<strong>Position:</strong> " + args.position + "<br />");
}
if (typeof args.average === "number") {
document.write("<strong>Average:</strong> " + args.average + "<br />");
}
if (typeof args.homeruns === "number") {
document.write("<strong>Home Runs:</strong> " + args.homeruns + "<br />");
}
if (typeof args.rbi === "number") {
document.write("<strong>Runs Batted In:</strong> " + args.rbi + "</p>");
}
}
showStatistics({
name: "Mark Teixeira",
team: "New York Yankees",
position: "1st Base",
average: .284,
homeruns: 32,
rbi: 101
});
}
MY.CUSTOM.namespace();
The first few lines create the namespace by checking to see if the “MY” object already exists. This object can be whatever you want it to be. Just pick a name that you don’t think will ever be used again. After the MY object is created, we are then able to create the “CUSTOM” object as a property of the MY object. Then our namespace function becomes a method of the MY.CUSTOM object. Keep in mind that “MY“, “CUSTOM” and “namespace” can each be your own custom names. I chose these for demonstration purposes. They could be CHEESEBURGER.ONIONS.pickles if you want!
The showStatistics function is exactly the same as in the example earlier that utilizes an object literal to pass in the values. But in this case, the entire function, including the object literal, is encapsulated inside my.custom.namespace. The last line invokes the entire function using dot notation, and the function runs exactly the same as it normally would, except that it is protected from conflicting with another function called “showStatistics“.
You can create powerful JavaScript applications if you use a combination of a JavaScript library and raw JavaScript code. Many JavaScript libraries are used to implement “pretty” animations and other customizable effects–sometimes via plugins– that often don’t require much to be added to them other than some custom values.
On the other hand, there may be situations where you’ll want to accomplish something specificly requested by a client. Maybe it’s something not available in a library and that requires extensive coding, possibly utilizing Ajax and a variety of DOM methods.
There is no point in reinventing the wheel. You can implement your favorite JavaScript library and take advantage of its simplified Ajax calls, DOM methods, and normalization of browser differences. Thus, you can have the advantages of the library, while still creating custom scripts that are specific to your project.
Finally, this is a technique to use in situations that require dozens of lines of HTML code being generated dynamically via JavaScript. Take the following example:
var pageContainer = document.getElementById("container");
var pageTitle = "Content Title";
var authorBio = "Mr. Lorum Ipsum";
var pageContent = "Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here.";
var footerContent = "Copyright 2009";
var HTMLCode = '\n<h1>' + pageTitle + '</h1>\n
<div id="content">\n
<p>' + pageContent + '</p>\n
<div id="author_bio">\n
<p>' + authorBio +'</p>\n
</div>\n
</div>\n
<div id="footer">
<p>' + footerContent + '</p>\n
</div>\n';
pageContainer.innerHTML = HTMLCode;
The line to take note of above is the one that declares the value of the HTMLCode variable. It renders just find in the generated source code, since it utilizes the “new line” character, so it looks like perfectly good HTML. But if this line of code were any longer it would be extremely difficult to read and maintain in the .js file.
Here is the same code as above, but implementing a much more organized method of displaying the HTML:
var pageContainer = document.getElementById("container");
var pageTitle = "Content Title";
var authorBio = "Mr. Lorum Ipsum";
var pageContent = "Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here. Lorum ipsum line text here.
Lorum ipsum line text here.";
var HTMLCode = '\n' +
'<h1>' + pageTitle + '</h1>\n'
'<div id="content">\n' +
'<p>' + pageContent + '</p>\n' +
'<div id="author_bio">\n' +
'<p>' + authorBio + '</p>\n' +
'</div>\n'
'</div>\n' +
'<div id="footer">' +
'<p>' + footerContent + '</p>\n' +
'</div>\n';
pageContainer.innerHTML = HTMLCode;
Now the code is much more readable, and conforms to the manner in which HTML is rendered in an actual HTML page. It even includes proper HTML indenting, and still uses the new line character to properly format the outputted HTML.
Although I didn’t provide a detailed explanation of every concept dealt with in this collection, I hope this list provided beginning and intermediate coders with an overview of a few fairly advanced JavaScript tactics that they can implement in future projects or experiments.
Please feel free to comment on any of the advanced JavaScript concepts I’ve mentioned and some specific ways that you have used them in your own applications.
The post 6 Advanced JavaScript Concepts You Should Know appeared first on WebFX Blog.