The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)

Mar 28 4:00pm SitePoint
Whenever we need to perform DOM manipulation, we're all quick to reach for jQuery. However, the vanilla JavaScript DOM API is actually quite capable in its own right, and since IE < 11 has been officially abandoned, it can now be used without any worries. In this article, I'll demonstrate how to accomplish some of the most common DOM manipulation tasks with plain JavaScript, namely: querying and modifying the DOM, modifying classes and attributes, listening to events, and animation. I'll finish off by showing you how to create your own super slim DOM-library that you can drop into any project. Along the way, you'll learn that DOM manipulation with VanillaJS is not rocket science and that many jQuery methods in fact have direct equivalents in the native API. So let's get to it ... DOM Manipulation: Querying the DOM Please note: I won't explain the Vanilla DOM API in full detail, but only scratch the surface. In the usage examples, you may encounter methods I haven't introduced explicitly. In this case just refer to the excellent Mozilla Developer Network for details. The DOM can be queried using the .querySelector() method, which takes an arbitrary CSS selector as an argument: const myElement = document.querySelector('#foo >') This will return the first match (depth first). Conversely, we can check if an element matches a selector: myElement.matches('') === true If we want to get all occurrences, we can use: const myElements = document.querySelectorAll('.bar') If we already have a reference to a parent element, we can just query that element's children instead of the whole document. Having narrowed down the context like this, we can simplify selectors and increase performance. const myChildElemet = myElement.querySelector('input[type= submit ]') // Instead of // document.querySelector('#foo > input[type= submit ]') Then why use those other, less convenient methods like .getElementsByTagName() at all? Well, one important difference is that the result of .querySelector() is not live, so when we dynamically add an element (see section 3 for details) that matches a selector, the collection won't update. const elements1 = document.querySelectorAll('div') const elements2 = document.getElementsByTagName('div') const newElement = document.createElement('div') document.body.appendChild(newElement) elements1.length === element...
Read More

Sourcehunt Swift Edition March 2017

Mar 28 1:00pm SitePoint
In continuation of Swift Month, this Sourcehunt is full of Swift goodness. We’ll show you packages for manipulating strings, creating re-usable styles, displaying user avatars, and bringing the awesomeness of FontAwesome to iOS. We’ve also got a package for parsing JSON like a boss, and user authentication for your next (or first!) Vapor app. Did I mention it’s all in Swift! ArtSabintsev/Guitar (350 ★) Inspired by JavaScript’s Voca library, this package makes working with strings a cinch. It adds some helpful methods to the String class that let you do anything from change case to add padding. Let’s say I have an app that takes a filename as input from the user. I want to make sure that filename does not have any spaces or capitalized words in it. Thanks to Guitar, I can do this easily. Continue reading \%Sourcehunt – Swift Edition – March 2017\%...
Read More

Why Your Business Needs Error Monitoring Software

Mar 28 12:30pm SitePoint
This article is sponsored by Airbrake. Thank you for supporting the partners who make SitePoint possible. Modern software applications are flexible, capable tools. These applications empower users with a wide range of abilities, from communicating with loved ones and coworkers, to gleaning knowledge from millions of crowdsourced articles, to diagnosing afflictions and potentially saving lives, and even to building the next great application, which might provide even more fantastic possibilities. Yet the Facebooks, Wikipedias, and Watsons of the world haven't become the huge successes that they are without many bumps along the way. Developing software is difficult, but for most modern applications, releasing your project out into the wild for the public is only the first step. Monitoring and maintenance are critical components for most public-facing applications after release, to ensure the product can handle the load, is performing as expected, is financially viable, and, of course, doesn't collapse under the weight of unexpected errors. While not particularly common, even within projects where the entire software development life cycle was smooth sailing up until production launch, nothing can sink the ship quicker than a slew of errors, which may grind the service itself to a halt, or in the worst case, crash the application entirely. Enter the power of error monitoring software. Even during development, but particularly after release, error monitoring software can provide that life line your organization needs to ensure your software remains fully functional. Any unforeseen errors can quickly be identified, examined, and resolved, without the need for user-generated feedback or error reports. To better examine why your business could benefit from error monitoring software, we'll explore the advantages by answering questions related to the Six Ws: Who, What, When, Where, Why, and How. By the end, you should have a better understanding of how your business may benefit by utilizing error monitoring software for your own projects. Who Is Receiving This Error? Error monitoring software is designed to immediately inform you and your team when an error occurs, whether through email, via code hooks, or integrations with other services. Best of all, since the error monitor can be easily hooked into your own application code, you'll receive det...
Read More

How to Select the Perfect Image Format to Optimize Your Website

Mar 28 12:30pm SitePoint
This article was sponsored by Cloudinary. Thank you for supporting the partners who make SitePoint possible. When adding images to a website, most of us will instinctively know to avoid using a GIF for a photo and avoid using a JPEG for a graph. The lazy ones among us - i.e., me - may just opt for PNG for everything and hope for the best. So why do we do this? It all comes down to the encoding used to create the image in a particular file format. JPEG suits photography (the P stands for Photographic ) since it blurs sharp edges but preserves smooth gradients. Encoding an image with large, sharply-defined blocks of color using JPEG causes loss of definition and inefficient encoding. Conversely, GIF suits logos or simple block graphs, since it focuses on the changes between uniform regions of color. This is obviously pretty useless for photos, where the colors differ almost pixel by pixel. As an example, this image comes in at 106Kb as a JPEG: However, it reaches a whopping 517Kb encoded as a GIF. That's almost 5 times bigger just by using an inappropriate image format. Oh dear. It manages to hit 329kb encoded as a PNG. Although not quite as bad, this is still over 3 times bigger than when using the most appropriate format for the image contents. As we can easily see here, the main image formats are best suited to different types of content and choosing the wrong format for the image causes potentially significant, unnecessary bloat. You have to make sure that each image going on to your website is encoded in the most appropriate format, and not just the format in which you received it, in order to avoid unnecessary page bloat. Browser Support So far we've just covered the three classic image file formats — the original flavors that everyone knows and loves. Here's where it starts to get tricky: browsers are all pushing different next-generation image formats. Chrome has the fantastic WebP, Edge supports JPEG XR and Safari has JPEG 2000. Browser Support for Next-Gen Image Formats WebP JPEG XR JPEG 2000 Chrome Yes X X Edge X Yes X Safari X X Yes Firefox X X X WebP, for example, can give significantly better results than GIF, PNG, and JPEG in various scenarios. For the test image we've used above it comes in at 90.5Kb - a saving of around 15\% from JPEG. However, you can currently only use this image type if the device requesting the image i...
Read More

