30 Life-saving Tools for Front-end Developers

/0 Comments/in /by

Original Source: https://www.sitepoint.com/life-saving-tools-for-front-end-developers/?utm_source=rss

30 Life-saving Tools for Front-end Developers

As the functionalities of web apps keep getting ever more sophisticated and complex, web developers need flexible tools to keep up with rising user expectations. The good news is, the web development ecosystem gives us plenty of choice, with both well-established companies and the open-source community racing to build more powerful libraries, frameworks and apps to help developers do their job and increase productivity and efficiency.

In this post, I’ve rounded up 30 top tools for front-end web developers ranging from code editors and code playgrounds to CSS generators, JS libraries, and more.

Let’s dive right in!

Code Editors

Front-end developers spend hours writing or editing code. Therefore, it’s only natural that their closest friend on the job is the code editor. In fact, getting to know their code editor of choice and all its capabilities and shortcuts gives any dev a great advantage in terms of productivity.

1. Visual Studio Code

Visual Studio Code (VS Code) by Microsoft is a full-blown, free and open-source cross-platform integrated development environment (IDE) — that is, a complex piece of software that allows developers to create, test and deploy an entire project.

Here are some of VS Code’s most popular features:

IntelliSense, offering syntax highlighting and smart completions based on variable types, function definitions and imported modules
debugging capabilities
built-in Git commands
flexibility and extensibility: you can easily add extensions relative to new languages, themes, etc.
easy deployment capabilities

You can download VS Code for Windows, MacOS, and Linux.

2. Atom

Atom is a free, open-source and powerful cross-platform code editor that allows you to:

collaborate with other developers using Teletype for Atom
work with Git and GitHub with GitHub for Atom
edit code on different platforms
speed up coding with smart auto-completion
search for, install and even create your own packages
browse project files
split the interface into multiple panes
find and replace in a file or in multiple projects
add new themes and customize the editor’s appearance and behavior by tweaking its code.

3. Sublime Text

Sublime Text introduces itself as “a sophisticated text editor for code, markup and prose”.

It’s a paid, cross-platform code editing app with tons of features. These include:

Goto Anything functionality: shortcuts that allow developers to search for bits of code in files and open files in projects
multiple selections
powerful API and package ecosystem to extend the built-in functionality
split editing
easy customization
fast project switching
high performance
and more

Package Managers

Package managers are collections of tools for consistently automating processes like installing, upgrading, configuring and removing programs. Typing npm install or yarn install in a command-line interface has become one of the most ordinary parts of a developer’s day-to-day job.

4. NPM

What is npm? Well, as it says on the company’s website, it’s many things. In particular:

it’s the package manager for Node.js that helps JS devs to share packaged modules of code
the npm registry is a public collection of packages of open-source code for Node.js, front-end web apps, and more
npm is also the command-line client developers use to install and publish those packages
npm, Inc. is the company responsible for hosting and maintaining all of the above

5. Yarn

Yarn is a package manager for installing and sharing code and also a project manager. It’s extensible via plugins, stable, very well documented, free and open source.

Bundlers

Module bundlers are used to bundle several modules into one or more optimized bundles for the browser.

6. Webpack

Here’s all the goodness you’ll find in webpack, as it’s detailed in the software’s website:

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. … Since version 4.0.0, webpack does not require a configuration file to bundle your project. Nevertheless, it is incredibly configurable to better fit your needs.

7. Parcel

Parcel is a “blazing fast, zero configuration web application bundler”.

Parcel

is fast
bundles all the project’s assets
has zero-config code splitting
and more.

CSS Generators

Have you ever tried to memorize how to declare CSS properties for gradients, text shadows, Flexbox or Grid, to mention just a few? Not easy. Unless you use some CSS features and their properties over and over again, it’s hard to remember them all. But even those who master CSS sometimes need a refresher on some properties, especially if they haven’t used them in a while.

If you need some quick help with the latest and greatest CSS, here are CSS generators to the rescue. Enter the values, preview the result, grab the generated code and run.

8. CSS3 Generator

The CSS3 Generator is a free online app that lets you quickly write code for a number of modern CSS features like Flexbox, gradients, transitions and transforms, and many more.

