Avatar of Johnny Bell

Johnny Bell

Software Engineer
Software Engineer ·

I was building a personal project that I needed to store items in a real time database. I am more comfortable with my Frontend skills than my backend so I didn't want to spend time building out anything in Ruby or Go.

I stumbled on Firebase by #Google, and it was really all I needed. It had realtime data, an area for storing file uploads and best of all for the amount of data I needed it was free!

I built out my application using tools I was familiar with, React for the framework, Redux.js to manage my state across components, and styled-components for the styling.

Now as this was a project I was just working on in my free time for fun I didn't really want to pay for hosting. I did some research and I found Netlify. I had actually seen them at #ReactRally the year before and deployed a Gatsby site to Netlify already.

Netlify was very easy to setup and link to my GitHub account you select a repo and pretty much with very little configuration you have a live site that will deploy every time you push to master.

With the selection of these tools I was able to build out my application, connect it to a realtime database, and deploy to a live environment all with $0 spent.

If you're looking to build out a small app I suggest giving these tools a go as you can get your idea out into the real world for absolutely no cost.

READ MORE
78 upvotes·9 comments·1.9M views
Yaron Levi
Yaron Levi
·
December 6th 2018 at 8:34AM

How Netlify compared to Surge, Zeit now or other? Have you looked at other alternatives?

·
Reply
Johnny Bell
Johnny Bell
·
December 6th 2018 at 4:58PM

Hey Yaron, I've only tried Netlify and Heroku. I'll have to checkout Surge and Zeit. Whats your experience with them?

·
Reply
Vincent Du
Vincent Du
·
December 6th 2018 at 4:27PM

Netlify is the very one what I need now.

·
Reply
Johnny Bell
Johnny Bell
·
December 6th 2018 at 4:59PM

Hey Vincent, yes Netlify is great. Let me know if you need any help getting it up and running.

·
Reply
Ganesa Vijayakumar
Ganesa Vijayakumar
·
February 13th 2019 at 1:23PM

Hi Johnny, I'm using Heroku for my personal application deployment. do you advise me to jump into using Netlify or stay in Heroku itself?

·
Reply
Johnny Bell
Johnny Bell
·
February 13th 2019 at 5:22PM

Hey Ganesa, It really depends on your needs. I found that Heroku actually has way to many features that I didn't need or even know what they were. Whereas Netlify was very simple to setup and get going with everything I needed right out of the box, and its free.

If your app is simple enough and can live on the JAMstack then I suggest switching to Netlify, its a set it and forget it tool, when you push to master it just deploys. However if you need more functionality with your deployment process, and app its best to use Heroku.

If you look at my decisions I also wrote about switching from Netlify to AWS if you're interested - I would link you however we don't currently offer linking in decisions at StackShare 😀.

·
Reply
Ganesa Vijayakumar
Ganesa Vijayakumar
·
March 4th 2019 at 3:31PM

Much appreciated. Thanks for your genial suggestions. :)

·
Reply
Software Engineer ·
Recommends
on
ReactReact

I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.

It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.

READ MORE
27 upvotes·3 comments·1.2M views
Michael Mota
Michael Mota
·
August 20th 2019 at 9:14PM

React is beautiful. I've never used Vue.js but for what I've heard it's easy and fast to learn but, once you dominate the essentials of react and how it actually works, you become a "magician". I really think React it's just beautiful 😍.

·
Reply
humbler stub
humbler stub
·
June 10th 2020 at 6:46PM

Hi ! What's your take on (React + Angular) vs (React + ReactNative)? Currently I am in a phase in which I am trying to decide a lifetime stack for me to sustain in the market. Needs advice/suggestion.

Thanks in Advance.

·
Reply
Johnny Bell
Johnny Bell
·
June 10th 2020 at 7:09PM

Hey Islam, I would suggest if you are going to use React you use React Native + React and not Angular... Mixing frameworks like Angular and React can become tricky. But if you are looking to become hirable I'd say React and React Native is a good choice. I'm noticing less and less companies that use Angular.

·
Reply
Software Engineer ·

So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

READ MORE
19 upvotes·3 comments·1.6M views
Rishi Chawda
Rishi Chawda
·
March 15th 2019 at 7:16PM

After reading your post, I think you might find my boilerplate interesting. webpack + eslint + prettier config https://github.com/rishichawda/minimal-react-boilerplate

·
Reply
Johnny Bell
Johnny Bell
·
March 18th 2019 at 12:47AM

this looks epic, thanks man... I'm forking this for my next project.

·
Reply
W2AlharbiMe
W2AlharbiMe
·
March 16th 2019 at 11:19AM

nice

·
Reply
Software Engineer ·

