Web Tricks Archives - Page 12 of 27

3Sep

By phpInfoNo Comments

Web Tricks

20 Best New Portfolios, September 2018

Hello Readers. It’s September, so as soon as your kids are off to school, maybe you can finally have a five-minute power nap. Take that power nap with equal parts gusto and relief, dear Reader. You’ve earned it. Last month, one of you asked for less “ultra-modern” designs, and the design gods have seen fit to provide. We still have some of that ultra-modern goodness — because apparently now that it’s been started, we can’t make it stop — but I managed to find and sprinkle in a few more classic-feeling designs. Enjoy. Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at al...

Popular Design News of the Week: August 27, 2018 – September 2, 2018

2Sep

By phpInfoNo Comments

Web Tricks

Popular Design News of the Week: August 27, 2018 – September 2, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. 21 CSS Animation Examples Google is Rolling Out a New Chrome Design Across all OSs Next Month 7 CSS Dividers Why your Static Websit...

31Aug

By phpInfoNo Comments

Web Tricks

Build Your First App with React's Context API

One of React's latest features is the Context API. Up until now, Context within React has been somewhat experimental, but still used in quite a few popular libraries, like Redux and React Router. There are plenty of ways to avoid using Context, but sometimes it can be really useful. One really good use case for Context is keeping track of authentication. In fact, React's official documentation for the Context API mentions it can be used for authentication. Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. The examples in their documentation are helpful, but they don't actually include an example of sharing the authenticated user. I'll show you here how one way to use the ...

31Aug

By phpInfoNo Comments

CSS Tricks, Web Tricks

Props and PropTypes in React

React encourages developers to build by breaking a UI up into components. This means there will always be a need to pass data from one component to another — more specifically, from parent to child component — since we’re stitching them together and they rely on one another. React calls the data passed between components props and we’re going to look into those in great detail. And, since we’re talking about props, any post on the topic would be incomplete without looking at PropTypes because they ensure that components are passing the right data needed for the job. With that, let’s unpack these essential but loaded terms together. Props: The data being passed around Basically, props are what make React the tool that it is. React was designed to break things down into pie...

A Brief Guide About Competitive Analysis

30Aug

By phpInfoNo Comments

Web Tricks

A Brief Guide About Competitive Analysis

In this article, I will introduce the subject of competitive analysis, which is basically a method to determine how well your competitors are performing. My aim is to introduce the subject to those of you who are new to the concept. It should be useful if you are new to product design, UX, interaction or digital design, or if you have experience in these fields but have not performed a competitive analysis before. No prior knowledge of the topic is needed because I’ll be explaining what the term means and how to perform a competitive analysis as we go. I am assuming some basic knowledge of the design process and UX research, but I’ll provide plenty of practical examples and reference links to help with any terms and concepts you might be unfamiliar with. Competitive Analysis,...

How to Launch Your E-Commerce Empire for $100 (or Less)

30Aug

By phpInfoNo Comments

Web Tricks

How to Launch Your E-Commerce Empire for $100 (or Less)

No, it’s not a clickbait title and yes, starting with $100 can get you an actual running store. In this article I’ll go through every step you need to take to get your store up and running and explain the costs involved. Granted, to keep the costs down you’ll do all the heavy lifting but hey, nothing worthwhile ever comes easy so let’s dive right in… 1. The Product It might feel odd for some that I would go about explaining how to launch a $100 store and start with the product but truth is, the site, domain, logo everything needs to be tailored to fit the product you are trying to sell. The success or failure of your business will rely on your ability to select the correct product and the right market so don’t skip over this step. Here’s a quick way to validate your idea: Go to ...

29Aug

By phpInfoNo Comments

Web Tricks

Building A Room Detector For IoT Devices On Mac OS

Knowing which room you’re in enables various IoT applications — from turning on the light to changing TV channels. So, how can we detect the moment you and your phone are in the kitchen, or bedroom, or living room? With today’s commodity hardware, there are a myriad of possibilities: One solution is to equip each room with a bluetooth device. Once your phone is within range of a bluetooth device, your phone will know which room it is, based on the bluetooth device. However, maintaining an array of Bluetooth devices is significant overhead — from replacing batteries to replacing dysfunctional devices. Additionally, proximity to the Bluetooth device is not always the answer: if you’re in the living room, by the wall shared with the kitchen, your kitchen appliances should not start churnin...

29Aug

By phpInfoNo Comments

Web Tricks

5 Ways to Cleanse Your Design Palate

Much is made of the need for inspiration in design work. While most of a designer’s job is sweating the details, we all still need that little spark to get us going. We need (or at least enjoy having) that one initial idea or concept to get us started on the path to design greatness. And so we binge. We read articles that show off cool things other people have designed, watch videos of new and innovative products being unveiled, and generally seek that spark. The only problem with this process is that in our haste to be inspired, our good ideas can sometimes be obscured by everything else that’s already in our brains. Unless things have gone very wrong, our thoughts generally don’t happen in a vacuum. Our minds are filled to the brim with our daily tasks, our relationships, and most ...