Enter the required CSS values, preview the result in real time, copy and paste the generated code. Also, this app shows a list of browsers and their versions where your CSS code is supported.

9. The Ultimate CSS Generator

The Ultimate CSS Generator is a free online app that lets you generate code for CSS animation, backgrounds, gradients, borders, filters, and more.

The interface is user-friendly, the information about browser support for the CSS feature you’re interested in is clear and easy to spot, and the generated code is clean and accurate.

10. The CSS Grid Layout Generator by Dmitrii Bykov

CSS Grid is awesome, and creating your grid in code gives you full control over the final result. However, it’s helpful to have a visual representation of the grid while you’re coding. Although some major browsers have implemented great tools to let you visualize your grid, some devs could do with some additional help. Here’s where a CSS Grid generator might come in handy.

The CSS Grid Layout Generator by Dmitrii Bykov is free, accessible online, and extremely flexible. I took it for a spin and found that it gives me a lot of control both at the level of the grid container and that of the grid item while providing me with nice preview capabilities and clean code.

If you need help, click on the How to Use button and watch the presentation video offered by the app’s author.

To know more about which CSS Grid generators are available, I put some of the best ones through their paces on SitePoint in my article “5 Super CSS Grid Generators for Your Layouts”.

Libraries and Frameworks

The demands on today’s web apps place great importance on speed in loading and updating page content. As powerful as modern JavaScript is, when packaged into a library or a framework, it becomes a fantastic tool for writing elegant and maintainable code and cutting back on repetitive and time-consuming typing efforts.

Continue reading
30 Life-saving Tools for Front-end Developers
on SitePoint.

5 Ways to Build Codeless Websites Using WordPress’ Gutenberg

/0 Comments/in /by

Original Source: https://www.webdesignerdepot.com/2020/06/5-ways-to-build-codeless-websites-using-wordpress-gutenberg/

Web designers could be forgiven if their eyes glazed over at the mere mention of building a custom website. Creating an advanced website used to require programming knowledge and hours of coding.

But thanks to Gutenberg, even those who don’t know their HTML from their CSS will be able to create professional websites that stand out from the competition.

The initial feedback to the release of Gutenberg certainly was damning: “…Useless…A joke…Terrible…”

You can argue about how WordPress handled the launch of its new content block editor (and you might be right in thinking it wasn’t great) but the dirty secret is that, after a number of updates, Gutenberg has evolved into an excellent tool for building websites.

Below I will show you 5 ways a web designer with limited coding experience can take advantage of Gutenberg to build the types of custom websites that businesses are looking for.

I created a travel website with a number of custom features using these three tools:

Gutenberg
Toolset – Its new Toolset Blocks allows you to add custom features to your websites including custom post types, a search and dynamic content.
GeneratePress – A lightweight and fast theme that is easy for beginners to use.

Now I’ll let you in on a secret. I’m not a developer. In fact, I have limited coding experience. Yet I was able to use Gutenberg to build a professional website with a number of features that custom websites would require. Below I’ll go through five of them.

1. You Can Create Dynamic Content

An advantage it has over page builders is that Gutenberg comes with a number of block extensions to enhance your websites. One of those is Toolset which offers dynamic content capabilities.

Dynamic content means you can create an element (such as an image) that will draw the correct content from the database. So when you create a list of posts you only need to add each block for each element once, but that block will display different content for each post.

For example, I’ve created a list of tours posts – later I’ll go into how you can do this with Gutenberg. Do you notice something strange about the headings below?

The heading is exactly the same for each of my tours. That’s because the headings are static, the opposite of dynamic. It means when I add my blocks, whatever text I enter in the heading will be displayed for each of the posts. However, when it is dynamic, you will see the correct heading on every tour.

To illustrate, here is my tour post about visiting the West Bank on the back-end. You can see the post title at the top.

I want to display this tour post with the correct heading in my list of content. All I need to do thanks to Gutenberg and Toolset is the following:

Select Toolset’s heading block — unlike the normal Gutenberg blocks, Toolset’s allows you to make your content dynamic;
Select the dynamic option;
Choose the source for your heading;
Confirm that the heading is correct.

