True White Label WordPress Hosting Now Available From WPMU DEV

Your secret’s safe with us. Reselling WPMU DEV just got easier thanks to some new behind-the-scenes tweaks to our platform. Learn what those tweaks are and how to white label our hosting.

White labeling has been a big deal at WPMU DEV for a while now.

Our freemium plugin Branda gives you the power to completely rebrand WordPress, with over 30 modules for customizing your WP admin, front-end, widgets, and utilities.

Then there’s the WPMU DEV Dashboard plugin, which you can use to banish the superhero branding from our plugins and make them totally your own.

You’ve also been able to prepare beautiful and professional white label reports that keep your clients in the loop and demonstrate the ongoing commitment you have to their sites.

And now, with the recent introduction of The Hub Client and some additional tweaks to our hosting (more on that soon) – white labeling and reselling WPMU DEV Hosting is easier than ever.

How easy? Read on to get a look at the current hosting white labeling process, and what it looks like for you and your clients.

Skip Ahead:

Starting with two new and simple adjustments that make white labeling DEV Hosting a whole bunch easier.

New WPMU DEV Hosting White Label Features:

1.White Label Temporary Hosting Domains

Up until now whenever you created or cloned a site on WPMU DEV hosting, it was automatically given a temporary domain along the lines of: “insertnamehere.wpmudev.host.”

Not particularly ideal when handing over a new site you’ve set up, especially if you’ve white labeled the rest of their experience.

To solve this issue, now all temporary domains across both The Hub and The Hub Client are automatically created as: “insertnamehere.tempurl.host.” 

Discreet, with the added benefit of a name that essentially describes what the URL is. Win-win.

A screen showing the new tempurl name WPMU DEV hosted sites are given
A nice, new white labeled temp domain.

2.White Label Email “From” Address

When it comes to white labeling, an important thing to note is that the email system for The Hub Client works slightly different to the regular WPMU DEV Hub.

When a new user invite is sent from The Hub, the email is sent from “noreply@insertcompany here.com,” or “contact@wpmudev.org.”

However, emails sent from WPMU DEV hosted Hub Client sites use our default address.

For example, your client handover process may have gone something like this:

  • You design, develop, and create a new site for a client (or maybe you’re giving them access to your Hub so they can create sites themselves).
  • You send them an email inviting them to view and access their new site.

They’d then see the “From” address at the top of the email showing: “noreply@wpmudev.host.”

The good news is, by default all Hub Client emails are now sent from: “noreply@yourwpsite.email.”

A screenshot of our newly white labeled from email address
Consider your email “from” address white labeled.

And even though this address will be enough for most, if needed, you can also white label your from address further using SMTP.

How To White Label WPMU DEV Hosting Right Now

Want to start reselling WPMU DEV Hosting right now? Here’s how you can get started putting the above into action.

1.Install and Activate The Hub Client Plugin

The Hub Client (THC) enables you to completely replace WPMU DEV’s Hub platform with your own branding.

This also makes it the perfect place to manage your hosting sites.

Start by installing The Hub Client plugin on the site you want to host your white label Hub. You can download and install THC via the plugin’s project page:

A screenshot of The Hub Client landing pageOr by one-click installing it via the WPMU DEV Dashboard plugin:

A look at installing THC through the WPMU DEV dashboard

Note that you’ll have to be a current WPMU DEV member in order to use THC.

Good news is, we offer a free 7 day trial if you want to follow along without spending a dime.

Once installed, navigate to the dashboard where you’ll see some simple instructions and a button to get started.

 

A look at the initial Hub Client dashboard
Time to get started creating your own Hub!

2.Customize and Brand Your Hub

Next, you’ll be taken to the settings page, where you can customize and brand different aspects of your new hosting Hub. The customization settings include:

Custom Branding and Colors

Give your Hub a custom brand name and logo.

A screen showing where you change the name and logo of your Hub

You can also adjust navigation background, text, and hover colors to match your branding.

A look at how you can change the color scheme of your Hub

Custom Nav Menu and Hub Client Page

Create a custom nav menu with links for your clients aside from the automatically added ‘sites’ menu item (which shows the site(s) you’ve given them access to).

Your menu links could lead to relevant and helpful areas of your own site (e.g. docs, or a community area).

A screen showing how you can adjust menu navigation options and choose the page your Hub appears on

You can also select which page on your site should actually host your Hub.

An automatic ‘hub’ page is created for you when you install the plugin, but you can choose any page you want.

Manage Users and Roles

Managing users and roles with THC is the same as using the regular Hub.

After clicking the link you’ll be taken to the same interface where you can create custom roles and invite new users to see what you’ve made for them. More detail on this in the next step.

A look at managing users and roles

Terms Of Service and Privacy Policy Pages

Add checkboxes and links to your Terms Of Service and Privacy Policy pages to ensure you’re complying with regulations like the GDPR – and that customers understand and agree to your terms.

A look at the TOS and privacy policy Hub Client settings

Visit the Terms & Privacy Policy Generators section of our partners page if you’re unsure on how to set up these documents.

There you’ll find multiple services that can help you create terms that reflect both WPMU DEV’s services, as well as your own business’s requirements.

Help Button and Live Chat Support

If you want to add more value and assistance for clients using your Hub you can also set up a “Help Button” where you can include a link to a relevant page where your clients can seek support.

As of The Hub Client’s latest release, you can now also add a live chat module to your Hub site to provide on-the-spot support for your clients. You’ll find a full step-by-step guide for this new HubSpot Live Chat integration in our THC documentation.

A screen showing how you can add a help button and live chat to your Hub page

Preview The Magic While it Happens

While all this is going on, you can view a live preview of Your Hub Nav – saving you from having to click back and forth until you finally nail that perfect look and feel.

A screen showing the live preview The Hub Client gives you while you're editing

3.Invite Your Client To View Their Site(s)

Now let’s go through the process of inviting a new client or user into your Hub… how that works, and what they see.

As mentioned above, you can manage the users and roles of your new Hub straight from the settings page.

A look at managing users and roles

From here you’re taken to the regular Users & Roles Hub interface, only now you’ll notice it’s white labeled to reflect the branding we set up above.

a first look at your white labeled Hub

Before you invite your client, you’ll normally have already considered what kind of access you’re going to give them based on the particular project.

Since we’re talking white label hosting, for this example let’s assume we’re giving them full view and edit access to the site we’ve developed and designed for them, as well as access to the Hosting tab in our Hub.

Check out our recent breakdown of how to set up Users & Roles in The Hub for a full picture of how creating roles and assigning different levels of access works.

To start with, let’s create a custom role that gives them the appropriate level of access.

Create a Custom Client Role

Find the Roles tab and then select Create New Role.

A screen showing where to create a new role in The Hub

Give your role a title and toggle the areas of your Hub you want to give your client access to.

A screen showing where you give your new role a title
Give your custom role an appropriate title.
A look at us selecting to only show the hosting tab to clients
For this example we’ll leave the Hosting tab selected.

At this point, our client has basic view and edit (read/write) access, however, if needed you can also customize their level of access even further.

A screen showing the option to customize this role even further

Click on the View & Edit dropdown and you’ll see the option to customize even further.

Based on the project and objective, you can select various actions within the Hosting tab to give permissions for.

Examples of further actions and permissions you can give your clients customized access to

Now we’ve set up our custom hosting client role, let’s invite them to check out their site.

Sending Your Client Invitation

Navigate back to the Users tab and select New User.

Then it’s as simple as filling in the client details: name, email, and the site we want to give them access to.

You’ll also select the custom role created earlier and you can add your own personalized note to the invitation if you wish.

A screen showing the invite new users module

We’ve come full circle.

Your client will then receive the same invitation email we mentioned at the top of the article – complete with that white labeled from address.

A screenshot of our newly white labeled from email address

When your client clicks confirm, they’ll automatically be taken and logged into your client Hub.

Here they’ll be able to see the site we’ve given them access to (look at that beautiful white labeled temp domain):

An example showing your client having access to one hosting site

They’ll also be able to access the Hosting tab, along with all the various settings and tools, which as mentioned, you can customize to allow different levels of access:

An example showing full hosting tab access

From here your client can also view their profile, add a password, and set up 2FA for added security.

A screen of where your client or user can adjust some personal settings

Finally, they’ll then be able to log into your own beautiful (and white labeled!) client Hub:

A look at a brand new Hub Client login page
Your brand-spanking new Hub login page.

Is WPMU DEV Hosting Really 100% White Label? Pretty Much!

Depending on the client and the amount of access they’re given, there are always going to be ways people can uncover traces of WPMU DEV.

For example, if you were to peep inside the .php files you will find mentions of WPMU DEV, since our code has variables and constants using it.

To put it into motor vehicle terms…

Most people aren’t going to care if they look under the hood and discover their Range Rover was actually made somewhere other than the U.K.

And if you’re the type to look under the hood, pull the engine apart, put it back together again – you’re probably not buying a Range Rover in the first place.

Same idea with reselling our hosting. If a client is that advanced, they’d be in your shoes, or setting up their own VPS.

More Exciting Reseller Features Are On The Way

As mentioned in this article, there’s no reason why you can’t get started reselling white labeled WPMU DEV Hosting right now.

If you’re interested, and not already a member, you can take The Hub Client for a free 7 day trial to see how it works for yourself first.

There are also some game-changing developments that will make your reselling life even easier, just around the corner…

  • Unlimited Free Templates – Create as many templates as you like to clone new sites from, for free!
  • Automated Site Creation and Client Billing – Offer different hosting and feature plans, set the initial charge and subscription levels, and let your clients purchase a plan. Welcome to your new WordPress SAAS business.
  • Domains – Offer your clients the opportunity to search for and purchase a domain, which will be automatically mapped to their new hosting and templates set up… yep, be your own GoDaddy!
  • Full UI Customization – Make the internal Hub UI and tabs completely your own and further customize your client’s experience, with footer functionality and third-party code embeds.

Check out our product roadmap to keep up with what’s in store for The Hub, The Hub Client, and the rest of our WP plugins.

And to our awesome members and early-Hub Client adopters, thank you for all the support and feedback you’ve given us so far.

Keep submitting your feedback, requests, and questions to The Hub Client forum, and let’s continue to create the best white label Hub experience we can.

How To Use Visibility Conditions In Hustle

Getting your popups in front of the right user can seriously boost your campaign results. Hustle gives you complete control over who can view your popups with visibility conditions.

How many times have you heard marketers say that “popups can be annoying but they are also highly effective”?

Hustle’s visibility conditions are the key to more effective, less annoying popups.

Hustle - Multiple visibility conditions selected.
Visibility conditions give you total control over who will see your popups.

In this tutorial, we cover the following:

Click on the links above to jump to any section of this tutorial or watch the video below:

What Are Visibility Conditions?

