Original Source: https://www.sitepoint.com/test-string-match-regex-javascript/?utm_source=rss
In this quick JavaScript regex matching guide, you’ll learn how to test if a string matches a regular expression using the test() method.
Continue reading
Quick Tip: Testing if a String Matches a Regex in JavaScript
on SitePoint.
Original Source: https://abduzeedo.com/illustration-collection-celebrate-end-summer
Illustration collection to celebrate the end of the summer
abduzeedo0922—22
Fall is upon us here in the northern hemisphere so it’s a good time to celebrate the end of the summer with a set of amazing illustrations by HELLO KACZI.
For more information make sure to check out HELLO KACZI on:
Behance
Instagram
Original Source: https://abduzeedo.com/brand-identity-ikonic-apparel
Brand identity for IKONIC APPAREL
abduzeedo0921—22
Niklas Hellborg shared a super stylish brand identity project for IKONIC APPAREL a company that handles primarily the sales of NEUW Denim, Human Scales & the authentic British street fashion brand FRED PERRY in Norway. They are apparel pushers, marketeers and retail experts in love with what they do and the brands they market.
For more information make sure to check out Niklas Hellborg on:
Behance
Website
Original Source: https://1stwebdesigner.com/how-to-bolster-your-design-ideas-with-these-unlikely-sources-of-inspiration/
We all know how frustrating it can be to feel creatively stuck. Whether you’re trying to come up with new ideas for a project or simply looking for a fresh perspective, sometimes all it takes is some out-of-the-box thinking to find inspiration to jump start your creativity.
Today, we’ll be covering a few unlikely sources of inspiration that can help you bolster your design ideas. These don’t include the super obvious choices like Awwwards or Best Website Gallery. Instead, these inspiring sources delve into less top-of-mind places and offer creative fuel in less conventional ways.
Enjoy!
Children’s Books
Believe it or not, children’s books can be a great source of inspiration for designers. The vibrant colors and playful illustrations in these books can help spark new ideas and help you see things from a different perspective.
Take a Walk in Nature
There’s no denying that nature is one of the most beautiful things in the world. So why not use it as inspiration for your next design project? From the patterns of leaves to the colors of a sunset, there are endless possibilities when it comes to finding inspiration in nature.
Taking a walk in nature can also help clear your mind and give you some much-needed time to think about your project.
Music
Music may be a wonderful method to stimulate your creative thinking. Music may assist you access your creative side and produce some fantastic design ideas, whether you’re listening to your favorite album or looking at new artists.
Go to an Art Gallery or Museum
Viewing art can also be a great way to get inspired. Whether you’re visiting a museum or simply looking at paintings online, observing other artists’ work can help you see things in a new light and come up with some fresh ideas for your own projects.
Go to an Antique Store or Vintage Shop
If you’re looking for some unique inspiration, take a trip to an antique store or vintage shop. Surrounded by old items, you may find yourself seeing things in a new way and coming up with some original ideas for your project. You could even browse vintage designs on Etsy to get some inspiration.
Look Through Fashion Magazines
Fashion magazines are another great source of inspiration, especially if you’re working on a design project that involves clothing or accessories. From the latest trends to classic looks, you’ll be sure to find plenty of inspiration in these magazines.
At the very least, you can find some really interesting color palette inspiration in fashion magazines.
Talk to a Friend
Sometimes doing something completely different than the work on hand can clear your mind enough to leave room for fresh inspiration. So go ahead and take a break from your project to chat with a friend. You never know, they may just have the perfect idea for your next great design.
People Watch at Your Local Coffee Shop
Another great way to get inspired is to watch people at your local coffee shop. You never know who or what you’ll see, and you might just come up with some creative ideas for your project by observing the people around you.
Take a Trip
If you’re really feeling stuck, sometimes the best thing to do is take a trip. This doesn’t necessarily mean that you have to go somewhere far away; even taking a day trip to a nearby town can help you clear your mind and come up with some new ideas.
Get Some Sleep
If you’re feeling creatively drained, it might be time to get some sleep. Sometimes all you need is a good night’s rest to recharge your batteries and come up with some great new ideas.
Design Inspiration Can Be Found Almost Anywhere
Whether you’re looking for a fresh perspective or simply trying to get out of a design rut, these ten sources of inspiration can help you bolster your ideas and come up with some truly original designs. So don’t be afraid to explore new places and try new things; you never know where you’ll find your next great idea.
Original Source: https://abduzeedo.com/dhirty-branding-and-packaging-design
DHIRTY — branding and packaging design
abduzeedo0920—22
DHIRTY is a new wave personal hygiene brand for your busy days on the go. Nora Kaszanyi and team designed the products carefully, so they carry a beauty and “self-care” appeal, making the everyday more exciting.
Dreamy scents, elevated aesthetics, dhirty situations.
For more information make sure to check out Nora Kaszanyi on:
Behance
Instagram
Website
Original Source: https://www.webdesignerdepot.com/2022/09/adobe-has-acquired-you/
There were mixed reactions on Thursday morning when Adobe announced it had acquired Figma.
Excited press releases extolling the benefits of the “collaboration” followed the news. Dylan Field, founder and CEO of Figma, said: “There is a huge opportunity for us to accelerate the growth and innovation of the Figma platform with access to Adobe’s technology…”
The reaction from the design community has been a little less enthusiastic.
The problem for the design industry is that we’ve been here before. The acquisition of Macromedia followed a period in which Adobe tried to compete, failed to update its legacy code, lost the battle, and purchased the victor. You only need to look at the number of former Macromedia products in Adobe’s stable (zero) to see where Figma’s heading.
Figma has grown faster than any of its rivals in the last eight years. It is, of course, easier to grow when you start at zero. But there’s no denying Figma is a well-managed business and probably a good investment — if not worth the $20bn that Adobe reportedly paid.
Figma’s technology will give Adobe a leg-up in the collaborative design stakes, where it is clearly lacking. And Adobe’s resources will iron out some of the kinks in Figma, especially around typography, which is, if we’re honest, a bit hacky in places.
Adobe will provide a good home (we hope) for the Figma team, who will have the opportunity for career advancement in a much wider pool of development teams.
And, of course, Figma’s annual revenue will begin to trickle into Adobe’s vault — although it may be some time before it makes a dent in that $20bn hole.
But Adobe didn’t buy Figma for its business model, collaborative technology, team, or revenue stream. Adobe bought Figma’s users, all four million of them.
Adobe‘s approach to design software is upselling. It lures you in with free apps, and when you’re engaged, it integrates them with other parts of its ecosystem until suddenly, without meaning to, you’ve agreed to a Creative Cloud subscription.
Adobe was losing customers to a competitor. And more importantly, due to Figma’s free-use approach for individuals, it was losing young customers to a competitor. If it hadn’t bought Figma, Adobe would have needed to invest heavily in its own products while providing them to freelancers for free; that isn’t viable for a company with as many commitments as Adobe.
Yes, it is entirely accurate to say that competition drives innovation, and with fewer competing apps, there is less need for companies like Adobe to build high-quality, reliable products. However, it is also true to say that a lack of competition creates opportunities for new apps.
Somewhere out there, in a dorm room, or a basement, or on a kitchen table, someone is working on Adobe’s next big acquisition. It’s probably an AR design app; we need a few more of those.
For Figma, the next 12 months will be bright as Adobe works to retain the customers it’s bought. Within five years, you’ll probably need an Adobe Fonts subscription and a Photoshop plugin to use Figma. In ten years, it will be stored in a code archive next to Freehand.
Some designers will turn to Sketch; others will turn to Affinity; some will shrug and keep using Figma; others will shrug and keep using XD.
If an app is intrinsic to your design work, it’s probably time to switch apps. Your skills are transferable. I’ve switched apps many times; some I loved, some I just needed. I’ve never encountered an app that improved my work, although plenty have improved my mood while working.
Figma took a great approach and will continue to be great until it isn’t. Tools come and go, Adobe’s acquisitions team, it appears, is eternal.
Featured image uses photos by Afrika ufundi, Andrea Piacquadio, Andrea Piacquadio, Anna Tarazevich, cottonbro, fauxels, Ketut Subiyanto, Mikhail Nilov, Moose Photos, Pavel Danilyuk, Pavel Danilyuk, Polina Tankilevitch, Tima Miroshnichenko.
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;}
The post Adobe Has Acquired You first appeared on Webdesigner Depot.
Original Source: https://abduzeedo.com/frank-co-premium-literary-service-branding-web-design
Frank & Co, Premium Literary Service — branding & web design
abduzeedo0919—22
Photos are copyright by Parker Blain
Credits
Client: Frank & Co, Premium Literary Service
Scope: Brand Identity, Web Design & Development
Website: frankcoreaders.com
Photography (Folio), Parker Blain
For more information make sure to check out Thought & Found on:
Behance
Instagram: @thought_found
Website
Original Source: https://designrfix.com/reviews/best-high-arc-single-handle-kitchen-faucet
Looking for the best high arc single handle kitchen faucet? There are many choices, but we spent many hours researching all the best models on the market. We narrowed the list by looking for excellent performance products during our search. You’ve come to the right place if you’re after the best product money can buy. … Read more
Original Source: https://ecommerce-platforms.com/articles/delori-theme-review
Delori is a premium Shopify 2.0 theme designed for fashion and clothing eCommerce stores. It’s a popular choice for high fashion brands because it comes with various media-rich tools that make your products pop.
Among other things, it allows online retailers and dropshippers to organize their apparel into collections and product categories and create a product lookbook to bring their brand to the next level. All without having to write a single line of code.
All that to say, if you’re running an online fashion brand (or you’re considering launching one), and you’re in the market for a new Shopify theme, you’re in the right place. Delori could be what you’re looking for.
With that said, this Delori review will explain exactly what features you can expect from this theme. There’s lots to discuss, so let’s dig in.
Delori Theme Review: About Delori
Delori is brought to you by the ecommerce theme developer Zemez and can be purchased via ThemeForest.
As mentioned, Delori is a Shopify 2.0 theme. As such, you can take advantage of Shopify’s drag-and-drop visual builder to create a site unique to your brand. Before 2.0, users were restricted by their theme’s preset layout. But thanks to this upgrade, this is no longer the case. Shopify 2.0 themes empower you to add, rearrange, and remove content from sections throughout your eCommerce website.
For the uninitiated, a Shopify section is a specific area on your web page containing various content blocks. These sections used to be static, so you could only change their content, not where they sat on the page. However, with Delori, you can configure your site pages exactly how you want, unlocking a new level of control over how merchants set the layouts of their stores.
Similarly, you can expand app functionalities over multiple pages and decide where these applications are displayed.
But these aren’t all the features Delori has to offer. So, let’s look at the other features you can expect.
Delori Theme Review: Delori Features
The Delori theme comes with a wide variety of page templates and eCommerce features to help you organize, promote and modify your products.
When it comes to your store’s layout, the Delori theme includes (vie demo here):
8 Home Page Templates
Delori’s home page templates provide plenty of flexibility over how your brand comes across. For instance, each template empowers you to feature different products. You can also add images, videos, and other media to reflect your brand’s aesthetic. Each template also has a search bar so customers can easily find the products they’re interested in.
You can embed content directly from your social media, such as YouTube or Instagram, making Delori an excellent choice for Instagram sellers. You can even embed your entire Instagram shop feed, making it the central focus of your home page.
3 Product Page Templates
From your product pages, customers can view information about your products, including the ability to select different sizes and colors. They can also add the product to their cart.
You can choose from three different layouts and decide how you want your information and images arranged. Each layout allows you to add your social media links and sizing info, and customers can leave reviews.
2 Lookbook Page Templates
The lookbook templates enable you to turn a collection of product photographs into clickable, interactive product highlights. Each image has icons hovering over it that link the different products featured in the picture to the appropriate product page. As a result, if customers like what they see, they can easily click on the item to be taken to the relevant product page and add the item to their cart.
You can choose from a static lookbook where the images link to the product. Alternatively, you can create a lookbook carousel where shoppers can scroll through multiple looks at their leisure. The carousel option is excellent if you want to showcase numerous looks to customers while saving space on your page.
You can also add a scroll bar of recommended products and delivery information. Plus, you can display how many people have recently viewed or purchased the product – this works wonders for establishing credibility and trust with customers via social proof.
Blogging
Delori lets you integrate a blog directly into your store without needing an extension or additional coding. You can post articles and arrange your posts with topic tags. In addition, users can interact with readers by leaving and responding to comments.
Collections Template
Using the collections template, you can group products to highlight related products. This is handy for organizing products into categories and providing customers with a quick overview of the kind of products you sell. Examples of collections you might have for a fashion store include hats, shoes, dresses, etc.
An About Page and Contact Page Template
With Delori, you can bring your brand story to life. You can include a carousel of customer reviews on the about page, embed photos from your Instagram page, and provide fun facts about your business.
Where your contact page is concerned, you can publish professional-looking contact forms that enable shoppers to get in touch with your customer service team.
You can also use various icons to highlight contact information, such as your phone number, email, address, and/or opening times.
Shopify Visual Editor
As we’ve already mentioned, the Delori theme lets you decide where each section goes. This means you can drag and drop sections to configure your layout without any coding. Similarly, you can add content blocks such as customer reviews, images, and apps to any section of your page. Plus, you can easily customize the element’s color, typography, and content style.
On top of that, you can use the mosaic block constructor to simultaneously apply changes to multiple content blocks. The mosaic block constructor is a feature unique to zemez themes.
Dynamic Filtering
Dynamic filtering makes it easy for customers to find your products.
Users can select multiple categories to narrow their search, making finding what they’re looking for much quicker.
More specifically, shoppers can filter their searches by:
PriceProduct typeColor Featured and best-selling productsBrandSize Availability Discounted products
Quick View and Hover
The quick view feature lets customers view product information without having to load the product page.
Instead, when a customer hovers over a product, a little eye icon appears. A brief product description box emerges when a customer clicks the icon.
At this point, it’s worth noting that the Delori theme offers three hover variants that enable you to decide what happens when a user hovers over a product. I.e., add to wishlist, compare items, or enter the quick view. The icon that appears when you hover over the product page will change according to your chosen action.
Wishlist
Product wishlists are another built-in product page, and product listings feature. The wishlist functionality appears as a heart icon over the product. By clicking the icon, customers create a list of their favorite products (known as a wishlist) without adding them to their basket. Customers can then view their wishlist once they’ve logged into the account they’ve created on your website.
Pop-ups
You can set the pop-ups to appear on specific pages, including your home page, when a customer first lands on your site. You can use them to incentivize shoppers to sign up for your mailing list. For instance, you can offer discounts or rewards when customers enter their details into the contact form. You can also customize these pop-ups with your choice of visuals, colors, and text.
SEO
The Delori theme has several built-in SEO features you can make use of, including:
Multilingual support: There’s LTR (left-to-right) and RTL (right-to-left) script compatibility for different languages. Mobile compatibility: The theme is highly adaptable to different device sizes, promising pixel-perfect images for all iOS and Android users.Page speed: Delori has a grade A page speed (91/100 as ranked by Google Insights and a 93/100 by GTmetrix).Navigation: Thanks to dynamic filtering and a clear hierarchy of pages within the Delori theme, customers and the search engine can easily navigate your products and pages.
Delori Theme Review: Integrations
This theme is highly amenable to Shopify’s Instagram integration, allowing you to embed your Instagram content directly onto your web pages.
Moreover, as it’s a Shopify 2.0 theme and you have full control over your store’s layout, you can add Shopify apps without worrying about how they’ll affect your store’s layout.
In addition, a few official integrations come with the Delori Theme, such as Growave and AiTrilliion.
Delori Theme Review: Customer Service
Suppose you encounter any problems with the Delori Theme. In that case, you can contact the Zemez team 24/7 via their contact form, email, phone number, or live chat.
However, you’ll find that most answers are readily available in their extensive knowledge hub. This included self-help resources such as:
BlogShopify guides and tutorials Facebook group forum
Delori Theme Review: Pricing
There are two payment options. Both are one-off payments that unlock all of Delori’s features. The main difference in pricing is whether you intend to sell the website later.
Regular License – $29 (regular price $48)
At the time of writing, the Delori Theme is currently on sale. The first 100 buyers will get it at a discount. The regular license allows you to create one end product (that won’t be sold to someone else) and includes six months of support from the Zemez team.
Extended License – $1500
This pricing tier is for developers who intend to sell their site for a profit. This license enables you to create one customized site that can be sold to multiple end users.
Please note: You’ll need a new license for each custom website you make. So, if you’re planning to create numerous site variations, you’ll need a license for each one.
The plan also includes six months of support from the Zemez team.
Delori Theme Review: FAQs
Before we wrap up this Delori theme review, let’s quickly answer some of the most frequently asked questions about this Shopify theme:
How do you add the Delori Theme to your Shopify store?
Once you’ve purchased the Delori theme, download the file to your computer.Now, head to your Shopify account. Choose the website you wish to apply the theme to and go to the admin page.Click online store, then go to themes.Go to the upload theme window and select ‘choose file.’Find the Delori zip file on your computer and click ‘upload.’
Once you’ve done this, you should be able to find the Delori theme within your Shopify theme library. You can then choose to publish it by selecting ‘publish.’
How do you add an Instagram feed to your Delori theme?
You will need an Instagram account to connect to the Delori Theme.
Go to the app store on your Shopify account.Search and install the “section feed” app.Once installed, you’ll be brought to the admin section of the Instagram feed app.Connect the section feed app to your Instagram account. In configurations, select the Delori Theme from the drop-down menu. Select ‘add feed.’
You’ll now be able to customize your Instagram feed from the sections tab in the Shopify editor. Here you can find more details on how to work with Delori Shopify 2.0 theme.
Delori Theme Review: Our Final Verdict
So, that brings us to the end of our Delori theme review. All in all, we think Delori is an excellent choice for creating a modern Shopify store without the hassle of coding. It’s simple to set up and suitable for both beginners and developers. That said, we think those already selling on Instagram (or are planning to) will be particularly drawn to this Shopify theme because of how easy syncing your Instagram shop is.
That’s enough about our thoughts on the Delori theme; what do you think about it? Tell us your thoughts in the comments box below!
The post Delori Theme Review: Will This Be Your Next Shopify Theme? appeared first on Ecommerce Platforms.
Original Source: https://www.webdesignerdepot.com/2022/09/exciting-new-features-in-safari-16/
Apple has released an OS update. Packaged in with it is the latest version of Safari, 16.
Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.
For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.
Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.
CSS Container Queries
The most exciting addition to Safari 16 is CSS Container Queries.
It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.
Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.
Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.
Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design—all without caring what size the whole viewport is.
This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)
The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.
CSS Subgrid
Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.
CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.
CSS Subgrid is likely to be a practical solution within 18 months.
AVIF Support
AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.
AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.
AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.
Enhanced Animation
Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.
Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.
Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.
Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.
Web Inspector Extensions
Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.
Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.
Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.
Improved Accessibility
Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.
When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.
Further gains in this field mean that Safari continues to be an essential tool for QA tests.
Reduced Resets
Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.
For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.
Safari 16 has reportedly “Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.
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;}
The post Exciting New Features in Safari 16 first appeared on Webdesigner Depot.