You can create dynamic content for a number of other blocks available on Gutenberg including images, custom fields and the link for buttons.

2. Display Custom Lists of Content

On a custom website, there will be times when you will want to list your content from a particular post type on different parts of your website. For example, a list of properties for sale on your real estate homepage.

Each of these properties uses the same layout, displaying the same information such as the price, number of bedrooms and number of bathrooms in the same way. This information is added using custom fields which are pieces of information you can add to WordPress content. Page builders on their own can’t build custom fields. However, you can create them using Gutenberg and its blocks plugins.

Below for my travel website, I displayed a slider with a list of featured tours. The list includes a number of custom fields including the price, rating and duration.

I used Gutenberg and Toolset to create the custom fields which you can see in my list above. Here are all of the custom fields I created. I’ve highlighted the price field as an example.

On the back-end I can use Toolset’s View block to create a list of posts. I can choose what posts I want to display and how I want to display them.

For example, below you can see that I am able to select which content I want to display.

I can also decide how I want to display my list, whether it is in the form of a grid, ordered list, unformatted or much more.

I can now select which fields I want to display. Many of these fields will be the custom fields that I created previously. Each of my tours will display the fields in the same layout. Once again, I’ve highlighted the price custom field below. For each field I create a block and then choose the source of the content (such as the price) on the right hand sidebar.

Once I have arranged the layout for my posts I can decide exactly which posts I display and in what order. Using Gutenberg and Toolset I can select:

The order I display posts such as the most recent blog post;
The number of posts I display;
If I want a filter on my posts, for example display only the tours that cost less than a certain amount.

I added a filter to display only the featured tours. As part of my custom fields I created a field for “Featured tours” which you can click for each post on the back-end.

I can use Gutenberg and Toolset to create a filter using the right-hand sidebar which tells my list of content to only display those tours posts which are featured.

Notice how I am able to completely customize my lists of posts on Gutenberg without using any coding at all. Even designers without any programming experience will be able to add a list of posts to their website.

3. Create a Template For Your Content

A template is your blueprint for your post types that provides each of your posts with a structure. For example, I’ve created a template for my tours post types which means each tour post will have exactly the same structure when you look at it on the front-end.

As you can see, both posts are from the same template. You know this because each post has the same layout, with the content following the same structure.

All I needed to do to create my template on my Gutenberg Editor was insert my blocks and add dynamic content. As I’m adding the content I can use the drop-down at the top of the page to switch between the posts to see what the template looks like with different post content.

4. Create a Custom Search

One of the most important features on a custom website is a search.

If you are designing a directory website which sells items, for example, you will want to make it as easy as possible for potential customers to find your products. The best way is with a search that contains filters so they can narrow the results down and find exactly what they’re looking for.

Below you can see the custom search I created using Gutenberg and Toolset for my tours. It contains a number of filters. One of the filters is to only show those tours with a rating of 3-5 stars.

Creating a custom search consists of two steps. First, creating the search (which you can see above) and second, designing the results.

I created the search using Toolset’s View block on a new page. Below are the options to enhance the block. I can select the search option, add front-end sorting so that the user can sort the results when they appear (lowest to highest price, for example) and pagination to split the content into pages.

Once I add the block I can proceed to add additional filters such as the maximum price. I can also include a map and markers to display the results. Once again thanks to Gutenberg and its extensions I do not need to use coding. I just select the blocks and adjust the options on the right-hand sidebar.

For the results, I added blocks just like I did for the template and custom list of content.

And just like that, I have a custom search for my tours. I can now enter searches using the filters on the front-end.

5. Create an Archive of Similar Posts

An archive makes it easier for users to find all the posts you have published. If you want an archive with standard fields such as a heading and post content then a page builder such as Elementor is a great option. However, if you want to include custom fields with dynamic content then you will need to use Gutenberg,

I built an archive for all of my tours on my travel website. When someone clicks on the archive they will see every tour I have created. You can create a tour for any of your posts.

Just like with the custom list of content I can add the blocks for the content and arrange the posts how I want.

I can also style the blocks by changing the text color, adding a padding/margin, add the background color, and much more.

You Do Not Need to be a Professional Developer to Create Professional Websites

