frontend-tech

Burke Knows Words

Introducing React Food Truck – Burke Knows Words

There are many important questions to ask when you are building an application. Questions like: “Who are the users?”, “What browser will…

marketplace.visualstudio.com

React Pure To Class - Visual Studio Marketplace

Extension for Visual Studio Code - Convert pure react components to class components

Medium

Coyoneda in JS – Brian Lonsdorf – Medium

“Coyoneda in JS” is published by Brian Lonsdorf

GitHub

reactopt/reactopt

reactopt - A CLI React performance optimization tool that identifies potential unnecessary re-rendering

GitHub

ianstormtaylor/superstruct

superstruct - A simple and composable way to validate data in Javascript.

haltu.github.io

Muuri - Responsive, sortable, filterable and draggable grid layouts

Muuri is a JavaScript library that creates responsive, sortable, filterable and draggable grid layouts.

GitHub

diit/overtime-cli

overtime-cli - Easy time-overlap tables for remote teams.

twitter

:atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift: Here's my big announcement! My <https://twitter.com/eggheadio|@eggheadio> courses have been published and are totally FREE! “Learn React Fundamentals and Advanced Patterns” <https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db> :atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift:

twitter

:heart_eyes::heart_eyes::heart_eyes::heart_eyes: On the 4th day of #webpack #JavaScript Christmas, our team gave to you! :heart::heart::heart::heart::heart::heart::heart: #webpack 4.0.0-alpha.0 :heart::heart::heart::heart::heart::heart::heart: All hands on deck, we'd love as much testing and feedback as possible. Please RT for coverage!!! SO MUCH TO TRY OUT!!!!!! <https://pbs.twimg.com/media/DQOnllZU8AA60Sa.jpg>

<https://pbs.twimg.com/media/DQOnoEbUIAAXOMd.jpg>

<https://pbs.twimg.com/media/DQOnqcbVoAARtiO.jpg>

<https://pbs.twimg.com/media/DQOnvhtVoAA-UUn.jpg>

Hacker Noon

Curry away in React – Hacker Noon

So you’re going to build the next-gen eCommerce company selling dog supplies and you’ve decided to use React to build it with coz, you know…

stephendiehl.com

Reflecting on Haskell in 2017

{{description}}

GitHub

appier/create-react-app

create-react-app - Create React apps with no build configuration.

GitHub

prettier/prettier

prettier - Prettier is an opinionated code formatter.

twitter

#webpack 4 release will be somewhere around February - March 2018. Release Candidate will be at least 1 months before release. With the RC we will announce the final release date.

twitter

:package::rocket: Super excited to announce Parcel: A blazing fast, zero configuration web application bundler! :computer: Github: <https://github.com/parcel-bundler/parcel> :earth_americas: Website: <https://parceljs.org> :memo: Background: <https://medium.com/@devongovett/announcing-parcel-a-blazing-fast-zero-configuration-web-application-bundler-feac43aac0f1> <https://pbs.twimg.com/media/DQS-1-bUQAE7nVb.jpg>

twitter

#RxJS 5.5.4 has been released. Resolves a couple of regressions caused in 5.5.3. #MyFault :pray::pray::pray: <https://github.com/ReactiveX/rxjs/blob/stable/CHANGELOG.md#554-2017-12-05>

Medium

Introducing Turbo: 5x faster than Yarn &amp; NPM, and runs natively in-browser :fire:

Note: This is part of a talk I’m giving at Google’s Mountain View campus on Wednesday, December 6th — come join!

twitter

:package: jsvu lets you quickly install or update JavaScript engine binaries with a single command :fire: <https://github.com/GoogleChromeLabs/jsvu> Supported engines: - <https://twitter.com/ChakraCore|@ChakraCore> - JavaScriptCore - <https://twitter.com/SpiderMonkeyJS|@SpiderMonkeyJS> - <https://twitter.com/v8js|@v8js> Perfect in combination with eshost-cli! <https://pbs.twimg.com/media/DQWoSLuXkAAZLwh.png>