I've been in the #frontend game for about 7 years now. I started coding in Sublime Text because all of the tutorials I was doing back then everyone was using it. I found the speed amazing compared to some other tools at the time. I kept using Sublime Text for about 4-5 years.

I find Sublime Text lacks some functionality, after all it is just a text editor rather than a full fledged IDE. I finally converted over to PhpStorm as I was working with Magento and Magento as you know is mainly #PHP based.

This was amazing all the features in PhpStorm I loved, the debugging features, and the control click feature when you click on a dependency or linked file it will take you to that file. It was great.

PhpStorm is kind of slow, I found that Prettier was taking a long time to format my code, and it just was lagging a lot so I was looking for alternatives. After watching some more tutorial videos I noticed that everyone was using Visual Studio Code. So I gave it a go, and its amazing.

It has support for everything I need with the plugins and the integration with Git is amazing. The speed of this IDE is blazing fast, and I wouldn't go back to using PhpStorm anymore. I highly recommend giving Visual Studio Code a try!

READ MORE
19 upvotes·1 comment·1.3M views
Ganesa Vijayakumar
Ganesa Vijayakumar
·
August 22nd 2019 at 6:44AM

Yes, you are correct!. thanks for sharing your experiences.

#Sublime Text is a generic text editor and it has more limitations when you consider it for any specific language or framework development like PHP.

#PhpStrom - I haven't tried it before but its name itself says that it is specifically built one for PHP development so it should satisfy you if you consider it for PHP development.

#Visual Studio Code - Yes, Now it's ranked as the Number ONE 1 tool for the generic purpose like a text editor or any specific Language or Framework developments and Yes, It enhanced lot in the recent times.

·
Reply
Software Engineer ·

So I am a huge fan of JIRA like #massive I used it for many many years, and really loved it, used it personally and at work. I would suggest every new workplace that I worked at to switch to JIRA instead of what I was using.

When I started at #StackShare we were using a Trello #Kanban board and I was so shocked at how easy the workflow was to follow, create new tasks and get tasks QA'd and deployed. What was so great about this was it didn't come with all the complexity of JIRA. Like setting up a project, user rules etc. You are able to hit the ground running with Trello and get tasks started right away without being overwhelmed with the complexity of options in JIRA

With a few TrelloPowerUps we were easily able to add GitHub integration and storyPoints to our cards and thats all we needed to get a really nice agile workflow going.

I'm not saying that JIRA is not useful, I can see larger companies being able to use the JIRA features and have the time to go through all the complex setup to get a really good workflow going. But for smaller #Startups that want to hit the ground running Trello for me is the way to go.

In saying that what I would love Trello to implement is to allow me to create custom fields. Right now we just have a Description field. So I am adding User Stories & How To Test in the Markdown of the Description if I could have these as custom fields then my #Agile workflow would be complete.

#StackDecisionsLaunch

READ MORE
17 upvotes·836K views
Software Engineer ·

For my portfolio websites and my personal OpenSource projects I had started exclusively using React and JavaScript so I needed a way to track any errors that we're happening for my users that I didn't uncover during my personal UAT.

I had narrowed it down to two tools LogRocket and Sentry (I also tried Bugsnag but it did not make the final two). Before I get into this I want to say that both of these tools are amazing and whichever you choose will suit your needs well.

I firstly decided to go with LogRocket the fact that they had a recorded screen capture of what the user was doing when the bug happened was amazing... I could go back and rewatch what the user did to replicate that error, this was fantastic. It was also very easy to setup and get going. They had options for React and Redux.js so you can track all your Redux.js actions. I had a fairly large Redux.js store, this was ended up being a issue, it killed the processing power on my machine, Chrome ended up using 2-4gb of ram, so I quickly disabled the Redux.js option.

After using LogRocket for a month or so I decided to switch to Sentry. I noticed that Sentry was openSorce and everyone was talking about Sentry so I thought I may as well give it a test drive. Setting it up was so easy, I had everything up and running within seconds. It also gives you the option to wrap an errorBoundry in React so get more specific errors. The simplicity of Sentry was a breath of fresh air, it allowed me find the bug that was shown to the user and fix that very simply. The UI for Sentry is beautiful and just really clean to look at, and their emails are also just perfect.

I have decided to stick with Sentry for the long run, I tested pretty much all the JS error loggers and I find Sentry the best.

READ MORE
17 upvotes·727.5K views
Software Engineer ·

For Stack Decisions I needed to add Markdown in the decision composer to give our users access to some general styling when writing their decisions. We used React & GraphQL on the #Frontend and Ruby & GraphQL on the backend.

Instead of using Showdown or another tool, We decided to parse the Markdown on the backend so we had more control over what we wanted to render in Markdown because we didn't want to enable all Markdown options, we also wanted to limit any malicious code or images to be embedded into the decisions and Markdown was a fairly large to import into our component so it was going to add a lot of kilobytes that we didn't need.

