JavaScript Ramblings

Using multiline strings in GitLab YML file

Sometimes your script is too long and it doesn't fit on one line: script: - docker run --name build-container --tag gitlab:demo --workdir /project --build-arg SOME_VAR=123 custom-image .It would be nice to be able to split this on multiple lines, just like

GitLab

Keep authors when importing from GitHub to GitLab

I recently migrated a repository from GitHub to GitLab and noticed that all pull requests and all issues are assigned to me (the user that triggered the import), instead of the actual authors in GitHub! What happened? It seems that GitLab matches users based

GitLab

Sync mirrored GitLab repository automatically on every push to GitHub

Did you successfully setup pull mirroring between GitHub and GitLab, but are disappointed to see changes only get synced every 30 minutes? Luckily, GitLab does support automatically pulling on every push to GitHub, it's just a bit hidden in their docs 😅 In my case,

Do "dependencies" and "devDependencies" matter when using Webpack?

When using Webpack to bundle your application for production, where you put your dependencies in package.json doesn't matter - as Webpack will simply follow all import statements, starting with the entryPoint. So what do you do? Can you just put your dependencies anywhere?

How to upgrade a yarn package to the latest version

It's happening again. You know you need to upgrade a package, but you're not sure what version is the latest and whether it will break your code or not 🙈 Let's walk through upgrading @storybook/react for a project. First, check where you standWhat version

What options do you have for deploying a frontend-only React app to production?

If you’ve ever wondered how to deploy your React app once it’s ready, you probably know that figuring this out can become confusing really fast. Most articles go over detailed instructions on how to configure nginx, how to configure reverse proxies. But

Measuring the performance of your frontend application

The performance of an application is critical to its success. Having a fast application will lead to a better user experience and to an increased adoption rate. But what does it mean that an application is fast? And how does one measure the performance

How to use Semantic UI with a custom theme in your CRA app

Semantic UI is a fantastic UI library and the fact that you can use plain React components to compose your layouts makes it a great fit for React applications. When it comes to customizing the styles though, it’s a whole different story. The

Troubleshooting 'could not find store in either the context or props'

Invariant violation: Could not find "store" in either the context or props of "connect(MyComponent)". Either wrap the root component in a Provider or explicitly pass store as a prop to connect(MyComponent)" So, you're writing a unit test for one of your Redux

How to use media queries with styled components

TL;DRMedia queries with styled components work the same as in CSS! const CardWrapper = styled.div` display: flex; flex-direction: row; @media (max-width: 768px) { flex-direction: column; } `; If you want a more involved example with defining different device sizes, continue below. What we'll buildWe'll start from

Updating create-react-app

Updating create-react-app could mean two things: You want to update your global create-react-app install to make sure new apps you create use the latest boilerplateIn this case, you don’t need to do anything! When you run create-react-app, it always creates the project with

Creating a Twitter-like search component in React

Think for example Twitter's search box. As the search results come in, a dropdown menu renders and user can select any of the items. How can I build this in react? Let's try to built this kind of component! To keep things simple, I'll

Testing

Stuck testing your connected component? Make sure you export your 'plain' component as well!

Does this sound familiar to you? You have a container component and you write a test for it: import ShoppingCartContainer from './ShoppingCart'; test('it works', () => { const wrapper = shallow(<ShoppingCartContainer />); // test something }); And then when you run it, the first thing

Testing

3 ways to test mapStateToProps and mapDispatchToProps

You already know that you shouldn't actually test the result of calling connect (the connected component) - as Redux already makes sure the behaviour of connect is correct. Instead, you test your wrapped component separately, by exporting it as a named export. But what

Server side rendering

Server-side rendered styled-components with Nextjs

Out of the box, Next.js comes configured with styled-jsx. But what if you want to use something else for styling? I’ve recently worked on setting up Next.js with styled-components, and while it all went rather smoothly, I didn’t really understand

CSS in JS

Easy theming with CSS in JS

You read about CSS in JS and you wonder: what can this give me that I don’t already have with CSS modules? Your code is maintainable, scope is local, all is good. But what if you need theming support? And you want your

CSS in JS

React theming with emotion

Step by step tutorial to setup theming with emotion

CSS in JS

React theming with styled components

Step by step tutorial to setup theming with styled components

CSS in JS

React theming with glamorous

Step by step tutorial to setup theming with glamorous

CSS in JS

Migrating to styled-components cheatsheet

Choosing a styling library for a React project is hard. And when you already have an existing code base you’re considering to migrate, things get only trickier. Will you be able to convert everything? Is there a way to get a feel for

CSS in JS

Should you use CSS in JS?

Well... it depends! Are you just starting out?The most important things to look at are: simplicityease of debuggingYou want to be able to understand how CSS relates to a React component without too much "magic" happening. CSS in JS libraries usually generate class

CSS in JS

Things to consider when choosing a React styling framework

styled-components, emotion, glamorous, aphrodite, radium, JSS … and the list goes on! What are some things you should keep an eye on when evaluating them? User baseHow many downloads does the library have so far?What are the trends - is the library gaining or

Understand the React styling paradigms

One of the first choices you need to make when starting a new project using React is what library to use for styling your components. There are a ton of options to choose from and the community hasn't yet reached a consensus of what

3 talks you should watch on styling React components

Do you ever wonder what the hype is about all these styling libraries and what their point is? CSS Modules, Styled components, Radium, glamourous, JSS, jsxstyle - you name it. It’s hard to get an overview of how they came about and what

Two ways to know if you should use a framework or stick to jQuery for now

I do not understand how can a framework help me, when it seems to me that almost everything I try to achieve in a framework can simply be done in jquery with few lines of code, like calling a rest service with Ajax and