<https://pbs.twimg.com/media/DQWoSQvW0AA_2Vg.png>

twitter

redux-saga vs. redux-observable: Which one to use for complex asynchronous flows, and why? :thinking_face: Tons of practical experiences in this thread: <https://spectrum.chat/thread/2e738f7a-b385-4120-aff1-5fca9d1a6f34> :100:

twitter

Okay I forgot here on previous photo's I didn't include a11y-friendly stats: So webpack v4, without sideEffects: false lodash-es (one export 'add'): 600 KiB minified d3 (one export 'treemap'): 100 KiB minified w/ `sideEffects: false` lodash-es: ~3 KiB d3: ~1 KiB :heart_eyes: <https://twitter.com/TheLarkInn/status/938188174794223616>

twitter

Nice to see <https://twitter.com/jdalton|@jdalton>'s lodash come to life as its intended tiny size!!! That :deciduous_tree:shaking for the win with #webpack 4.0.0-alpha and "'sideEffects': false". This is the promise of ESM modules. &lt;3 Will need to try d3 next and compare, cc <https://twitter.com/mbostock|@mbostock> #JavaScript #AlwaysBetOnWebpack <https://pbs.twimg.com/media/DQUdDGKUEAATCG-.jpg>

GitHub

reactjs/rfcs

rfcs - RFCs for changes to React

GitHub

reasonml-community/index

index - Index of available BuckleScript bindings

GitHub

react-community/reason-react-native-scripts

Contribute to reason-react-native-scripts development by creating an account on GitHub.

reactjs.org

Introducing the React RFC Process - React Blog

We’re adopting an RFC (“request for comments”) process for contributing ideas to React. Inspired by Yarn , E

twitter

More Git improvements: review and stage changes directly inline! Get the latest <https://twitter.com/code|@code>: <https://buff.ly/2Ap137x>

twitter

Published an npm package that polyfills the proposed React Context API: - Repo: <https://github.com/thejameskyle/create-react-context> - RFC: <https://github.com/reactjs/rfcs/pull/2> <https://pbs.twimg.com/media/DQfuazyVwAAFYeW.jpg>

twitter

If Wonder Woman and Spider-Man go into business together, they should call it Amazon Web Services.

twitter

ReasonML: basic values and types <http://2ality.com/2017/12/basic-types-reasonml.html>

twitter

My OBT-2018 submission was rejected sadly, but here it is anyway: a short two-page introduction to a comonadic semantics of user interfaces: <http://functorial.com/the-future-is-comonadic/main.pdf>

Martian Chronicles

Evil Front Part 1: Modern Front-end in Rails — Martian Chronicles

An opinionated guide to modern, modular, component-based approach to handling your presentation logic in Rails that does not depend on any front-end framework. Follow our three-part tutorial to learn the bare minimum of up-to-date front-end techniques by example and finally make sense of it all. Part 1: goodbye Asset Pipeline, code organization, linting.

YouTube

Lisp at the Frontier of Computation, by Robert Smith at Rigetti Computing

twitter

:fire: Finally had the time to finish react-tiny-dom, a minimal implementation of react-dom using react-reconciler APIs: <https://github.com/jiayihu/react-tiny-dom> I think it could very useful to see how to implement a custom renderer in React 16 <https://twitter.com/reactjs|@reactjs> <https://twitter.com/dan_abramov|@dan_abramov> <https://pbs.twimg.com/media/DQrXoCzX0AAqZmd.jpg>

twitter

When HTML is life. <https://pbs.twimg.com/media/DQveNYYU8AEudD9.jpg>

twitter

73939133 is the largest prime number with this curious property: if you take one or more digits off the end, the resulting numbers are all prime. <https://pbs.twimg.com/media/DQsPx1WXUAAQ7RA.jpg>

deeplearnjs.org

deeplearn.js

a hardware-accelerated machine intelligence library for the web

twitter

