If you are a TypeScript user like me, then you most likely used TSD aka TypeScript Definition manager for DefinitelyTyped. Now that TSD has officially been deprecated, you can either stick with TSD for the moment or upgrade to Typings now.
Firstly, lets uninstall TSD. You might have it installed locally and globally depending on your setup: npm uninstall tsd and npm uninstall tsd -g
Now keep in mind your typings folder will be completely changed to accommodate the new structure that Typings uses in comparison to TSD. If you have any custom typings in your folder either created by you or manually copied/pasted, back them up somewhere.
I love front-end development, but there is one thing about it that I do not particularly like: naming things. Using ID’s and classes on HTML elements and deciding what to name things in CSS is extremely hard. Even harder than solving cross-browser bugs.
Proving how difficult naming in CSS is, there are numerous methodologies such as; SMACSS (Scalable and Modular Architecture for CSS), BEM (Block Element Modifier), OOCSS (Object Oriented CSS), ACSS (Atomic CSS Architecture) and a few others.
I work with Bootstrap for its grid system from time to time. I sometimes need to add in custom styling using Bootstrap breakpoint sizes and the documentation for Bootstrap (at least version 3) is horrible.
Extra small: xs – 480px Small: sm – 768px Medium: md – 992px Large: lg – 1200px Depending on whether or not you’re working mobile first, which in that case you would be using min-width and if you’re working from a breakpoint based responsive workflow you would be using max-width instead.
We have all been conditioned and trained to decouple our styling from the DOM. Thanks to stylesheets we can separate our CSS from our HTML and all is well with the world (mostly).
But thanks to libraries like React.js, people have started using inline styling in their Javascript. For a brief moment in time I bought into the act, I drunk the Kool Aid and I was putting CSS in my React components courtesy of crowd-divider JSX.
As great as CSS is, there is one thing that it lacks and that is a parent selector. The supposed reason for its nonexistence is performance concerns.
People forget that the CSS specification as it currently stands offers many selector features which when used incorrectly could be considered bad for performance.
I think justifying the lack of :parent selector purely because of performance concerns is silly. It’s like Javascript lacking the native forEach method because it is less performant than a native for or while and can introduced performance issues.
It really does feel like the Microsoft team working on the Edge browser are legitimately trying to put out a decent and truly evergreen web browser.
Today is a glorious day for Edge users and developers alike. Support for the
Lets be honest. There are developers who love all of the additional styling for forms, typography and widgets that come with Bootstrap and there are those who absolutely despise everything Bootstrap has and stands for, with exception (for most) the great grid system.
Recently I wanted to use the Bootstrap grid system but without having to use Bootstrap itself. While Bootstrap does offer the ability to customise your download, if you are like me and you use JSPM or Bower for managing stuff like this or you use Git sub-modules, then including just a stylesheet file into your project isn’t the most ideal approach.
You’re probably aware of Facebook’s pride image overlay effect which allows you to add a gay pride flag overlay on your Facebook profile image. Today we are going to be recreating this incredibly simple effect, three different ways. First we will do it the Facebook way, followed by a couple of other approaches.
To demonstrate the effect I have created three Codepen’s so you can see the effect in action and fittingly used a picture of Donald Trump and his son to demonstrate the pride effect.
This isn’t a tutorial but rather a public service announcement. If you’re building a website that is going to be viewed in multiple languages, then you should be developing the site in a language other than the native language (in most cases English).
It seems like common sense, but you would be surprised how often different languages and responsive development are not considered at the same time.
Whilst working with an American video streaming platform startup last year the audience was going to be English and Spanish speaking countries. Naturally the designers only bothered to design everything in English, so when it came to building the site a lot of issues were encountered thanks to many single English words being two or more different words in Spanish.
As Alfred Pennyworth once profoundly said in The Dark Knight Rises:
Some front-end developers just want to watch the world burn.
Alfred Pennyworth, The Dark Knight Rises
As developers we are constantly learning, always growing and sometimes whether we realise it at the time or not, we are always making mistakes. Sometimes we make mistakes however small that pile on-top of one another which can result in some interesting consequences for our applications performance.