Fresh Resources for Web Designers and Developers (July 2018) | Web Designing
The list has quite an interesting mix of tools ranging from Sketch library by the WordPress community which will allow you to create WordPress interface prototype, a handful of tools extending React.js and Vue.js, and a couple of references to level up your development skills. Let’s check them out.
Read Also: Four Design & Dev Collaboration Tools to Streamline Your Workflow
An all-in-one starter WordPress theme created by Morten Rand-Hendriksenand is equipped with a build process preset using modern tools like Gulp, Babel, ESLint, and Visual Studio Code integration. It will help you create a great WP theme without the hassle of configuring the surrounding development tools.
A framework based on Vue.js to build a cross-platform mobile application that allows you to write your code with Vue.js specification. The tool will compile it to the React Native and do the magic work for you behind the scene with the
vue-native CLI. If you’re already familiar with Vue.js, this could be a suitable framework to build a mobile application.
The folks at 10up have just released SketchPress which is a Sketch template for quickly creating WordPress admin interface mockups and designs. It is packed with common admin UI like the Primary Button, Menu Bar, Dashicons, Metabox, etc. SketchPress is a great companion tool for WordPress developers to align the plugin and theme Settings or Options page with WordPress admin UI.
Docz is a documentation generator based on MDX which was featured in the last round of this series. This tool will allow you to import and include a JSX custom compenent into the mix with Markdown syntax, just like writing a JSX document.
CSS Animation brings the web to life. However, it’s not always easy to compose CSS Animation considering the browser prefixes for compatibility, parameters, and the animation timeframe. Animasta makes this stuff easier by generating the code for you. You can configure animation in a user-friendly interface from where you can simply copy the code.
Read Also: Animate.css – CSS3 Library To Create Animation Easily
A couple of examples of common web layout built using the native CSS Grid and use Flexbox as a fallback for browser that does not support it yet. Check out our post: Introduction to the CSS Grid Layout Module.
A nice tool to generate a box with CSS with a defined ratio, for example,
3:4, etc. The tool will generate the code in SCSS format to copy.
How to GraphQL
GraphQL is an alternative to REST data structure and How to GraphQL is a comprehensive resource to learn it. It is far more efficient than REST since it will only pull the data requested reducing the amount of load and data transfer.
A simple WordPress plugin to show history of activity done in the WordPress dashboard. It supports WordPress native activity such as when a user creates posts and pages, logs-in, and activates or deactivates other plugins. It can also track other plugins activity including Advanced Custom Fields (ACF) and User Switching. This a great plugin to keep track your sites internal activity.
it is a handy utility to share files through the Shell command. You can upload any type of file for up to 10 Gb. It also supports file encryption. And did I mention that it is totally Free?
A tool to debug mobile apps for iOS and Android. The app is equipped with some tools for a convenient debugging experience such as a log viewer, interactive layout inspector, and network inspector. If that’s not enough you can create a plugin to extend the app with the functionality you need.
This app is packed with a bunch of tools to provide a better way to organize your projects. You can create a group, generate a new project using some popular projects like React, Vue, and Angular, install a project dependency, run a Node.js server, and a lot more. A great app for those who manage dozen of projects.
A PHP unit testing utility designed with some specific tools for WordPress. It provides tools that allow to mock PHP functions. It also provides a set of tools out of the box to deal with some WordPress functions like
remove_action to name a few, which are generally
tricky to test.
Read Also: 10 Best Automated Testing Frameworks For PHP
Fractal has been designed to be a central documentation tool for developers within a team to refer when there’s a need to integrate a component into a project. It allows you to integrate code snippet, displaying previews, documentation, notes, etc. of each component.
Ant Design Pro
“AntDesign” is one of the popular UI frameworks based on React.js and this is its “Pro” version designed for enterprise application. It includes several additional components that are not in the AntDesign common package such as AvatarList, HeaderSearch, and TagSelect.
The framework also has built-in development tools like the Build tool, Test Suite, and Deployment so you can work on your code right away rather than wasting time on the workflow configuration.
A handy NPM package to build interactive CLI using Node.js. It supports basic prompt, multiple choices, dynamic prompt and many types of inputs like a password, text, number, and email etc.
A cool WordPress plugin that would improve WordPress Media Library search by classifying images using Google Cloud Vision API. For example, if you have uploaded a “bird” image, you can search the image using the keyword “bird” whether or not the keyword is included to the image name, file name, or the meta data.
A collection of videos, pulled from Youtube, of several developer conferences like JSConf, Google TechTalk, and O’Reilly. Now get your popcorn and level up your Dev skills.
Reactive programming is on the rise; a new paradigm in programming especially around the web where the data stream is abundance and continuously flowing every milliseconds. This resource is an initiative from Cèdric Soulas to teach you the principles of reactive programming.