PSA: Network throttling has been added to headless Chrome 63. Means you can now reliably use it with <https://twitter.com/____lighthouse|@____lighthouse>:bulb::house: for perf testing or Puppeteer 🤹:skin-tone-2:‍♂️ to automate device emulation in CI! Among 1000s of other use cases :) <https://bugs.chromium.org/p/chromium/issues/detail?id=728451#c10>

twitter

30 seconds of code :star: <https://github.com/Chalarangelo/30-seconds-of-code> - Curated collection of useful Javascript snippets that you can understand in 30 seconds or less :timer_clock: - Also useful for functional programming in JS! <https://pbs.twimg.com/media/DQzNDDaW4AIHOGc.png>

twitter

Now, <https://twitter.com/reasonml|@reasonml> is licensed under the MIT license! Thanks to <https://twitter.com/dmwlff|@dmwlff>, FB legal, and <https://twitter.com/fbOpenSource|@fbOpenSource> people (you know who you are) <https://github.com/facebook/reason/commit/e8fb73ec6ff7c3136715a3c628769e3d5906c4f0>

twitter

Add multiple root folders to your workspace (Multi Root Workspaces) in <https://twitter.com/code|@code>'s latest release: <https://buff.ly/2A3Lcb9>

twitter

HardSource #Webpack Plugin version 0.5 is out! <https://www.npmjs.com/package/hard-source-webpack-plugin> Primary changes are - No longer depends on binary dependencies - Better ES2015 support - Serializes ModuleConcatenationPlugin - Better `environmentHash` default so less projects need it

stackoverflow.com

Why are Fragments in React 16 better than container divs?

In React 16.2, improved support for Fragments has been added. More information can be found on React's blog post here. We are all familiar with the following code: render() { return ( //

GitHub

developit/microbundle

microbundle - Zero-configuration bundler for tiny modules, powered by Rollup.

GitHub

egoist/poi

poi - :zap: Delightful web development.

GitHub

graphcool/graphql-yoga

graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance &amp; great developer experience

GitHub

andrewdavey/immutable-devtools

immutable-devtools - Chrome Dev Tools custom formatter for Immutable-js values

twitter

I just published an issue on the future of react-select: <https://github.com/JedWatson/react-select/issues/2208>

twitter

<https://twitter.com/kentcdodds|@kentcdodds> PureComponent was really mostly added to enforce that you don't rely on random mutation. To give React the option to bailout rather than force a bailout like sCU. I'd recommend using it everywhere so you have the option to bailout when you do need it.

twitter

Incredibly happy, and proud, to introduce Popmotion 8! A functional, reactive JavaScript motion library <https://popmotion.io>

twitter

I'm very excited to finally share what I've been working on. Introducing the Joy Compiler: Translate idiomatic Golang into concise Javascript that works in every browser. <https://mat.tm/joy/>

Medium

Kubernetes Best Practices – Sachin Arote – Medium

Best Practices for kubernetes are as follow,

stateofjs.com

The State of JavaScript 2017: Introduction

A short survey about current popular JavaScript technologies.

stateofjs.com

The State of JavaScript 2017: Other Tools

A short survey about current popular JavaScript technologies.

twitter

How did Ramda - a functional programming library allowed itself to be included in the "state of JavaScript"?!! <http://stateofjs.com/2017/other-tools/>

twitter

:mega: V8 has native support for JavaScript code coverage. Tools like <https://twitter.com/ChromeDevTools|@ChromeDevTools> and Istanbul can now access V8’s coverage information without instrumenting the code! <https://v8project.blogspot.com/2017/12/javascript-code-coverage.html> <https://pbs.twimg.com/media/DQ6tR7wXUAYP5Ge.png>

twitter

Hi friends. :sparkling_heart: The stars haven't quite aligned, so we won't have React Conf in early 2018 like we have in past years. TBD if we'll host something in the later half of the year. Maybe we'll catch y'all at another conference next year though! :rocket:

twitter

