Web Design Weekly #326

Headlines

Building the Google Photos Web UI

A technical write up about how they Google Photos team solved various challenges, and a peek under the hood of how the web version of Google Photos works. Awesome read. (medium.com)

The Speed Update is now rolling out for all users. (googleblog.com)

Sponsor Web Design Weekly and reach over 30,294 passionate designers and developers

Articles

Defining Component APIs in React

If you spend anytime working with React this post by Brent Jackson is a worthy read. Brent shares a collection of thoughts, opinions, and advice for defining component APIs that are meant to be more flexible, composable, and easier to understand. (jxnblk.com)

Position, Position, Position

Ryan Singer from Basecamp explains that focusing on individual features and experiences is good, but you should never forget about the position you’re trying to hold. A great read for those interested in design strategy. (signalvnoise.com)

Delivering WordPress in 7KB

Do you think about your carbon footprint in relation to the things you are developing? This post by Jack Lenox might change that thinking. (css-tricks.com)

Goodbye Microservices

Segment’s story of how they took a step back and embraced an approach that aligned well with their product requirements and needs of the team. (segment.com)

Pattern Library First: An Approach For Managing CSS

CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, Rachel Andrew takes a look at using Fractal to manage components which use CSS Grid. (smashingmagazine.com)

What kind of ethics do front-end developers need?

Hidde de Vries has put together some great words on how we can apply ethics to our work by having an ethical mindset when doing our craft. (hiddedevries.nl)

Different views on view-source (christianheilmann.com)

Tools / Resources

What Is Redux: A Designer’s Guide

Do you know Redux’s real power is beyond managing the state? Do you want to design with an understanding of how Redux works in mind? Linton Ye digs deeper into what Redux can do, why it does its things and what the downsides are. (smashingmagazine.com)

Draw inspiration anywhere with Affinity Designer for iPad

The first fully-featured professional vector graphic design app for iPad. Buy now with 30% launch discount. £13.99/$13.99/14,99€ (no subscription). (serif.com)

Web Architecture 101

Jonathan Fulton shares some architecture concepts he wish he’d known when getting started as a web developer (videoblocks.com)

Your Body Text Is Too Smallm (marvelapp.com)

An inside look at Framer X (prototypr.io)

The Now CDN (zeit.co)

Bootstrap 4.1.2 released (getbootstrap.com)

Inspiration

Design Caretaker featuring Charlie Sutton (spec.fm)

Random day in the life of a developer (css-tricks.com)

Jobs

Senior Front End Engineer at Differential

We’re looking for someone with at least 3+ years experience with building out web or mobile front-ends, has experience working with React & React-Native, is familiar with GraphQL, API architecture, and has an exceptional ability to communicate. (differential.com)

Frontend Engineer at Zapier

We’re looking for a Frontend Engineer to join the engineering team at Zapier. Want to create a simple product that allows anyone to do complex, incredible things with the world’s APIs? (zapier.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Font Memory Game — Learn how to recognize typefaces (betterwebtype.com)

The post Web Design Weekly #326 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Building Ethereum DApps: Whitelisting & Testing a Story DAO

In part 3 of this tutorial series on building DApps with Ethereum, we built and deployed our token to the Ethereum testnet Rinkeby. In this part, we’ll start writing the Story DAO code.

We’ll use the conditions laid out in the intro post to guide us.

Contract Outline

Let’s create a new contract, StoryDao.sol, with this skeleton:

pragma solidity ^0.4.24;

import "../node_modules/openzeppelin-solidity/contracts/math/SafeMath.sol";
import "../node_modules/openzeppelin-solidity/contracts/ownership/Ownable.sol";

contract StoryDao is Ownable {
    using SafeMath for uint256;

    mapping(address => bool) whitelist;
    uint256 public whitelistedNumber = 0;
    mapping(address => bool) blacklist;
    event Whitelisted(address addr, bool status);
    event Blacklisted(address addr, bool status);

    uint256 public daofee = 100; // hundredths of a percent, i.e. 100 is 1%
    uint256 public whitelistfee = 10000000000000000; // in Wei, this is 0.01 ether

    event SubmissionCommissionChanged(uint256 newFee);
    event WhitelistFeeChanged(uint256 newFee);

    uint256 public durationDays = 21; // duration of story's chapter in days
    uint256 public durationSubmissions = 1000; // duration of story's chapter in entries

    function changedaofee(uint256 _fee) onlyOwner external {
        require(_fee < daofee, "New fee must be lower than old fee.");
        daofee = _fee;
        emit SubmissionCommissionChanged(_fee);
    }

    function changewhitelistfee(uint256 _fee) onlyOwner external {
        require(_fee < whitelistfee, "New fee must be lower than old fee.");
        whitelistfee = _fee;
        emit WhitelistFeeChanged(_fee);
    }

    function lowerSubmissionFee(uint256 _fee) onlyOwner external {
        require(_fee < submissionZeroFee, "New fee must be lower than old fee.");
        submissionZeroFee = _fee;
        emit SubmissionFeeChanged(_fee);
    }

    function changeDurationDays(uint256 _days) onlyOwner external {
        require(_days >= 1);
        durationDays = _days;
    }

    function changeDurationSubmissions(uint256 _subs) onlyOwner external {
        require(_subs > 99);
        durationSubmissions = _subs;
    }
}

We’re importing SafeMath to have safe calculations again, but this time we’re also using Zeppelin’s Ownable contract, which lets someone “own” the story and execute certain admin-only functions. Simply saying that our StoryDao is Ownable is enough; feel free to inspect the contract to see how it works.

We also use the onlyOwner modifier from this contract. Function modifiers are basically extensions, plugins for functions. The onlyOwner modifier looks like this:

modifier onlyOwner() {
  require(msg.sender == owner);
  _;
}

When onlyOwner is added to a function, then that function’s body is pasted into the part where the _; part is, and everything before it executes first. So by using this modifier, the function automatically checks if the message sender is also the owner of the contract and then continues as usual if so. If not, it crashes.

By using the onlyOwner modifier on the functions that change the fees and other parameters of our story DAO, we make sure that only the admin can do these changes.

The post Building Ethereum DApps: Whitelisting & Testing a Story DAO appeared first on SitePoint.

by Bruno Skvorc via SitePoint

3 Handy New Features in Chrome DevTools

Galpop : jQuery Image Gallery Plugin

Galpop is a jQuery plugin that creates image galleries. It can be controlled with the left and right arrow keys and automatically resizes with your browser.

Features:

• Resizes with your browser
• Can use arrow keys for controls
• Callbacks after every image is loaded
• Backgrounds and borders can be easily changed with CSS

The post Galpop : jQuery Image Gallery Plugin appeared first on Best jQuery.

by Admin via Best jQuery

JavaScript Magic Wand Tool

Magic wand tool (fuzzy selection) by color for Javascript.

The post JavaScript Magic Wand Tool appeared first on Best jQuery.

by Admin via Best jQuery

Epicurrence No.7

Where to start?! Dann Petty is back with another awesome Epicurrence event and of course announced on an even more awesome One Page website. The design just oozes style from the unique button hover effects, slick parallax scrolling, beautiful color scheme and gorgeous illustrations. Really love how they added inline credits to certain elements in the page that link out to the relevant designer or developer. Here are the previous Epicurrence One Page websites if you missed them.

Full Review | Direct Link

by Rob Hope @robhope via One Page Love

Mohua Wines

Multi-scrolling One Pager with a centrally-divided layout for Mohua Wines. Lovely touch with the videos among the image blocks in the Experience section.

Full Review | Direct Link

by Rob Hope @robhope via One Page Love