Now that you have seen how even a coding beginner can build complete custom websites it is time for you to try it out yourself. Here are some tutorials and documentation worth going through:

If you are new to Gutenberg, Colorlib offers a good WordPress Gutenberg tutorial which will introduce you to how you can create blocks.
The plugin I used with Gutenberg, Toolset, offers a training course on how you can use the two tools to build WordPress directory websites. It is a great way to understand exactly what features you can build and how for any type of website.
To keep up to date with any changes to Gutenberg it is also worth keeping an eye on the block editor handbook.

Gutenberg is still in its infancy and is far from the finished product. But that does not mean it can’t revolutionize the website building contracts you can take on. If you take advantage of its visual UI and blocks plugins you will be able to build custom websites that you never before thought were possible.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Say Cheese: Photography for beginners

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/qFIiwBq7Hvw/say-cheese-photography-beginners

Say Cheese: Photography for beginners
Say Cheese: Photography for beginners

abduzeedo06.05.20

Say Cheese is an amazing project by Arthur de Almeida, a brazilian designer based in São Paulo. It’s a long-read website that focus on teaching basic photography concepts for people who wants to start in this area. Photography has always been a passion for Arthur. It all started in his early days of learning about photography,  he recalls that the photography triad (aperture, shutter speed and ISO) was one of the few things that he could understand, but even so some important details were always confusing. “It is difficult to talk about something visual with text only” – he added.

When I thought about creating a project to teach this content to people, I had one thing in mind: this should be as simple and accessible as possible, I should avoid talking about technical words and that must start with the name itself.

Photography for beginners

“Say Cheese” seemed to him to be the most popular expression in photography. His goal was to be able to communicate what the website would talk about. Not limiting only to people in the world of photography. After creating the name, he started to write the content in a simple way, as if he was talking to a friend.

I wanted to make sure that each chapter begun in a very informal and non-technical way (like Friends names its episodes). It wouldn’t do me any good to explain something technical if people didn’t know how it could be applied on a daily basis. 

So, after creating all the content and seeing that it was already very clear, he started explore different ways to streamline the communication through visual resources but without trying to rush, especially for the readers that were just starting.

I believed that things needed to be said slowly and always with the same objective: to communicate in the simplest way possible with people, after all I am not talking to professional photographers, but with people who just want to take their first cool picture.


New Black Mirror Series 6 Netflix poster is terrifying yet genius

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/Myy4PgYYu_8/new-black-mirror-series-6-poster-is-terrifying-yet-genius

If you're feeling like the plot of 2020 is straight out of a dystopian drama, you're not alone. One Madrid-based advertising agency has turned the concept into a reality with a speculative poster campaign that places us all quite literally inside Netflix's next series of Black Mirror.

The ingenious poster (below), which has popped up at bus stops across Madrid, features the text: "Black Mirror. 6th season. Live now, everywhere", above a literal mirror. The darkly comic ad couldn't be simpler, and could well make its way into our favourite examples of billboard advertising. 

Black Mirror ad

Apt

The ad works extremely well – not only because the apocalyptic vibe of these strange times seems lifted from one of Charlie Brooker's scripts (here's where to buy a face mask, by the way). The series is also known for its form-pushing experimentalism (such as its recent choose-your-own-adventure-episode), so the idea of the Black Mirror team letting a series play out in reality is somehow strangely believable.

Fortunately, there's no need to pinch yourself – Brooker recently told Radio Times he wasn't currently working on a new series of Black Mirror. "At the moment, I don’t know what stomach there would be for stories about societies falling apart," he said.

The joke poster, created by Madrid agency Brother, has been a huge hit online. "I need this to be everywhere," one Reddit user commented, "Let people laugh for at least a second." Others rushed to Netflix to check whether a new series had actually dropped: "I got excited and went to Netflix to find it, couldn't find it, Googled the release date, and only then did I realise."

We might not be living in a new series of Black Mirror, but it's certainly a new normal. Check out our guide to working from home more productively if you're stuck indoors, and if you fancy unleashing a little creativity, our how to make a face mask guide has you covered. 

Read more:

Netflix concept ads will ruin your dayNew Apple iPhone design concept is the one we've been waiting forDisney face masks feature most popular characters