Attractive Job Opportunities for Graphic Design Freelancers

Mar 28 11:29am Line25
If, in your graphic design career, you’ve become dissatisfied with working in an office or cubicle environment, freelancing is a possible solution. You’re likely already aware of advantages and benefits that working as a freelancer can offer. As a freelancer, you have opportunities to work the hours you want, with whom you want, and where […] The post Attractive Job Opportunities for Graphic Design Freelancers appeared first on Line25.
Read More

5 Tips for Improving Your Consumer UX

Mar 28 11:00am SitePoint
It’s easy for business owners and website developers to become so invested in a website’s design that they fail to consider the consumer experience. This could drastically limit the number of users who can successfully navigate through your website. Studies have found that 43\% of consumers have very minimal computer skills, and only 26\% of […] Continue reading \%5 Tips for Improving Your Consumer UX\%...
Read More

Using DevTools to Tweak Designs in the Browser

Mar 28 8:54am CSS-Tricks
Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually in DevTools. To achieve this, we could use different classes and scope styles inside them. So if we want to see different options for … Using DevTools to Tweak Designs in the Browser is a post from CSS-Tricks...
Read More

15 Psychology Hacks that Boost UX

Mar 28 6:45am Webdesigner Depot
There loads of things that subconsciously sway our decision making everyday, subtle psychological influences working away in the background. Psychology affects your users’ experience. It has an unavoidable knock on effect on your conversion rates. It’s definitely time to upgrade your toolkit so you too can boost conversions on your landing page… Let’s go! 1. […]...
Read More

Netflix, Facebook and Google join top agencies at Awwwards Conference LA and youre invited!

Mar 28 5:42am Awwwards - Blog
Our favorite design and tech brands and agencies join for an immense 2-day inspiration fest. On 1st and 2nd of June Awwwards has...
Read More

2016 Revisited: Best Free Corporate Identity Packages, Business Cards and CVs

Mar 28 4:00am noupe
Corporate identity packages are great instruments for introducing the company, reflecting the personality, and forming the overall emotional image. They are indispensable when it comes to unobtrusively presenting the integral elements of brand identity such [...]...
Read More

Soft Focus Photoshop Action

Mar 28 3:59am Designbeep
This is a Photoshop action to create a lovely soft look to your photos. It is very easy to use and allows for great customization after the action has finished playing back. You have 8 preset color looks to choose from and have the possibility of combining them for more looks. After each action has finished playing, it creates a well organised layer structure. Each layer and folder are named appropriately and color coded to create a neat working environment for you. Not only is the layer structure organised, each action comes with a highly detailed video tutorial teaching you...
Read More

Innovations in Mobile Gaming

Mar 28 3:41am Designbeep
There have been many different innovations in mobile gaming in recent years. Some of these innovations are fairly subtle. People would have to be regular mobile game players in order to notice. Others are much more obvious, and the creators of mobile gaming technology will make it very clear how the industry has changed in recent years. Anyone who took a break from mobile gaming for a little while and then came back to it would be very surprised by what they saw in almost all cases. The industry changes quickly enough that it really does not pause for anyone.
Read More

Fresh Free Font Of The Day : Gorgeous

Mar 28 3:28am Designbeep
Here on Designbeep,we also aim to help designers to find free yet high quality resources whether for your web design projects or graphic design projects.Who doesn’t like freebies? Well,although we bring together free font collections time to time we decided to share a free font everyday and today’s free font Gorgeous is designed by Rajesh Rajput. This Free Version is a display sans-serif condensed type-family with 12 weights. Each font contains 385 glyphs which include small letters, capitals, numbers, punctuations & accents. Commercial version is also available. Download Font...
Read More

How to Get Started with Marketing Automation for Free

Mar 27 6:00pm SitePoint
It's one thing to get leads from your website, but it's another to expect them to suddenly become customers. This is where marketing automation can automatically nurture your leads and close them as customers. Marketing automation systems convert existing leads into customers with relevant, targeted messages that get results.  Once you've collected and nurtured those leads, marketing to different groups based on demographics, preferences, and behavior can be quite challenging. This is where marketing automation systems come in. You build a strategy for each group that is supported by the right tools to put your marketing automation in action. But is marketing automation the right system to improve your results? Start by asking yourself the following questions: Do you have an established lead generation funnel? Do you have a steady flow of new leads? If your answers to both questions are no, consider developing an inbound marketing strategy — one that will help you attract visitors to your website and convert them into the leads you need to do marketing automation effectively.  Consider also that people change jobs and email addresses as well as unsubscribe. So the question still remains... how will you continue to renew and grow your database? There are many free kinds of marketing software on the market but some cause headaches and just aren’t effective. Choosing a free and open source option is a good way to go, but which one will be most effective for your strategy and budget? Read on for six different types of free marketing automation systems and how they can grow your business effectively. SalesAutoPilot One of the more established marketing automation systems spearheaded by online marketing expert extraordinaire Alexander Scholingloff, SalesAutoPilot provides a comprehensive professional solution including Free and Starter packages. Market to each of your segmented lists with marketing-focused software that includes e-mails, text messages for the purposes of market research, automated processes, and online CRM (Customer Relationship Management) software services. Each extra or add-on option increases the cost of the starter version so it’s best to price the free version against the total price of all the extras and commit to the exact marketing services you need to grow your business. Note: An ecommerce module is offered with the free...
Read More

Fundamentals of Java Enum Types

