Posts Tagged: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.


Getting Started with Vue Plugins

In the last months, I’ve learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I’ve experimented with the framework thoroughly. But there’s been a missing piece throughout my learning: plugins. Most folks working with Vue have either comes to rely on plugins as part of their workflow or will certainly cross paths with plugins somewhere down the road. Whatever the case, they’re a great way to leverage existing code without having to constantly write from scratch. Many of you have likely used jQuery and are accustomed to using (or making!) plugins to create anything from carousels and modals to responsive videos and type. We’re basically talking about the same thing here with Vue plugins. So, you want to make one? I’m going to assume you’re nodding your head so we can get our hands dirty together with a step-by-step guide…

Read More →

The dialog element

Let’s talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content. Problem Implementing solutions for pop-ups can be difficult. What seems trivial on the surface can become more complicated in a hurry. You may need to account for modal and popover designs. And animations. How about custom behavior on form submissions? What happens if there is more than one modal trying to display at the same time? To help with that, you may reach for a plugin solution. But there are so many choices, and a lot of topics to consider: APIAccessibilityDependencies. You might not want jQuery, React, or similar.Support. Who is maintaining…

Read More →

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 →

VS Code extensions for the discerning developer palette

I am a VS Code extension snob. I like to hunt down the most obscure extensions for VS Code — the ones that nobody knows about — and impress people at parties with my knowledge of finely aged and little-known VS Code capabilities… then watch as they look around desperately for someone else to talk to. It’s like the “Sideways” of VS Code. In my endless pursuit of the perfect VS Code setup, I reached out to my colleagues here on the Azure team and asked them to share their favorite extension in their own words. So clear your pallet and breathe in the aromatic flavors of productivity; I am your VS Code Extension Sommelier. Christina Warren – Settings Sync I cannot live without this extension. If you use multiple machines (especially on multiple platforms, where a sym-linked Dropbox folder won’t really work), this extension is for you. It syncs…

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 →

Back to Top