Collective #608

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/tympanus/~3/Bi15MBfFXYQ/

Collective Item Image
Inspirational Website of the Week: 14islands

Fall in love with this amazing website of 14islands and its fantastic organic shapes and effects. Can you discove the easter egg?

Get inspired

Collective Item Image
A user’s guide to CSS variables

Lea Verou’s guide to help us understand the differences between declarative CSS variables and variables in other programming languages, and how you can leverage their power.

Read it

Collective Item Image
Our Sponsor
Simply build visually with Divi

You’ve never built a WordPress website like this before. Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.

Discover Divi

Collective Item Image
AudioMass

AudioMass is a free full-featured web-based audio and waveform editing tool. Find the GitHub repo here.

Check it out

Collective Item Image
ScrollTrigger

The new ScrollTrigger plugin by GreenSock creates amazing scroll-based animations with minimal code. You can also trigger anything scroll-related, even if it has nothing to do with animation.

Check it out

Collective Item Image
Free The Docs

Instantly convert documents within Google Docs into reStructuredText. Downloads images, converts markup, bulleted lists, tables, and more.

Check it out

Collective Item Image
Twin

With twin, you can use Tailwind classes within css-in-js libraries.

Check it out

Collective Item Image
CUBE CSS

Learn about the CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

Read it

Collective Item Image
Consoleimg

Add images to your website’s developer console with this script.

Check it out

Collective Item Image
Global and Component Style Settings with CSS Variables

Sara Soueidan explains how she uses scoped CSS variables in her own pattern library to speed up prototyping and client work.

Read it

Collective Item Image
Colors in CSS

Ahmad Shadeed dives into CSS colors and explains many useful details.

Read it

Collective Item Image
3D First Person Art Gallery – No Javascript!

An amazing demo by Ben Evans.

Check it out

Free Font HK Grotesk Wide
Free Font: HK Grotesk Wide

HK Grotesk Wide is a free font, great for posters, headlines or book/magazine covers.

Check it out

Collective Item Image
The ? menu

A step by step guide to creating a hamburger menu in SVG and CSS by Mikael Ainalem.

Read it

Collective Item Image
Overlapping Header with CSS Grid

A great CSS grid based solution to an overlapping layout.

Check it out

Collective Item Image
Colors and Fonts

Colors & Fonts is a curated library of colors and fonts for digital designers and web developers.

Check it out

Collective Item Image
ScrollTrigger Demo

Mariusz Dabrowski’s cool demo that showcases the new ScrollTrigger plugin by GreenSock.

Check it out

Collective Item Image
Object.is() vs Strict Equality Operator in JavaScript

When should you use Object.is() instead of the strict equality check in JavaScript?

Read it

Collective Item Image
Semilattice

A collection of system and interaction concepts for personal knowledge management tools that reimagines how we work with and organize information. By Aosheng Ran.

Check it out

Collective Item Image
Fun with Fonts

Two short multiple choice quizzes on Gutenberg and font identification.

Check it out

Collective Item Image
Stranger Things, JavaScript Edition

Find the explanation to some of the weirdest JavaScript moments in this article.

Read it

Collective Item Image
TitleRun

TitleRun is a game that lives in your title bar: jump over the obstacles to survive and reach the flag!

Check it out

Collective Item Image
From Our Blog
Kinetic Typography with Three.js

Discover how to use Three.js to render kinetic typography.

Check it out

Collective Item Image
From Our Blog
UI Interactions & Animations Roundup #7

Some modern UI animation shots to keep you up-to-date with the new motion trends and get you inspired.

Check it out

The post Collective #608 appeared first on Codrops.

5 Ways to Stay Productive (Even When You Are Jobless)

/0 Comments/in /by

Original Source: https://www.hongkiat.com/blog/be-productive-when-out-of-job/

The typical freelance career, illustrated, would probably look like a wave. It has “crests”, where you have more than enough work to keep you going, and “troughs”, where you have little, if any, work…

Visit hongkiat.com for full content.

How to Replace Redux with React Hooks and the Context API

/0 Comments/in /by

Original Source: https://www.sitepoint.com/replace-redux-react-hooks-context-api/?utm_source=rss