Mar 27 4:30pm SitePoint
Whatever code you're working on, chances are you will sooner or later need a list of constants, like Monday, Tuesday, etc. for all weekdays or January, Februrary, etc. for all months. Java has you covered with enum types, usually only called enums, which make it exceedingly easy to define just that. In this article I will teach you everything you need to know to become a proficient user of Java enums. Enum Fundamentals In its simplest form a Java enum is just a fixed number of constants that the developer defines while writing the code. (It could, for example, define all SitePoint channels.) Much like a class, an enum defines a type that can be used just about anywhere where classes and interfaces could be used, for example for fields, variables, and parameters. Enums can actually be much more than mere constants, having their own attributes and methods, but I will come to that later. Seeing them as constants is a good way to get to know them. Defining an Enum An enum is defined similarly to how a class would be defined but uses the enum instead of the class keyword. The constant values are listed in the enum's body (meaning within the curly braces). While not necessary, it is common to write the constants in all uppercase letters to make it easier to recognize them. Now that we have a description for enums, it's time for an example. Here is what an enum looks like that lists some of the SitePoint channels: public enum SitePointChannel { JAVA, MOBILE, WEB, PHP, WORDPRESS, JAVASCRIPT, DESIGN } The elements inside the SitePointChannel enum are called enumeration constants. Assigning an Enum Once an enum is defined, you can assign its values to variables. Here is an example: private SitePointChannel channel; The channel field is of type SitePointChannel, therefore the only values that it can be assigned are those defined by this enumeration. As a local variable that could look as follows: SitePointChannel channel = SitePointChannel.JAVA; Using an Enum Enumerations have a variety of features in Java. One of their core capabilities is that they can be used in identity comparisons and switch statements. Identity Comparisons With == Enumeration constants can be compared for identity by using the relational operator ==. Here is an example of an if() condition, which in this case is always false. SitePointChannel channel = Sitepoint.JAV...
Read More

How to Choose the Right Front-End Framework for Your Company

Mar 27 4:00pm SitePoint
During an evaluation of our core web platform at Singapore-based employee benefits start-up CXA Group, we decided to shift direction away from the aging existing architecture and rebuild the front-end from scratch. One of the challenges of the platform is to create a web application that works well across CXA Group's 12 target countries throughout Asia. Taking into account the hard deadline we had set for delivering the project, I led an evaluation of a range of front-end JavaScript frameworks. The opportunity to make this level of change doesn't often present itself in major corporate projects so we tried to be as thorough as possible in the evaluation process. There was a lot on the line in the decision: with the exponential growth of our business, we couldn't afford any missteps along the way. We also had to take into account the fact no one in the team had any significant experience in any of the frameworks we were looking at. Narrowing the Field New front-end frameworks seem to be published every day, so we conducted a meta-analysis to reduce the range of frameworks we considered. Including frameworks we had heard of, or had recommended to us, we were left with Angular 2 (heard of), Aurelia (heard of), Vue.js (recommendation) and React (recommendation). We measured each short-listed framework against a list of key requirements to see how they ranked. Some of the requirements were based on what we knew we would need for the project while others were projecting forward to what we would like to do. Flexibility Our chosen framework would need to present a range of configuration options and be relatively simple to customize. Much of this seems to come down the architectural philosophies: making architectural decisions on your behalf or leaving them entirely open. Angular 2 exists at the monolithic end of this with every choice (state server, router, handlers) made for you. The benefit of this is it's very easy to get up and running quickly, while the potential cost is modules not working how you need them to and having nowhere to go. React, Vue, and Aurelia are at the other end of the scale, offering the ability to swap in components as required. Aurelia and Vue have a key advantage over React with configurable boilerplates in their initial setup. Like Vue, React itself only presents a small part of what you need to build something. From there, many decision...
Read More

WordPress and HTML Templates Giveaway

Mar 27 12:30pm Line25
Hey, guys, do you like to get premium quality stuff for free? We’ve got great news for you. As the title of the article says, it’s a giveaway. Do you often take part in the giveaways? Such types of promos are real opportunities to save some cash on website design. What is given away this […] The post WordPress and HTML Templates Giveaway appeared first on Line25.
Read More

Is Using SVG Images Good for Your Websites Performance?

Mar 27 12:30pm SitePoint
This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. There are a few good reasons why Scalable Vector Graphics, or SVG, are a great choice of graphics format for the web. Having a relatively small file size is certainly one of them. However, this claim is not without some qualification. Let's delve a bit deeper. Benefits of Vector Images Raster images, e.g., .JPEG, .PNG, etc., are made of square pixels laid out in a grid. Therefore, the larger the image, the more pixels it uses, which causes the file size to increase. Not only that, but pixels-based graphics don't scale very well. Here's what I mean. This is a .JPEG image of a flower at its original width of 300 x 225px: Here's the same image when it is displayed at a much higher resolution: Notice the fuzzy edges, the blurry surface and how the overall quality of the image is considerably degraded. With retina screens being now common on users' devices, the risk of having raster images on your website looking like this is high. One alternative is to serve high resolution graphics, which of course can hit web performance pretty hard. The srcset and picture Elements Fortunately, modern HTML comes to the rescue with responsive images, i.e., the srcset and the picture elements, which at the time of writing are both supported in the latest versions of all major browsers, except for EI11 and Opera Mini. The goal of responsive images is to serve the best quality image for the device being used. This involves making available images at various resolutions, but enabling the browser to load just that one image that fits the capabilities of the accessing device. If you're curious to know more about how these techniques work, How to Build Responsive Images with srcset by Saurabh Kirtani goes deeply into the topic. Here's what srcset looks like in practice: [code language= html ] <img srcset= image\_3x.jpg 3x, image\_2x.jpg 2x, image\_1-5.jpg 1.5x src= image.jpg alt= image > [/code] And below is an example of the picture element in action: [code language= html ] <picture> <source media= orientation:landscape srcset= retina-horizontal-image.jpg 2x, horizontal-image.jpg > <source media= orientation:portrait srcset= retina-vertical-image.jpg 2x, vertical-image.jpg > <img src= im...
Read More

Game Development with ReactJS and PHP: How Compatible Are They?