Hustle not only lets you create eye-catching pop-ups, but also slide-ins, embeds, and social shares.

By default, all of these are automatically set to show everywhere on your site.

Considering that ALL of these modules can run simultaneously on your site (and in unlimited numbers with Hustle Pro), you can easily see how this can become too much information for your users, especially someone who is not an intended target for your campaigns.

Cartoon - Devman searching through the forest as Hustle pops up everywhere.
Use Hustle’s visibility conditions to show popups only to the right users.

Fortunately, Hustle gives you precise control over where your popup (and slide-ins, embeds, and social shares) will be shown with visibility conditions,

Visibility conditions enable the right users to see your message when the right conditions are met.

And you set those conditions.

Hustle’s visibility options use conditional logic rules to make this happen. You can apply a whole load of precise conditions to make your pop-ups automagically display to your target users.

Cartoon - Harry Hustle Potter
Hustle uses conditional logic (not dark art invocations) to automagically control the visibility and targeting of your popups.

Hustle’s Available Conditions

Hustle makes many visibility conditions available.

You can choose conditions based on a combination of elements like posts, pages, categories, tags, custom post types, users’ login status, device, country, browser cookie, and more.

Hustle visibility conditions.
So many visibility conditions to choose from.

Some conditions like Posts, Pages, Categories, Tags, etc. are straightforward and easy to configure. Simply choose to include or exclude them as a condition to show or hide your pop-up.

Hustle even has an auto-search feature that makes this easy.

Hustle - Post visibility options.
Begin typing to use the auto-search feature for most include or exclude elements, b.

Other conditions let you select and/or combine different options using dropdown menus, inputting data into fields, specifying a range of values, etc.

This gives you precise control over the visibility of your pop-ups.

Source of Arrival visibility conditions.
Select different options for visibility conditions like Source of Arrival.

Additionally, Hustle will recognize custom post types being used on your site (e.g. adding a testimonials plugin) and make visibility conditions available for these too.

Hustle custom visibility options
Hustle adds visibility conditions for custom post types.

If your site uses WooCommerce, Hustle will even add an entire set of Woo-specific conditions to help boost your sales.

Hustle - WooCommerce visibility conditions.
Hustle displays WooCommerce-specific conditions if WooCommerce is installed on your site.

You can choose to add as many conditions as you like to a module and configure these to your individual needs and goals.

If you are not sure how certain conditions will work on your site, refer to Hustle’s visibility modules documentation. We also recommend testing your modules on a staging site to make sure that everything is working as intended.

How to Add Visibility Conditions in Hustle

As stated earlier, visibility conditions apply to all of Hustle’s modules. For simplicity’s sake, we’ll focus only on using visibility conditions to create targeted pop-ups, as everything else is the same.

The only difference between popups and other modules like Embeds and Social Shares is that these let you specify additional display options.

Hustle visibility conditions - display options.
Specify display options for Embed and Social Share modules.

Note: A little strategic planning is required to make sure that your pop-ups will display to your intended target audience only when specific conditions are met.

Before adding visibility conditions, then, think about the experience you’d like to create for different user groups, such as first-time visitors, returning users, and users to whom your popup would have no value at all.

Next, create condition groups that include one or more visibility conditions.

You can also create multiple condition groups, each with a different set of rules.

As we will cover shortly, each condition group can be set to Show or Hide your pop-up if Any or All of the conditions within the group are met.

Let’s go through an example.

To add visibility conditions in Hustle, create a new pop-up or edit an existing one, and click on the Visibility menu.

This brings up the Visibility screen with an initial condition group already set up.

Click on the + Add Conditions section to add visibility conditions (we’ll address the ‘Show/Hide’ and ‘Any/All’ rules in the next section).

Edit Hustle Popup - Visibility Conditions.
Let’s add some visibility conditions.

Select one or more visibility conditions and click on the Add Conditions button.

Select one or multiple visibility conditions.

You can add visibility conditions to a group (or remove them) at any time.

Now, go through and configure your conditions.

With posts, for example, do you want your pop-up to display to users when they visit only specific posts?

Then select ‘Only these posts’ and begin typing the name of your post(s) to select these.

How about displaying pop-ups only on posts with certain tags, to users assigned specific roles, who are viewing your content via a Chrome or Safari browser on their mobile device, having arrived on your site from an external URL…and only if they have registered within the last seven days?

That’s the power of Hustle’s visibility conditions.

Hustle visibility condition group.
This condition group has multiple visibility conditions.

You can add multiple condition groups, with multiple visibility conditions to every pop-up you create (create unlimited pop-ups if using Hustle Pro).

Removing visibility conditions and deleting condition groups from modules is as easy as clicking on a trash icon.

Easily remove unnecessary conditions and condition groups.

Show and Hide Functions

When you first land on the visibility tab you are presented with a drop-down that lets you select whether you want to show or hide the popup based on the conditions you set.

Hustle - Show or Hide rules.
Specify whether visibility rules for your condition group will show or hide your module.

For example, let’s say that you want a popup to show on all pages but don’t want logged-in users to see it.

You would set up the following options on the same popup module using two separate condition groups for Show and Hide:

  • Group #1 – Show pop-up on all pages.
  • Group #2 – Hide pop-up from logged-in users.
Hustle - Condition groups.
Use different groups to set up Show and Hide visibility conditions for the same pop-up.

All and Any Rules

The next option for displaying pop-ups and other modules is a drop-down where you can apply ‘all’ or ‘any’ rules.

Hustle - All or Any rules.
Use All or Any rules to set group conditions.

Selecting ‘all’ means that all the conditions you apply in this group have to be met for your popup to show or hide.

Choosing ‘any’ means the popup will show or hide if any one of the conditions in that group is met.

For example, let’s say that you want to show a popup to a user who has come from a search engine and is on a mobile device.

You would select ‘show’ when ‘all’ of the following conditions match:

  • Source of Arrival – Search Engine
  • Visitor Device – Mobile Only
Hustle Visibility conditions - Show : All conditions.
Your pop-up will only show to users if ALL of these conditions are met.

For the visibility conditions, select ‘Source of Arrival’ and ‘Visitor’s Device’ and click the Add Conditions button.

Hustle Visibility- Any or All Rules
Select these visibility conditions.

With the ‘Visitor’s Device’ condition set to Mobile only, check the search engine box in the ‘Source of Arrival’ condition.

Hustle Visibility conditions - Source of Arrival.
Tick the search engine checkbox.

Remember to click Update to save your settings.

Your popup will now show only when a user arrives from a search engine using a mobile device.

If you change the rule from ‘All’ to ‘Any’ in this example, your popup will show to visitors who arrive either from a search engine or if viewing your site from a mobile device. Only one of these conditions needs to be met.

Hustle Visibility conditions - Show : Any conditions.
Your pop-up will show to users if ANY of these conditions are met.

Why Some Conditions Won’t Work

If you find that a popup is not behaving in the way you expect, you could have set up conflicting visibility conditions.

This can happen if you select the ‘all’ rule and add conditions that are mutually exclusive.

For example, if you select ‘Show’ when ‘all’ of the following conditions match and add ‘Pages’ and a ‘Posts category’ as the conditions of your module, your popup will not show because a page cannot be a post category.

For this condition to work, you would need to select ‘any’ instead of ‘all’. Your popup will then display to users visiting either the selected pages or the posts in the specified categories.

Relationship Between Condition Groups

As stated earlier, your popups are not limited to one condition group.

You can add multiple condition groups to work independently of each other.

For example, let’s say that you have a module that you want to show on a specific page of your site to users with the Author role who log in with their mobile device, and also show that same module to site visitors on a different page regardless of the device being used.

You would set up two Condition Groups with the following visibility rules:

Condition Group 1:

  • Logged in status – Logged in
  • Visitor’s Device – Mobile Only
  • Pages – Only these pages: Add logged-in pages (e.g. Members)
  • User Roles – Only these: Author
Condition group 1
Visibility settings for condition group 1.

Condition Group 2:

Logged in status – Logged out
Pages – Only these pages: Add logged-out pages

Condition group 2
Visibility settings for condition group 2.

Visibility Conditions Are Set…What Next?

After setting your module’s visibility conditions, the next step is to configure your module’s behavior settings.

Essentially, visibility conditions let you specify who your popups should display to and behavior settings let you specify when and how your popups should appear.

Hustle’s built-in wizard guides you step-by-step through this process, so all you have to do after configuring your module’s visibility conditions is to scroll down the screen and click on the Behavior button to continue to the next step.

Hustle - Behavior button.
Click this button after setting your visibility conditions to continue to the next step.

The Behavior screen lets you set up precise triggers for your popups to display when your visibility conditions are met.

Check out our tutorial on how to get the most out of Hustle for more details.

Hustle - Behavior screen.
Now that you’ve figured out who will see your popups, this is where you configure when and how to show them.

If you want your popups to be more effective and less annoying to users, master using Hustle’s visibility conditions and behavior settings, and you will be well on your way to boosting your opt-in conversions.

Be sure to check out Hustle’s documentation for an in-depth explanation of each visibility condition and if you are a WPMU DEV member, feel free to contact our super support team who are available 24/7 to help you with any WordPress-related issues or questions.

filter cars according to their brands

filter cars according to their brands

filtrer.png

hiplease help me to filter the cars that's the code of
index.php(displaying cars from database)

<section class="gauto-offers-area section_70">
         <div id="myBtnContainer">
            <input type="hidden" name="marque" id="myInput">
            <div class="row">
               <div class="col-md-12">
                  <div class="site-heading">
                     <h4>Viens avec</h4>
                     <h2>meilleures offres</h2>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-12">
                  <div class="offer-tabs">
                     <ul class="nav nav-tabs" id="offerTab" role="tablist">
                        <li class="nav-item" >
                           <a class="nav-link active" id="all-tab"  data-toggle="tab" href="" role="tab" aria-controls="all" aria-selected="true" >Toutes les marques</a>

                        </li>
                        <li class="nav-item" >
                           <a class="nav-link"  id="nissan-tab" data-toggle="tab" href="" role="tab" aria-controls="nissan" aria-selected="false">nissan

                           </a>

                        </li>
                        <li class="nav-item" >
                           <a class="nav-link" id="Toyota-tab"  data-toggle="tab" href="index.html#Toyota" role="tab" aria-controls="Toyota" aria-selected="false">Toyota</a>
                        </li>
                        <li class="nav-item"  >
                           <a class="nav-link"  id="Audi-tab" data-toggle="tab" href="index.html#Audi" role="tab" aria-controls="Audi" aria-selected="false">Audi</a>
                        </li>
                        <li class="nav-item" >
                           <a class="nav-link"   id="mercedes-tab"  data-toggle="tab" href="index.html#mercedes" role="tab" aria-controls="mercedes" aria-selected="false">mercedes</a>
                        </li>
                     </ul>

                     <div class="tab-content" id="offerTabContent">
                        <!-- All Tab Start -->
                        <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">

                         <div class="row  ">
