Web Tools Weekly·4yCSS Tools, Databases, JSON, SVG
There are a number of different ways to remove empty items from an array in JavaScript. To remove blank values alone is something more specific, but there are a few ways to do it. You can find all the above examples in this CodePen. Now on to this week's tools!
LogRocket·4yThe 6 best CSS background generators
The 6 best CSS background generators are essential to any webpage, and can make or break your website design. This article will provide you with a list of the best background and pattern generators used in CSS to help you create something exciting in your web design.
Hashnode·4y12 Awesome Shape Generators for Your Web Projects 😍🚀
In this article, I have compiled some of my favorite shape generators. I have further sorted them across the categories like blogs, waves, separators, and miscellaneous. I will provide a direct link, a short description, and a preview image, so you can get the initial impression of each generator and its features.
Community Picks·4yPenpot is a Solid Open-Source Figma Alternative to Look Out for!
Penpot is a free and open-source solution as an alternative to Figma and similar design tools. It is in its beta phase following its launch on ProductHunt nearly two years ago. The major highlight is the use of SVG as its native format.
Product Hunt·4ySkill Icons - Showcase your skills on your GitHub or resumé with ease
Skill Icons are easily-embeddable SVG images generated through dynamic URLs. Showcase the languages, frameworks, and tools you use on your GitHub or resumé with ease. We have tons of icons for languages, framework, databases, and more. Use these icons to help you showcase your skills.
Product Hunt·4yHEAZY - Free SVG design asset platform
Heazy lets you generate beautiful, unique and and funky vector visuals. Export your creations as SVG, PNG or React Components in JavaScript or TypeScript. Save your coolest templates to your profile. Reuse and randomise designs as often as you want. Heazy is free to use.
web.dev·4yBuilding an adaptive favicon
A custom favicon is a great way to polish a web project. Traditionally this has been done with the .ico file type, but recently browsers have allowed use of SVG, a vector format. Using progressive enhancement you can serve well supported .ico favicons, and upgrade to an .svg if available.
asayer·4yMicro-Interactions using Anime.js
Micro-interactions are small, functional animations that give the user support using visual feedback. They are just like other interactions with gadgets; they’re used to give users meaningful feedback because they must always be aware of the results of their actions. We imported Machine from XState and created a generic type for our TogglEvent, setting type to TOGGLE, and created our state machine.
DevDojo·4y200+ Design resources you must know right now!
Website Description Figma Online graphic design tool (Free & paid options) Vectr Free vector graphics software Taler Create social media banner designs in minutes from hundreds of customizable templates. Visme Create presentations, infographics and more Infogram Create infograms ChartGo Create charts and graphs online Cartoon Photo Turn photos into cartoons Whimsical Wireframes, diagrams and more (4 free)
Vue.js Developers·4yCustom Vue 3 boilerplate — Vite, Pinia, Vue Router & Tailwind CSS
Vue3-boilerplate is a dev tool for building and serving Pinia. It's time to move into our project folder, install packages and run our boilerplate in development environment. The stack of this boilerplate is focused on web app front end, therefore I'll keep it simple.
LogRocket·4yA complete guide to using CSS filters with SVGs
SVGs, or Scalable Vector Graphics, are an XML-based vector image format for displaying two-dimensional graphics. An SVGs doubles as both an image and document format. SVGs maintain their quality no matter how much you zoom in. This is possible because they’re made up of mathematical formulas.
Community Picks·3yTools for SVG - SVG: Scalable Vector Graphics
Inkscape offers state-of-the-art vector drawing, and it's open source. Apache Batik is a set of open source tools under the roof of the Apache Software Foundation. ImageMagick is one of the most famous command-line image processing tools. Snap.svg is designed for modern browsers and therefore supports the newest.
Codrops·4yCustom SVG Cursors with an Interactive Emitter Effect
From online stores to member areas, Squarespace is everything you need to sell anything. From the custom cursor on my portfolio marvinx.com using blurred SVG circles, I created several variations which I would like to share with you today. The first video uses a grayscale filter: filterImageCursor().
SitePoint·4y15 JavaScript Libraries for Creating Beautiful Charts
Some of the best JavaScript libraries for graphs and charts. These libraries will help you create beautiful and customizable charts for your future projects. Most of the libraries are free and open source, some of them provide a paid version with additional features. Our top JS charting libraries: D3.js, Plotly.ly, ChartJS, Chartist.js and Google Charts.
ITNEXT·4yFlutter Custom Error Message — Flash Message
On Flutter, it is called a snack bar. Pretty handy to show error, success or any warning message to the user. To make it reusable, let’s extract snack bar content. I’m going to call it CustomSnackBarContent . Create a required parameter for error text, then pass it to CustomSnakBarContent.
Community Picks·3yModifying an SVG path with CSS
Modifying an SVG path with CSS with CSS is only supported in Chromium browsers. We can modify the path there. In my instance, I changed it to become the opposite angle of the curve. I also added a transition effect on the path so it will animate smoothly. And now we're able to hover it and see the path change.
Hashnode·4y8 Creative Text Animations for Your Website's Hero Area 😍🎉
Modern web development is about grabbing the visitors' attention. One of the most appealing methods is adding animated hero text to your landing page. In this article I have compiled some of the best effects I've seen. I will provide a direct link, an interactive preview so you can get an initial impression on the fly.
LogRocket·3yMasking images in CSS with the mask-image property
Masking is a photo editing technique used to edit parts of an image. The CSS property is a shorthand for several other properties. The property sets the area that’s affected by the mask. There are three ways you can use the CSS property: the mask can be an image, gradient, or SVG.
CSS-Tricks·4yResponsive Animations for Every Screen Size and Device | CSS-Tricks
The FLIP technique allows us to easily animate these impossible things. In HTML-land every element is neatly placed on one grid and really easy to move around responsively. The basic premise is: Grab the initial position of the elements involved in the transition. Move the elements and grab the final position.
LogRocket·4yCreating visualizations with D3 and TypeScript
This tutorial will show you how to create visualizations using D3 and TypeScript. We will host the code on CodePen for maximum interactivity as a stylistic decision. We can do this by calculating the area’s width and height along with the margins. These values addsvg to the HTML body and specify a transformation. In this case, it's a translate operation to place g undersvg.
Web Tools Weekly·4yPerf Insights, Frameworks, Media, React Tools
Chrome 102 now includes a new panel in the DevTools called Performance Insights. The panel addresses specific problems developers have had with the existing performance panel. The most important features here are the "Insights" and "Details" panes Radix Icons A set of crisp 15x15 SVG-based icons available for Figma, Sketch, IconJar, React, or just plain SVG code.