We also needed to style how the markdown looked, we are currently using Glamorous so I used that but we are planning to update this to Emotion at some stage as it has a fairly easy upgrade path rather than switching over to styled-components or one of the other cssInJs alternatives.

Also we used React-Mentions for tagging tools and topics in the decisions. Typing @ will let you tag a tool, and typing # will allow you to tag a topic.

The Markdown options that we chose to support are tags: a, code, u, b, em, pre, ul, ol, li.

If there are anymore tags you'd love to see added in the composer leave me a comment below and we will look into adding them.

#StackDecisionsLaunch

READ MORE
StackShare Decision Markdown Support - Johnny Bell Blog - Frontend Engineer (blog.johnnybell.io)
14 upvotes·710.3K views
Software Engineer ·

When I switched to Visual Studio Code 12 months ago from PhpStorm I was in love, it was great. However after using VS Code for a year, I see myself switching back and forth between WebStorm and VS Code. The VS Code plugins are great however I notice Prettier, auto importing of components and linking to the definitions often break, and I have to restart VS Code multiple times a week and sometimes a day.

We use Ruby here so I do like that Visual Studio Code highlights that for me out of the box, with WebStorm I'd need to probably also install RubyMine and have 2 IDE's going at the same time.

Should I stick with Visual Studio Code, or switch to something else? #help

READ MORE
Johnny Bell's Stack Decision | StackShare (stackshare.io)
13 upvotes·954.2K views
Replies (15)
Recommends
on
RubyMine

If you're working with both Ruby and JavaScript, buy RubyMine and shut down the other two. It's much better for Ruby than Visual Studio Code is. It can also do everything WebStorm does, if you install the plugins you need from JetBrains, and they all work together nicely.

READ MORE
13 upvotes·225.1K views
Software Developer ·
Recommends
on
RubyMine

If you install RubyMine, you shouldn't need WebStorm, as all the functionality of WebStorm appears to be included in RubyMine. (See here: https://softwareengineering.stackexchange.com/a/132950).

I've used PhpStorm for several years and have never needed to open (or even download) WebStorm for anything front-end or JavaScript related.

READ MORE
11 upvotes·1 comment·225K views
Johnny Bell
Johnny Bell
·
August 16th 2019 at 3:15AM

Marc, I was using PhpStorm for like 7 years when I was in magento and a PHP backend and I never needed WebStorm either as it had all the same features... you are convincing me to switch to RubyMine... Hmmmmmm 🤔

·
Reply
View all (15)
Software Engineer ·

When I first built my portfolio I used GitHub for the source control and deployed directly to Netlify on a push to master. This was a perfect setup, I didn't need any knowledge about #DevOps or anything, it was all just done for me.

One of the issues I had with Netlify was I wanted to gzip my JavaScript files, I had this setup in my #Webpack file, however Netlify didn't offer an easy way to set this.

Over the weekend I decided I wanted to know more about how #DevOps worked so I decided to switch from Netlify to Amazon S3. Instead of creating any #Git Webhooks I decided to use Buddy for my pipeline and to run commands. Buddy is a fantastic tool, very easy to setup builds, copying the files to my Amazon S3 bucket, then running some #AWS console commands to set the content-encoding of the JavaScript files. - Buddy is also free if you only have a few pipelines, so I didn't need to pay anything 🤙🏻.

When I made these changes I also wanted to monitor my code, and make sure I was keeping up with the best practices so I implemented Code Climate to look over my code and tell me where there code smells, issues, and other issues I've been super happy with it so far, on the free tier so its also free.

I did plan on using Amazon CloudFront for my SSL and cacheing, however it was overly complex to setup and it costs money. So I decided to go with the free tier of CloudFlare and it is amazing, best choice I've made for caching / SSL in a long time.

READ MORE
Portfolio - johnnyxbell | StackShare (stackshare.io)
11 upvotes·2 comments·368.3K views
biilmann
biilmann
·
January 28th 2019 at 8:39AM

Netlify gzips all text based files (js included) out of the box for clients sending the right accept header. No setup required.

·
Reply
Johnny Bell
Johnny Bell
·
January 28th 2019 at 3:52PM

Well that’s good to know, I couldn’t get it working though. I still host all my other apps on Netlify so I’ll give it a go.

·
Reply
Software Engineer ·
Shared a protip
on
Visual Studio CodeVisual Studio Code

Prettier not formatting code on save in Visual Studio Code? - I've come across the same issue and took me a long time googling around to find the issue.

It is actually a very simple fix. Add the below to your Visual Studio Code settings.json

"[javascript]": {
    "editor.formatOnSave": true
},
"[javascriptreact]": {
  "editor.formatOnSave": true
}
READ MORE
11 upvotes·93.2K views