We recently announced native support for the
css prop in styled-components when using our Babel plugin. Unfortunately, create-react-app doesn’t let you add any custom Babel plugins… but as of v2 they do support Babel macros.
So, we got to work and rebuilt the
css prop transform to also work as a macro. Today, we’re excited to introduce support for the
css prop in create-react-app! 🎉
There’s only three simple steps to kickstart your new React app with css prop support:
create-react-app myapp(if you already have an existing cra-based app, skip this step)
As Ryan Florence once said, the essence of working with components is worrying about the right lines to draw in your app and then filling in the shapes they create with components.
Invented by Sunil Pai in glamor, the
css prop has taken over the CSS-in-JS world as a convenient way to build components while staying flexible with the “lines”, their boundaries.
const MyButton = () => (
By declaring the CSS inline, it’s simple to move elements around your app and iterate on them, allowing you to…
With GraphQL you can query exactly what you want whenever you want. That is amazing for working with an API, but also has complex security implications. Instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query to overload your server, database, network, or all of these. Without the right protections you open yourself up to a DoS (Denial of Service) attack.
For example, in our GraphQL API at Spectrum we have a relationship like this:
As you can see, you can query both the messages of a thread or the thread of a…
Creating truly universal React components that can be rendered on the web and in React Native is hard. There are different primitives:
<p> etc, and the styling also works entirely differently: ReactNative has it’s own CSS-like styling solution with JS objects,
Until now your only option was to use React Native platform extensions to target specific platforms with your components. This allows you to share the logic and structure, which is already amazing, but it still means writing your styling multiple times.
After a six month long iteration process and over 300 commits we’re super excited to announce the official release of styled-components v2!
.attrshelper to support passing attributes to any styled-component, making it much easier to integrate existing CSS codebases.
.withComponenthelper to make it easier to create multiple components that share some or all of their CSS.
In January, a new developer asked us to judge his qualifications and if he should apply for a job in the Reactiflux #jobs channel. This was my response, slightly edited for content and the format.
Send out applications to every company that looks interesting, doesn’t matter if you think you’re qualified or not!
Nobody knows what the fuck they’re doing.
That’s just the nature of front-end…
Originally published on my blog
npm has support for the scripts property in package.json — one of the most used, but also one of the most overlooked features of npm
Chances are high you’re using scripts if you’re using npm: Whenever you enter $ npm run <command> (which is a short version of $ npm run-script <command>) into the terminal, that’s a script being ran.
There’s also some special, predefined aliases which convert to the npm run version, e.g. $ npm test converts to $ npm run test behind the scenes, and they can be used interchangably.