<?php     
$query="select * from voiture";
$query_run=mysqli_query($conn,$query);
$rep = mysqli_fetch_assoc($query_run);
if(mysqli_num_rows($query_run)>0){
 while ($row=mysqli_fetch_assoc($query_run)) {

?>
                     <div class="col-lg-4">
                                 <div class="single-offers">
                                    <div class="offer-image">
                                       <a href="index(1).php">
                                        <?php echo'<img src="admin/admin2/upload/'.$row['image'].'" width="100px;" height="100px;" alt="image">'?>
                                       </a>
                                    </div>

                                    <div class="offer-text">
                                       <a href="index.html#">
                                          <h3><?php echo $row['nom'];?></h3>
                                       </a>
                                       <h4>$<?php echo $row['prix'];?><span>/ Jour</span></h4>
                                       <ul>
                                          <li><i class="fa fa-car"></i><?php echo $row['model'];?><br/></li>
                                          <li><i class="fa fa-cogs"></i><?php echo $row['type'];?><br/></li>
                                          <li><i class="fa fa-dashboard"></i><?php echo $row['kilometrage'];?><br/></li>
                                       </ul>
                                       <div class="offer-action">
                                          <a href="index.html#" class="offer-btn-1">Voiture de location</a>
                                          <a href="car-booking(1).php?id_voiture=<?php echo $row['id_voiture'] ?>" class="offer-btn-2" >Dtails</a>
                                       </div>
                                    </div>
                                 </div>
                              </div><?php }}}
                               ?>

                               </div>
                  </div>
               </div>
            </div>
         </div>
      </section>

Insert Font Awesome Icons Into the Block Editor via the JVM Gutenberg Rich Text Icons Plugin

Joris van Montfort, a freelance WordPress developer, released the JVM Gutenberg Rich Text Icons plugin over the weekend. The goal was simple: allow users to insert icons nearly anywhere in the block editor at the click of a button.

The plugin uses version 4.7 of the Font Awesome library out of the box. However, developers can modify this to include custom icon sets.

Like many of the most useful plugins, it stays in its lane, performing a simple task and doing it well. The plugin presents users with a “flag” button in the editor toolbar whenever they edit a Rich Text field.

Inserting an icon into a Rich Text field in the WordPress editor.
Inserting an icon into a Heading block.

Rich Text is a block editor component for entering text. Anywhere users can type in the editor canvas is fair game for inserting an icon. This includes paragraphs, headings, image captions, and more. It also extends to blocks from other plugin developers. If they employ a Rich Text field anywhere, the “flag” button will appear, and users can plop an icon in it.

Icons inserted through the plugin automatically inherit the surrounding text size. If you stick it in a Heading block, it will grow larger. If you stick it in a Button block, it will match up with the Button text. The same is true for the colors too.

Testing icons in different blocks in the WordPress editor.
Inserting icons in various blocks at different sizes and colors.

Because it is impossible to match each theme’s design perfectly, some minor spacing or alignment adjustments may be needed. For the most part, the icons looked good when I tested them with various themes. However, there were a couple of one-pixel-off issues and minor alignment miscues with some blocks. On the whole, I did not run into any design-breaking issues. The plugin displayed its icons as it should.

One usability issue I encountered was being unable to delete an icon via the Backspace or Delete keys on my keyboard in use with the Buttons block. It worked well with other blocks. The solution for this was to click on the inserted icon. Then, select the “flag” icon in the toolbar to reopen the inserter. After choosing no replacement, the old one disappeared.

The plugin developer provided filter hooks for third-party developers to implement icon sets other than Font Awesome via a custom JSON file. Instructions are outlined in the plugin’s readme. There are also hooks for uploading or overwriting the stylesheet and classes.

While I like the plugin’s execution, I dislike that it loads its own Font Awesome stylesheet. If using another plugin or theme that does the same, its inclusion increases the page load size for end-users by loading multiple copies of the same code. This is not the fault of the plugin developer. It is a limitation created by WordPress’s lack of a dependency system. However, users who give the plugin a try should be mindful of this potential issue.

Takes on State

React is actually a bit of an outlier with state management. While it has first-class tools like useState and Context, you’re more own your own for reactive global state. Here’s David Ceddia with “React State Management Libraries and How to Choose” which does a good job of talking about the options. I say “outlier” because every other major JavaScript framework has its own blessed global state implementations.

To me, the concept of state is vital to front-end development. It’s like components in that way. It’s just shaking out that it’s a smart way to work on digital products. State is our own abstraction of what is happening on a site. It can be whether a sidebar is open or closed, a list of comments data, the details of logged-in users, or anything else that we need to draw and make functional UI.

That’s why it still feels surprising to me that native web components didn’t attempt to tackle the idea of state at all. I’m not informed enough to know why that is, but as an observer, I can see that developers are clamoring to find the best ways to make state work in and across web components. Most recently, I came across @vue/lit by Evan You. That is a microframework for web components that solves templating and re-rendering by using lit-html, and then incorporating reactive state with Vue’s reactivity. Looks pretty cool to me.

Evan’s idea takes the the combined weight of libraries in use to ~6kb. So how low can we go here? Krasimir Tsonev wrote “Using JavaScript module system for state management” where they use no libraries at all (arguably creating a small one of their own along the way). A state manager can just be a module we import and use that is essentially an Object with values, mutation functions, and listeners. That takes the overhead of state mangement down to just about nothing, at the cost of giving up the efficient re-rendering, better templating, and lifecycle stuff you’d get by using more robust libraries.

Speaking of not using any libraries at all, here’s Leo Bauza with “How does Viget JavaScript?” where they go into the vanilla pattern they use to add functionality on top of an HTML foundation. It looks like all functionality is applied via data-* attributes, and each data attribute has its own JavaScript module (Class) that handles that specific bit of functionality. It doesn’t look like the deal with global state here, but they do handle state rather manually within the modules.

I find all this stuff fascinating. In my own work, I bet I’m rather typical. If it’s a small baby thing, I might be up for a roll-my-own pattern. If it’s a medium-sized thing but sorta low-impact, I’d probably reach for the new-and-fancy — and maybe even experimental — takes. But the second I’m doing something big and high-impact, I find way more comfort in picking from the biggest players, even if that sometimes means heavier libraries. 😬


The post Takes on State appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Multilingual SEO and Content Localization for WordPress

Multilingual SEO and Content Localization for WordPressWordPress SEO and Multilingual SEO go together so that they reach certain crucial audiences that may or may not speak your language. There are so many people who look at WordPress blogs and reside in different nations. If you want to drive traffic to your website, you can’t miss these key demographics. According to current […]

The post Multilingual SEO and Content Localization for WordPress appeared first on WPExplorer.

Chrome 90 to Use HTTPS by Default in the Address Bar

Chrome’s upcoming version 90 will use https:// by default in the address bar, bringing a significant improvement to security and loading speed. HTTPS adoption has shot up significantly over the past six years after Google announced in 2014 that HTTPS would be used as a ranking signal in search results.

In February 2021, W3Techs found that 82.2% of websites use a valid SSL certificate. Today, more than 98% of pages loaded in Chrome use HTTPS as the default protocol, making this change to using HTTPS as the default for navigations long overdue.

Firefox Telemetry charts HTTPS adoption at more than 84% of web pages for all users and 92% for traffic originating in the USA.

Currently, anytime a user puts a site into the address bar without specifying the protocol, such as “example.com,” Chrome uses HTTP by default and then has to retry for HTTPS.

The update in Chrome 90 is good news for Chrome users, because it improves the loading speed for sites that support HTTPS by cutting out the redirection loop after the initial load. A gif on the Chromium blog illustrates this in a nice way:

Those who are using Chrome Canary can access experiments to try it out ahead of the version 90 release. Navigate to the following URL to mark the experimental feature as enabled:

chrome://flags/#omnibox-default-typed-navigations-to-https

WordPress site owners will want to make sure their sites are using HTTPS in order to take advantage of the speed boost this change introduces. Fortunately, for those who haven’t migrated over yet, the latest 5.7 release makes it easy to update with the click of a button. WordPress can detect if the site’s hosting environment supports HTTPS and then offers a one-click update process via the Site Health screen. It even handles mixed content rewrites where possible, so site owners will not have to worry about having a bunch of broken links after migrating.

Chrome 90 went into beta in mid-March. The stable release is scheduled for 20 days following beta on April 13, 2021.

How to display a php login error message with HTML form?

There is a PHP login code but I don't know how to show the error message when the user types wrong datas into the input fields. I used to have a
echo"Wrong username or password!"; But I want to display a DOM element. I don't know how to make it. The HTML element is inside the code, but it has a hidden class so the user can't see it. I want to remove the hidden class from the messagebox but I don't know how to remove it when the data are not correct. Or any other idea how to display error messages?

This is the Login form:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <!-- Links -->
        <link rel="shortcut icon" href="/images/icon.png">
        <title>Pleasure of Industry - Admin</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <link rel="stylesheet" type="text/css" href="includes/assets/css/login-index.css">
    </head>
    <body>
        <div class="login">
            <h1>Admin</h1>
            <form action="authenticate.php" method="post">
                <label for="username">
                    <i class="fas fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required autocomplete="off">
                <label for="password">
                    <i class="fas fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
                <input type="submit" value="Authenticate">
    <?php           if(isset($_SESSION['error'])) { echo '
    <div class="login-error hidden" id="error-id">
    <span class="alert-img">
        <img src="/assets/images/svg/rf-alert.svg" width="30px">
    </span>
    <span class="alert-text">
        Incorrect username and/or password!
    </span>
</div>';
    unset($_SESSION['error']);
}?>
            </form>
        </div>
    </body>
</html>

And this is the Validation PHP file Code:

<?php
session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
    // If there is an error with the connection, stop the script and display the error.
    exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}

// Now we check if the data from the login form was submitted, isset() will check if the data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
    // Could not get the data that should have been sent.
    exit('Please fill both the username and password fields!');
}

// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
    // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
    $stmt->bind_param('s', $_POST['username']);
    $stmt->execute();
    // Store the result so we can check if the account exists in the database.
    $stmt->store_result();

    if ($stmt->num_rows > 0) {
        $stmt->bind_result($id, $password);
        $stmt->fetch();
        // Account exists, now we verify the password.
        // Note: remember to use password_hash in your registration file to store the hashed passwords.
        if (password_verify($_POST['password'], $password)) {
            // Verification success! User has logged-in!
            // Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
            session_regenerate_id();
            $_SESSION['loggedin'] = TRUE;
            $_SESSION['name'] = $_POST['username'];
            $_SESSION['id'] = $id;
            header('Location: /admin/h/index.php');
        } else {
            // Incorrect password
            //echo 'Incorrect username and/or password!';
            header("location: /admin/index.php?login_attempt=failed");
        }
    } else {
        // Incorrect username
        echo 'Incorrect username and/or password!';
    }

    $stmt->close();
}
?>