Mar 27 12:00pm SitePoint
I'd like to make a multiplayer, economy-based game. Something like Stardew Valley, but with none of the befriending aspects and a player-based economy. I started thinking about this the moment I decided to try and build a game using PHP and ReactJS. The trouble is that I knew nothing about the dynamics of multiplayer games, or how to think about and implement player-based economies. I wasn't even sure that I knew enough about ReactJS to justify using it. I mean, the initial interface – where I focus heavily on the server and economic aspects of the game – is perfectly suited for ReactJS. But what about when I start to make the farming /interaction aspects? I love the idea of building an isometric interface around the economic system. I once watched a talk, by dead\_lugosi, where she described building a medieval game in PHP. Margaret inspired me, and that talk was one of the things that lead to me writing a book about JS game development. I became determined to write about my experience. Perhaps others could learn from my mistakes in this case, too. The code for this part can be found at: I've tested it with PHP 7.1 and in a recent version of Google Chrome. Setting Up The Back-end The first thing I searched for was guidance on building multiplayer economies. I found an excellent StackOverflow thread in which folks explained various things to think about. I got about half-way through it before realizing I may be starting from the wrong place. First things first; I need a PHP server. I'm going to have a bunch of ReactJS clients, so I want something capable of high-concurrency (perhaps even Web Sockets). And it needs to be persistent: things must happen even when players aren't around. I went to work setting up an async PHP server – to handle high concurrency and support web sockets. I added my recent work with PHP preprocessors to make things cleaner, and made the first couple of endpoints: $host = new Aerys\Host(); $host->expose( * , 8080); $host->use($router = Aerys\router()); $host->use($root = Aerys\root(.. /public )); $web = process .. /routes/web.pre ; $web($router); $api = process .. /routes/api.pre ; $api($router); This is from config.pre I decided to use Aerys for the HTTP and Web Socket portions of the application. This code looked very different compar...
Read More

Building a CSS Grid Overlay

Mar 27 8:22am CSS-Tricks
Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as CSS custom properties ). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them. This grid overlay that we're building will consider a developer tool, as in, a tool … Building a CSS Grid Overlay is a post from CSS-Tricks...
Read More

Recreating Legendary 8-bit Games Music with the Web Audio API

Mar 27 8:16am CSS-Tricks
Greg Hovanesyan, who recently posted here an Introduction to the Web Audio API, follows up with another huge post on how to use it to create iconic music from our nerds past, like sounds from The Legend of Zelda and Metroid. The final demo comes as a project you can explore. And don't miss our recent roundup of some of the best Web Audio API Pens ever on CodePen. Direct Link to Article — Permalink… Recreating Legendary 8-bit Games Music with the Web Audio API is a post from CSS-Tricks...
Read More

How to Sell Games on the Web

Mar 27 6:45am Webdesigner Depot
The first step to getting famous as a video game studio is to make a great game. The second step is to sell the darned thing to a whole lot of people. That is, of course, easier said than done. It’s not enough to throw the game on Steam Greenlight and hope for the best. […]...
Read More

Building For Mobile: RWD, PWA, AMP Or Instant Articles?

Mar 27 6:07am Smashing Magazine
    As we look deep into 2017, one of the questions on every web developer’s mind ought to be, “What trend will define the web in 2017?” Just three years ago, we were talking about the “Year of Responsive Web Design”, and we’ve all seen how the stakes were raised when Google announced Mobilegeddon (21 April 2015) and started to boost the rankings of mobile-friendly websites in mobile search results. Today, as our findings indicate, responsive web design is the norm, with 7 out of 10 mobile-optimized websites being responsive, up from 5 last year, which begs the questions: What’s next? Where is it all heading? We solved the screen-size issue and had a great run for a few years — now what?The post Building For Mobile: RWD, PWA, AMP Or Instant Articles? appeared first on Smashing Magazine.
Read More

How to Leave Your Terrible Job or Project This Year

Mar 26 8:00pm SitePoint
As with learning to say no, learning when to quit can be a hard thing. Quitters are losers, after all. But maybe you're stuck in a job that you hate. Do you find that your work is no longer rewarding? No longer fun? Are you not getting along with your co-workers, despite numerous attempts at trying to find common ground? Are you a freelancer on a long-term contract where the client is constantly being difficult? Read on as we discuss ways to take action and make the rest of your year better for you. Moving Onto Better Paying Projects Life isn't all about money. That being said, we do need it to survive and to buy the things we want. Even though money doesn't really matter beyond owning the basic things in life, earning it does bestow us with milestones to aim for ⏤ it's one way to measure our success. And who doesn't love success? Over time it's natural to want to have your income reflect the experience and skills that you've learned. This is especially tricky for new freelancers who cut their rates due to lack of experience, and then find themselves being under-compensated as their skills inevitably develop. On the other hand, even chiseled workers can find themselves outgrowing their salary. When this happens you have two choices: Ask for a pay rise Move onto something else Pretty simple really, but that's not the tricky bit. It's your contractual obligation you need to watch out for! Check Your Contract Freelancers will have more difficulty in this area. If you're working with a contract (and you should be!), you will have already agreed on the rate of your pay beforehand. For long-term contracts you should always include a clause that leaves room to revisit your rates mid-way through the work. Actually, I would advise this to everybody, not only those new to freelancing. Don't trap yourself in a contract. Even PT/FT employees will will be required to hand-in notice before leaving, so that the company has time to replace you. Otherwise, you might have to forfeit your final months' salary. Check your contract first, because abandoning a contract abruptly always has dire consequences! Leaving a Job/Project When the Client is Just Awful But it's not always about the money, is it? Even the highest-paying jobs aren't really worth it if you're miserable. Maybe certain colleagues aren't very nice to work with, or maybe you have a client that wants more...
Read More

Slides: CSS-Tricks is a Poster Child WordPress Site

Mar 26 1:59pm CSS-Tricks
I just gave a talk at WordCamp Miami where I talked about, to some degree, how WordPress has been a great choice for CSS-Tricks over the last decade. If I get a chance I'll try to re-give the talk to my computer locally here so there will be a way you can watch the talk with some real context. … Slides: CSS-Tricks is a Poster Child WordPress Site is a post from CSS-Tricks...
Read More

Relative Paths Episode 47 Dogmatism

Mar 26 1:54pm CSS-Tricks
I joined Mark Phoenix and Ben Hutchings to talk about, in large part, this article and the larger conversation about behavior and attitude in tech. Direct Link to Article — Permalink… Relative Paths Episode 47 – Dogmatism is a post from CSS-Tricks...
Read More

Best CSS Tools | 20 Useful Frameworks and Libraries

Mar 26 9:16am Line25
CSS offers some neat features that have a growing popularity in the web developer world. Due to its increased usage and functionalities, it became a necessity for web designers to continuously search for the best CSS tools to enhance their websites’ designs. CSS offers multiple functionalities to style your website design to perfection. You can […] The post Best CSS Tools | 20 Useful Frameworks and Libraries appeared first on Line25.
Read More