Facebooks Haxl library for Haskell is great example of why it pays to learn a teensy bit of category theory. Think async/await on steroids. Now the compiler magic that makes this possible has landed in <https://twitter.com/purescript|@purescript>, so you can write Node apps this way! <https://m.youtube.com/watch?v=sT6VJkkhy0o>

twitter

#webpack 4 alpha.1 * importing wasm now correctly exports (no extra default) * overriding side effects for libraries possible via rules * minimizing added to production mode, uglifyjs 3 * cli move to webpack-cli * better progress reporting <https://github.com/webpack/webpack/issues/6132>

twitter

We are excited to announce the launch of <https://twitter.com/docusaurus|@docusaurus> - an infrastructure to help you easily create and manage open source websites. <https://docusaurus.io/blog/2017/12/14/introducing-docusaurus.html>

twitter

Just published react-value It's a super simple component + HOC for turning controlled value into uncontrolled value, using a render prop. <https://github.com/jedwatson/react-value>

twitter

I just published “Node.js and the Web Tooling Benchmark” <https://medium.com/p/node-js-and-the-web-tooling-benchmark-c982a88cf5b6>

Medium

Simplicity Before Generality, Use Before Reuse – Kevlin Henney – Medium

A common problem in component frameworks, class libraries, foundation services, and other infrastructure code is that many are designed to…

twitter

What's the difference between graphcool framework and graphql-yoga? graphcool framework =&gt; graphql native graphql-yoga =&gt; API gateway <https://github.com/graphcool/graphql-yoga/issues/29>

GitHub

jaredpalmer/awesome-react-render-props

awesome-react-render-props - :sunglasses: Awesome list of React components with render props

egghead.io

Short,instructional screencast video tutorials for web developers on @eggheadio

Concise screencast video tutorials that cover the best tools, libraries, and frameworks that modern javascript web developers can use to code more effectively and stay current.

twitter

:zap: New post: Finally understand Redux by building your own Store. <https://toddmotto.com/redux-typescript-store>

YouTube

Category Theory - YouTube

Category theory for programmers by Bartosz Milewski. Seattle, Summer 2016. Additional material at <https://bartoszmilewski.com/2014/10/28/category-theory-for->...

egghead.io

JavaScript tutorial: State Monad in JavaScript from @evilsoft on @eggheadio

Dealing with stateful computations can be a challenge when writing purely functional JavaScript. They can result in undesired variable declaration at best and boilerplate state management code in every function dependent on the state at its worst. In this course we will explore a well know Algebraic Data Type named State, that is built from the ground up to address these :corn:cerns. While this course will be focused around a State implementation provided by a library named crocks, a majority of the techniques we learn here can be used with most of the State implementations in the wild.

stateMonad.js

twitter

:mega: I have an exciting announcement: I'm joining the Chrome team <https://twitter.com/Google|@Google> in the new year! Looking forward to pushing the web...forward! :blush:

GitHub

c8r/x0

x0 - Zero-config React development environment and static site generator

GitHub

btholt/sfo

sfo - Instant build process

GitHub

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif · Issue #665 · necolas/normalize.css

It's time to add: font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif This solution is harmless and very useful. It is used by GitHub, Wordpr...

twitter

Woah. React-based game framework... <https://github.com/google/boardgame.io>

twitter

Introducing React Performance Devtool !! A chrome extension to inspect the performance of React components. Github - <https://github.com/nitin42/react-perf-devtool> Chrome extension - <https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm> cc <https://twitter.com/PKodmad|@PKodmad> Demo :point_down:

twitter

LOL. I'm still not using G+. Although I do think it's better, feature wise, than Facebook. <https://twitter.com/_youhadonejob1/status/941418759583158273>

twitter

Social media explained. <https://pbs.twimg.com/media/DRCXX0xX4AAI77q.jpg>

update function

setState

GitHub

patrick-steele-idem/morphdom

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

GitHub

parcel-bundler/parcel

parcel - :package::rocket: Blazing fast, zero configuration web application bundler

svelte.technology

Svelte

The magical disappearing UI framework