28Aug

By phpInfoNo Comments

Web Tricks

Announcing Scotch v8! Our Biggest Upgrade Ever

I've been waiting to write this post for a very very very long time. Work on this v8 site started in February of this year. This is version 8 in the 4.5 years we've been in existence. Rebuilding Scotch has always been a fun project for me. Getting to try all the latest and greatest toys in a site. Aside from trying new toys though, here's the main reasons I decided to start another new site: Site speed was slow for international users Since our servers live in New York, we saw site loading speeds of 5-10 seconds. For international users however, they were seeing a 20+ second load time. Unacceptable! Finding content was difficult We now have over 400+ guest authors. We were often publishing these amazing articles and then seeing them get buried down the feed. On top of that, our site searc...

28Aug

By phpInfoNo Comments

Web Tricks

Best Practices For Mobile Form Design

Best Practices For Mobile Form DesignBest Practices For Mobile Form Design Nick Babich 2018-08-28T16:00:09+02:00 2018-08-28T21:57:21+00:00 (This article is kindly sponsored by Adobe.) Forms are the linchpin of all mobile interactions; it stands between the person and what they're looking for. Every day, we use forms for essential online activities. Recall the last time you bought a ticket, booked a hotel room or made a purchase online — most probably those interactions contained a step with filling out a form. Forms are just a means to an end. Users should be able to complete them quickly and without confusion. In this article, you’ll learn practical technique...

Beyond Blogging: Guest Slots & Thought Leadership

28Aug

By phpInfoNo Comments

Web Tricks

Beyond Blogging: Guest Slots & Thought Leadership

Including high quality blogs and other forms of useful, interesting content is a great way to boost SEO and encourage repeat visits to a website. However, with everyone playing the same game, getting visitors flowing to a new site can still be touch and go — even if you do everything right. Increasingly, targeted advertising on Google and social media helps bring new eyes to every lovingly crafted website, and companies relying purely on SEO struggle. The drawback is that this puts a business’ hard-earned cash straight into the pocket of the Internet giants. That’s why they’re worth billions while small businesses struggle. There is a way, however, to get free advertising and introduce thousands of new surfers to your site: by guest blogging, you can showcase yourself — and by extension y...

27Aug

By phpInfoNo Comments

Web Tricks

Building a React Native app as a Designer using BuilderX

BuilderX is a screen design tool that codes React Native* for you. It generates beautiful, readable and editable code for the designs. Just design the components in your app, or import your Sketch file and it generates the corresponding code. You can hop between design and code with just a click owing to the amazing bi-directional flow in BuilderX. The Problem It’s 2018, and Designers and Developers still don’t speak the same language. There is still a huge gap between the Design and Development phase. Designers and Developers work on different workspaces, tools, and most importantly, file formats. BuilderX is a revolutionary tool that seamlessly bridges this gap. First, you will need to install BuilderX. Just go to builderx.io and install BuilderX. BuilderX Interface BuilderX workspace i...

UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)

27Aug

By phpInfoNo Comments

Web Tricks

UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)

UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2) Stéphanie Walter 2018-08-27T14:00:31+02:00 2018-08-27T20:14:44+00:00 In this second part, I want to focus more on mobile-specific capabilities. HTML5, for instance, has brought us a lot of really cool features to help users fill in mobile forms and format their data. We will see in detail how HTML5 attributes can help you with that. Then, we will go beyond “classic” form elements and see how to use mobile capabilities such as the camera, geolocation and fingerprint scanners to really take your mobile form experience to the next level ...

3 Essential Design Trends, September 2018

27Aug

By phpInfoNo Comments

Web Tricks

3 Essential Design Trends, September 2018

While this tends to be the time of year when things start to slow a bit in the design world, there are still trends that are worth paying attention to as you plan future projects. One element that stands out quite distinctly is the use of the color purple in projects. This trend deserves a mention of its own (see No. 3) but also note the use of the color in examples from other projects in the other featured trends as well. Here’s what’s trending in design this month: 1. Elaborate Illustrations There’s just something about an elaborate illustration that draws the eye into a design. There’s a need to see all of the details and understand the intricacy of each line. Whether it’s a “designer thing” or not, illustrations are an interesting way to draw users into a website design. The more elab...

Popular Design News of the Week: August 20, 2018 – August 26, 2018

26Aug

By phpInfoNo Comments

Web Tricks

Popular Design News of the Week: August 20, 2018 – August 26, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. The Case for Slow Design Why We Redesigned Our Website … Again Ode to Gray Introducing Ghost 2.0 WordPress is at a Crossroads How to Grow as a Junior UI Designer Thing...