The most popular way to handle shared application state in React is using a framework such as Redux. Quite recently, the React team introduced several new features which include React Hooks and the Context API. These two features effectively eliminated a lot of challenges that developers of large React projects have been facing. One of the biggest problems was ‘prop drilling’ which was common with nested components. The solution was to use a state management library like Redux. This, unfortunately, came with the expense of writing boilerplate code — but now, it’s possible to replace Redux with React Hooks and the Context API.

In this article, you are going to learn a new way of handling state in your React projects, without writing excessive code or installing a bunch of libraries — as is the case with Redux. React hooks allow you to use local state inside of function components, while the Context API allows you to share state with other components.

Prerequisites

In order to follow along with this tutorial, you will need to have a good foundation in the following topics:

Getting Started with React
Your First Week with React
React Hooks
Foundation in Redux

The technique you will learn here is based on patterns that were introduced in Redux. This means you need to have a firm understanding of reducers and actions before proceeding. I am currently using Visual Studio Code, which seems to be the most popular code editor right now (especially for JavaScript developers). If you are on Windows, I would recommend you install Git Bash. Use the Git Bash terminal to perform all commands provided in this tutorial. Cmder is also a good terminal capable of executing most Linux commands on Windows.

You can access the complete project used in this tutorial for this GitHub Repository.

About the New State Management Technique

There are two types of state that we need to deal with in React projects:

Continue reading
How to Replace Redux with React Hooks and the Context API
on SitePoint.

Collective #607

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/tympanus/~3/pL8vip7taSk/

Collective item image
Inspirational Website of the Week: SEMP.AI

The portfolio of Ernesto Aguirre has a super-cool design with a futuristic touch and nice effects.

Get inspired

Collective item image
Our Sponsor
8 Great WordPress Plugins You Need to Try Out Now

There are so many fantastic WordPress plugins on the market. The WordPress plugins we bring you today are the MUST-HAVE tools.

Discover them now

Collective item image
PureCSS Gaze

A pure CSS oil painting by Diana Smith inspired by the Italian Renaissance.

Check it out

Collective item image
Tailblocks

An great project of ready-to-use Tailwind CSS blocks.

Check it out


Responsive web design turns ten

Ethan Marcotte remembers the first article on responsive web design and the history of the term and idea behind it.

Read it

Collective item image
Windups

A really nice typewriter effect library for React.

Check it out

Collective item image
Modern Touch-Friendly Design

Addy Osmani shares what he learned from Steven Hoober about designing for touch interfaces.

Read it

Collective item image
Today’s Javascript, from an outsider’s perspective

Lea Verou writes about how difficult the experience with today’s JavaScript workflow can be for novices.

Read it

Collective item image
Untools

A collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

Check it out

Collective item image
CSS-only Slide-up Caption Hover Effect

Michelle Barker shows how to create a caption transition for an image. If you enjoy this, you might also like these demos on Codrops.

Check it out

Collective item image
RoughNotation

A small JavaScript library to create and animate hand-drawn annotations on a web page.

Check it out

Collective item image
Figma Plugins

Some great insight into Figma plugins by Varun Vachhar.

Read it

Collective item image
On fixed elements and backgrounds

Chen Hui Jing dives into containing blocks, rendering and scroll performance.

Read it

Collective item image
The Git Commit Hash

Mike Street writes about the magic 40 character string that is attached to every commit you do.

Read it

Collective item image
Boids

Marius Ballot made this wonderful boid simulation with Three.js.

Check it out

Collective item image
Ask an expert: Why is CSS …the way it is?

Chris Lilley unpacks the histories and mysteries of CSS in this great article.

Read it

Collective item image
Here’s what I didn’t know about “content”

Manuel Matuzovi? is sharing what he I didn’t know about the ‘content’ property.

Read it

Collective item image
Sorted CSS Colors

A tool to sort the named CSS colors for showing related colors together.

Check it out

Collective item image
Free Font: Ephemera

Inspired by ephemera from the printing tradition, Barrett Reid-Maroney designed this font.

Check it out

Collective item image
Single div CSS �Six�

A great single-div demo by Lynn Fisher.

Check it out

Collective item image
Safe/unsafe alignment in CSS flexbox

