Issue #282 (CSSOM, Productivity, React, Vue)12/13/18
Aim High with Top Freelancers!
It’s easy to take your project to the next level with Kwork. Engage real pros in web development, design, audio, and video, an SEO specialist, sales expert or content writer. We have everything you need to grow your business. Your $5 promo code - Kwork927.
Join us now!
|
|
In a few intros of this newsletter I've included some tips on how to manipulate stylesheets with JavaScript using the CSS Object Model (CSSOM). I originally planned to include more such tips but the more I fiddled around with and researched the CSSOM, the more I realized there's so much there. It's a big API and there's a lot you can do.
Eventually my research turned into a full article that's been published this week on CSS-Tricks:
The article starts by discussing some well-known stuff like the style property and getComputedStyle() and then moves on to more obscure features like the ability to read and manipulate external stylesheets the same way we would with DOM scripting.
In addition, I've included more than two dozen interactive CodePen demos so you can fiddle around with all the different features.
It's a bit of a hefty article, but I think it's a good starting point for those not very knowledgeable about the CSSOM while providing lots of depth for those who only know a little bit about it.
So check out the article if you haven't done so yet.
Now on to this week's tools!
|
Productivity Tools
Aim High with Top Freelancers!
It’s easy to take your project to the next level with Kwork. Engage real pros in web development, design, audio, and video, an SEO specialist, sales expert or content writer. We have everything you need to grow your business. Your $5 promo code - Kwork927. sponsored
DueFocus
Create estimates, track and log time, plan your day, and automatically sync with your project management tool within a single dashboard.
Console Recorder for AWS
Records actions made in the AWS Management Console and outputs the equivalent CLI/SDK commands and CloudFormation/Terraform templates.
new-computer
An extremely opinionated and highly personalized script to set up a new Mac machine, just the way this developer likes it.
Minimo
An elegant, simplified new tab page. Useful information at a glance, shortcuts to your favorite websites, and synced tabs from your mobile devices.
Flowy
A small WorkFlowy clone that allows you to organize your life into lists and sublists. Works offline.
Pennywise
Opens any website or media in a small floating window that remains on top of all other applications. Windows stays up all the time. No need to keep struggling with alt + tab, makes multitasking easy.
Eternity
Chrome extension. Keep track of your growth with progress bars! Replace the new tab page with (fun and colorful) motivation. See exactly what % of the day, week, month, and year has progressed.
Alfred
Award-winning macOS app that boosts your efficiency with hotkeys, keywords, text expansion, and more.
LipSurf
Chrome extension that allows you to control the browser with your voice. Great for browsing while you eat or your hands are busy.
|
|
Recommended Courses by Wes Bos:
|
React Tools
React Timeline 9000
A performance focused timeline component for React.
react-color-extractor
A React component that extracts colors from an image.
React Checkbox Tree
A feature-rich React component for a checkbox treeview (similar to a native OS folder list).
React Minimal Pie Chart
Lightweight React SVG pie charts, with versatile options and CSS animation included.
ok-mdx
Browser-based MDX editor. Great for documentation, building demos, or quickly prototyping with React components, without the need to set up a full-blown React application.
React C2C
Performant and lightweight copy to clipboard component for React apps.
react-compound-slider
A tiny (5kb) React range slider component with no opinion about markup or styles.
epita✞h
Compose render props imperatively with async/await/CPS kinda sugar.
React JavaScript to TypeScript Transform
Transforms React code written in JavaScript to TypeScript.
with-url-state
Lift a React component's state into the URL.
|
|
Recommended Reading for Developers
|
Vue.js Tools
Dao Style
A high quality component library built on Vue.js.
Eagle.js
A slideshow framework for hackers. Slideshow system built on top of the Vue.js and supports animations, themes, and interactive widgets (for web demos).
vue-i18n-service
The translation team wants a file with all the keys to translate. The developer wants multiple components. This is a solution to that problem.
tiptap
A renderless rich text editor for Vue.js based on Prosemirror and you can easily add custom nodes as Vue components.
Vue CLI
Now at version 3+ (details). Standard tooling for Vue.js development.
Pdfvuer
A PDF viewer for Vue using Mozilla's PDF.js.
Nuxt.js
Now at version 2+ (details). A minimal framework for creating Vue.js applications with server side rendering, code-splitting, hot-reloading, static generation, and more.
|
A Tweet for Thought
npm install. This is just so perfect.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Hacklily is like JSFiddle but for sheet music.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