Popular design news of the week: March 20, 2017 March 26, 2017

Mar 26 5:44am Webdesigner Depot
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, […]...
Read More

Collective #300

Mar 25 2:43pm Codrops
Keyshape * JavaScript vs. Python * Pretty Printing * iterare * polychrome * NLP * A11Y Style Guide * Practical CSS Grid Collective #300 was written by Pedro Botelho and published on Codrops.
Read More

Plugins Loaded

Mar 25 1:41pm CSS-Tricks
A huge high-five to John James Jacoby for his help here on CSS-Tricks fixing up our Markdown + bbPress integration. John runs Plugins Loaded, a source of high-quality WordPress plugins that you can use for free, or choose to pay to support. Plugins Loaded is a post from CSS-Tricks...
Read More

Interview: Active Theory Wins Developer Site of the Year at Awwwards London

Mar 25 5:34am Awwwards - Blog
There was a buzz in Central London this February as key figures in digital design united to hear talks from experts in UX, Web Design and VR and network...
Read More

How Do I Publish My Writing Online?

Mar 25 2:08am Designbeep
How to get your writing out there online If you love to write, the joy of doing so may be enough for you. But what if you want to share your talent with others? It does not matter whether you are a poet, a short story writer or simply someone who likes to express their opinion by creating articles, you may come to a point where you want place content online for people to see. The good news is that you can do this for free. It’s possible to use a content management system (CMS), such as WordPress, to get...
Read More

What Sort of Hosting Should I Choose for My Website?

Mar 24 5:30pm SitePoint
Having a website is a bit like having a child. It's rewarding to watch them grow, but they require time, effort, and a watchful eye. Providing an environment that meets their needs will ensure their healthy, ongoing growth. A website can grow in terms of content, structure and functionality, and these have implications for your site's home—your web hosting. Invest some time considering the options. In this article we’ll help you choose the appropriate type of web hosting by listing some key decisions about your website and the amount of assistance you’ll need setting it up and maintaining it. If you missed our first article, I Need a Website. What Do I Need to Know About Hosting?, you might want to check it out before reading this one. What Types of Web Hosting Are There? One thing that complicates the choice of web hosting is the overwhelming number of options out there! Here’s a quick rundown. The most affordable hosting plans are shared hosting. They cost less because you share a server with others. You split the cost, but you also split the storage and bandwidth. If another site gets a lot of traffic, yours might suffer. A dedicated server’s resources are completely available to your website. You get all of the storage and bandwidth, and you may be responsible for the management of the computer as well. Cloud hosting is a cluster of maintained servers that scale when necessary to give your website even more resources than a dedicated server. In each case you’re typically offered a choice of plans with different options at different price points. These vary from provider to provider. So, which type of hosting is best for your site? Answer the following questions to find out. 1. How Many Pages Will Your Site Have? You might be surprised by how little space a basic website needs. You might also be surprised by how fast a website can grow. So choose a hosting plan that provides enough room to store your website now, with plenty of room to grow in the future. Continue reading \%What Sort of Hosting Should I Choose for My Website?\%...
Read More

Five CSS Performance Tools to Speed up Your Website

Mar 24 3:30pm SitePoint
This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. In this article, I'm going to list five CSS performance tools that will help you put your website on a CSS diet for a fast loading experience. Why Is Page Speed so Important? A fast loading website is crucial to the success of your website. There are research findings to support the view that users get quickly impatient if they have to wait even a few seconds for web content to appear. When this happens on your website, their experience degrades noticeably with the consequence that your website gets fewer visits and fewer conversions, which ends up hurting your business. There are a number of factors that affect web performance, e.g., the number of HTTP requests, bloated code, heavy media files, etc. How you write CSS and how your stylesheet gets loaded in the browser can have significant impact on a few of those precious milliseconds which make the difference between visitors staying on your website and clicking their way toward your competition. Let's see how the tools below can help to fix your CSS for top-notch web performance. TestMyCSS TestMyCSS is a free online optimization tool with tons of features. It checks for redundancy, validation errors, unused CSS, and best practices. You can start to use it right away, just type the url to a website's CSS file, and TestMyCSS spits out all the items that need improvement. Not only that, you can also find helpful hints on How to simplify complex selectors Duplicated CSS properties and selectors you need to get rid of The number of !important declarations present in the code Unecessary class specificity Unecessary IE fixes Prefixed CSS properties which don't need vendor prefixes any more Class or ID rules qualified with tag names, e.g., a.primary-link Inappropriate use of universal selectors. Stylelint Stylelint is an ambitious CSS linter that works with PostCSS, an open source tool to write state of the art CSS. A linter is a program that goes through your code and catches any potential errors. Stylelint can Flag errors like typos, invalid hex colors, duplicate selectors, etc. Enforce best practices Enforce coding style conventions like consistent spacing in each CSS rule, etc. Provide support for new cutting edge CSS syntax Automatically fix some minor...
Read More

20 CSS Tutorials for Beginners

Mar 24 1:20pm Line25
Today’s article gathers 20 CSS tutorials for beginners that will teach you some neat CSS tricks to improve your design skills. If you want to learn how to create 3D button styles, social link buttons, progress buttons, navigation menus, 3d typography, menus, and more, these CSS tutorials for beginners are just what you were looking […] The post 20 CSS Tutorials for Beginners appeared first on Line25.
Read More

Cut the File Size with These Three HTML Minification Tools

Mar 24 12:30pm SitePoint
This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. Although there isn't clear agreement on the benefits of HTML minification, if you test your website on Google's PageSpeed Insights, part of the answer you could get as a result is that you should minify HTML, CSS and JavaScript. Minifying a resource means getting rid of redundant elements, that is, elements which the browser doesn't need in order to process the document correctly. Applying this concept to a HTML document, minification could include things like: Stripping HTML comments, as well as comments inside inline CSS and JavaScript code Removing white space both in HTML code and inline CSS and JavaScript Removing unnecessary quotes, empty attributes, etc. Getting rid of CDATA sections These operations contribute to keep the file size down, but also make it easier to keep the code clean and maintainable. GZipping Versus Minifying Resources Is still worth minifying HTML if you're using GZip? One of the arguments against HTML minification is that, gzipping HTML pages already gets rid of white space and reduces file size. This makes minification quite useless. Continue reading \%Cut the File Size with These Three HTML Minification Tools\%...
Read More


