Wednesday, February 5

Web Tricks

Web Tricks

Using Google’s Flutter For Truly Cross-Platform Mobile Development

Using Google’s Flutter For Truly Cross-Platform Mobile DevelopmentUsing Google’s Flutter For Truly Cross-Platform Mobile Development Mike Bluestein 2018-06-21T12:45:08+02:00 2018-07-10T16:18:00+00:00 Flutter is an open-source, cross-platform mobile development framework from Google. It allows high-performance, beautiful applications to be built for iOS and Android from a single code base. It is also the development platform for Google’s upcoming Fuchsia operating system. Additionally, it is architected in a way that it can be brought to other platforms, via custom Flutter engine embedders. Why Flutter was Created And Why You Should Use It Cross-platform toolk...
Web Tricks

Building a Fancy Countdown Timer with MomentumSlider.js

Nowadays there are many Javascript libraries to make it easy the task of adding sliders to a website. Most have a host of features, to adapt the slider to the particular needs of each case. However, despite having so many functionalities, sometimes the sliders lack features that would result in a much better user experience. In the case of sliders that implemented the drag and drop functionality, it is hard to see how almost none (not to be absolute) implements the ability to continue the movement that the user has started, adding momentum and deceleration as necessary. In this tutorial we will introduce a new library, specifically to develop sliders with momentum in a simple way. Also we will create a fancy countdown timer, using this excellent design by Oleg Frolov as inspiration: The f...
Web Tricks

Don’t Use The Placeholder Attribute

Don’t Use The Placeholder AttributeDon’t Use The Placeholder Attribute Eric Bailey 2018-06-20T13:45:26+02:00 2018-06-20T16:37:38+00:00 Introduced as part of the HTML5 specification, the placeholder attribute “represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.” This seemingly straightforward attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Hopefully, I can convince you to stop using it. Technically Correct Inputs are the gates through which nearly all e-commerce...
Web Tricks

Turbocharge your DevOps workflow by incorporating databases changes

Accelerate DevOps Momentum by Incorporating Database Changes Surveys indicate you're probably under serious pressure to deploy new releases and application changes at a rapid pace. Many organizations like yours have adopted or are planning to implement DevOps within the next year. But when application updates require Oracle database changes, the DevOps pipeline screeches to a halt. The traditional Oracle database change management process creates a major bottleneck in the agile DevOps workflow. It's time for a better approach. Database, get ready to join the DevOps party! How can you make your database development more agile and responsive to changes? What if you could bring database development into the DevOps process via Continuous Database Integration? Imagine if you could: Ensure all t...
Web Tricks

Debugging JavaScript in Google Chrome and Visual Studio Code

Learning to debug is an essential skill for taking the next step as a developer. It's important to understand and leverage the vast array of tools that exist for a given languge. Unfortunately, debugging might not seem as obvious when working with JavaScript outside of a full-fledged IDE. At least not initially. Let's take a look at getting started debugging JavaScript in the Google Chrome Dev Tools as well as my favorite text editor for Web Development, Visual Studio Code. Watch on YouTube https://youtu.be/AX7uybwukkk TLDR - Debugging JavaScript in Chrome? Open the 'Sources' tab Inspect code Set breakpoints, inspect variables, etc. TLDR - Debugging JavaScript in Visual Studio Code? Download the Debugger for Chrome extension Create Debug configuration Launch Debug configuration Set breakpo...
How To Speed Up The Wireframing Process With Photoshop And Adobe XD
Web Tricks

How To Speed Up The Wireframing Process With Photoshop And Adobe XD

How To Speed Up The Wireframing Process With Photoshop And Adobe XDHow To Speed Up The Wireframing Process With Photoshop And Adobe XD Manuela Langella 2018-06-19T15:45:38+02:00 2018-06-19T14:36:53+00:00 Before starting any design project, there is one word that is sure follow you from the very beginning: wireframing. Today, we will learn how to create a wireframe in Adobe XD and how to implement some graphics from Photoshop just by using libraries. But first, what exactly is a wireframe? A wireframe is a visual representation of your project’s structure. It defines the bones, the elements that will work in your layout, and the placement of the content for yo...
Website Pop-Ups: The Good, the Bad, and 18 Rules You Should Never Break
Web Tricks

Website Pop-Ups: The Good, the Bad, and 18 Rules You Should Never Break

A website is a place where a business can educate its audience about its brand. What it does. Why it does it. What they’ll get out of being there. That, in and of itself, is a lot of information. When designing a website for your clients, the last thing you want is to overdo it. The web is not a place for excess and its users typically don’t have the patience to sift through pages and pages stuffed full of information just to get to the relevant bits. That’s why minimalism will endure as a design trend. It allows web designers to convey a lot about a brand and its message, without having to spell it all out on the page. It gives brands a cleaner, more buttoned-up look while also clearing a path to conversion for visitors. But just because you design with simplicity and minimalism in mind,...
BEM For Beginners: Why You Need BEM
Web Tricks

BEM For Beginners: Why You Need BEM