Learn how safe alignment can prevent data loss in CSS flexbox layouts.

Read it

Collective item image
Water

A lovely water effect demo made by Kasper De Bruyne.

Check it out

Collective item image
Svelte, why so much hype?

In this article, Anthony Le Goas answers some questions related to Svelte.

Read it

Collective item image
Web Engine Diversity and Ecosystem Health

Brian Kardell argues that we actually have a very healthy and open web ecosystem.

Read it

Collective item image
Browsers are not rendering engines

Stuart Langridge’s perspective on the narrative of Brian Kardell’s article on the web ecosystem.

Read it

Collective item image
Htmx

Htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

Check it out

Collective item image
The Buggiest Site On The Web

Check out the horror in your browser’s developer console.

Check it out

Collective item image
From Our Blog
An Infinitely Scrollable Vertical Menu

A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.

Check it out

The post Collective #607 appeared first on Codrops.

Free Vector Tech Illustrations You Can Download, Edit, & Use

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/-CNh3cP3KK4/

Today we are sharing five free vector tech illustrations that you can download and use in your commercial or personal projects without any limitations. Included in the download is an Adobe Illustrator file that you can use to customize colors, add your own elements, or edit in any other way you desire. High resolution exported JPG files are also included.

These vector tech illustrations were created specifically for 1stWebDesigner readers and cannot be found anywhere else, so you can use them knowing that you will be among a select number of designers who have access to them. We always enjoy giving something back to all of our loyal followers and readers, so we created these free vector tech illustrations just for you!

All The Best Procreate Brushes
Unlimited Downloads: Hundreds of Procreate Brushes For Your Designs

Envato Elements - Procreate Brushes
DOWNLOAD NOW

Smartwatch

Free Vector Tech Illustrations - Smartwatch

First in our collection of free vector tech illustrations is a pair of hands using a messaging app on a smartwatch. You’ll notice the recurring theme throughout, with the background reflecting what is on the screen in the foreground.

Cell Phone

Free Vector Tech Illustrations - Cell Phone

Next is a familiar scene – “liking” something on an app on a mobile phone. Has anyone ever not done this?

Tablet

Free Vector Tech Illustrations - Tablet

Who hasn’t used a tablet to submit a thumbs up? Here’s a colorful representation of this oft-used action.

 

Laptop

Free Vector Tech Illustrations - Laptop

In this illustration, the user is checking statistics of some type on a laptop. You could use this to represent almost any type of stat-checking setting.

 

Desktop Computer

Free Vector Tech Illustrations - Desktop Computer

Our fifth and final illustration depicts a pie chart being viewed on a desktop computer.

Ready To Download & Use These 5 Free Vector Tech Illustrations?

Go for it! We hope you have fun with and enjoy utilizing these illustrations in your projects. Keep following 1stWebDesigner so you don’t miss out on future freebies, along with everything else we have to offer.

Download Illustrations

 

 


Creatives stand with the black community in the fight against racism

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/P_1EolsMzBg/black-lives-matter-creative-community

As protests in the US continue over the brutal killing of George Floyd by Minneapolis police officers, creatives across the globe are showing solidarity for the Black Lives Matter movement. While some highlight the cause through moving tributes to Floyd, others are harnessing their positions to make positive moves to amplify black people in the creative industries.

In this article, we have examples of both – but must emphasise that this is a starting point. Our commitment to cultivate change will ensure we continue to amplify black voices to help make Creative Bloq and the creative industry as a whole a more inclusive space for black communities. We all need to triple our efforts to support black creatives, starting now. 

Please feel free to get in touch with any suggestions or relevant news – we plan to keep this page regularly updated. Let's start with a list of some very worthy causes that are working right now in this fight.

Where you can donate

Official George Floyd Memorial FundBlack Lives MatterMinnesota Freedom FundShow racism the red card (UK)Resourcing racial justice (UK)
Black Lives Matter: Portfolio reviews

A number of artists and designers have taken to social media to offer support to black artists in the form of portfolio reviews. 

Black Lives Matter: George Floyd tributes

Below are some examples of artists across the world who have responded to the death of George Floyd, producing work in support of Black Lives Matter.