#308: User Testing

In this episode, Klare and Chris talk about speaking to users directly about CodePen to get their feedback and as much other intel as we can in the spirit of making CodePen better and validating some ideas for future features.

Timejumps

  • 00:31 How we do user testing
  • 02:43 What we’re building towards
  • 04:22 How we’re going to do user testing
  • 07:31 Who we’re asking
  • 15:45 Sponsor: Netlify
  • 17:53 Testing at different scopes of the project
  • 22:45 Finding people
  • 24:39 Scripted vs conversations with testers

Sponsor: Netlify

We had a question come in over on ShopTalk Show from a user who wanted to know what the advantage of Netlify was over putting static files in an Amazon S3 bucket with CloudFront in front of it. That was an interesting framing of the question because at first glance, because maybe in looking at the final site, it’s not that different. But how do you deploy it? How do you do cache-breaking? How does version control fit into the story? What handles your forms? How much does it cost? The Netlify answer to all those is very satisfying, and the roll-your-own answer to all those is: 😬.

The post #308: User Testing appeared first on CodePen Blog.

Smartsheet Review

If you’re looking for a unique way to handle project management in your company, then Smartsheet may be for you. While other project management apps are somewhat similar and sometimes can only be differentiated by a few different feature add-ons, Smartsheet is something completely different. It is so different, in fact, that it technically isn’t a project management app, but rather a work management platform.

Smartsheet is a platform loved by many–over 80,000 brands use it for both project management and work management. The spreadsheet look of the program is familiar to those of us who have years of Microsoft Excel experience, and many people find comfort in the appearance. But don’t be fooled by the way it looks. Smartsheet allows you to do so much more than Excel. It has a wide range of project management tools including:

  • Document management
  • Project reporting
  • File sharing
  • Task management
  • Timeline tracking
  • And more

The versatility of Smartsheet sets it apart from other project management apps, as it is can be used for such a wide variety of things within a company.

Smartsheet Pros and Cons

Pros

  • Versatile
  • Highly customizable
  • Great template options
  • Allows for automated workflows across spreadsheets
  • Scalable

Cons

  • Doesn’t update in real-time
  • Must manually choose how often it autosaves
  • Steep learning curve
  • More expensive than competitors
Compare The Best Project Management Software
We reviewed dozens of project management software tools and narrowed them down to the best options.
See Top Picks

How Smartsheet Compares to Top Project Management Software Options

Smartsheet is technically considered a project management app, but in reality, it is much more than that. Smartsheet calls itself an “enterprise platform” that helps drive work and innovation in your company.

So while it did not make our list of top project management software, it can be said that it did not simply because it is hard to categorize it as just a project management tool.

Other apps on our list focus their attention on project management and do a great job of it. The top pick for us is Zoho Projects. This cloud-based project management software helps to plan projects, assign work, manage resources, collaborate with your team, and much more.

Regardless of what your project is, Zoho Projects has the tools to help you successfully see it from start to finish.

The interface is one of the reasons it landed the top spot on our list, and once you see the demo, you will understand why. It is simple, straight-forward, and easy to navigate. No one wants to waste their time trying to figure out another app. The purpose of adding a project management platform to your company is to simplify things, and Zoho Projects will do just that.

Another thing that we love about Zoho Projects is that you can easily track hours, whether they’re billable or non-billable. This is ideal for companies trying to ensure that teams are working at high levels of efficiency, and also ideal when you’re billing clients for time spent on their projects.

Wrike is another app that made it on our top list, in the #2 spot. This project management solution is used by over 20,000 businesses, including large ones like Verizon and Airbnb. Marketing and creative teams will love using this software, as it has tools specific to campaign management where teams can track progress, collaborate, and check out the results of campaigns.

Wrike also offers great templates that cut down on time spent trying to organize project management. Whether you’re using the templates or starting from scratch, Wrike is highly customizable and provides a bunch of great add-on features that your company can stand to benefit from. These include things such as Wrike Integrate that allows you to integrate other tools you use, as well as Wrike Analyze that shows real-time insights into progress and performance.

If you are looking for a more traditional project management app, then Zoho Projects and Wrike and great options. But if you are looking for an all-encompassing management software tool, then Smartsheet is for you.

Smartsheet Project Management Capabilities

The most important thing to think about when deciding which project management software is best for you is what you’ll be using it for.

Are you looking to track time? Project progress? Ideas? Or much more than that? If you’re looking for something more simple that doesn’t require a lot of features, then Trello is a great choice. This is perfect for smaller projects and smaller teams.

However, if you are looking for more advanced management, and maybe even management that goes beyond projects and into big-picture company management, then Smartsheet is the best choice for you. It combines interactive spreadsheets with basic project management tools and also throws in templates, web forms, and the ability to automate.

The advanced features in Smartsheet make it the best choice for those looking to streamline a lot of processes in their company and get the most out of the project management, from start to finish.

Smartsheet Team Size

Another thing to consider when choosing which project management app is best for your company is the size of the team that needs access to it. Do you have only one small team that focuses on seeing projects through? Or do you have projects that require management across several different teams?

Some project management apps are best for small teams, like Trello.

This more simple approach to project management does not complicate what doesn’t need to be complicated and keeps things basic for smaller teams to easily manage. However, if you have a bigger team that necessitates lots of organization and you aren’t able to keep things simple, then Celoxis may be the right fit. This software is geared specifically towards enterprises and large corporations with complex projects.

As for Smartsheet, it is a great option whether you have a small or a large company. The features benefit any size of company and help to increase productivity for all team members, whether it’s 5 or 5,000. The flexibility of Smartsheet allows you to use it differently depending on your team size, which is why it’s a great option for all-sized companies looking for enterprise software that will simplify things in your company.

Smartsheet Ease of Use

If you want your team to learn and utilize a project management app, you want it to be something they can easily use. For something simple and easy, TeamGantt is a great option.

This software is ideal for beginners who are just starting out on using Gantt charts for project management. These charts are over 100 years old and have completely changed the way that projects are managed. TeamGantt is perfect for learning this but does limit you when it comes to additional features.

If you are looking for something with more features, then Smartsheet is what you want. However, those additional features do come with a bigger learning curve. That is one of the struggles that people have with Smartsheet–it is not easy to learn. Once you have the hang of it, it works great, but it does take some time and patience to get to that point.

To get to a place of comfort in using Smartsheet, we suggest fully utilizing their YouTube channel. This provides some great how-tos and other videos that will help you and your team learn this software without having to trial-and-error your way through everything.

Since everything in the app is built on spreadsheets, your team should feel confident going into using the app. Most people have had experience with spreadsheets and the layout of Smartsheet does provide a level of comfort and familiarity that your team will enjoy. It makes the steep learning curve a bit easier.

Smartsheet Features

When it comes to features, Smartsheet has no shortage of them. This software provides option after option for companies to use and make their workflow better. Here are some of the top features.

Reporting. Smartsheet gives you access to reports that let you know where projects are in the timeline — which ones are due soon, which ones are past due, which ones need to be assigned, which ones are completed, and more. You can even set up Smartsheet to automatically create and send out reports regularly. For example, you can opt to have the progress report sent to you every Monday morning so you know what teams to reach out to regarding the project. The reports can quickly and easily be accessed to save time and increase productivity.

Alerts. When working on a project, especially one that involves a few different teams, deadlines are crucial. Team B can’t do their work until Team A has finished theirs, and you don’t want to have any team sitting around and waiting for others to get their work done. That’s where the alerts feature of Smartsheet comes in strong. You can automate alerts for approaching deadlines and tasks that are nearing that go out to relevant team members. You can also set it up to get notifications when parts of the project have been completed. This is key in holding everyone accountable for their work, increasing productivity, and streamlining the workflow.

Collaborating. Smartsheet keeps all project information, notes, and files in one place so that collaboration becomes a smooth and easy process. All the information for a project can be accessed from any web browser or device.

On-the-go. Whether you’re on your desktop at home or on your smartphone across the world, you can access all of Smartsheet — as long as you have an internet signal. This means that approvals can happen on the go, as well as the viewing of files, attachments, and more.

Automations. Within the spreadsheets, Smarsheets provides automation options that can help the process. For example, “when X occurs, do Y.” This could be a reminder to follow up with a client or it could be something more complex like assigning tasks from a web form.

Proofing. Smartsheet allows for proofing in a way that will clarify exactly what is needed. You can upload a file that needs to be discussed, and any necessary parties can make comments on the file using a variety of markup tools.

Smartsheet Pricing

Smartsheet has a few different plans that depend on your company’s needs.

There are 2 plans in the Standard option, which is best for small businesses.

The Individual plan is $19/user/month when billed monthly, or $168/user/year when billed annually. This plan includes some of Smartsheet’s great features but does not include key ones such as tracking progress and managing users.

The Business plan is $32/user/month when billed monthly, or $300/user/year when billed annually. This plan offers everything the Individual plan, but also the Activity Log feature, the ability to customize dashboards, the ability to report, and the ability to manage groups. Please note that the Business plan requires purchasing a minimum of three licenses.

Then, there are two Enterprise-level plans: the Enterprise and the Premier. The cost for these is not listed on the website and requires a call to the company for a quote. These plans are meant for large companies that need much more administrator and security controls than smaller ones.

There is no free plan with Smartsheet, but you can get a free trial with a business email address. The trial is quite limited, however, and doesn’t allow you to publish any Smartsheet forms, though it does let you get comfortable with them to see if you like how they work.

Smartsheet 10,000ft

If you’re looking for a premium resource and portfolio management system, 10,000ft is something to try. This product helps teams make a variety of decisions including project planning, team capacity, budget forecasting, hiring needs, and more — all in real-time. This software gives you a big-picture idea of project management by allowing you to look across projects and track multiple teams at once. By doing so, you can see the effect any changes to the business plan make on the rest of the teams and the process. Also, it helps you to learn from mistakes made in past projects and more clearly set things up for the future.

10,000ft also provides great software that simplifies time tracking. This means your team has to spend less time worrying about tracking their time and more time focusing on the actual project. And when it comes to planning projects, 10,000ft helps you clearly visualize scheduling and managing so that no matter where you are, you can see where your team is at.

Smartsheet Brandfolder

This digital asset management software allows marketers and creatives to do their work better and more efficiently. What sounds like a glorified storage space for digital assets is far more than that. With Brandfolder, you can organize, distribute, and analyze all digital assets in one location.

