Today I Learned @fineway-engineering - Tumblr Blog

TIL: Chrome DevTools supports CPU throtteling, to test like beeing on a mobile device which has significantly less CPU power than your desktop developer machine. https://plus.google.com/+AddyOsmani/posts/NRsAqshb17n

TIL: There is an Infinity Object in JavaScript https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Infinity

Github now finally has not only Assignees, but Reviewers for Pull Requests!

At #jskongress I learned:

1. Version pinning in our package.json saves us a lot of hassle (until updating all at once, which is usually a huge mess!), but let’s us miss bugfixes and new features in our dependencies. We could instead use a tool like https://greenkeeper.io/#how-it-works 2. GraphQL/Relay is probably a lot harder to integrate with our current stack than I thought. 3. It might be a solution for speeding up the OD though. 4. https://github.com/digitalegarage/relay-workshop is the workshop I did with the BR_NEXT team in the afternoon. It’s worth a read for getting started, even without getting your hands dirty. 5. https://graph.cool/ is a nice hosted GraphQL backend that spares you all the database/server setup hassle. It’s great for frontend devs to quickly focus on building things and get into the React integration asap.

At #jskongress I learned:

1. Jake Archibald is bad at estimating the vagueness of future browser implementations (https://jakearchibald.github.io/isserviceworkerready/). 2. We should learn about service workers (did you ever look at chrome://serviceworker-internals/), async/await and server-side rendering in progressive web apps (https://developers.google.com/web/fundamentals/getting-started/primers/service-workers is nice for getting started). 3. Using https://www.espruino.com/ is probably easier than I thought. 4. https://aframe.io/ looks cool for creating VR experiences. 5. Consider playing around with http://playground.tensorflow.org/ if you haven't done it before. 6. https://snyk.io/ and https://nodesecurity.io/ look interesting for finding vulnerabilities in our dependencies (node modules) => watch this: https://t.co/1yPCIR9LW6 7. http://www.spoj.com/ looks fun for solving code problems you haven't dealt with if you didn't study CS or never attended EDV-Schule Plattling 8. https://soundcloud.com/9-v/electroboy makes cool electro-punk music we should listen to during working hours

Within a React component, you can use

... {isLoggedIn && [ , ]} ...

instead of

... {isLoggedIn && ( <div> </div> } ...

#react

React Native Express – Learn React Native Through Interactive Examples http://www.reactnativeexpress.com/

#react #reactnative

If you are using brew on a Mac and your development postgres server got stuck with the following error:

psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/tmp/.s.PGSQL.5432"?

Just delete the postmaster.pid file: rm /usr/local/var/postgres/postmaster.pid

#postgres #recovery #mac #brew

Adding -v to pg_dump will enable verbose mode and display information about the current process state. I.e:

pg_dump -v -c -b -W -d my_database > dump.sql Password: pg_dump: reading extensions pg_dump: identifying extension members pg_dump: reading schemas pg_dump: reading user-defined tables pg_dump: reading user-defined functions ... ... ...

#psql #postgres #dump

In Storybook: 1) If you create a head.html file in the config directory .storybook it will inject everything in the file into the head tag.

For instance:

// head.html <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway:500,400" /> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400italic" />

2) It's super easy to create a decorator by using addDecorator

// will decorate all stories of `My component` addDecorator(MyDecorator); storiesOf('My component', module) .add('default', () => (<MyComponent />))

https://getstorybook.io/docs/react-storybook/addons/introduction

#react #javascript #storybook

HTML5 has a spellcheck attribute. It can be used on any editable element, such as input/textarea. Try it yourself: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_spellcheck

#html #spellchecking

ES6 supports named imports. for instance:

export {moduleName} import {moduleName as alias} from './moduleName'

This is much clearer and less confusing than implicit naming import alias from './moduleName'

Note there is a difference between import alias from ... and import {something as alias} from ... The first imports the export default IMPORTED_VALUE, the second imports export {something: IMPORTED_VALUE}

#javascript #es6

There is a library called faker.js (https://github.com/marak/Faker.js/) which generates random data. I think this would be super useful to fill components (in storybook) with random data to see if it breaks. This can be applied for unit testing, integrationt esting, etc. You can see how it can be used (super simple) here: https://scotch.io/tutorials/generate-fake-data-for-your-javascript-applications-using-faker

#react #testing #storybook

Ant Design is a neat collection of promising React Components - https://ant.design/docs/react/introduce

#react

In order to make use of better propType checking in React, enforce the usage of `shape` instead of `object` and `arrayOf` instead of `array` with ESLint.

#react #proptypes #eslint #typechecking

Lektor is a static site generator, created by Armin Ronacher, and includes a human-friendly, no-coding-expertise-required, admin interface. It leaves the data model up to the user, so it's more useful than just for blogs and simple pages. https://www.getlektor.com/

Absolutely worth investigating if you publish a static website, but want to leave the content editing up to the users.

A nice little library to handle global Keyboard Shortcuts and setInterval things in a clean, declaritive way in React: https://github.com/pagarme/react-event-components

Trending Blogs

Recently Viewed Blogs

Today I Learned