Mar 24 12:03pm siiimple
We’re a team of makers, thinkers, explorers and theatre singers. We approach work and play with curiosity and experimentation, using what we learn to create meaningful digital products that connect with people, just like you.
Read More

Creating Strictly Typed Arrays and Collections in PHP

Mar 24 12:00pm SitePoint
One of the language features announced back in PHP 5.6 was the addition of the ... token to denote that a function or method accepts a variable length of arguments. Something I rarely see mentioned is that it’s possible to combine this feature with type hints to essentially create typed arrays. For example, we could have a Movie class with a method to set an array of air dates that only accepts DateTimeImmutable objects: <?php class Movie { private $dates = []; public function setAirDates(\DateTimeImmutable ...$dates) { $this->dates = $dates; } public function getAirDates() { return $this->dates; } } We can now pass a variable number of separate DateTimeImmutable objects to the setAirDates() method: <?php $movie = new Movie(); $movie->setAirDates( \DateTimeImmutable::createFromFormat('Y-m-d', '2017-01-28'), \DateTimeImmutable::createFromFormat('Y-m-d', '2017-02-22') ); If we were to pass something else than a DateTimeImmutable, a string for example, a fatal error would be thrown: If we instead already had an array of DateTimeImmutable objects that we wanted to pass to setAirDates(), we could again use the ... token, but this time to unpack them: <?php $dates = [ \DateTimeImmutable::createFromFormat('Y-m-d', '2017-01-28'), \DateTimeImmutable::createFromFormat('Y-m-d', '2017-02-22'), ]; $movie = new Movie(); $movie->setAirDates(...$dates); If the array were to contain a value that is not of the expected type, we would still get the fatal error mentioned earlier. Additionally, we can use scalar types the same way starting from PHP 7. For example, we can add a method to set a list of ratings as floats on our Movie class: <?php declare(strict\_types=1); class Movie { private $dates = []; private $ratings = []; public function setAirDates(\DateTimeImmutable ...$dates) { /* ... */ } public function getAirDates() : array { /* ... */ } public function setRatings(float ...$ratings) { $this->ratings = $ratings; } public function getAverageRating() : float { if (empty($this->ratings)) { return 0; } $total = 0; foreach ($this->ratings as $rating) { $total += $rating; } return $total / count($this->ratings); } } Again, this ensures that the ratings property will always contain floats without us having to loop over all th...
Read More

Introduction to The Elm Architecture and How to Build our First Application

Mar 24 10:11am CSS-Tricks
Creating our first Elm application might seem like a hard task. The new syntax and the new paradigm can be intimidating if you haven't used other functional programming languages before. But once you create your first application, you will understand why Elm has been gaining so much attention lately. Article Series: Why Elm? (And How To Get Started With It) Introduction to The Elm Architecture and How to Build our First Application (You are here!) In this article, we are … Introduction to The Elm Architecture and How to Build our First Application is a post from CSS-Tricks...
Read More

Web Development Reading List #175: GraphQL, IndexedDB2, And An Open Ethical Internet

Mar 24 6:53am Smashing Magazine
    With GraphQL, FQL, and IndexedDB2, we have new tools at our fingertips that allow us to build products that are not only more flexible but also faster. With this week’s Web Development Reading List, we’ll dive a bit deeper into these promising technologies and combine this with thoughts about the openness of the internet, ethical choices, and building inclusive products. So without further ado, let’s get started! Chrome 57 just hit stable, now the Chrome developer team announced Chrome 58 beta. It includes IndexedDB2.0 support and improvements to iframe navigation. Among the smaller changes are also auto-pause/resume of video on Android when the window is in the background and the fact that HTTPS is now required for the Web Notifications API.The post Web Development Reading List #175: GraphQL, IndexedDB2, And An Open Ethical Internet appeared first on Smashing Magazine.
Read More

Stay Organized: The 10 Best Cross-Platform Calendars

Mar 24 4:00am noupe
One important tool for every human, and especially for web workers, is the calendar. A majority of the daily organization is done on them – and not just on a single device such as the [...]...
Read More

10 WPML-Ready WordPress Themes

Mar 23 7:58pm Designbeep
How to Earn with Social Stock Hi there and here is something new and cool for you. Today we will talk about splendid project launched by Template Monster. This is a unique opportunity for you and your friends to get splendid prizes and get in a flow of web design. Let’s see what we have here and explore every detail. Now you need to answer several plain questions. Do you spend much time online? Do you have many friends in social nets? If your answer is yes, so here is an awesome offer for you. Listen up and learn more...
Read More

A Beginners Guide to Designing Conversational Interfaces

Mar 23 4:45pm Webdesigner Depot
Whether you love them or hate them, conversational interfaces have started making a significant impact in the business/brand communication landscape. Though many businesses have realized that conversational interfaces are likely to cause a major shift in brand communication there are many who are skeptical about CIs.  CIs have limitations, but they are here to stay and […]...
Read More

Writing JavaScript with Accessibility in Mind

Mar 23 4:00pm SitePoint
Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your website or web app. This article was originally published on Medium. In my first post Writing HTML with accessibility in mind I explained why and how I got started with web accessibility. I also shared some tips on how you can improve your markup in order to make your websites more accessible. Some of these were pretty basic but nevertheless valuable. It all boils down to two of the most important unwritten rules in front-end development: Learn the basics and take enough time to plan and write HTML. Both you and your users will benefit from clean and semantic markup. Luckily, HTML is not the only language we have to make websites, but the more complex the language, the easier things can go wrong and JavaScript can get very complex. Whilst being content that our code works, it's easy to forget about users with other input devices than a mouse or touch pad, e.g. keyboard or screen reader users. In this second article of four about web accessibility I have gathered some tips on what to consider when writing JavaScript and how to make your JavaScript components more accessible. JavaScript Is Not the Enemy Before you read my tips I want to point out one important thing — making an accessible site doesn't mean that you have to decide whether to use JavaScript or not. Accessibility is about making content available to as many people as possible, which also includes users with old browsers and computers, slow internet connections, strict security restrictions (e.g. no JavaScript) and so on. The experience under conditions like these, where JavaScript may not work or take too long to load, might not be ideal but is still good enough if the website is accessible and usable. If JavaScript is executable it can even be used to improve accessibility. Sara Soueidan has written about her experiences creating a tooltip widget in Building a fully-accessible help tooltip… is harder than I thought. She explains how every single no-JS solution came with a very bad downside that negatively affected the user experience and why JavaScript is important for accessibility. Marco Zehe wrote a lot more about JavaScript and accessibility in his article JavaScript is not an enemy of accessibility! I highly suggest you read his post. But enough wi...
Read More