Rather than waste time trying to track down assets, Brandfolder makes it easy to access everything in one place. This place also allows you to share and distribute assets with colleagues. You can do this by granting people access via embedded APIs on a website, a saved search, or shared links.

Another feature of Brandfolder that you will love is its ability to generate custom reports that will help the productivity of your marketing and creative teams. On top of that, you can use this platform to spot upcoming trends in branding.

Compare The Best Project Management Software
We reviewed dozens of project management software tools and narrowed them down to the best options.
See Top Picks

Summary

When you are looking at the bigger scale of project management, Smartsheet provides more than most companies need. However, for some, it provides the right amount. If you are someone looking for a more simple project management solution, then Smartsheet is not for you. However, if you are looking for more in-depth, detailed management of not only projects but also general work, then Smartsheet is a great option. It helps put many processes involved in project management all in one place so that your team can easily and quickly access what they need. Smartsheet, once learned, will help your team streamline project processes and will help to build overall greater success in projects now, and for the future.

PHP Delete Data From MySQL Table

I have a page that list all of the users from mysql database. I put a delete button in it so you can delete the profile instantly. But I didn't want to delete the user instantly so I put a code that create a modal box when you click onto the delete button. My problem is when I click onto the first user's delete button, or any other users button its only delete the last user's data and I don't know why. Without the modal box the delete function works fine. Any idea whats the problem?

Here's the code:

<?php
include "dbConn.php";
   session_start();
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
    header('Location: /admin/index.php');
    exit;
}
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
    exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
    $stmt = $con->prepare('SELECT password, email, timestamp FROM accounts WHERE id = ?');
    $stmt->bind_param('i', $_SESSION['id']);
$stmt->execute();
$stmt->bind_result($password, $email, $timestamp);
$stmt->fetch();
$stmt->close();
?>
<?php
    if ($_SESSION['name'] != 'root') {
        echo '<script>';
        echo 'window.location.href="/admin/403.php?from=provisions=denied"';
        echo '</script>';
    }
?>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/admin/includes/header.php'); ?>

            <section class="prfileMenu tabcontent" id="Profiles">
                <div class="profile_header">
                    <span class="page_title">Provisions</span>
                    <hr class="page_title_hr">                        
                        <?php
                            include "dbConn.php"; // Using database connection file here
                            $records = mysqli_query($db,"select * from accounts"); // fetch data from database
                            while($data = mysqli_fetch_array($records)) {}

                            $conn = mysqli_connect("localhost", "root", "", "phplogin");
                            if ($conn-> connect_error) {
                                die("Connection failed:". $conn-> connect_error);
                            }
                            $ssql = "SELECT * FROM accounts";
                            $result =  $conn-> query($ssql);

                            if ($result-> num_rows > 0) {
                                while ($roww = $result-> fetch_assoc()) {
                                    $id = $roww['id'];
                                    echo "
                                    <div class='profile-container-wrapper'>
                                        <div class='prof-datas-title'>".$roww["username"]."</div>
                                            <div class='profile-datas-container provision-table'>
                                                <table>
                                                    <tr>
                                                        <td>User ID:</td>
                                                        <td>". $roww["id"] ."</td>
                                                        <td>
                                                            <a class='prov-delete-prof' id='btn".$roww['id']."' onclick='pop();' title='Delete ".$roww['username']."'>Delete</a>
                                                            <a class='edit-data' href='edit-datas.php?id=".$roww['id']."'>Edit</a>    
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Username:</td>
                                                        <td>". $roww["username"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Real Name:</td>
                                                        <td>". $roww["realname"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Email:</td>
                                                        <td>". $roww["email"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Second Email:</td>
                                                        <td>". $roww["second_email"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Password:</td>
                                                        <td id='provision-pass'>". $roww["password"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Member since:</td>
                                                        <td>". $roww["timestamp"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Sex:</td>
                                                        <td>". $roww["sex"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Age:</td>
                                                        <td>". $roww["age"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Country:</td>
                                                        <td>". $roww["country"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>City:</td>
                                                        <td>". $roww["city"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2FA:</td>
                                                        <td>Disabled</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Activation code:</td>
                                                        <td>". $roww["activation_code"] ."</td>
                                                        <td></td>
                                                    </tr>
                                                </table>
                                            </div>
                                    </div>
                                    <div class='delete-modal' id='box".$roww['id']."'>
                                    <img src='/assets/images/svg/rf-alert.svg' width='128px'>
                                    <h1>Attention!</h1>
                                    <p>You are going to delete this user permanently.</p>
                                    <a class='close' id='dlt".$roww['id']."' href='delete.php?id=".$roww['id']."' title='".$roww['id']."'>Delete</a>
                                    <a class='close' onclick='pop()'>Cancel</a>
                                    </div>
                                    <script>                                        
                                        var modal = null
                                        function pop() {
                                            if(modal === null) {
                                                document.getElementById('box".$roww['id']."').style.display = 'block';
                                                modal = true
                                            } else {
                                                document.getElementById('box".$roww['id']."').style.display = 'none';
                                                modal = null
                                            }
                                        }
                                    </script>
                                    ";
                                }
                            } else {
                                echo "0 result";
                            }

                            $conn-> close();
                        ?>
            </section>
        </main>
<script src="/admin/includes/assets/js/status.js"></script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/admin/includes/footer.php'); ?>

Creating Custom Form Controls with ElementInternals

Ever since the dawn of time, humanity has dreamed of having more control over form elements. OK, I might be overselling it a tiny bit, but creating or customizing form components has been a holy grail of front-end web development for years.

One of the lesser-heralded, but most powerful features of custom elements (e.g. <my-custom-element>) has quietly made its way into Google Chrome as of version 77 and is working its way into other browsers. The ElementInternals standard is a very exciting set of features with a very unassuming name. Among the features internals adds are the ability to participate in forms and an API around accessibility controls.

In this article, we’re going to look at how to create a custom form control, integrate constraint validation, introduce the basics of internal accessibility and see a way to combine these features to create a highly-portable macro form control.

Let’s start by creating a very simple custom element that matches our design system. Our element will hold all of its styles within the shadow DOM and ensure some basic accessibility. We’ll use the wonderful LitElement library from the Polymer team at Google for our code examples and, although you definitely don’t need it, it does provide a great abstraction for writing custom elements.

In this Pen, we’ve created a <rad-input> that has some basic design to it. We have also added a second input to our form that is a vanilla HTML input, and added a default value (so you can simply press submit and see it work).

When we click our submit button a few things happen. First, the submit event’s preventDefault method is called, in this case, to ensure our page doesn’t reload. After this, we create a FormData object which gives us access to information about our form which we use to construct a JSON string and append it to an <output> element. Notice, however, that the only value added to our output is from the element with name="lame".

That’s because our element doesn’t know how to interact with the form just yet, so let’s set up our <rad-input> with an ElementInternals instance to help it live up to its name. To start, we’ll need to call our method’s attachInternals method in the element’s constructor, we’ll also be importing an ElementInternals polyfill into our page to work with browsers that don’t support the spec yet.

The attachInternals method returns a new element internals instance which contains some new APIs we can use in our method. In order to let our element take advantage of these APIs, we need to add a static formAssociated getter that returns true.

class RadInput extends LitElement {
  static get formAssociated() {
    return true;
  }

  constructor() {
    super();
    this.internals();
  }
}

