The Atlantic
The Coming Software Apocalypse
A small group of programmers wants to change how we code—before catastrophe strikes.
The Atlantic
The Coming Software Apocalypse
A small group of programmers wants to change how we code—before catastrophe strikes.
Medium
Announcing Storybook 3.3 – Storybook – Medium
Angular Support, Device Viewports, Test Improvements, & more!
The Rails team has written their own JS framework: <https://github.com/stimulusjs/stimulus>
svelte.technology
The magical disappearing UI framework
Today I turn 21. :birthday: For my birthday, I wish that all of you go into 2018 and beyond with an open mind towards new ideas and experiments, because you can never know where they might lead you. Have a great year! :purple_heart:
If you use #webpack and care about payload size then do not create "vendor chunks". This prevents Uglify from eliminating dead code in many common scenarios. More info: <https://github.com/angular/angular-cli/issues/9069#issuecomment-354896045> <https://twitter.com/IgorMinar/status/948325862243364865>
<https://twitter.com/filipematossilv|@filipematossilv> <https://twitter.com/Splaktar|@Splaktar> <https://twitter.com/dee_bloo|@dee_bloo> <https://twitter.com/BenLesh|@BenLesh> <https://twitter.com/TheLarkInn|@TheLarkInn> <https://twitter.com/AngularCli|@AngularCli> <https://twitter.com/Brocco|@Brocco> yeah. thanks for the writeup. I looked into it and resolved it already. the problem is vendor chunking, turn it off and unused operators will disappear.
Today I learned: e.preventDefault() in window 'error' event handler prevents the browser from printing it to the console.
docker-replay takes a running container and outputs the 'docker run' command which was used to create it. Very handy! <https://github.com/bcicen/docker-replay> <https://pbs.twimg.com/media/DSsxxByX0AA1mPn.jpg>
GitHub
reasonml-in-browser - Drop-in script to run ReasonML in the browser. For development and demos.
Apollo GraphQL
Exploring Reason and GraphQL – Apollo GraphQL
From documentation to AWS Lambda in a couple of hours
james
React.Fragment and Semantic HTML
HTML is the backbone of the web and the code you write should be semantic. If you write semantic HTML, It's easier to read and ascertain developer intent. Take a look at the following semantic and unsemantic examples: No thank you :-1: Yes please! :+1: It's also more accessible. Screenreaders read through
Check out this 1-liner isEmpty utility that works across strings, arrays & objects :fire: <https://pbs.twimg.com/media/DSzGNTnVAAEzZq6.jpg>
Hacker Noon
I’m harvesting credit card numbers and passwords from your site. Here’s how.
The following is a true story. Or maybe it’s just based on a true story. Perhaps it’s not true at all.
GitHub
Many packages suddenly disappeared · Issue #255 · npm/registry
<https://www.npmjs.com/package/infinity-agent> <https://www.npmjs.com/package/timed-out> <https://www.npmjs.com/package/pinkie-promise> All dependencies of webpack-related modules
GitHub
hyperapp - 1 KB JavaScript library for building web applications.
GitHub
A curated list of awesome projects built with Hyperapp & more.
statement on saturday’s npm operational incident <http://blog.npmjs.org/post/169432444640/npm-operational-incident-6-jan-2018> <https://pbs.twimg.com/media/DS9d_ZMU0AA-zER.jpg>
I feel parcel + hyperapp will be the sharp knife for small project.
GitHub
bs-hyperapp - Work in Progress - an opinionated overlay of the Elm Architecture on top of Hyperapp
GitHub
react-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
docusaurus.io
Docusaurus · Easy to Maintain Open Source Documentation Websites
Easy to Maintain Open Source Documentation Websites
<https://twitter.com/arturi|@arturi> <https://twitter.com/louiscenter|@louiscenter> You can even use Hyperapp as an ES module directly loading the source from GitHub. No transformations required. <https://pbs.twimg.com/media/DTCEP0QU8AExfLA.jpg>
GitHub
immer - Create the next immutable state by mutating the current one
GitHub
junctions - Give your ReactJS components routes.
Smashing Magazine
Visual Studio Code Can Do That?
Why is Visual Studio Code (VS Code) so popular, and do we really need another text editor? In this article, we'll take a look at how VS Code extends traditional text editor concepts and opens up entirely new avenues of productivity for developers. These are all the best things about VS Code that nobody ever bothered to tell you.
New ReasonReact release; we've made a small router! <https://reasonml.github.io/reason-react/blog/2018/01/09/subscriptions-send-router.html>
bitsofcode
Less than a month ago, HTML 5.2 became an official W3C Recommendation (REC). When a specification reaches the REC stage, this means that it has received the official endorsement of W3C Members and the Director, and that the W3C officially recommends it’s deployment by user agents, and it’
GitHub
closes #2730 This will remain undocumented until the brave have tried it in the wild. Test Plan: There's currently no established way to test changes to babel-preset-react-app. But I did create unm...
:mega: Introducing Workerize: Offload modules into Web Workers with a simple prefix! :heart_eyes: Statically compiles exports to reflected async functions :smiley: :sparkles: <http://github.com/developit/workerize> <https://pbs.twimg.com/media/DTJjWFHUMAAG5kP.jpg>
At <https://twitter.com/Lumi|@Lumi>, we just released a set of simplified React bindings for PureScript. It focuses on building simple components with as much type safety as possible (vis some of the newer PureScript row constraints). <https://github.com/lumihq/purescript-react-basic>
Here's a mnemonic for `<http://fn.call>` vs `fn.apply`: "A for arguments, and C for collection." foo.apply(null, 1, 2, 3); <http://foo.call>(null, [1, 2, 3]); Then just remember it's the opposite of that, and you're set. Hope that helps!
:birthday: Today Prettier turns 1️⃣ year old! We've just released version 1.10, featuring: :white_check_mark: Support for scripts and styles in <https://twitter.com/vuejs|@vuejs> single file components. :white_check_mark: A new plugin API for new languages. :speech_balloon: And more! Check out the release notes on our new blog: <https://prettier.io/blog/2018/01/10/1.10.0.html>
Hello world! :wave: Check out our first episode at <https://reason.town/> , where <https://twitter.com/splodingsocks|@splodingsocks> and <https://twitter.com/jaredforsyth|@jaredforsyth> talk about how they got into <https://twitter.com/reasonml|@reasonml> and what makes them excited about it. :bow:
:ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean: Happy <https://twitter.com/nodejs|@nodejs> Current Release Day $ nvm install v9.4.0 * lots of new http2 goodness * npm 5.6.0 * lexically scoped variables in repl <https://nodejs.org/en/blog/release/v9.4.0/> :ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean::ocean:
I’m thrilled to share my latest deep learning project: Turning a design mockup into code. :computer: :robot_face: 1) Give the trained neural network a design image 2) The network converts the image into HTML markup and renders it ↴ Article: <http://bit.ly/2FoqJQy> Code: <http://bit.ly/2mkkWDZ>
Maybe we can remove the --no-semi in prettier now? <https://twitter.com/littledan/status/951523844262637568>
TC39 is recommending that JS programmers use semicolons at the end of statements in code, rather than relying on ASI. <https://github.com/tc39/ecma262/pull/1062>
GitHub
puppeteer - Headless Chrome Node API
:the_horns: React Performance Tip: If you want to quickly identify that React component or anything else you are optimizing in the flame graph, go ahead and throw in your own performance.mark & performance.measure. <https://pbs.twimg.com/media/DTSkmh4WAAEwslm.jpg>
<https://pbs.twimg.com/media/DTSkmhGXcAI73-4.jpg>
So I threw together a simple javascript bundler for <https://twitter.com/reasonml|@reasonml> last night: - <http://pack.re|pack.re> <https://github.com/jaredly/pack.re> And to do so, I also made a cli argument parsing library - <http://minimist.re|minimist.re> <https://github.com/jaredly/minimist.re> :tada: enjoy!
Right now, on whatever webpage you are on. (If you are using <https://twitter.com/googlechrome|@googlechrome> ): press CMD (or CTRL) + SHIFT + P then type "Show Coverage" and hit enter. Now in the coverage tab reload the page and tell me how much code is being unused on that page... How does this make you feel
GitHub
razzle - :sparkles: Create server-rendered universal JavaScript applications with no configuration
GitHub
razzle - :sparkles: Create server-rendered universal JavaScript applications with no configuration
所以 razzle 大概就是個 CRA 幫你搞定 client / server 雙 webpack 的東西 比 next 只有 client 過 webpack 所以最好不要亂加 webpack 還要好一些
Regardless of what you use today, and based on the design of the tools and not their relative usage or size of community, which of these two tools would you prefer using: - <https://facebook.github.io/relay/> - <https://www.apollographql.com/>
GitHub
CSS Modules example by stereobooster · Pull Request #432 · jaredpalmer/razzle
PR for #428. It works, but razzle.config.js requires improvement
GitHub
macOS 10.12.6 high CPU use when enable this extension for vscode · Issue #47 · wix/import-cost
not sure why, the graph below is simple record in my mac, with or without this extension in my vscode, not sure this is a bug or something else.
haha.. some dude made a #github pull request to #emacs which removed all emacs code and replaced it with #vim .. calls it "Fixed some UI issues." <https://github.com/emacs-mirror/emacs/pull/6>
Introducing After.js A Next.js-like framework for server-rendered React apps built with React Router 4 :atom_symbol: React server-side rendering :inbox_tray: Data fetching with getInitialProps() :fire: Hot module replacement :package: Code-splitting :hammer_and_wrench: Zero-config tooling #0CJS <https://github.com/jaredpalmer/after.js> <https://pbs.twimg.com/media/DTmuu7qVoAAzacF.jpg>
GitHub
after.js - Next.js-like framework for server-rendered React apps built with React Router 4
Today seems to be a JavaScript-y morning! Did you know I maintain a collection of lodash-esque functions for arrays and iterators that you can just copy-paste? <https://surma.github.io/underdash/>
GitHub
awesome-toolkits - A curated list of open source, high-quality, popular and well maintained toolkits
GitHub
next.js - Framework for server-rendered or statically-exported React apps
Pipeline operator in JS? Yes, please! It has recently been moved to Stage 1: <https://github.com/tc39/proposal-pipeline-operator> Babel plugin: <https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-pipeline-operator> <https://pbs.twimg.com/media/DTlzwPJWkAEnxPO.jpg>
GitHub
dialog-polyfill - Polyfill for the HTML dialog element
GitHub
fastpack - Pack JS code fast & easy
Laws of UX
Laws of UX is a collection of the key maxims that designers must consider when building user interfaces.
:boom:Puppeteer 1.0 🤹:skin-tone-2:♂️ shipped: Chrome 65, JS/CSS code coverage API, PDF customization, XPath support, raw devtools protocol access. Congrats to the team and all our contributors! new docs: <https://developers.google.com/web/tools/puppeteer/> release: <https://github.com/GoogleChrome/puppeteer/releases/tag/v1.0.0> npm: <https://www.npmjs.com/package/puppeteer> <https://pbs.twimg.com/media/DTrRH-MV4AAQqPL.jpg>
:tada: Introducing Prisma: Turn your database into a GraphQL API <https://blog.graph.cool/introducing-prisma-1ff423fd629e>
CSS Modules support just landed into Create React App :eyes: <https://github.com/facebookincubator/create-react-app/pull/2285>
Still a fun JS interview question of how if (a == 1 && a == 2 && a == 3) console.log('Boom') can print 'Boom'. Easy! Just make valueOf side effecting. Evil yet effective! const a = { x: 1, valueOf: function() { return this.x++; } };
GitHub
sindresorhus/react-router-util
react-router-util - Useful components and utilities for working with
when someone mentions semicolon
antoinevastel.github.io
Detecting Chrome headless, new techniques
This post presents techniques that enables to distinguish a vanilla Chrome browser from a Chrome browser running in headless mode. It updates information presented in the post of August.
Several People Are Coding
Keep webpack Fast: A Field Guide for Better Build Performance
webpack is a brilliant tool for bundling frontend assets. When things start to slow down, though, its batteries-included nature and the…
:loudspeaker: We're excited to announce world's first Reason conference in Vienna, Austria There is a highly enthusiastic community all around the world. Now it is time to bring them together... to innovate, to learn and have fun :raised_hands::tada: See you on the 11th - 13th of May 2018!
Here's that unistore announcement... wait, it's another library?? :card_file_box: Stockroom: Offload your store management to a worker. <https://github.com/developit/stockroom> <https://pbs.twimg.com/media/DT3LFvVV4AEpS2m.jpg>
GitHub
Contribute to reason-conf development by creating an account on GitHub.
GitHub
jspaint - :art: Classic MS Paint, REVIVED + :sparkles:Extras
Well this is awesome! A react-scripts@next app by <https://twitter.com/evenchange4|@evenchange4> that uses his new graphql.macro module to import .graphql files without needing to change any configuration! App: <https://graphqlmacro.netlify.com/> App Repo: <https://github.com/evenchange4/graphql.macro-example> graphql.macro: <https://github.com/evenchange4/graphql.macro> :fishing_pole_and_fish:
Medium
Dragging React performance forward – Alex Reardon – Medium
I work on a drag and drop library for React: react-beautiful-dnd :tada:. The goal of the Atlassian library is to provide a beautiful and…
Valentino G. | Blog
Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode
All you need to know about webpack 4, the next generation module bundler. From zero configuration to production mode, this post is a living, breathing introduction to webpack 4.
GitHub
css-in-js-101 - :barber: CSS-in-JS 101: All you need to know
Yeah after 2 weeks dry period... webpack 4.0.0-alpha.5 with a lot of big changes: * CCP => optimization.splitChunks * ProfilingPlugin * Refactored chunk graph * acorn 5 * bugfixes Here the full v4 changelog so far: <https://github.com/webpack/webpack/issues/6357>
A microservice for <https://twitter.com/PrettierCode|@PrettierCode> ``` curl \ -H "Content-Type: application/json" \ -X POST \ -d '{"source":"const a={a:1,b:[ 1]}","options":{"semi":false}}' \ <https://api.transform.cool/prettier> ``` <https://pbs.twimg.com/media/DUJlUi3U0AIxZ3V.png>
Are you staying or going home <https://twitter.com/dan_abramov|@dan_abramov> ? <https://pbs.twimg.com/media/DUK1S4lW0AEdXaP.jpg>
:tada: styled-components@3.0.0 is out! - No more /native for ReactNative! Just import styled from 'styled-components' and you're good to go :fire::fire::fire: - Flat bundles on npm - ReactNative update, adds styled.SafeAreaView and removes styled.Navigator <https://github.com/styled-components/styled-components/releases/tag/v3.0.1>
GitHub
micron - a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power