Author: tomschrimshaw

AnimXYZ

development

Through a creative newsletter I am subscribed to, I was recently informed of a composable css/scss based animation/transition framework. Currently it can be used via css, scss, vue.js and the react.js implementation is soon to be released.

AnimXYZ website screen shot

It just so happened I was starting to work on transitions for the project I’m currently building, so was perfect timing. Essentially it abstracts away from key-frames in css and saves a load of time. Using predefined attributes and values you quickly attach animations to elements and can nest them to work alongside a parent element’s animation. Furthermore, they have made each part of an animation customisable, allowing you to create your own specification. This is done via AnimXYZ css values attached to a custom css rule.

I am loving it, especially as it’s saving me a load of time and making more complex animations so much more accessible. It is for sure worth a go, I believe I will use it from now on!

Twitter Likes/Faves

development, projects

Now that Christmas is over I have decided to get on with my next project. Like the bookmarks tool I made, I am utilising another information source to create a tool for quicker/more visible development information. I have always used twitter as another source of information when it comes to programming/development work as it tends to highlight new and interesting updates in the dev world. Essentially I am going to gather the favourite/likes of a user to display via a user search.

To do so I have needed to apply for twitter API access. Luckily I was approved very quickly. However, it did take a bit of reading to make sure I got my application written correctly.

I intend to use bootstrap along with react in order to create a single page tool whilst gaining more insight with bootstrap as a CSS framework. First I’ll get it to search for a user’s likes and I may add extra features later if all goes well. For example, adding other people’s likes to my own account, therefore, saving for later reference.

Jira and Trello

workflow

Recently I have been given some great career / development advice and among the list I was advised to look at a couple of software options for workflow management. Therefore, I could get used to how modern workplaces keep track of projects and the methodologies that surround them (agile, scrum, kanban, sprints etc).

So, today I had a look at two: Trello and Jira. Both are very interesting and have similar features, including integration with version control, task automation, bug tracking etc. For now I have decided to look at and use Jira as it seems to have a little more flexibility in the methodologies and layouts you can use (at least on the surface). I also really like that you can connect it up to GitHub or GitBucket and it creates a branch on the repo when you create a ticket / issue.

I can see how and why companies use these services as they help centralise work flow and keep everyone updated much more efficiently than I have experienced in previous development roles.

React and MySQL

development

Recently I have taken a closer look at hooking up a React app to a MySQL database. Mainly so I have a better understanding of alternatives to local storage or an app that relies on a running express server to hold persisting data.

So far through the use of node.js, the ‘mysql‘ package, and Wampserver, I have gotten a local MySQL database to connect with the react app. Doing so has allowed me to practice querying and creating a database, creating tables, inserting information, and selecting information from the database.

Next, I’m aiming to connect it to my website server instead of just a local connection. Then I can really get to grips with manipulating stored data for future projects and potentially CMS creation.

Bookmarks visualiser

projects
Bookmarks visualiser project screen shot of parsed bookmarks file.

To go back and solidify my vanilla JavaScript knowledge I decided to build out a bookmarks tool. In particular I wanted to make my bookmarks more visible and navigable, it has particularly annoyed me the way chrome does not have a directly viewable interface for them. So, using JS, SCSS, HTML and node.js I went about creating something I wanted to see.

To cover the most widely used file formats possible I found ways to parse and visualize exported html, Chrome json bookmark files and Mozilla jsonlz4 files. Originally I wanted the tool to auto read either the Mozilla or Chrome files depending on the browser in use. However, I soon came to realise that to do so you would have to access the users hard drive and for obvious security reasons this is not possible. Or is at least legally frowned upon! So, with the use of a couple of JavaScript packages I refactored it so the user could choose a file via a file input element. The file then gets uploaded to the express server via Multer and read by the corresponding parser depending on the file extension.

Ultimately I created a version of what I had set out to accomplish and learnt a fair few things along the way (Multer, file uploading and limitations). But now I have a much more visible and navigable way to utilise my collected resources and references in my bookmarks. Hurrah!!

Readable (extra-curricular)

projects

Having completed the last required project for the React course ahead of time, and gone through the extra git course, I decided to take on the extra React / Redux project. Essentially it is an anonymous post and comment app where the user can vote up or down on a post and / or comment and has features to create, edit and delete posts / comments. Oh, and of course I made sure it used responsive design to suit all screen sizes, like all my recent projects. (github)

Screen shot of Readable app home page displaying three category posts

This project was a little more open and detailed than the previous one, which meant I got a chance to use a few more hooks and really help solidify my understanding or React and Redux. All whilst challenging myself with a tighter schedule. I also made sure I incorporated styled components from the beginning, and again, helped me form a greater understanding of it’s use. Styled components certainly feels like it suits being used with React!

Being able to complete the project within the allotted remaining time and incorporating all the features I wanted has boosted my confidence using all the technologies involved. I learnt more about using the ‘useEffect’ hook by getting it to look for changes in specific data. Furthermore, using nested styles and passing props in styled components.

React Native flash cards

projects

I have now completed the Udacity React nano-degree by finishing and passing the react-native project. Although, as per usual, I went a bit further than what was required, so I could get as much out of this as possible. I successfully created a whole new section that displayed results for completed quizzes. Each result displayed: the category it related to, the highest score achieved, the date of that score, and how many times the quiz had been attempted. All of which is stored in the device via ‘async-storage’.

The use of styled components, transitions, and native platform specific material design was incorporated from the start. Some were required for the project and others were extras that I used to further my knowledge. There were also several new things learnt during this production, for example, how to actually nest different native navigation methods and the use of native specific react components.

I looked forward to this project in particular as I have been wanting to develop mobile apps for some time. Furthermore, being able to create such products using a widely used and accessible language makes it even more exciting and not too niche. Having said that, it is a little frustrating that I wasn’t able to simultaneously build it for iOS, due to not owning a mac. However, now I know the framework a bit better, once I have the hardware I will be able to take full advantage of React-Native.

(GitHub)

React / Redux, ‘would you rather’

projects

Straight after finishing the first React project I got on with the next section of the Udacity course. This part was all about including Redux and creating a single source of truth. I.E. holding data in a single place to avoid duplication or unintended changes which could create hard to solve bugs.

The project for this section asked me to create an app based around the game ‘would you rather‘. Using Redux, I would store user details and questions. The data also stored who had answered which questions and who created them. The user was also ranked based on the number of questions created and answered.

Creating this app proved to be a sound way to get my head around: reducers, actions and the implementation of basic UI transitions. After submission, I passed all the requirements and was given some great suggestions which I immediately refactored into the project, especially as I wanted to know the best ways of doing things. For example, separating concerns by not accessing a DOM element outside a component’s render function. I also found the way React updates the correct elements when the store state changes to be really interesting and a much more efficient way of doing things.

I managed to put all the required functionality in place well within the required / suggested time so went about adding extra features. For example, a sign up landing page where the user can log in to a previously created profile or create a new one. The signup form also had validation to make sure a new profile didn’t already exist. Ultimately, I learnt a lot from this project and it has given me more confidence to try new things moving forward.