Let’s take a look at some of the APIs in our element’s internals property:

  • setFormValue(value: string|FormData|File, state?: any): void — This method will set the element’s value on its parent form if one is present. If the value is null, the element will not participate in the form submission process.
  • form — A reference to our element’s parent form, if one exists.
  • setValidity(flags: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void — The setValidity method will help control our element’s validity state within the form. If the form is invalid, a validation message must be present.
  • willValidate — Will be true if the element will be evaluated when the form is submitted.
  • validity — A validity object that matches the APIs and semantics attached to HTMLInputElement.prototype.validity.
  • validationMessage — If the control has been set as invalid with setValidity, this is the message that was passed in describing the error.
  • checkValidity — Will return true if the element is valid, otherwise this will return false and fire an invalid event on the element.
  • reportValidity — Does the same as checkValidity, and will report problems to the user if the event isn’t cancelled.
  • labels — A list of elements that label this element using the label[for] attribute.
  • A number of other controls used to set aria information on the element.

Setting a custom element’s value

Let’s modify our <rad-input> to take advantage of some of these APIs:

Here we’ve modified the element’s _onInput method to include a call to this.internals.setFormValue. This tells the form our element wants to register a value with the form under its given name (which is set as an attribute in our HTML). We’ve also added a firstUpdated method (loosely analogous with connectedCallback when not using LitElement) which sets the element’s value to an empty string whenever the element is done rendering. This is to make sure our element always has a value with the form (and though it is not necessary, you may want to exclude your element from the form by passing in a null value).

Now when we add a value to our input and submit the form, we will see that we have a radInput value in our <output> element. We can also see our element has been added to the HTMLFormElement’s radInput property. One thing you might have noticed, however, is that despite the fact that despite the fact that our element doesn’t have a value, it will still allow the form submission to take place. Let’s add some validation to our element next.

Adding constraint validation

In order to set our field’s validation, we need to modify our element a little bit to make use of the setValidity method on our element internals object. This method will take in three arguments (the second one is only required if the element is invalid, the third is always optional). The first argument is a partial ValidityState object. If any flag is set to true the control will be marked as invalid. If one of the built-in validity keys doesn’t meet your needs, there is a catch-all customError key that should work. Lastly, if the control is valid, we pass in an object literal ({}) to reset the control’s validity.

The second argument here is the control’s validity message. This argument is required if the control is invalid, and not allowed if the control is valid. The third argument is an optional validation target that will control the user’s focus if and when the form is submitted as invalid or reportValidity is called.

We’re going to introduce a new method to our <rad-input> that will take care of this logic for us:

_manageRequired() {
  const { value } = this;
  const input = this.shadowRoot.querySelector('input');
  if (value === '' && this.required) {
    this.internals.setValidity({
      valueMissing: true
    }, 'This field is required', input);
  } else {
    this.internals.setValidity({});
  }
}

This function gets the control’s value and input. If the value is equal to an empty string and the element is marked as required, we’ll call the internals.setValidity and toggle the control’s validity. Now we all we need to do is call this method in our firstUpdated and _onInput methods and we’ll have added some basic validation to our element.

Clicking the submit button before a value is entered into our <rad-input> will now display an error message in browsers that support the ElementInternals spec. Unfortunately, displaying validation errors is still not supported by the polyfill as there isn’t any reliable way to trigger the built-in validation popup in non-supporting browsers.

We’ve also added some basic accessibility information to our example by using our internals object. We’ve added an additional property to our element, _required, which will serve as a proxy for this.required and as a getter/setter for required.

get required() {
  return this._required;
}

set required(isRequired) {
  this._required = isRequired;
  this.internals.ariaRequired = isRequired;
}

By passing the required property to internals.ariaRequired, we are alerting screen readers that our element is currently expecting a value. In the polyfill, this is done by adding an aria-required attribute; however, in supporting browsers, the attribute won’t be added to the element because that property is inherent to the element.

Creating a micro-form

Now that we have a working input that meets our design system, we might want to begin composing our elements into patterns that we can reuse throughout several applications. One of the most compelling features for ElementInternals is that the setFormValue method can take not only string and file data, but also FormData objects. So let’s say we want to create a common address form that might be used in multiple organizations, we can do that easily with our newly-created elements.

In this example, we have a form created inside our element’s shadow root where we have composed four <rad-input> elements to make an address form. Instead of calling setFormValue with a string, this time we’ve chosen to pass along the entire value of our form. As a result, our element passes along the values of each individual element inside its child form to the outer form.


Adding constraint validation to this form would be a fairly straightforward process, as would providing additional styles, behaviors and slotting in content. Using these newer APIs finally allows developers to unlock a ton of potential inside custom elements and finally gives us free-range on controlling our user experiences.


The post Creating Custom Form Controls with ElementInternals appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

#1 – Josepha Haden Chomphosy on the Past, Present, and Future of WordPress

About this episode.

The podcast today features Josepha Haden Chomphosy.

Josepha is the Executive Director of the WordPress project, and as such, she has been at the forefront of WordPress’ evolution for many years. For the last six years, Josepha has worked full time on the project, and has been the release lead, as well as being involved with community events.

Many of the WordPress updates that you’ve seen recently have been under her stewardship, and she’s heavily involved in the project’s roadmap, and so talking with her about the past, present and future of WordPress seemed like the perfect topic.

Briefly, the points discussed are:

  • Josepha’s discovery of WordPress and its community;
  • how she considers that community in the many decisions she needs to make to push the project forward;
  • who can be involved and how one can join in;
  • the release of Gutenberg and how the turbulence of its introduction into WordPress core led her to rethink how the community is involved in such releases;
  • the concern that contributors are sometimes working in ways that are not sustainable;
  • how Josepha wants to ensure that contributors have the tools that they need to do their work; and
  • how she wants to leverage LearnWP to make it easier for WordPress’ growing audience to make the most of the software.

If any of the points raised here resonate with you, please leave a comment below.

If you have any thoughts on what we should include in future episodes of the podcast, please go to the podcast contact form and tell us what you think.

Mentioned in this episode.

Transcript

Nathan Wrigley: [00:00:00] Welcome to the first edition of the WP Tavern podcast, which we’re calling Jukebox. My name is Nathan Wrigley and as this is the first ever episode of the podcast, I’m going to spend a few moments, setting your expectations. Our aim here is to create a podcast and transcript for people who are interested in WordPress and the WordPress community.
As a starting point, we’re going to produce one episode each month, but that may change down the road. We’re not bound to any particular subject, so it might be an interview with a core contributor one time and an organizer of WordCamps the next. A panel discussion about a broad subject, such as the future of WordPress or an episode about a very specific topic.
As I say, we’re not bound to anything except that it’s going to have WordPress at its heart.
With that in mind, it would be great to receive suggestions from you, the audience. I’d like to hear from you directly about what you’d like the podcast to feature. That may be a topic that you’re curious about, a person that you’d like to hear from or anything else that comes to mind.
You can do that by going to wptavern.com forward slash contact forward slash Jukebox. And there you’ll find a form to complete. Once again, that URL, wptavern.com forward slash contact forward slash Jukebox, and thanks in advance to anyone who reaches out.
Okay. So the podcast today features Josepha Haden Chomphosy. Josepha is the executive director of the WordPress project. And as such, she has been at the forefront of WordPress’ evolution for many years. For the last six years, Josepha has worked full time on the project and has been the release lead as well as being involved with community events.
Many of the WordPress updates that you’ve seen recently have been under her stewardship, and she’s heavily involved in the project’s roadmap, and so talking with her about the past present and future of WordPress seemed like the perfect topic. We talk about her discovery of WordPress and its community and how she considers that community in her decisions. Who can be involved and how. We also get into the subject of Gutenberg and how the turbulence of its introduction into WordPress core led her to rethink how the community is involved in such releases. Towards the end, we discuss how, in the future, Josepha wants to ensure that contributors have the tools that they need to do their work and how she wants to leverage LearnWP to make it easier for WordPress’ growing audience to make the most of the software. If any of the points raised here resonate with you be sure to head over and find the post at wptavern.com forward slash podcast, and leave a comment there. And so without further delay, I bring you Josepha Haden Chomphosy.
I am here with Josepha Haden Chomphosy. Josepha, welcome to the podcast.
Josepha Haden Chomphosy: [00:03:42] Thanks for having me, Nathan.
Nathan Wrigley: [00:03:43] You’re very welcome. Now it strikes me, it is possible that there are some people out there in the WordPress community who don’t actually know who you are and what your role is. So the first question is exactly that. Could you tell us a little bit about yourself and what your role is in WordPress?
Josepha Haden Chomphosy: [00:04:00] Yeah. Well, my name, as you mentioned is Josepha Haden Chomphosy, and I am the executive director of the WordPress project. And, I help to make sure that whatever the vision is of the technology and the community and the ecosystem around it has everything that it needs to succeed, and so I look after the people who are here contributing, and I look after the tools that they need in order to contribute, and of course, look after all of our products, our events in person and online, as well as our CMS and all of the kind of design and stuff that goes into it.
Nathan Wrigley: [00:04:33] So quite a lot. Yeah, quite a lot. About that, what do you find yourself doing on a day-to-day basis other than coming on podcast episodes like this? What typically would you find yourself doing in a normal week?
Josepha Haden Chomphosy: [00:04:45] Yeah. In a normal week, I probably have about 50% of my time is taken up with meetings either in voice or video or on Slack, and a huge amount of my time is helping to make decisions from like the medium to large scale of things. And so, yeah, it’s a lot of talking to people, making sure that I know what they need, making sure that I know how to get them what they need once we get there. And yeah, it’s mostly, I guess, mostly my job is talking, planning and solving problems, which frankly sounds like a fun job to me. I realize not everyone.
Nathan Wrigley: [00:05:24] No, that sounds good to me. Did you start with WordPress a very long time ago? Is this something you’ve been doing for a really long time? In other words, what’s your path? How did you get to where you are now from where you first made contact with a CMS called WordPress?
Josepha Haden Chomphosy: [00:05:37] Yeah, I think at this point I’m technically considered a WordPress veteran, but I actually have not been in the project for as long as some people have. I first discovered, learned the word WordPress in 2009. My mom actually introduced me to the CMS. In 2010, I started, my local community with a couple of other folks in Kansas City, and then it kind of all grew from there. I actually have been, I just recently passed my six year anniversary with being a full time sponsored contributor through Automattic. So yeah, I think that makes me technically a veteran of WordPress. Matt and I were talking about that during WordCamp India this past weekend.
Nathan Wrigley: [00:06:20] You obviously liked the sort of the FOSS model that we’ve got in the WordPress community. I don’t know if you have a history of working in industry or something like that. Is this the kind of community, the kind of decision-making process that speaks to you where there’s an open way of doing things, which can be different to a more top down approach in business.
Josepha Haden Chomphosy: [00:06:39] Yeah. I came into WordPress and into leadership probably from a pretty unusual path. And so there’s that to start with. I’m not a natural born leader. I spent a lot of time learning how to do it. And as I was learning all about how to lead the way that made the most sense to me from the start was leading from within and leading from whatever seat you happen to occupy in your group at the time. And so it’s a lot of this concept of servant leadership and a lot leading groups as they exist as their own organism, as opposed to top down, just like trying to manage them. I really love group dynamics and leading mass groups of people. It is a particular passion of mine. And there are times when you do have to just say, I’m sorry, everyone, I know that this doesn’t make us happy, but we’ve got to do this because we must do this for the health of our organization or whatever it is, you know, like mask mandates to be terribly topical.
In my experience of working with nonprofits and volunteering during the course of my life. There was no other leadership style that really was as sustainable and resilient and brought people into the organization as much as this kind of style of leadership that I have now. And it happens to fit really, really well in open source and for the most part also fits really, really well in WordPress. So I guess I kind of just got lucky.
Nathan Wrigley: [00:08:13] Yeah, it’s a really nice community to be in. And it occurs to me that many people that interact with WordPress will, well, I say many people, I don’t know what the figures would be, but they would go and download the software let’s say from wordpress.org and upload it to their server, and they’re good to go. That’s their relationship with WordPress. They’re happy with that. They use it. New features come out and they’re delighted. It’s great. New features come out and they’re kind of concerned and that’s great. How do things actually get done though? How is the project moving forward? I suppose it boils down to who makes the decisions, but also what is the consultation approach? How does the consultation occur to iterate the project forward? Because I suspect there will be many people listening to this who will have, no conception of how that’s done or how the software got to where it is today, as opposed to two years ago.
Josepha Haden Chomphosy: [00:09:01] Yeah. I’m going to answer that question in two parts. The first part I’m going to take is how are these decisions generally made? And that part comes with a big caveat of… in a perfect situation, this is how this will occur. And then the second thing that I want to address in there is the question of how it probably should happen, especially for open source at scale as WordPress is.
So to answer the first part. The way that I always want it to work. And the way that when things are optimally occurring, these decisions should be made. A good idea can come from anywhere. And so anytime that a contributor brings a good idea to their team rep or to me, or to a trusted fellow contributor, and they want to get an idea of whether it would succeed or not. There is historically this idea of feature proposals, which we do in some of our teams right now, but not in all of our teams where that idea gets a review from the full community, or however many people are showing up on the blog at the moment. And after they’ve had a bit of a conversation figured out the rough parts figured out what the solution, what the problem is they’re trying to solve what the users most beneficial way forward would be, once they figure all those things out, then they bring it to in a lot of cases, Matt, in a lot of cases, me, and then we figure out based on feedback from team reps and committers and major maintainers and contributors, what are the things that we need to know about these proposals to make sure that we get the right decision in place. That is how it should work if everything’s optimal right now, there are a lot of places where people don’t feel like they are able to raise their voice for questions. There are a lot of places where there is not enough support either from the volunteers who are showing up or just from the concept of the overall roadmap, where the people aren’t there to help make the, make it past that first hurdle of, someone help me figure out if this is a good idea. For the 40% of the web that we’re supporting. And so that’s how it should work optimally. It doesn’t always work perfectly well. In cases where anyone gets a proposal or a suggestion that is, has not been discussed in their community, and hasn’t been discussed in the project and we have to kind of figure out ad hoc, what is the right way forward here?
I actually do have a number of the people that I personally speak to, to get advice on the best way forward. I’ve got some technical people who’ve been in the project for ages that I look to for advice. I reach out to some of the industry partners. I hesitate to call WordPress an industry. For some reason. The WordPress ecosystem sustaining partners, we have folks like the people over at SiteGround or Yoast or depending on who I need to talk to any other sort of company that fits in with the questions that I have, and then a bunch of our long-term community maintainers, people like Andrea Middleton or folks like that who can make sure that I understand what all of our benefits are, what all of our risks are, what all the hurdles are like. It’s been a long time since one person could do all of this work, reliably alone. And so I make a strong use of a bunch of really dedicated contributors, I would say people who are really looking out for the community and I reach out to them quite frequently.
As far as how it should go in the future, I do think that most of the lessons in the cathedral and the Bazaar, which is kind of the canonical source of how to do open source were written for much smaller projects than we are. And so I think that, there’s a feeling right now in the community of there is this cathedral and it’s not the community, the community is the Bazaar.
And on the one hand, I think that is true. Like the community itself does represent this beautiful chaotic kind of crackling energy sort of thing that we have. But I actually think our community, as small as it is compared to the number of users that WordPress has is actually that central part of what makes WordPress successful and functional. And the bizarre is actually all of those users that we don’t have any access to. Access to… that sounds really weird. We don’t have any way to talk to predictably right now. And so I think that we are due for a change in our mindsets around that it is, a one percenter thing to be able to contribute to an open source project. And we should not be forgetting that we are building this on behalf of a huge portion of the population,
Nathan Wrigley: [00:13:54] One of the things which seems to crop up from time to time is exactly what you’ve just mentioned. That the user base is enormous, but the community of people who are actually building it is obviously much smaller. And whether there’s a disconnect, in some instances between what the, as you described, the 1% might feel is required, and the Bazaar, if you’d like what they feel is required. And I really, struggle to understand how on earth one would communicate between those two different sides of the coin. If you liked it, we really want you to understand that this is what we’re proposing, this is what we feel is the future for WordPress, but how do we join those two streams together? Over here, the cathedral over here, the bazaar, and I just don’t even know how to square that circle and imagine that’s an enormous challenge.
Josepha Haden Chomphosy: [00:14:42] Yeah, it is. So, reconciling the question of building for all of our users versus building for all of our developers or for all of our, what I call our extender community. It’s a really hard task. Every feature that gets put into WordPress, whether it’s the CMS or how we manage a team or how we put our tools together. Every single feature decision that’s made is made with the best knowledge that anybody has at that moment for one, and for two, the closer and closer you get into the really heart of the work being done on the project, the more and more that you are trying to make decisions for all of core and all of the active contributors and all of the theme authors and plugin authors and all of the users of WordPress and all of their visitors to their websites. That is a huge burden. You have to think about so many groups and the community reminds me personally of this a lot. Like it comes up frequently that, we, I’m told, don’t know who our audience is and on the one hand that’s right, we don’t literally know every single type of visitor that we have here. And every single type of thing that people are building using WordPress. And on the one hand, like that’s the beauty of it is that we don’t have to know who you are to want to give you the freedoms of open-source. And on the other hand, it does really bring up a lot of, for a lot of people, some ethical questions of, should we be making decisions on behalf of other people. But I honestly, Helen said it in a core chat a few months ago, when you are making software, you’re always making decisions on behalf of other people.
Even if you do know exactly who you’re talking to. And so it’s not necessarily possible to talk to all of our audiences at the same time and it’s definitely not possible to make all of our audiences, all of our users happy in one go, but the blizzard community pretty famously many, many years ago said we serve a majority group of minority voices and we will always make someone mad and we just want to not always make the same people mad because then we’re making blind choices or at least biased choices. I think about that often.
Nathan Wrigley: [00:17:12] So when decisions are made which the community, maybe 50% of them are going in one direction and 50% think actually this doesn’t seem like the right direction. Good example may be when 5.0 came along and Gutenberg, I should say Gutenberg because that’s probably more correct, was put into core that obviously there was a real bifurcation of where the community was going at that point to some extent. How do you cope with that kind of thing? How do you tackle when people are disgruntled, when people are bringing things to you where they’re dissatisfied or they believe they’ve somehow been ignored? Is it a question of saying to them, look, you just need to be involved. If you’re involved, then we know what you’re saying. How do you deal with it?
Josepha Haden Chomphosy: [00:17:51] Yeah. Well, I first have to say that I think that communities that are comfortable dissenting, are really healthy. When we see groups of people, when we see communities where people are all constantly, always agreeing and always in the same direction, it looks great on the outside, but from the standpoint of a maintainer of that community, cause I’m a maintainer of the WordPress community itself. That is a really unhealthy organization when I wasn’t hearing anything from anyone except for when they were, shouting at each other on Twitter, that was a sign of real organizational unhealth in my mind. So I think that healthy organizations are ones that are comfortable enough to say I do have worries about this. Cause if we don’t know where the worries are, we don’t know how to make solutions to avoid the worries. But I never did say to anyone and I don’t feel like the answer was well, if you’re upset about it, you should get in here.
I don’t think that’s a fair response, especially because like I said earlier, contributing to open source is a really, really privileged thing to do. You got to have a lot of extra time to do that. And, time is money in a lot of cases. And so I never did say that. I actually, 5.0 merge was really, really hard, that whole process and not a lot of people believed in the way forward on it. And they were raising the concerns, but this was the vision that had been set out. And so what I did was not to say, well, if you’re mad show up and do some work on things, what I did was say, Hey, I know you’re mad and I’m going to come and let you tell me how mad you are. And I actually did a six month listening tour. To hear what everyone was the angriest about. And it led up to a very lengthy 5.0 slash block editor merge retrospective post, where I had spoken to basically all of the committers, basically everyone who was writing code to create Gutenberg, everyone who was writing the core code to make sure that it was ready and a bunch of our agencies in the ecosystem, a bunch of our theme authors and plugin authors. I spoke to a ton of people over those six months just to see what they were the angriest about. And we’ve been since then making changes to fix it. It is fair that they were worried and it’s fair that they had something to say about that. And I don’t think, I never did think, that the right answer was to say, well, If you’ve got an anger, you got a job. That’s not what they were trying to tell me. You know.
Nathan Wrigley: [00:20:28] It seems that you’re concerned with communicating and making sure that communication out to the community is a part of your role, and although I don’t really want to go into this in great depth. You’ve recently launched a bite-size if you like, a short 10 minute to 12 minute length podcast, every couple of weeks, we’ve got two episodes so far, it’s called WP Briefing. Is that an effort from you to try and get the message out in a different way that people can consume. Bite-sized, often, easy to understand.
Josepha Haden Chomphosy: [00:20:57] Yeah. So something like this, a way for WordPress leadership to communicate more frequently, and with a little bit more ease has been on my list of goals, list of needs that the WordPress project needs since about 2018. I did not think that I was going to be the one to do it. I was hoping that we would get a more technology project sort of person available, but at the end of the day, I was talking through it with Matt, at sometime last year, sometime in 2020 and we both kind of collectively came to the decision that, yeah, it would be nice to have some technology folks. So the way that I hope that we can do open source in WordPress and the way that I hope that we can, that I can lead a group of people while always remembering their humanity and always adhering to my concept of basic ethical practices at scale. Like why wouldn’t I be the person who should show up and say, hey, this is how I think that… we can do this in WordPress. I think it’s a good opportunity for people to hear what goes into WordPress, because it’s really easy to be like WordPress is free and it’s just available by magic, and you don’t know that there are 2000 volunteer contributors that show up every single week to make that happen for 40% of the web. You just don’t know what you don’t know when you’re first getting involved in WordPress. And so like this, I think is a good opportunity to uncover all of the hard work of the community.
Nathan Wrigley: [00:22:37] I agree. I think it’s a great initiative. I’m going to pivot the conversation slightly because we’ve had Gutenberg for several years now and we’ve got a big year ahead. There’s an awful lot going on. If you’ve been following the roadmap, you’ll understand that this year is a really, really major year. So I’m just wondering where we’re at, what is in store for this year and how you feel we’re aligned to deliver on the things that you hope in your aggressive roadmap. What’s the chances of achieving them all?
Josepha Haden Chomphosy: [00:23:05] Yeah, firstly, I do see all of the flags being raised about my aggressive timeline and my incredibly full set of goals for the WordPress project for the year, and there is a lot out there and I know tha. I am fully prepared to say that, at the end of the year, we’re going to look back and we will have missed some of those goals. And that’s going to be fine too, for a lot of things. Now, the one that is really, really raising, some eyebrows is this full site editing merge, and the merge process. Last time, you know, it took us a whole year, and so the idea that we can say at the start of 2021, we’re going to get it in by the summer has been really, really shocking to folks because it cuts that time in half. And on the one hand yeah, it is, it’s really aggressive, but on the other hand, I know absolutely that the community can rise to that challenge. Like we always do. It’s a lovely group of people that really show up to make the best solution for the WordPress users that they can, and I have been really pleased to see all of the work that’s gone into full site editing over the last 12 months already and longer technically, but definitely the last 12 months it’s made huge strides.
So I want to clarify for all of your listeners that like the first primary target date to look out for is that April 2021 date. That’s what I am considering the go, no go date because I will never take something that is super duper broken and users can’t use, and say we’re getting it in to 5.8 because I made a promise to myself. Like I’m not going to ship a broken tool when I can help it. And there is probably, I think if my guess is right, there’s going to be a Gutenberg plugin release on the 17th of April and then the 23rd of April as well. And those will be our two moments when we can say we believe we can do this.
And there’s been a lot of discussion around okay, but what is the MVP that you think is going to get in there? And I have been directing people to these milestones that there’s this ticket that has the milestones for full site editing, and we did clear one of those milestones and are getting it ready for testing right now. And this is an unofficial concept of the MVP, but I do think I’m right about this. The guiding question that I have been asking myself as I am watching full site editing, kind of get pulled together is could I using the blocks available, pull together the major functional parts of a campaign landing page.
That is what I’m using as my guiding light for do I think this is ready or not? And, you know, campaign landing pages, that’s like the smallest sentence of a smallest viable sentence. It is the I am of websites. Right. Like, you’ve got your header and footer. You’ve got your hero image. You probably have a button on the hero or a slider if you’re feeling fancy and then you’ve got text, you need to have a form you need to have a way to have a call to action. It is a functional website on its own. But it is the smallest version of a website. And so the question that I have is can you without code, pull that together? And I don’t know if that is, for instance, like Mathias Ventura. I don’t know if that is the guiding question that he’s asking himself as he’s looking toward what makes an MVP possible, but it’s hard to build software in the open, right? And so like you have to have a big enough goal so that you can display a plausible promise, to the users so that you can say this is what we believe this is going to look like, but not so big that you have gotten so far ahead of them that they don’t feel like they can catch up and finding that really narrow space between far enough that you can tell what it’s supposed to be, but that you don’t feel overwhelmed by how much has changed is really hard to get to. And so that’s why I’m bringing us into some really clear focus around like we’re driving to April so that we can ask ourselves as we go, those really poignant questions of does this get us closer to the MVP? Does this help us solve this problem for our users? Because honestly, full site editing is this intersection of the promise of the technology and the promise of the philosophy. This is where the rubber meets the road on what we’ve been saying about Gutenberg for so long, all of our promise lies in here. And so, it’s important to get the tool right, but it’s also important to get the proper landing area for the first foray of the tool, right.
Nathan Wrigley: [00:27:57] Okay. So I’ll link in the, in the show notes that we put together for this I’d link to your big picture goals, 2021 article, which promoted the debate about the MVP, but I’ll also make sure to link to the site editing milestones GitHub piece as well so that people can figure out exactly what’s going on.
Just turning away from the full site editing thing, as much as I want to keep talking about that. There’s more going on, isn’t there because in the near future, you’re highlighting a couple of other things, the need for LearnWP to become a real resource for people to get up to date, upskill their interactions with WordPress, and also contributor tools, and although we haven’t got a lot of time for those, maybe pick one of those and tell me why you’re so bullish about those.
Josepha Haden Chomphosy: [00:28:38] Gosh, let’s go with Learn. I’m bullish about contributor tools because I desperately want our community to have tools that are easy to use.
Nathan Wrigley: [00:28:45] Okay. That’s good. Yeah.
Josepha Haden Chomphosy: [00:28:48] I’m really excited for the work on Learn for a number of reasons. For one, we are a global project and right now, so much of our training about how to even get your bearings in WordPress before you are able to get to the 101 content that’s out there happens at an event. And in order to get to an event, you have to pay basically three ways. You have to pay with your money in a lot of cases, you have to pay with your time. And for any entrepreneur, you’re also potentially paying with an opportunity cost. All the time that you spend there, not only are you not working, but you’re also not working to fill your funnel. And so finding a way to take that training opportunity and remove as many barriers as possible and make it available online for anyone who needs it, to be able to get to no matter where they are, that is so important to me and so compelling. That’s my big picture, hope there. And right now there are still quite a few barriers to entry. We mostly have English based workshops and tutorials there. And so if any of your listeners are interested in joining that effort, we need a lot of translations. We need a lot of workshops\ in other languages and various things like that. But I really believe that this is a space where WordPress can be really forward facing in owning the fact that we know how to use our tools the best and that our community is the best group of people to tell each other and to tell future community members what can happen and not happen with WordPress, they are the people who know what is needed. They are the subject matter experts of their own business and their own plugins that they needed to do those things. And so getting that opportunity with as few barriers as possible, but, to really be able to say we are a canonical source of good information about how to use this, especially when you don’t know even remotely what you’re doing yet. I think that’s a good step forward for you.
Nathan Wrigley: [00:30:52] Yeah. With any software with just about any product, in fact, in the world, having fantastic documentation that you can understand and consume, and there’s one, as you said, canonical source that you can go to and if it’s not exactly there, you may well pick up another path to finding exactly where it is, and so, I just think that’s such a great thing now that we’re hitting 40% of the internet, this seems like a really valuable project.
With time being limited. I’m going to pivot once more and talk about the longer term, the things that are off in the horizon. And it’s a very broad question because I don’t want to stifle you. What are the things in the longer term, after this year that you’re getting excited about in the WordPress space?
Josepha Haden Chomphosy: [00:31:33] Gosh, you asked me a really big question and I have 20 answers. I’m going to tell you some of the things that I’m super excited about. I am for one super excited about really continuing to remove these barriers to entry for future WordPressers. I define our community as anyone who has interacted with WordPress, whether they know it or not. And at 40% of the web, it is increasingly true that the people in the, don’t know, they interacted with WordPress group is also getting bigger and because the work of all of our contributors, all of our entire community that shows up to help get this done, no matter which team they get it done in, because every time they commit changes to the work and to the greater collective project that they’re working on that change and their name with that change and their work lives in the entire history of that. They add, they take 17 years of learning that came before them add in a new learning based on new information we have today, and then they are forever in the history of what made WordPress successful and getting to a point where our 40% of the web, just websites, and also the people who interact with that 40% have some concept of what goes into that work and this community that is behind it. The more and more that they have a deep understanding of that just like wine appreciation or something, jazz appreciation. The more that you understand that the more that you see the value in what is happening here with open source. Cause you know, open source is a contentious kind of space in the world. If you look at it and how it applies to businesses and how it applies to in some cases, governmental structures and things like that. And I really feel like the more that we dignify the work that goes into this tool, and the more that we can subvert that feeling of WordPress isn’t secure because of whatever reasons, like the more that we can change those narratives, the more that we dignify the professions of all of the WordPress contributors that show up in their very tiny spare time, because they’re giving back to a project that gave them so much in the work that they do today.
I just… this is going to sound really sappy is the honor of my career to be doing this work with WordPressers, and the fact that the general public has a tendency to say Oh, well, WordPress is terrible because it’s by volunteers is just not fair to them and it’s not accurate to what they’re doing either and so I feel like the sooner that we can really shore up this concept of yeah, it is volunteers, but they are all absolutely experts in whatever field they’re in and in their spare time, they give back to something that made them so good. The sooner we can do that for the community as a whole, I think the better just dignifying the profession of being in WordPress.
Nathan Wrigley: [00:34:42] I’m going anchor my reply to that, to an article that you posted recently called making WordPress releases easier. I’ll link to it in the show notes and on some of the points that you drew out in there, marry perfectly to what you’ve just said, because one of the concerns that you were raising in the longer term is the idea of things like this discussion can came up in the context of the release cycle and whether or not we should be trying to go for a specific number four releases per year, or whether there should be some flexibility there, whatever that number may be. But you express concern for things like developer fatigue and the fact that we need to realign the number of core developers that we’ve got and the number of designers, who are helping in the system. So what were you meaning when you were describing your worry about the developers that were currently using exhibiting signs of fatigue and so on?
Josepha Haden Chomphosy: [00:35:30] As with every single time I talk about the deepest parts of my work… have to start by saying like my whole job is identifying our risks and our most weak places and finding ways to make them stronger and finding ways to steer around the risks that we have, and so sometimes what I say sounds super duper dire, but yeah, in general, I think that WordPress is in a really good space right now. It’s in a really good position, especially considering that we are still in the middle of a global pandemic. And so that general context for what I’m about to say, which is going to sound a little dire. We have a number of committers and a number of maintainers that show up to do this work every day. And that is not only for the code, but also for the design work. It’s also for our translations, it’s for folks in the support forums, like all of our 25 teams or something, everyone who shows up to do that work every day. It’s really hard in a global pandemic situation to keep everyone feeling resilient and feeling like everyone around them as a human being and keeping them mindful of the fact that they are also a human being.
Everything is really stressful for the world and for them and for our users and people who are trying to, replace their income by coming up with a WordPress site, using a WooCommerce solution or whatever it is. And it’s… on the one hand true that we would have had a little bit of difficulty with fatigue with our maintainers and committers even before this, but especially right now, especially in the context that we find ourselves in, it’s really hard for people to recharge and all of the work that would have needed to happen in order to get us to four releases this year should have happened in 2020, but we were all really, really focused on pivoting an entire arm of our community into a space that we are not necessarily terribly familiar with online events. It’s just not something that we as a project did a lot of, and so I guess my overall concern is we have two major projects that go at the same time at the same pace and the more and more people use WordPress and Gutenberg, the more and more we have tickets that are opened. And we have roughly the same number of people who can help us to make the decision, write the code create the design, whatever it is, and then review it, test it, commit it. It’s the same general number of people right now as it was in 2019. And it’s getting harder and harder for me to find ways to reliably feel like they’re getting themselves recharged and practicing sustainable self care work.
Nathan Wrigley: [00:38:24] Is this a job of recruiting more people in or trying to, like you have obviously have been doing trying to get more people in the community involved. Is it a bums on seats to use a crude analogy? Is that what’s required?
Josepha Haden Chomphosy: [00:38:37] I think it’s a bit of both. I think it’s a little bit… Get more people in here who can help us do the work, which is hard to do in a normal setting and is also harder to do when we’re not seeing each other in person. I have a whole thing about that. Um, many, many thoughts, but it’s a little bit getting people in here. And also it’s a little bit making it very clear to the people who are using 100% of their spare time. Like they have two hours a week. And so they did a patch and they showed up and they’re like, please take my patch. And if they know that we don’t have it about 110 people reviewing and testing and committing things, we really have 30. It can help to give those 30 committers a little bit more space because people don’t expect that 30 people can manage 300 new tickets every hour or something. Just to kind of uncover the mountain that we’re working with, I guess, to give everybody a little bit more breathing room, I guess that’s it.
Nathan Wrigley: [00:39:42] Well, Josepha, I know that your time is valuable and I know that I’ve consumed probably already more of it than was allowed. So just I’d just like, say thank you. I know that you have an awful lot sitting on your shoulders, certainly from my part greatest appreciation. Thanks for all the work that you do and thank you for coming on the podcast and talking to me today.
Josepha Haden Chomphosy: [00:39:59] Thanks for having me. I thought this was really fun.

Distributed Letters Animation Layout

A while back I stumbled upon this great Dribbble shot by Seth Eckert. I love that letter effect and so I was thinking about a layout where I could incorporate this kind of animation.

After playing around a bit, I thought that a layout that allows for opening a panel would be interesting. So here it is; a little layout with a distributed letter animation on hover. When clicking, the letters will move to their respective place in the panel and the other elements will animate in.

I really hope you like this and that it comes in handy.

Thank you for checking by!

The post Distributed Letters Animation Layout appeared first on Codrops.

Check if there is a duplicate username in MySQL database

Good day! I am new in vb.net and I want to detect if there is a duplicate of the record that a user will try to add. If the user adds an existing username from the database then it will show an error that the username has already been used.
Here is my code:
conn.Open()

        Dim qadd As String = "INSERT INTO tbl_user (uname, pword, ulvl) VALUES ('" & txt_uname.Text & "' , '" & txt_pword1.Text & "' , '" & txt_pword2.Text & "') ON DUPLICATE KEY UPDATE uname = ' " & txt_uname.Text & " '"
        Dim cmd As New MySqlCommand(qadd, conn)
        Dim data As MySqlDataReader = cmd.ExecuteReader
        MsgBox("User has been added!", MsgBoxStyle.Information)
        txt_uname.Clear()
        txt_pword1.Clear()
        txt_pword2.Clear()
        txt_uname.Focus()
        conn.Close()