BEM For Beginners: Why You Need BEMBEM For Beginners: Why You Need BEM Inna Belaya 2018-06-18T14:00:51+02:00 2018-06-18T15:50:05+00:00 BEM makes your code scalable and reusable, thus increasing productivity and facilitating teamwork. Even if you are the only member of the team, BEM can be useful for you. Nevertheless, many developers believe that such a system approach like BEM puts additional boundaries on their project and makes your project overloaded, cumbersome, and slow. We’ll be collecting all of the main aspects of BEM in a condensed form. This article helps you understand the basic ideas of BEM in just 20 minutes, and to reject prejudices that the sys...
What’s New for Designers, June 2018
Web Tricks

What’s New for Designers, June 2018

No summertime blues here. With so many new tools, the dog days of summer will be filled with playing with new elements and expanding your design portfolio. If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered! Cool Backgrounds Cool Backgrounds is a pretty nifty tool to help you create a trendy background element with color and gradients and shapes. You can create images for blogs, social media and full website designs as well as desktop wallpapers. The options are beautiful without any changes but you can also create customizations in the still, and animated, background options. Just make what you like in-browser and downlo...
Popular Design News of the Week: June 11, 2018 – June 17, 2018
Web Tricks

Popular Design News of the Week: June 11, 2018 – June 17, 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. 3 Super Useful Color Tools for UI Design   How to Make Trustworthy Apps, When no One Trusts Tech Anymore   250 Essential Icons   The New Design Tools on the Block   Design Trend: Sl...
4 Ways to Improve Your Site’s Content
Web Tricks

4 Ways to Improve Your Site’s Content

“Why isn’t my site ranking in searches? Why has traffic not improved since we hired you? Calls from customers are actually down… do you even know what you’re doing?!” Ah…the music of irate customers, whose site you have lovingly designed and crafted only to see it filled with insipid writing so bad and error strewn, that it is actually putting customers off the company. The Internet is still littered with examples of slick-looking sites filled with terrible copy. These sites will never generate decent results, and more often than not the owners will hold the web designer responsible. Explaining this to them diplomatically is hard enough. But what you really need to do is turn the situation around so that you have another high-performing site to your name, and another happy customer’s test...
6 Bedrooms Inspired by Tech Giants
Web Tricks

6 Bedrooms Inspired by Tech Giants

Consumers and designers alike look to giants of any industry for inspiration. Often times, the inspiration has to do with the specific product the company develops. In the tech world, there a quite a few giants that inspire us everyday with their new and groundbreaking gadgets. However, you can draw inspiration from these tech giants in the way you organize your bedroom. Here are six rooms comparemymove.com created inspired by the top tech giants. 1. Facebook This Facebook inspired room looks like the ideal college dorm. It has hints of the Facebook theme colors, but they’re not overwhelming. On the wall in the back, it looks like the owner has had guests write on it, just like you would do on someone’s Facebook wall online. 2. Google Perhaps the most well known name in the tech world, G...
Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications
Web Tricks

Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications

Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push NotificationsMonthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications Anselm Hannemann 2018-06-15T12:32:58+02:00 2018-06-15T13:49:35+00:00 We see complexity in every corner of a web project these days. We’ve read quite a bunch of articles about how complex a specific technology has become, and we discuss this over and over again. Coming from a time where we uploaded websites via FTP and had no git or anything comparable, now living in a time where we have a build system, transpilers, frameworks, tests, and a CI even for the smallest projects, this is eas...
Smashing Book 6 Excerpt: Bringing Personality Back To The Web
Web Tricks

Smashing Book 6 Excerpt: Bringing Personality Back To The Web

Smashing Book 6 Excerpt: Bringing Personality Back To The WebSmashing Book 6 Excerpt: Bringing Personality Back To The Web Vitaly Friedman 2018-06-14T14:40:27+02:00 2018-06-14T17:15:49+00:00 Generic web layouts have become somewhat of a misnomer in conversations circling around web design these days. We’re bored and slightly annoyed by how predictable and uninspired most web experiences have become. Not without reason, though. Every single landing page seems to be a twin of pretty much every other web page. In the header, a compelling hero image with a short main heading is followed by a lengthier subheading. Beneath them, uniform blocks of media objects are a...
WWDC 2018 Diary Of An iOS Developer
Web Tricks

WWDC 2018 Diary Of An iOS Developer

WWDC 2018 Diary Of An iOS DeveloperWWDC 2018 Diary Of An iOS Developer Lou Franco 2018-06-14T13:45:32+02:00 2018-06-14T17:15:49+00:00 The traditional boundaries of summer in the US are Memorial and Labor Day, but iOS developers mark the summer by WWDC and the iPhone release. Even though the weather is cool and rainy this week in NYC, I’m in a summer mood and looking forward to the renewal that summer and WWDC promise. WWDC (Image source) (Large preview) It’s the morning of June 4th, and I’m reviewing my notes from WWDC 2017. Last year, I wrote that ARKit and Core ML were two of the big highlights. It was refreshing to see Apple focus o...