Category Archive for: plugin

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Blog Compass App (for Android)

Google released a new app called “Blog Compass” and I decided to give it a spin… until I realized that it’s Android-only, at least for now: Blog compass is an app that helps bloggers manage their site and find topics to write about. Blog Compass suggests trending topics based on your interests and posting history. You can track site stats, approve comments, and read tips for how to make your blog more successful all in one place. The app is compatible with blogs using Blogger.com, WordPress.com, or self hosted WordPress blogs using the Jetpack plugin. A few screenshots from their homepage about what you can do: But… I couldn’t help but try anyway (you can actually run Android Apps via Chrome if you’re motivated enough to do it) via tools like this. Overall, I’m not really impressed but you could find it useful. To be honest, there are a ton…

Read More →

Removing jQuery from GitHub.com frontend

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase: We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs. The team explores how using tools like eslint-plugin-jquery discourages developers at GitHub from using jQuery, but the team also notes that they decided to remove certain design behaviors altogether to help them achieve this goal:…

Read More →

Jetpack’s Social Integration Features

One of the many things we use Jetpack for here on CSS-Tricks is all of its features related to social media integration. For example, Jetpack can automatically share published content to different social media accounts simultaneously, add sharing buttons to your site’s theme, and allow for social login on the comment form. There is even more than that, but let’s dig into these three as we use them. Auto-Sharing Posts I like the idea that everything we published goes out to social media. Many people only follow the site that way, so they should see what we’re writing. We’re specifically into Twitter and Facebook. With Jetpack installed connected to WordPress.com, I can now flip on the setting: Then authenticate the services you want to connect: Now as we publish new articles, there are Publicize controls right there allowing us to send it to the services we want along with a…

Read More →

CSS Shape Editors

Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari. What will be nice about the Firefox release (well, it’s kinda already nice if you use something like Firefox Developer Edition which is already on 62), is that it has a shape editor built right into DevTools. Chrome supports shape-outside as well, but there is no native DevTools helper for working with them. Thankfully, Razvan Caliman has a Chrome Plugin that does a great job. (Razvan contributed to the Firefox version as well, I hear.) I enjoy using shape-outside as it can add real visual interest to a page that isn’t nearly overdone or trendy just yet. Plus, in a lot of cases, it doesn’t matter whether it’s supported because the float behaves as a…

Read More →

A Basic WooCommerce Setup to Sell T-Shirts

WooCommerce is a powerful eCommerce solution for WordPress sites. If you’re like me, and like working with WordPress and have WordPress-powered sites already, WooCommerce is a no-brainer for helping you sell things online on those sites. But even if you don’t already have a WordPress site, WooCommerce is so good I think it would make sense to spin up a WordPress site so you could use it for your eCommerce solution. Personally, I’ve used WooCommerce a number of times to sell things. Most recently, I’ve used it to sell T-Shirts (and hats) over on CodePen. We use WordPress already to power our blog, documentation, and podcast. Makes perfect sense to use WordPress for the store as well! What I think is notable about our WooCommerce installation at CodePen is how painless it was, while doing everything we need it to do. I’d say it was a half-day job with maybe…

Read More →

On Switching Code Editors

I’m sure a lot of you are like me and have switched code editors a number of times. I think my first major editor was Coda. Then I moved to TextMate when I started working primarily on local. Then Sublime Text. And, most recently, VS Code. I bet your journey was different. I know lots of folks that quite love Atom, Brackets, WebStorm, and even BBedit. You do you! For me, that’s four changes in a dozen years, or a change every three years. Moving isn’t something I do quickly. Here’s a collection of thoughts around the idea of changing editors. When moving, I have to take time to make sure it works pretty much like the old one. Otherwise, I’ll just end up disliking it to the point that I switch back a day or two later. It’s happened to me every time I switch. I have little false-starts…

Read More →

Adding Particle Effects to DOM Elements with Canvas

Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects. Before we begin, feel free to grab the source code in the repo. View Repo Create the initial element First, let’s create an HTML element to build on. I’m using a simple styled button, but it really could be any HTML element. See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen. A modern browser like Chrome, Firefox, or Edge is required to view these demos. But how can we get a canvas to “see” this element so that we can manipulate each pixel using canvas? In order to make that to happen, we will essentially need to take a snapshot of our HTML…

Read More →

Brizy Review: Visual Page Building Reinforced

Meta: This Brizy Page Builder review covers everything you need to know about the WordPress plugin, with focus on how it would potentially impact your business. Well, of course, we love WordPress for its usability, and most importantly, its wide array of third-party plugins optimized for pretty much everything to do with websites. Come to think of it, we could spend a fortnight comparing different plugin categories, debating about the most essential one. However, if you’re honest, you’d acknowledge that nothing comes close to web design plugins especially when it comes to ecommerce sites. Consider this. The first impression visitors have of your website is 94% related to its overall design. That’s according to a study conducted by Northumbria and Sheffield Universities. The University of Surrey, on the other hand, released a separate report revealing that users’ assessment of your business’ credibility is 75% based on the website design. And…

Read More →

Fast, Good, Local Site Search with Jetpack

If you have, say, 20 posts/pages on your WordPress site, the search functionality that is baked right into your self-hosted WordPress site will probably do a great job. Search is a pretty cool feature to ship with WordPress, truth be told. But as a site grows, you’ll find limits. How it works behind the scenes is a touch over my head, but as I understand it, it does a MySQL LIKE query on your post titles and post content. It tries its best to order by relevance (like if it finds an exact sentence match), then largely orders by date. If search is super important to your site (here on CSS-Tricks, on-site search gets used a ton) you’ll probably look for other options. TLDR: Jetpack Search is quite good out of the box, customizable, and requires very little effort. A quick jaunt through a decade-long journey. I started with Google…