You Kinda Can Use Custom Fonts in HTML Emails

Mar 23 2:17pm CSS-Tricks
And you use them pretty much just like you'd use custom fonts on a website. Jaina Mistry had the scoop on this last year over on the Litmus blog: While web fonts don't have universal support, here are the email clients where they are supported: AOL Mail Native Android mail app (not Gmail app) Apple Mail iOS Mail Outlook 2000 app Aside from using a JavaScript font loader, which definitely won't work in email (no email client will be … You Kinda Can Use Custom Fonts in HTML Emails is a post from CSS-Tricks...
Read More

An Introduction to the CSS Grid Layout Module

Mar 23 2:00pm SitePoint
This article was updated on 23rd March, 2017. Specifically: browser support for CSS Grid Layout. As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module. In this introductory tutorial, I’ll introduce you to this relatively new CSS feature, I’ll discuss the current browser support, and I’ll show you using some examples how the CSS Grid Layout Module works. [author\_more] What is the CSS Grid Layout Module? The core idea behind the Grid Layout is to divide a web page into columns and rows, along with the ability to position and size the building block elements based on the rows and columns we have created in terms of size, position, and layer. The grid also gives us a flexible way to change the position of elements with only CSS without any change to the HTML. This can be used with media queries to alter the layout at different breakpoints. Browser Support Before we can dive more into Grid Layout, it’s good to know the status of browser support, and how we can enable this feature in current browsers. Chrome and Firefox The awesome news is that since March 2017 both Chrome and Firefox browsers have CSS Grid Layout enabled by default Therefore, it’s recommended to use either Chrome or Firefox with the examples in this article, or with your own experimentations. Internet Explorer The first proposal of Grid Layout was developed by Microsoft, and IE10 shipped with an -ms prefixed implementation. If you take a look at support on Can I Use, you’ll see that both IE11 and Edge also support Grid Layout. Opera To enable Grid Layout in Opera, navigate to chrome://flags or opera://flags (either works in Opera), using the browser’s address bar and look for the Enable experimental Web Platform features flag. After you enable it, you will be asked to relaunch the browser. Grid Layout Polyfill A polyfill is also available to provide a working implementation of the Grid Module for current browsers. A Grid Layout Example Let’s start with an example to see the power of Grid Layout, and then I’ll explain some new concepts in more detail. Imagine you want to create a Twitter app with four full height columns layout (Tweets, Replies, Search, and Messa...
Read More

Showcase: Awesome Design to Code Services for Your Projects

Mar 23 12:50pm Line25
Many businesses and design agencies have web design/development teams in place. It’s somewhat unusual to find individual members of those teams who fully engage in both activities. Designers prefer doing design work, and developers prefer bringing designs to life. It’s the same with freelancers. Few freelance web designers have the expertise or experience to perform […] The post Showcase: Awesome Design to Code Services for Your Projects appeared first on Line25.
Read More

The Future | Inspired by Nature

Mar 23 9:32am Inspired Magazine
Inspired Magazine Inspired Magazine - creativity & inspiration daily Nature* feeds us, purifies the air we breathe and the water we drink. Unbeatable booster, it cures stress, sadness, reenergizes humans. It’s all around us but most of us fail to appreciate it or even notice it, which is a bit like turning the back on our own selves. No, we’re not going into a...Continue Reading The Future | Inspired by Nature → This post The Future | Inspired by Nature was written by Anca Rusu and first appearedon Inspired Magazine.
Read More

Expanding Bar Navigation Concept

Mar 23 9:21am Codrops
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked. Expanding Bar Navigation Concept was written by Mary Lou and published on Codrops.
Read More

eBay Redesigns Its Homepage (Again)

Mar 23 8:45am Webdesigner Depot
They say that three time’s the charm. Maybe for eBay, two is all that it will take when it comes to its homepage design. In late 2013, the auction site last attempted a homepage redesign that wasn’t all that user-friendly. While the then-redesign was supposed to surface relevant goods based on the interests and browsing […]...
Read More

The Road To Resilient Web Design

Mar 23 7:41am Smashing Magazine
    Editor's Note: In the world of web design, we tend to become preoccupied with the here and now. In Resilient Web Design , Jeremy Keith emphasizes the importance of learning from the past in order to better prepare ourselves for the future. So, perhaps we should stop and think more beyond our present moment? The following is an excerpt from Jeremy's web book. Design adds clarity. Using colour, typography, hierarchy, contrast, and all the other tools at their disposal, designers can take an unordered jumble of information and turn it into something that’s easy to use and pleasurable to behold. Like life itself, design can win a small victory against the entropy of the universe, creating pockets of order from the raw materials of chaos. The Book of Kells is a beautifully illustrated manuscript created over 1200 years ago. It’s tempting to call it a work of art, but it is a work of design. The purpose of the book is to communicate a message; the gospels of the Christian religion. Through the use of illustration and calligraphy, that message is conveyed in an inviting context, making it pleasing to behold.The post The Road To Resilient Web Design appeared first on Smashing Magazine.
Read More

Seven Ways You Can Place Elements Using CSS Grid Layout

