Being a front-end software/web/app developer, in 2015, is awesome; we have evergreen browsers from all the major providers, the amount of browser specific hacks we need to use are the fewest. So many things have changed so much for the better. JavaScript as a language is going from strength to strength with the adoption of ES6 and fantastic tools such as babel that let ES5 browsers join the party.
But the rise of JavaScript has felt like a double edged sword of late, and I’m often left feeling like Neo in the Armoury.
Tank: What do you need? Neo: npm_modules… lots of npm_modules.
I received and email from McrFRED about a little competition they are running, to enter, I just needed to tweet something McrFRED related.
“It could be a McrFRED sticker, T-shirt, or you could make your own! LEGO? Desktop wallpaper? CodePen?”
CodePen eh? I’ve heard of the site and checked out a few demos but never personally uploaded anything.
So, what to make in as my first pen then? The header image on the email looked like something I could maybe re-create in just HTML and CSS with no images, as is all the rage these days – so that’s what I headed out to do.
The McrFRED header that I planned to create in just HTML and CSS.
The hard part here looked to be that repeating background, but I thought I’d seen something similar done before – which I found on Lea Verou’s CSS Patterns Gallery – but unfortunately, this was a) upside down, b) filled gradients rather than the outlines of the cubes I needed.
So I started to experiment, which is where Codepen really shines with the instant feedback as you change the code; pretty soon I had something resembling the cubes, but I had lines going through the centers of the cubes. More playing with the gradients I got what I was after. I found a guest post by Ana Tudor invaluable for understanding the maths to get the angles correct on the linear-gradients, the 25 minute spent absorbing that tutorial was extremely useful!
The base for the hexagon as grabbed from a jsfiddle by CreativePunch and tweaked to render in the correct orientation, I used a second hexagon slightly larger and below the main one for the border, as borders on the :before and :after elements didn’t render consistently across Firefox, Edge and Chrome.
The closest font I found for the text was Alegreya Sans SC from Google Fonts library. Finally, I added a few CSS animations then fired off the tweet.
All in all, a good bit of fun and a nice change from the current contract work I’m doing through the day.
Over the past month, I have been trialling Macaw to very quickly mock-up some site and web app designs – its a great tool and helps to greatly reduce the amount of Photoshop slicing I need to do.
I have however noticed that on two of my Windows machines, the tool icons just didn’t appear to be being drawn at all!
I’m not going to go into the ‘What is React/Why use it’ – if you need some motivation as to why, read why react? and take 45 minutes to watch Rethinking web app development.
So, for this post, I’m going to walk through building a simple Tic-Tac-Toe (Noughts & Crosses to us Brits) game, no frills or AI.
After getting a legacy project into Git version control on my local machine today, I was ready to push up to the repository created in our on-site hosted Git server.
But, I kept getting the following error message:
error: RPC failed; result=56, HTTP code = 0
fatal: The remote end hung up unexpectedly
It’s been just over a year working in the NHS, and it has been a very interesting experience where I have had the pleasure to work on some really great new systems using all the modern web has to offer, but have also had to work with and improve/maintain some not so enjoyable legacy systems, one of those being a proprietary stack (InterSystems Caché) built atop the MUMPS language and database.
For those that have not been fortunate to have experienced this environment, here is a very short explanation – MUMPS (or simply M), is a programming language providing ACID transaction processing and is tightly coupled to a NoSQL ‘schema-less’ database Read More »
There has never been a better time to pick up JavaScript as a first or an additional language, it is quickly becoming the language of the modern web. The current standard (ECMAScript 5) is a relatively small language compared to Java and PHP, and shares their C style syntax, but this is pretty much where the similarities end, as JavaScript is more akin to Lisp in operation.
With the launch of ECMAScript 6 Harmony right around the corner, which brings many conveniences from other languages and transpiled languages such as CoffeeScript – JavaScript is set to get a whole lot more interesting and possibly a little more difficult to understand, so getting a thorough grasp of the current standard before heading into the new stuff is a great way to go.
Fortunately, there have been some fantastic resources become available over the past few years.Read More »
This will stick until a page refresh, twitter will sometimes do this, so its not a permanent fix, but hopefully, Twitter will sort this UI out – there are so many complaints around already!
If you are using Chrome, you can add a bookmark to do this at the click of the toolbar – create a new bookmark in Chrome from the bookmark manager (Ctrl+Shift+O) -> Organize -> Add Page, with the title “Smaller Twitter Profile Fonts” and the url as:
Getting Package Control for Sublime Text 3 installed when behind a corporate firewall can be a challenge, so much so that I keep forgetting how to do it whenever I get a given a new computer to work on – so time to write this down!
Install CNTLM – once installed, open the cntlm.ini file (C:Program Files (x86)Cntlmcntlm.ini).
Set your Username to your domain username and your domain to your domain name.
Put a # in front of the password line.
Fill in the correct IP and Port number for your corporate proxy. (# out the other if there’s only one).
Save the ini file.
Open a command line and type cntlm -I -M http://test.com (note, you may need to cd to the path that cntlm is installed in first)
Copy the hash that gets returned into the ini file on the PassNTLMv2 line and remove the # from the beginning of that line, then save the ini file.
Run services.msc and find the cntlm service and start it.
Add "http_proxy": "localhost:3128" to your Sublime Text User Settings file.
Save that file.
Copy the installation text from the Package Control Website and paste it into a new file in Sublime Text.
Search for urllib.request.ProxyHandler() and in between those brackets add: {"http":"http://localhost:3128"}
Now, copy all that text and paste it into the Sublime Text console (Ctrl+`) and hit return.
You should see package control get installed successfully! (yay) once done, hit Ctrl+Shift+P and type packin and hit return and choose some packages to install!
Phew, all done!
Package Control behind a corporate proxy, if you have any other troublesome apps throwing 407 Authentication errors, then just configure them to point to localhost:3128 and ensure that the cntlm service is running – oh and don’t forget to update the hash in the cntlm config should you ever change your password 🙂
Why do keyboards not have a ” assigned to a key that doesn’t need to be pressed with a modifier?? As a developer, I use the key often, but there isn’t an obvious key to remove as such.
What this keyboard mapping will do, is make the Back Tick ` key the ” instead.
The functionality of the Back Tick key is pushed down the keyboard modifier chain, so the three characters are not lost, but do require some finger contortion skills, however, its far less stress on the fingers not having to Shift+2 any more!Read More »
brianbar.net 