Read More →

The Eleventh Fourth

Holy heck it feels like the last year has flown by! Longtime readers will remember that the fourth of July is CSS-Tricks birthday and we blog it each year. We turned 10 last year, and now we welcome our first palindromic number birthday. Huge thank you First, as ever, thank you for being part of CSS-Tricks. However you end up here, we hope that we’re useful to you, know that we’re always trying to be even more useful to you, and know that you make the site possible. Can we ask you some questions? The whole point of this survey is to understand you better and use that understanding to make choices that serve you better. That’s it! It’s super helpful to us and totally anonymous. Take the CSS-Tricks Reader Survey A new design is coming Hate to be a tease, as there is nothing to show you yet and…

Read More →

Vue + TypeScript: A Match Made in Your Code Editor

Vue is so hot right now and I’ve been thinking of doing a serious project with it since quite a while, so when the opportunity popped up, I hopped in. But there was a little problem — one of the requirements of the project was to write it in TypeScript. At first, I was super stressed about how I was going to ever get started on this combo, but vue-cli made it so easy. I’d be lying if I said this ride was super smooth. There were frustrations, hours of staring at the screen and some fistbumps with my table but after working with Vue + TypeScript for over a month now, I can say it was worth it — and if I had to code another app with Vue, I wouldn’t do it without TypeScript. Prerequisites This article is about pairing Vue and TypeScript and assumes some basic knowledge…

Read More →

Create WordPress Forms that Open and Close Automatically

Gator Forms is our favorite WordPress forms plugin. One of the reasons we like it so much is that it has a wide range of display options. Gator Forms doesn’t require you to put your form inside a Post or a Page. You can show your forms in pop-ups, tabs, accordions, lightboxes and other effects. In this guide, I’m going to show how you to create a form that automatically opens and closes for visitors. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

Place a WordPress Form on the Side or Top of Your Site

Gator Forms is our favorite WordPress forms plugin. One of the reasons we like it so much is that it has a wide range of pop-ups and buttons you can use to make your forms more visible. Gator Forms doesn’t require you to put your form inside a Post or a Page. You can show it around the outside of your site too. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

Yoast SEO Plugin 7.0 Bug Causes Ranking Drops by @martinibuster

Bug in Yoast SEO Plugin causes ranking drops. Error introduced in March 2018. Find out if you’re affected.The post Yoast SEO Plugin 7.0 Bug Causes Ranking Drops by @martinibuster appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

3 Options for Contact Forms in WordPress

One very popular WordPress beginner question is “How do I create a contact form in WordPress?”. When you search for a contact form plugin in the WordPress directory, you get over 258 pages of entries returned. So, the real question isn’t so much “How do I create a contact form in WordPress?” but “Which plugin do I use?”. We have some recommendations for you: [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

A May Full of Drupal Commerce Releases

May was one of our most productive months to date. It was full of releases for the core Commerce modules, our standalone PHP libraries, and essential contributed modules that all work together to comprise Drupal Commerce. While I outlined the highlights in the roadmap issue on drupal.org, these wins are worth sharing more broadly to keep the rest of the Drupal community in the loop. The biggest release of the month was Drupal Commerce 2.7, which included new features for currency formatting, address form configuration, and stored payment methods. It also fixed a handful of bugs that unblocked other module releases and updated core in response to improvements in our libraries and dependent modules. We’ve long discussed how our standalone PHP libraries are exporting expertise off the Drupal island. Addressing and Internationalization, which have each been downloaded over one million times, are our two shining stars. We rolled new releases…

Read More →

What is the Contact Creator Plugin in Joomla?

We’ve already written a tutorial on how to create Joomla contact forms using the core Joomla Contacts component. There is also a plugin built into the core, which automates the creation of the contact form and adds new users to the contact list as soon as you create them. This little plugin, called Contact Creator, will cut the work of adding contacts almost in half, or if used correctly, could automate it completely. We recommend Shack Forms for any advanced Joomla contact forms, but there’s a lot you can do with the Joomla core. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

Learning Gutenberg: Building Our Custom Card Block

We’ve got some base knowledge, we’ve played with some React and now we’ve got our project tools set up. Let’s dive into building our custom block. Article Series: Series Introduction What is Gutenberg, Anyway? A Primer with create-guten-block Modern JavaScript Syntax React 101 Setting up a Custom webpack A Custom “Card” Block (This Post) What we’re building We’re going to build a custom card block that features an image, a title and a summary. It’s a really common design pattern in the web and it also let’s us look at some core Gutenberg components, along with core WordPress elements, such as the Media Library. We’ll also play with some display logic with JSX for the front-end markup. Our glorious custom card block! Our glorious custom card block! We’re going to focus solely on the CMS aspect of this block in this tutorial. What it renders is some nice, clean markup…

Read More →

Learning Gutenberg: Setting up a Custom webpack Config

Gutenberg introduces the modern JavaScript stack into the WordPress ecosystem, which means some new tooling should be learned. Although tools like create-guten-block are incredibly useful, it’s also handy to know what’s going on under the hood. Article Series: Series Introduction What is Gutenberg, Anyway? A Primer with create-guten-block Modern JavaScript Syntax React 101 Setting up a Custom webpack (This Post) A Custom “Card” Block (Coming Soon!) The files we will be configuring here should be familiar from what we covered in the Part 2 Primer with create-guten-block. If you’re like me (before reading Andy’s tutorial, that is!) and would rather not dive into the configuration part just yet, the scaffold created by create-guten-block matches what we are about to create here, so you can certainly use that as well. Let’s jump in! Getting started Webpack takes the small, modular aspects of your front-end codebase and smooshes them down into one…

Read More →

Back to Top