Mar 23 7:16am SitePoint
This article was updated on 23rd March, 2017. Specifically: browser support for CSS Grid Layout. In this article, we are going to learn seven ways in which you can place elements in a web page using the Grid Layout module. Previously, SitePoint published Introducing the CSS Grid Layout. Recently, I also wrote Where Things Are at in the CSS Grid Layout Working Draft. Here, the focus will be entirely on specific ways in which you can lay out elements on the web using CSS Grid. Now, let's go over each one of them. Addressing Browser Support for Grid Layout At this time, Grid Layout doesn't yet have consistent browser support. However, as of March 2017, both latest versions of Chrome and Firefox browsers have been released with CSS Grid Layout support by default. IE still supports the old implementation, Opera needs the Experimental Web Platform flag turned on, and Safari has no support at all. To properly work with all the examples in this article, I suggest you use either Chrome or Firefox. For readers who for some reason find it problematic to use these browsers, I have added a screenshot to show the final result of each technique. #1 Specifying Everything in Individual Properties This is the version we have been using to place the elements in our previous articles. This method is verbose but easy to understand. Basically, the left/right and top/bottom bounds of an element are specified using grid-column-start/grid-column-end and grid-row-start/grid-row-end properties. If an element is only going to span one row or column, you can omit the -end properties, this way you will have to write a little less CSS. In the demo below, element A has been placed in the second row and second column using the following CSS: [code language= css ] .a { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } [/code] The same effect could be achieved by using: [code language= css ] .a { grid-column-start: 2; grid-row-start: 2; } [/code] See the Pen Specifying Everything in individual Properties by SitePoint (@SitePoint) on CodePen. #2 Using grid-row and grid-column Even though the CSS in our first example was readable and easy to understand, we had to use four different properties to place a single element. Instead of using four properties, we can just use two — grid-column and grid-row. Both these properties will take two val...
Read More

Hired Job Hunting Simplified

Mar 23 6:52am CSS-Tricks
On Hired, companies apply to you, not the other way around. Upon getting approved your profile becomes visible to over 6,000 innovative companies, hiring for technical roles. So if you’re looking for new opportunities, but don't want the hassle of applying to all those companies, try Hired and let the companies apply to you! Direct Link to Article — Permalink… Hired – Job Hunting Simplified​ is a post from CSS-Tricks...
Read More

Modern JavaScript for Ancient Web Developers

Mar 23 6:51am CSS-Tricks
Gina Trapani: ... when you're learning modern JavaScript, there's a good chance that the solution to the problem you're having is still getting worked out. In fact, it's very possible it is only one code review away from getting merged into the package you're using. It's a weird time. So many of us are living so close to the edge. As Gina puts it, it's harder to find a 5-year-old Stack Overflow answer that solves your problem. New things drop … Modern JavaScript for Ancient Web Developers is a post from CSS-Tricks...
Read More

10 Fancy Free Magazine Themes for your WordPress

Mar 23 5:00am noupe
Magazine themes are getting increasingly more popular. They look nice and offer a lot of information directly on the landing page. As they are not only suitable for news websites, but also being used in [...]...
Read More

UCreatives Graphic Design Reading List

Mar 23 3:26am
We asked a few designers, marketers, and advertising professionals who’ve worked with UCreative to give us their recommends. These ... The post UCreative’s Graphic Design Reading List appeared first on
Read More

Scrum: Walking through a Story (Part 3)

Mar 23 2:00am SitePoint
The following is an extract from our book, Scrum: Novice to Ninja, written by M. David Green. Copies are sold in stores worldwide, or you can buy it in ebook form here. Demonstrating the Story A day before the demo, as part of the preparation, the product owner sits down with the junior engineer who owns the puppy story. They have already walked through the various components a number of times during the sprint, but the product owner wants to be sure all of the acceptance criteria can be demonstrated. Will we have this staged properly on production-ready servers in time for the demo? the product owner asks. Pretty much, the engineer replies. That's the server QA has been testing on. It should be fine for the demo. Continue reading \%Scrum: Walking through a Story (Part 3)\%...
Read More

Need to Catch Up on the AMP Debate?

Mar 22 10:09pm CSS-Tricks
The subject of AMP came up at a meetup I was at the other day. It came up in a Hey have y'all seen this thing yet? context. Some people have heard of it, some hadn't. Even among those who had heard of it, the vibe was mostly: this is newfangled tech. It's the future, probably. I guess it's a thing I gotta learn, I just haven't gotten around to it yet. Which makes sense. It's just like hearing about … Need to Catch Up on the AMP Debate? is a post from CSS-Tricks...
Read More

Editorial: Put Your Code Where Your Mouth Is

Mar 22 7:37pm SitePoint
We may be familiar with Siri, Google Now, and Cortana as the mobile operating system’s native voice-operated assistants, but Apple has gone a step further and published an API that allows developers to recognise speech and make use of it. iOS users are already used to Siri to interact with apps and dictate text, and […] Continue reading \%Editorial: Put Your Code Where Your Mouth Is\%...
Read More

Managing WordPress Updates with InfiniteWP

Mar 22 6:30pm SitePoint
This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. InfiniteWP is an administration panel that provides almost effortless management of multiple WordPress websites. Do you administer more than one WordPress website for your organization? Do you host WordPress websites, or are you a developer who maintains sites for clients? This is the perfect tool for you, if so! What Problems Does It Solve? Plugin Updates - Keeping track of the endless security updates, bug fixes, and new-feature updates of every plugin deployed on your WordPress sites can be extremely tedious, especially if you have multiple sites to manage. These plugin updates can be done with a click of a button from InfiniteWP. Platform Updates - In addition, updates to the WordPress platform can be conducted from this central location as well. Are you familiar with the changes in the new version? If so, you can easily update all of your sites to it. Theme Updates - What about updates to themes (or parent themes) that have been used to build the UI of your websites? Those, too, can be updated all from the admin panel, whether you're using the same themes on multiple sites, or all unique ones. If it is updatable within WordPress, it will be updatable using InfiniteWP. Backups - In addition to all of the update features, InfiniteWP also allows you to take backups of your attached websites, the files and database of them. This enables you to update with confidence. Have some untested plugins to update? Back the site up first! Setting up InfiniteWP Installation and setup can be done in one of three ways: Install via WordPress Plugin Install via cPanel Manual Installation This mix of options means that whether you're on a shared host with a cPanel, on a VPS, or any other hosting option, it's likely that you'll be able to find a solution that meets your needs, and deploy InfiniteWP to manage your WordPress sites! Setting up a Site on InfiniteWP Once you've installed InfiniteWP and logged into the admin panel successfully, you'll encounter the dashboard screen. Your next step in connecting a website to your InfiniteWP dashboard will be to add the InfiniteWP plugin to the WordPress website you wish to manage with InfiniteWP. You can do this easily by going to your Plugins menu, choosing to Add a Plugin, and searching...
Read More