Posted on

:where() has a cool specificity trick, too.

There is a lot of hype on the :is() pseudo-selector lately, probably because now that Safari 14 has it, it’s supported across all the major browsers. You’ve got Miriam tweeting about it, Kevin Powell doing a video, Šime getting it into the Web Platform News, and Robin mentioning it. Bramus really puts a point on it with these “three important facts”:

1. The selector list of :is() is forgiving
2. The specificity of :is() is that of its most specific argument
3. :is() does not work with pseudo-element selectors (for now)

Plus, of course, it’s main functionality which is making otherwise rather verbose, complex, and error-prone selectors easier to write. The specificity thing is extra-interesting. Miriam notes some trickery you could do with it, like juicing up specificity without actually selecting anything.

Say you wanted to use the .button class to select, but give it a ton of specificity

:is(.button, #increase#specificity) {
  /* specificity is now (0, 1, 0, 0) instead of (0, 0, 1, 0)
}

I’ve done silly stuff like this in the past:

.button.button.button {
  /* forcing the selector to be (0, 0, 3, 0) instead of (0, 0, 1, 0) */
  /* doesn't actually require element to have three button classes lol */
}

The :is() trick seems a little more understandable to me.

But what if you want to go the other way with specificity and lower it instead? Well, that’s the whole point of the :where() pseudo-selector. Functionally, it’s exactly the same as :is(). You give it a comma-separated list of things to select as part of the selector chain, and it does, with the same forgiving nature. Except, the specificity of the entire :where() part is zero (0).

Kevin showed off an interesting gotcha with :is() in the video:

.card :is(.title, p) {
  color: red;
}

.card p {
  color: yellow;
}

You might think yellow will win out here, but the presence of .title in that :is() selector on top makes the specificity of that selector (0, 0, 2, 0) winning out over the (0, 0, 1, 1) below.

This is where we could consider using :where() instead! If we were to use the :where() pseudo-selector instead:

.card :where(.title, p) {
  color: red;
}

.card p {
  color: yellow;
}

Then yellow would win, because the top selector lowers to (0, 0, 1, 0) specificity, losing to the bottom selector’s (0, 0, 1, 1).

Which one should you use? Ya know what, I’m not really sure if there is super solid time-tested advice here. At least we have both options available, meaning if you get into a pickle, you’ve got tools to use. Time has taught me that keeping specificity low is generally a healthier place to be. That gives you room to override, where if you’re riding high with specificity you have fewer options. But the zero specificity of :where() is pretty extreme and I could see that leading to confusing moments, too. So my gut is telling me you might wanna start with :is(), unless you notice you need to mix in a higher-specificity selector; if you do, back off to :where().

The post :where() has a cool specificity trick, too. appeared first on CSS-Tricks.

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

Posted on

How to convert this piece of java code to equivalent php code?

This is an api signing key maker.I want to convert this into php code as this is not able to integrate into my php project.