GitHub

yhsiang/reason-parcel-demo

reason-parcel-demo - Create ReasonReact project with Parcel in 5 minutes

twitter

TIL, react-transition-group has a much better API now:ok_hand: Here's how you can write a simple Fade component. Sandbox here: <https://codesandbox.io/s/y26rj99yov> <https://pbs.twimg.com/media/DRKMPmiWsAAUE6O.jpg>

twitter

Jest 22 is out! We refined the entire testing experience and graduated Jest's custom runners from experimental status. Check it out: <http://facebook.github.io/jest/blog/2017/12/18/jest-22.html>

twitter

<https://parceljs.org> :ok_hand:

twitter

:gift: GraphQL.js v0.12.0 is ready just in time for the holidays with a *ton* of exciting new stuff, following the latest draft of the spec, and adding a bunch of new utilities and extended capabilities. :tada: <https://github.com/graphql/graphql-js/releases/tag/v0.12.0> <https://pbs.twimg.com/media/DRW3GjpWsAASZ6H.jpg>

facebook.github.io

Using with puppeteer · Jest

With the [Global Setup/Teardown](/jest/docs/en/configuration.html#globalsetup-string) and

GitHub

xfumihiro/jest-puppeteer-example

jest-puppeteer-example - A working example of jest with puppeteer

twitter

If you write #JavaScript and Regular Expressions, then Regexly is great! <https://regexly.chipto.io/> <https://pbs.twimg.com/media/DRceoJIWAAAN6vN.jpg>

twitter

expect-more-jest 1.0.0: A huge library of test matchers for a range of common use-cases <http://bit.ly/expect-more-jest> #javascript #typescript #nodejs #tdd #bdd <https://twitter.com/fbjest|@fbjest>

twitter

Preach it, <https://twitter.com/dan_abramov|@dan_abramov>! :innocent: <https://pbs.twimg.com/media/DRbl8YsVoAEGYxb.jpg>

twitter

Today we released RxRelayJS, a RxJS lib that introduces Relay types. Relays are similar to Subjects, but stateless (can't call error() or complete()). Inspired by the original Java implementation by <https://twitter.com/JakeWharton|@JakeWharton>. <https://twitter.com/OpenAtMicrosoft|@OpenAtMicrosoft> <https://github.com/microsoft/rxrelayjs>

Medium

Private NPM Packages with Google Cloud Functions – Hacker Noon

tl;dr: It is now officially supported :tada:!

danilowoz.github.io

react-content-loader

React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.

blogs.technet.microsoft.com

Tar and Curl Come to Windows!

Information and announcements from Program Managers, Product Managers, Developers and Testers in the Microsoft Virtualization team.

Muzli -Design Inspiration

Using Gradients the right way – Muzli -Design Inspiration

I couldn’t agree more with one of the world’s most celebrated graphic designers. And, why shouldn’t I? Design is a universal language, and…

twitter

Hey look, it’s nact! A :sparkles:brand new:sparkles: library that lets you combine <https://twitter.com/nodejs|@nodejs> and actors with first class support for <https://twitter.com/reasonml|@reasonml>, lovingly crafted by @hncthbrt. The site is gorgeous and you should definitely check it out. :unicorn_face::rainbow: <https://nact.io/>

twitter

<https://twitter.com/parceljs|@parceljs> #Webpack - Compared Parcel(1.2.1) and Webpack(3.5.6) on project (~800 JS files) Run1: Webpack: 6.7 min Parcel: 1 min 6 s Run2: Webpack: 5.65 min Parcel: 2 s Config Details: Webpack - [Babel thread-loader and caching, parallel uglify, no sourcemap] Parcel - [none]

twitter

Alright everyone who's writing all these 5cent hype-blogs about <https://twitter.com/parceljs|@parceljs> v #webpack without trying it. Here's what we call _facts_. #JavaScript #OSS Chew on this: ==Alt a11y Text== parcel (no-cache): 7.56s parcel (cache): 2.71s webpack@webpack/webpack#next (no-cache): 973ms <https://pbs.twimg.com/media/DRhcUfbUQAAlxAW.jpg>

<https://pbs.twimg.com/media/DRhcV4FU8AAm96l.jpg>

twitter

Performant Programming Pro Tip: Abstractions have a cost. Those costs add up. Every time you add a new abstraction to your code for the sake of convenience you necessarily slow your code down.

twitter

Service Workers are ENABLED BY DEFAULT in Safari Technology Preview! :tada::tada: <https://twitter.com/webkit/status/943541983569727496>

twitter

Release notes for today’s Safari Technology Preview release 46 update are now available. <https://webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/> <https://pbs.twimg.com/media/DRgibulW0AAMmhj.jpg>

twitter

Both Edge and Safari have Service Workers on by default in their respective next versions. Today is pretty great. <https://pbs.twimg.com/media/DRhHjSEUMAEjPp9.jpg>

GitHub

Add Reason asset type (#342) · parcel-bundler/parcel@47e9192

* Add bsb-js dependency * Add ReasonAsset type * Actually add the Reason asset type * Add OCaml file type, add integration test, remote unused imports * use promisify for reading files ...

redex.github.io

redex | Reason Package Index

Package index for the ReasonML/BuckleScript ecosystem

twitter

New blog post: Performance lessons from Tinder's Progressive Web App <https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0> ~ built with React 16, Redux, webpack 3 :scissors: JavaScript optimizations (code-splitting &amp; preloading) :iphone: Service Workers for network resilience :hourglass: Performance budgets &amp; more

twitter

Here we go! We have an official repo for <https://twitter.com/PrettierCode|@PrettierCode>'s Python support! Can't wait to have this done! I'll be working on it again soon :) Feel free to test and help! <https://github.com/prettier/prettier-python>

twitter

Introducing React v16.2.0: Improved Support for Fragments. <https://twitter.com/reactjs|@reactjs> now provides a first-class fragment component that can be used in place of arrays <http://bit.ly/2ACSnuM>

twitter

"Refactoring- the process of taking a well-designed piece of code and, through a series of small, reversible changes, making it completely unmaintainable by anyone expect yourself." - Jason Gorman

twitter

:tada: Released my <https://twitter.com/reasonml|@reasonml> game to the google play store: "Gravitron" <https://play.google.com/store/apps/details?id=com.jaredforsyth.gravitron> Also available on desktop web: <http://gravitron.jaredforsyth.com/> and the source is here: <https://github.com/jaredly/gravitron/> <https://pbs.twimg.com/media/DSJ9XU8UEAAVKrS.jpg>

<https://pbs.twimg.com/media/DSJ9XyrVwAAKO2z.jpg>

<https://pbs.twimg.com/media/DSJ9YTVVAAAG5r5.jpg>

GitHub

Pt3 by DrBoolean · Pull Request #357 · MostlyAdequate/mostly-adequate-guide

@KtorZ Here is the start of pt3 :)

twitter

Core services and user deployments are back at 100% availability. We are actively monitoring the system health, and are curating a post-mortem to be released soon. Thank you once again for your patience.

babeljs.io

Nearing the 7.0 Release · Babel

Check out Planning for 7.0 for the last updates throughout the 7.0 pre-releases. If something isn’t clear in this post let me know!

twitter

Woke up last night with the idea that copy-on-write (with structural sharing) would make writing #Redux reducers much more straightforward. So, here it is (before and after). Happy new year! <https://github.com/mweststrate/immer> <https://pbs.twimg.com/media/DSOaR1xW4AA6LTq.jpg>

<https://pbs.twimg.com/media/DSOaTpyXcAAbrVq.jpg>

GitHub

mweststrate/immer

immer - Create the next immutable state by mutating the current one

twitter

I just posted "Building async/await in <https://twitter.com/reasonml|@reasonml>" -- let me know what you think! <https://jaredforsyth.com/2017/12/30/building-async-await-in-reason/>