Feed powered byStream Blue Logo Copy 5Created with Sketch.
Avatar of Johnny Bell

Johnny Bell

Sr. Software Engineer at StackShare

Decision about GitHub, Gatsby, Netlify, styled-components, Redux.js, React, Firebase, Google, Frontend, ReactRally

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
GitHubGitHub
GatsbyGatsby
NetlifyNetlify
styled-componentsstyled-components
Redux.jsRedux.js
ReactReact
FirebaseFirebase
#Google
#Frontend
#ReactRally

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.

22 upvotes4 comments9.6K views

Decision about Prettier, Git, Magento, Sublime Text, PhpStorm, Visual Studio Code, PHP, Frontend

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
PrettierPrettier
GitGit
MagentoMagento
Sublime TextSublime Text
PhpStormPhpStorm
Visual Studio CodeVisual Studio Code
#PHP
#Frontend

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!

9 upvotes1.6K views

Decision at StackShare about styled-components, Emotion, Glamorous, Showdown, Ruby, GraphQL, React, Markdown, StackDecisionsLaunch, CssInJs, Frontend

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
styled-componentsstyled-components
EmotionEmotion
GlamorousGlamorous
ShowdownShowdown
RubyRuby
GraphQLGraphQL
ReactReact
MarkdownMarkdown
#StackDecisionsLaunch
#CssInJs
#Frontend

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

7 upvotes3.2K views

Decision at StackShare about Markdown, GitHub, Trello, JIRA, Startup, Kanban, StackDecisionsLaunch, Massive, TrelloPowerUps, StoryPoints, Agile

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
MarkdownMarkdown
GitHubGitHub
TrelloTrello
JIRAJIRA
#Startup
#Kanban
#StackDecisionsLaunch
#Massive
#TrelloPowerUps
#StoryPoints
#Agile

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

6 upvotes3.1K views

Decision about Redux.js, Bugsnag, Sentry, LogRocket, JavaScript, React, OpenSource, Chrome, OpenSorce, ErrorBoundry

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
Redux.jsRedux.js
BugsnagBugsnag
SentrySentry
LogRocketLogRocket
JavaScriptJavaScript
ReactReact
#OpenSource
#Chrome
#OpenSorce
#ErrorBoundry

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.

6 upvotes2.9K views

Decision at StackShare about Slack, Jell, Communications, Standups, RemoteTeam

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
SlackSlack
JellJell
#Communications
#Standups
#RemoteTeam

I love Jell! We have a remote team at StackShare so we need a very easy way to keep up with what everyone does day-to-day. I've worked in remote teams before and we were doing physical standups, with time differences and such this can be really troublesome and effect productivity. When I get into the office I open up Jell and log the tasks I did yesterday and what I plan on doing today. I then throughout the day can see in Slack when other people post their standups. I find this very efficient and more productive than traditional standups. Jell has become a vital tool in our workflow at StackShare

#RemoteTeam #Standups #Communications

5 upvotes1.8K views

Decision at IE Digital about Magento, GoogleOptimize, ABTesting

Avatar of johnnyxbell
Sr. Software Engineer at StackShare
MagentoMagento
#GoogleOptimize
#ABTesting

In the ABTesting world you have many many players now, even #google has jumped onboard with #GoogleOptimize. When I was working with Magento we needed a easy solution to change the color of the buy now button, move around the email signup, update menu items, etc.

I experimented with many of the ABTesting tools, but Optimizely was the one that was much better than the rest.

Optimizely was so easy to add to all of our various Magento sites, and then for us to inject a #ABtest, was just a couple of lines of code and you've got your test live and ready to go. It was so easy that we trained the Office Manager with no coding experience to add #ABtests.

The analytics that Optimizely offers is second to none, after a couple of weeks of running the test you can easily see which test is the best and then get the development team to implement that change.

Massive props to Optimizely for doing a great job 馃殌馃殌馃殌

2 upvotes1 comment552 views