public static String signingkey(String apiAccessKey, String hmacSecretKey, String apiMethod, String clientip, String jsonInput) {
String retval = "";
final String HMAC_SHA_512_ALGORITHM = "HmacSHA512";
final String userKey = apiAccessKey + hmacSecretKey;
try {
// get an hmac_sha512 key from the raw key bytes
SecretKeySpec signingKey = new SecretKeySpec(userKey.getBytes(), HMAC_SHA_512_ALGORITHM);
// get an hmac_sha512 Mac instance and initialize with the signing key
Mac mac = Mac.getInstance(HMAC_SHA_512_ALGORITHM);
mac.init(signingKey);
// compute the hmac on input data bytes
String payload = (apiMethod.toUpperCase()).concat(clientip).concat(jsonInput);
byte[] rawHmac = mac.doFinal(payload.getBytes());
// the value of hmac needs to placed in headers under the key api-hmac
return Hex.encodeHexString(rawHmac);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
Posted on

Can anybody help me to complete this code in C to for login.

In the program i made tried to login and it does not work i am not sure what i did wrong.
[Click Here](http://www.onlinegdb.com/B15uh6kB_)

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#define MAXUSERNAME 30
#define MAXPASSWORD  20

typedef struct
{
    char username[MAXUSERNAME];
    char password[MAXPASSWORD];
} pass;

int main()
{
    char userName[MAXUSERNAME];
    char password[MAXPASSWORD];
    pass t;
    int c;
    FILE *P= fopen("teachers.txt", "rb");

    if (P == NULL) 
    {
        printf("Error! opening file");
        exit(1);
    }

    do
    {
        printf("\nUsername:");
        fgets(userName,MAXUSERNAME,stdin);
        printf("\nPassword:");
        fgets(password,MAXPASSWORD,stdin);
        if((!strcmp(userName, t.username)) && (!strcmp(password, t.password)))
        {
           printf("Welcome to the Ahjin Private Primary School Repot Renerating System");
        }
        else
        {
            printf("\nLogin Failed \nEnter Username & Password Again\n");
            c++;
        }
    }
    while(c<=3);
    if(c>3)
    {
        printf("Login Failed");
        printf("Sorry,Unknown User.");
    }
}
Posted on

Creating Tiled, Masonry, and Other Image Layouts With Meow Gallery

I am uncertain of how I first came across the Meow Gallery WordPress plugin. It was a pinned tab in my browser for a while, but it has recently become one of those projects that I keep coming back to. I delight in the imagery of the Meow Apps brand, created by Japan-based software developer Jordy Meow. It has the sort of fun and artistic visuals that are often missing in the WordPress business ecosystem. This creativity also comes across in the Meow Apps plugins.

The problem with WordPress gallery plugins is that I find a new one I want to use every other week. It is a bit of an obsession. There are so many different options that it is tough to grow comfortable with a solution before finding something new and shiny to tinker with.

Such is the case with Meow Gallery. From the simplicity of its options to the range of layouts that the plugin provides, it has found its way onto my ever-growing list of favorite gallery-related plugins.

I also prefer the decoupled, modular nature of what Meow Apps is doing with its plugins. Meow Gallery keeps a tight focus on the gallery layout itself. Users can select an image lightbox/overlay extension separately. Meow Lightbox is recommended, of course. However, both are developed to work alongside third-party gallery or lightbox plugins. It is the sort of building-block solution that more developers in the community should embrace, ultimately offering end-users more freedom.

Meow Gallery is straightforward to use. It works similarly to the core Gallery block. When first adding images, users can drag-and-drop them directly into it or select from their media library. From that point, the experiences begin to diverge.

Tiled image gallery using the Meow Gallery plugin.
Tiled gallery with 10px gutter.

Instead of selecting the number of columns, whether to crop, or the image size, the Meow Gallery block automatically handles this based on the type of layout chosen. Options may change based on the layout too. The following are available:

  • Tiles
  • Masonry
  • Justified
  • Square
  • Cascade
  • Carousel (pro only)
  • Map (pro only)

The block also offers a handful of basic animations, link options, and more. However, the gutter setting provides more control over the output. The gutter is the horizontal and vertical space between images. Users can choose between 0 and 100. Gutter spacing is the one option from the plugin that WordPress should adopt, allowing theme authors to opt-into a default and users to customize.

Square gallery with no gutter from the Meow Gallery WordPress plugin.
Square-layout gallery with no gutter.

The plugin also has commercial features, but they are value-added upsells instead of necessary functionality. The pro version includes extras like more layouts, new animations, and infinite scrolling for galleries with many images.

The one off-putting issue with Meow Gallery is that it creates a custom block. Having already seen solutions from other plugin authors that extend the default Gallery block, I was hoping this plugin would go in the same direction. Extending the core block makes it easier for end-users to switch gallery plugins at any point. However, users can transform Meow Gallery blocks into Gallery blocks and vice versa.

Keep in mind that the WordPress Gallery block is also undergoing drastic changes. Currently, the plan is to make it more of a container block that houses nested Image blocks. By not extending the core block, plugin users will miss out on some of the advantages this change brings. Of course, the plugin developer could follow suit and add the same features to the project.

Meow Gallery relies on the WordPress gallery shortcode. Therefore, it will continue working regardless of whether users deactivate the plugin in the future. As a fallback, it is not a perfect solution. Users of the block editor would likely rather have it revert to the core Gallery block — the shortcode and block are not remotely the same. However, it is a bit of a compromise between showing a working gallery or nothing at all.

I suspect the reliance on the shortcode is for historical reasons. Meow Gallery existed in the pre-block era. However, the developer has managed to keep up with the times, offering support for both the block and classic editor.

Posted on

APIs for All: With Postman’s Arlemi Turpault

While APIs make it simple to share data back and forth between applications, the process of managing APIs can be anything but simple. A developer working with hundreds of different APIs over the course of their work can get bogged down trying to test, implement, and manage it all, turning what is supposed to be something straightforward into another layer of complexity.

Building API integrations is complex, but Postman makes it easy to create an API service. With Postman, developers can simplify every step of building and managing APIs — from development and testing to collaboration and support — so that more people can design APIs with simplicity, usability, and consistency.

Posted on

Introducing ShiftLeft Educate – Security Training for Developers [Webinar]

Secure coding practices are proven to reduce the number of vulnerabilities introduced. However, not all developers are well versed in security. There is a lot of training material available but it often takes hours of reading to get a good understanding. While trying to mitigate a potential vulnerability, developers are looking for information that is actionable and specific to the programming language they are using.

In this session, we will look at our new training offering - ShiftLeft Educate. See how developers can get context-sensitive information on vulnerabilities and potential mitigations and also see how security training can be rolled out and managed across an entire engineering organization.

Posted on

Stop Telling Dev What To Do – VP of Eng at GitHub

As the VP of Engineering at GitHub, Dana Lawson’s team makes decisions that change the development workflows for millions of people at a time. On this episode of Dev Interrupted we chat about the role of technical leadership, how to implement continuous improvement, and how positivity relates to dev team culture. 

How Positivity Relates To Productivity

Running a highly productive engineering organization does not include telling a bunch of people what to do. That doesn’t work. You have to strike the balance between data and trust, positivity and productivity.

Posted on

Gateway P6822 Hangs On Gateway Logo Startup Screen

I have a Gateway P6822 that has been upgraded with an SSD running Win 10 64 bit. Recently it started hanging on the startup screen. This is the screen that apears after pressing the power button that says press F2 for bios setup and F10 for Boot options. Sometimes it might hang with a blank screen.

If I enter the bios and set bios defaults save and exit it might boot normally. It seems temperamental. Sometimes it will boot normally and sometimes it hangs.

I have tried removing the battery and power cord and pressing the power button to discharge the capacitor and reset. I have run Windows memory diagnostic and it found no errors. I have cleaned the fan. The heat sink has been cleaned and reseated with new thermal paste. I have removed and reinserted the SSD in case there was a bad conection. I have tried reinserting the old HDD and that does not solve the problem. I have tried removing the old aged battery but that does not help. I have upgraded to the latest bios and plan to do a Win 10 repair install in case that helps. Win 10 fast boot is enabled. I don't know if that will make any difference.

Is there anything else that might be causing this problem? Your advice would be apreciated.

Kind regards
Chris

Posted on

SVG Generators

Table of Contents

Below you’ll find an alphabetical list of all SVG generators listed below. Skip the table of contents, or just scroll down to explore them one-by-one. Also, subscribe to our newsletter to not miss the next ones.

SVG Background Generators

A cool background graphic can draw attention to a blog post, enhance your social media profile, or simply freshen up your phone’s home screen. To make creating abstract and colorful backgrounds a breeze, Moe Amaya’s project Cool Backgrounds now unites the some great background generators in one place.

Generative Doodle Patterns Generator

What can you create out of basic geometric shapes? According to Sy Hong and Ye Joo Park, entire worlds! The designers got together to create Tabbied, a little tool that generates colorful geometric doodles from already pre-made presets.

First, you select a preset; then you can customize colors and choose settings such as frequency of a pattern, the actual grid and colors, and finally download the design as a PNG file. Need to get more advanced? Patternpad, Paaatterns, Repper and MagicPattern have got your back, too.

SVG Filters Color Matrix Mixer

SVG filters (and CSS filters) are often used to refine bitmap images via blur or color manipulation. However, they can do much more than that. An SVG filter is defined within a <filter> element and we can use one or more filter primitives within it. But just like SVG filters are very powerful, so it can be difficult to find just the right combination of those filters to achieve a desired visual effect.

SVG Color Matrix Mixer is a little tool by Rik Schennink that allows you to visually generate complex color matrix filters for any component on the page and then use the feColorMatrix SVG filter as a value for the CSS filter property to change the color of your HTML elements. The tool also provides a snippet of code for the filter to apply right away.

Need something way more sophisticated? Well, you can also use JustCode SVG Filters for basic and complex effects and SVG Filters Builder, a visual tool for pretty much all nerdy SVG filtering needs.

SVG Repeating Patterns Generators

Now, there are plenty of further options for SVG patterns — for example for repeating background images. HeroPatterns provides dozens of repeating patterns that would work well as a background images, tiles, or textures. You can adjust the foreground and background colors as well.

  • Wowpatterns features literally thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc.
  • PatternMonster includes 180 patterns, and you can filter them by mode and color, and even search for specific ones.
  • PatternFills includes plenty of black-and-white patterns, also available from the command line,
  • Plain Pattern allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG.
  • Patternify is a CSS Pattern generator that allows you to define a pattern in a 10×10 grid, preview the outcome, and download PNG or CSS. If you need a bit of inspiration.
  • MagicPattern provides a library of pure CSS background patterns like ZigZag or diagonal ones.

SVG Squircicle Maker

There are squares, there are circles, and apparently, there are also squircicles! George Francis’s Squircley is a generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.

The generator exports SVGs which they can be dropped straight into your HTML/CSS code, or used in your design application. Just a fun little application to use. If that’s not good enough, you can also use GetWaves to generate SVG waves, or Blobmaker to generate some fancy blobs.

If you need a more advanced editor to generate SVG assets, from layered waves to stacked waves and blob scenes, Haikei is a fully-fledged tool with all sorts of generators, with assets available as SVGs and PNGs.

SVG Geometric Shapes Generator

To stand out from the crowd of a myriad of websites out there, we can define one unique thing, the signature, that brings a bit of personality into our digital products. Perhaps it’s a little glitch effect, or a pencil scribble, a game or unusual shapes. Or, it could be a set of seemingly random geometric flow lines.

Flow Lines Generator produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn, and then export the outcome as SVG. Perhaps every single page on your site could have a variation of these lines in some way? It might be enough to stand out from the crowd, mostly because nobody else has that exact visual treatment. It might be worth looking at!

SVG Section Dividers Generator

Whenever you have a few sections on a page, it’s not uncommon to separate them with a slight background color change. However, we can use any kind of shape as a more funky divider between these sections. ShapeDivider allows you to generate custom shape dividers and export them to SVGs. You can choose one of the 10 presents, define color, adjust width and height and a few other settings and preview the results in real-time on narrow and large screens.

SVG Waves Generators

Apparently, section dividers require quite a bit of attention these days — to the point that a huge splash of wave generators has been released over the last couple of years, deserving a separate section on its own. SVGwave is one of them. You can adjust the colors, layers and a few settings, pick a randomly generated option as well and export it to SVG or PNG. Getwaves is similar, but provides a bit more granularity with shapes.

Need something a bit more sophisticated? Wavelry allows you to choose between sharp, linear and smooth waves, and SVG Gradient Wave Generator goes even further allowing to adjust amplitudes, smoothness, saturation and hues. Finally, Loading.io provides not only an option to generate waves, but also animate them. So if you need any waves at all in your designs, you should be pretty much covered.

SVG Woodworking Patterns

Amelie Wattenberger has released a little tool Kumiko Generator that helps generate so-called kumiko patterns, patterns used in an ancient Japanese woodworking technique, which involves slotting together many tiny pieces into a lattice. Once you upload your image, you can play with a number of pre-made patterns, and export an SVG result.

Maks Surguy has been collecting SVG generators like this one as well, so if you are looking for similar generators, or perhaps something around isomorphic grid, mosaic, ridge line charts or city roads, you’ll find a number of such tools in Maks’ collection.

SVG Warping Generator

If you’d like to play with SVG text by warping, bending or distorting it, doing so manually might be quite time-consuming. Warp SVG allows you to adjust the number of anchor points to drag them for warping, but you can also adjust the smoothness level to ensure the outcome doesn’t appear broken. By holding Space , you can adjust the text around the canvas. The entire code is also available on GitHub.

SVG Path Visualizers

Can you read and visualize SVG? Probably not. But if you need to fix something quickly without having to use an SVG editor, or adjust a color of a shape, or remove a shape altogether, it might be a very good idea to understand how an SVG illustration is actually drawn on the screen. That’s where SVG Path Visualizer can help. You can enter an SVG path data (thats the string inside the d attribute) and the tool explains the magic happening behind the scenes in a human-understandable language.

Once you understand how SVG paths are drawn, you can use an SVG Path Editor to slightly adjust the paths. Alternatively, if you need to programmatically adjust SVG paths, you can use svgpathtools, a collection of tools for manipulating and analyzing SVG Path objects and Bezier curves.

SVG Cropping Tools

What if you’ve received a couple of SVG files from an illustrator or a third-party, but then realize that it contains quite a bit of blank space around the illustration, causing unnecessary empty space around the illustration once placed on a page? Or perhaps the images are all in slightly different sizes, and you need to normalize them? Of course, there is a tool just for that.

Steve Dennett’s SVG Crop allows you to remove blank space automatically. You upload an SVG file and the tool finds the dimensions of the SVG contents and manipulates the viewBox of the SVG accordingly. You can upload multiple SVGs at a time, and then copy the SVG into a clipboard, or download cropped SVGs as a .zip-file. Sometimes we’ve seen strange artifacts around colors when multiple images were uploaded, but even then, you’ll know exactly how to adjust the viewbox to remove blank space around the image.

If you need a more refined control of cropping with additional options for cropping style — circle, polygon, custom shape, to name a few — Maks Surguy’s SVG Cropper is a great alternative. You can drag the handles of the canvas to define just the right viewbox but also opt-in for closed paths only, as well as clean paths, lighten them and simplify them.

SVG Polygon Generators

Compared to waves, polygons are slightly easier to build — but you don’t have to build them on your own either. SVG Polygon Generator allows you to define the number of sides, radius, spacing and it generates a <polygon> SVG element for you.

SVG Data Visualization Generator

So you have collected a lot of data, now sitting comfortably in pages and pages of spreadsheets. To make sense of the data and explore it more comfortably, it’s probably a good idea to turn it into some sort of a visualization. That’s exactly where RAWgraphs can help us. You insert the data, choose one of the available visual models — sunburst, circular dendrogram or multiple convex hull, for example, or build your own — tune your chart and voilà, the SVG will be generated for you.

The RAWGraphs team also provides a series of video tutorials on how to use the tool, a command line utility and a gallery of the visualizations created with RAWGraphs. Under the hood, the tool uses D3.js, which on its own is a remarkable JavaScript library for manipulating documents based on data.

JPG/PNG → SVG Transformation

What if you have a bitmap image, and you’d like to transform it to a vector counterpart, perhaps to slightly animate it? It’s impossible to “convert” one into another, but we can trace them to produce a vector alternative. Fortunately, there isn’t a shortage of tools that allow you to do just that — and every vector editor will have some sort of a feature like that. By default, many of these tools will use Potrace, or a similar library.

PicSVG is one of the many online tools out there. You can upload an image up to 4 Mb in size, and the tool will try to trace the image for you. SVGurt additionally provides plenty of knobs and controls to adjust the SVG by removing some noise, filling the gaps, and refining strokes. It’s also available as a CLI tool.

You can even take it a step further with dynamic SVG placeholders, by generating small SVG placeholders, animating them and transitioning from them to an actual image with a fade-in CSS transition. Also available as a gatsby-image component. A little bit too much overhead? Well, Blurhash is a great alternative, too.

SVG → JSX Transformation

To use SVGs in React, we need to replace SVG attributes with their JSX-valid equivalents. Obviously, there are a couple of tools that take care of this transformation for you. SVG to JSX is one of the simple online tools that is available offline, and can be installed as a PWA from the URL bar. Additionally, SVG2JSX allows you to choose between functional/class flavor of your component, single or double quotes and a few other settings.

SVGR provides additional flavors for React Native and TypeScript, allows to replace attributes values and add SVG props, provide a Prettier config as well as optimize SVG along the way. Of course it’s also available from the command line, for Node, Webpack and as VS Code Extension. And just in case you need a thorough tutorial, How to use SVGs in React provides all the details in one single article.

SVG Favicon Generator

Creating a simple, letter-based favicon usually takes up more time than it should. Hossein Sham knows this from experience, so to ease his life — and yours too — he built a free Favicon Maker that makes creating a favicon a matter of seconds.

The Favicon Maker helps you make letter- and emoji-based favicons, either as SVG or PNG, depending on your preference. You can select a letter or emoji, a font (Google Fonts are supported), font size, bold or italic variant, as well as the color and shape of the background. Once you’re happy with the result, you can either copy the code directly into your project or download the SVG or PNG file. Need a bit more guidance? How To Favicon in 2021 will have you covered.

SVG Sprites Generator

In times of HTTP/2 and looming HTTP/3, conversations about CSS sprites might seem a little bit outdated, to say the least. However, if you have literally dozens of icons in your interface, loading them fast, and loading them at the same time, might be critical — and that’s when good ol’ CSS Sprites might still be useful. Probably not for PNGs though, but for SVGs — and then use <use> to avoid many SVGs clogging up your markup.

With svg spreact, you can drop SVG files to create a sprite, and the tool will tidy the SVG, optimize it, produce a sprite along with the markup and a demo on CodePen. Alternatively, you can also use an SVG sprite loader with Webpack or svg-sprite npm module.

SVG Icon Transitions Generator

So you’ve got two SVG icons and want to create a transition between them? Then the Icon Transition Generator is for you. You upload your SVG icons, and the browser-based tool exports a single SVG file that includes the JavaScript code for the animation. To adjust the transition to your project’s needs, you can select the type of interaction (hover or click) and the kind of animation (scale or rotation).

SVG Animation Tools

The beauty of SVG lies in its nature: with plain text in front of you, you can animate, transition and morph paths as well as composite animations by working directly with the code. However, we don’t have to write each animation from scratch. Vivus Instant is a simple tool that allows you to animate SVG strokes (thanks for the tip, Chris Mickens).

SVGArtista is a free tool by Sergej Skrjanec and Ana Travas that already includes some basic fill and stroke animations. You can define an animation easing and animation direction, duration and delays. The generated code can be minified, and it uses Autoprefixer by default as well.

SVGator is a dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters, but in a free version the timeline is restricted to 10 seconds, and only easing functions are available.

If you’d like to play directly with the code, GSAP is a fantastic tool to animate with JavaScript — be it SVG, CSS properties, React, Canvas or anything else. Plus, you can also look into SVG.js which is lightweight and dedicated specifically for manipulating and animating SVG. And if you are looking for the After Effect-alike quality of animations, Lottie is definitely worth looking at — both for the web, and for iOS, Android and React Native.

Simple Online SVG Editors

If you just need to fix something in an SVG file, but don’t want to use large applications, Boxy SVG or Editor Method might be just what you are looking for. It’s web applications with basic SVG editing features and a visual editor.

  • Vecta is slightly more advanced, with collaboration tools for teams, and also supporting diagrams, Autocad drawings, Vision stencils and drawings.
  • MacSVG is a light open-source macOS application for SVG editing and animations
  • SVG-Edit is a fully-fledged SVG editor for sophisticated SVG editing.

SVG Compression

By default, exported SVGs might contain plenty of meta-information and unnecessary details, be it empty elements, comments, hidden paths or duplications. Jake Archibald’s SVGOMG cleans up SVG files for good. You can specify the precision level, and choose which feature you’d like to remove from SVGs (there are plenty of them), and which you’d like to keep.

If you need to use the tool from the command line, SVGO is a Node.js tool that can be configured and used as a part of your build process, with every feature available as a default plugin. There are also other ways to use SVGO, e.g. as a GitHub action, webpack-loader, VS Code Plugin, Sketch plugin or Figma plugin.

SVG Assets Manager

So you have plenty of SVGs scattered all across your machine. How do you keep track of them? How do you know what is where, and how do you find one easily? SVGX is a free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows.

If you need an alternative, Iconset is similar, but without the code part. You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows.

And of course if you need just the right icons, you’ll probably find them on SVGRepo, Iconfinder and Vecteezy. All these sites provide literally thousands and thousands of icons, free and commercial, for pretty much all the needs you might have.

Code Snippet Generator

Not really a tool for anything SVG-related, but quite handy when you want to share a snippet of code — and make sure that it looks… lovely. Ray.so takes care of most of the tasks. You can choose between a couple of presets, dark mode or light mode, padding and the language (which can be auto-detected as well). The output is a high-resolution PNG you can put right into the Slack channel right away.

Wrapping Up

There are literally hundreds of resources out there, and we hope that some of the ones listed here will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks. Happy generating!

Posted on

How to Add Subscriptions to WooCommerce (Free Alternative)

Do you want to add subscriptions to WooCommerce in WordPress?

Adding subscriptions lets you offer memberships, create premium content, and generate consistent revenue for your business.

In this article, we’ll show you how to easily add recurring subscriptions to WooCommerce using multiple methods.

How to add subscriptions to WooCommerce (free alternative)

Why Add Subscriptions to WooCommerce?

There are many benefits to adding WooCommerce subscriptions to your WordPress site.

First, it helps to automate the billing process and saves you a lot of time. You don’t have to manually invoice your customers every single month.

By adding subscription payments to your ecommerce business, you’ll have more consistent cash flow, fewer payment errors, and less payment delays.

It also gives you more flexibility in the type of ecommerce site you can create.

  • A recurring physical product subscription like Dollar Shave Club
  • A members only online store, like a virtual version of Costco
  • A curated membership box like Stitch Fix

That being said, let’s take a look at how to add subscriptions to WooCommerce.

We’ll cover multiple ways to add subscriptions to WooCommerce, and you can choose the one that works best for your business.

Method 1. Add WooCommerce Subscriptions (Paid Option)

This method is easier and recommended for most WooCommerce store owners.

For this, we’ll be using the official WooCommerce Subscriptions extension.

WooCommerce subscriptions extension

This extension is built by the team behind WooCommerce. It allows you to create and manage subscription products and create recurring payments.

You’ll be able to do things like create subscriptions for digital and physical products, create monthly subscription boxes, yearly software packages, and more.

The easiest way to get started with WooCommerce Subscriptions is to sign up for Bluehost WooCommerce hosting.

Bluehost has agreed to offer an exclusive discount for our readers that also includes the $199 WooCommerce subscription extension for free.

→ Click Here to Claim This Exclusive Bluehost Offer ←

Aside from free WooCommerce subscriptions, this Bluehost plan also comes with close to $1000 worth of premium extensions for free including Online Bookings & Appointments, Jetpack Premium, and more.

This is why they’re among the top WooCommerce hosting providers in our list.

Once you sign up for hosting, both WooCommerce and the WooCommerce Subscriptions extension will be automatically installed.

After that, you can easily add subscriptions to any WooCommerce products in to your online store.

You’ll have an option in your WooCommerce product editing page where you can set your subscription settings.

WooCommerce subscription options

For more help with WooCommerce, see our ultimate WooCommerce tutorial.

Method 2. Add WooCommerce Subscriptions (with a Free Plugin)

This method is for store owners on a budget who want to add subscriptions to WooCommerce for free.

To do this, we’ll use the YITH WooCommerce Subscription plugin. This free plugin lets you simply add subscriptions for simple, digital, or downloadable products.

First, you’ll need to install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

After the plugin is installed and activated, you’ll have a new menu item called ‘YITH’ in your WordPress dashboard.

Navigate to YITH » Subscriptions and select ‘Settings’ and make sure the ‘Enable Subscription’ box is set to ‘Yes.’

Enable YITH WooCommerce subscription setting

Next, open a product you want to turn into a subscription by navigating to Products » All Products.

Then, select your subscription product.

Select WooCommerce product for subscription

After that, go to the ‘Product data’ box and check the ‘Subscription’ check box.

This will add a new option where you can set the subscription price and maximum length of the subscription.

Set product subscription price with YITH

Once you’ve added your subscription settings, make sure you save your product by clicking the ‘Update’ button.

Now, when your visitors purchase a product, they’ll have the subscription payment option.

Subscription product example

Method 3. Add WooCommerce Subscriptions for Memberships and Courses

Are you creating a membership site or selling online courses and want to set up subscription payments for your visitors?

This is where MemberPress comes in. It’s the best WordPress membership plugin in the market.

You can sell subscriptions, online courses, premium content, and digital downloads with this plugin.

MemberPress membership page

To add membership subscriptions, first, you’ll need to create your membership website. To get started, see our step by step guide on creating a WordPress membership site.

After that, you can add recurring subscription memberships with MemberPress.

To do this, see our step by step guide on how to accept recurring payments in WordPress.

Once you’ve set up subscription memberships, you can assign your WooCommerce products to your memberships.

This allows you to hide specific products and make users sign up for a membership to view your products or make a purchase.

To do this, navigate to MemberPress » Rules and click ‘Add New’.

MemberPress rule settings

Next, under the ‘Rule Options’ setting, select ‘All Products’ from the drop down list.

Then, select the membership level you want to give access to the products. In this case, we’re only giving our ‘Monthly Subscription’ members access to the products in our store.

Configure membership rule

Once you’ve made these changes make sure to save your changes by clicking ‘Save Rule’.

You can also use MemberPress as full LMS plugin to create courses. Aside from membership, MemberPress is also the best WordPress LMS plugin in the market.

It lets you simply create online courses with an immersive learning experience. With their course addon, you can drip feed content, add engagement triggers to keep your students active, all with an easy to use drag and drop builder.

Add course sections in MemberPress

The courses feature work seamlessly with any WordPress theme, and their class room mode feature is our favorite because it offers a distraction free learning experience.

The MemberPress course curriculum that users see, showing their progression through the course

Once your customers sign up for a membership level in MemberPress, they’ll be automatically enrolled in your courses. You can even bundle your courses together for a discount and sell course access as a recurring subscription.

We hoped this article helped you add subscriptions to WooCommerce. You may also want to see our list of the best WooCommerce plugins for your store and our ultimate guide on WooCommerce SEO.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Subscriptions to WooCommerce (Free Alternative) appeared first on WPBeginner.

Posted on

How do you pronounce certain networking terminology

Do you guys have any examples of networking terminology that some people pronounce in different ways that completely throw you off?

Similar to GIF vs JIF but networking related.

For example, there are different ways people choose to pronounce GUI, OSI, and CCIX. Any other curious examples?

Posted on

Create an applet which contains one Combo Box for fonts name, One List Box

Create an applet which contains one Combo Box for fonts name, One List Box for Font Size, and 3 Radio Buttons for Font Style i.e. Bold, Italic, Plain. The applet also displays some string message by a label. Write a Java program such that user will able to change the Font Type, Font Size, and Font Style of the text displayed as label caption.

Posted on

Should You Avoid The Hype Around Cloud Adoption? [Podcast]

Cloud computing refers to several technologies in a multi-cloud reality delivering on-demand computing services over the internet. The cloud is a key pillar of digital transformation and is one of the services that is being invested in by organizations.

Notably, this does not just concern the IT sides of an organization as business executives are now involving themselves in making and purchasing IT decisions for their organizations as well.