Frontend

HTML5, CSS3 and jQuery tutorials. Also some tools and guides.

Redux or MobX: What I learned after refactoring a medium-sized React app

Posted by Danny Herran on Mar 17, 2017 in Frontend | 2 comments

React with Redux and MobX

State containers are a must for medium to large-sized React applications. The basic idea is to keep the state abstracted from your components and manage it somewhere else. Using a state container like Redux or MobX allows you to share a global centralised state across all your components.

This article is not a tutorial per se but a list of takeaways, pros and cons of each library and the impact on an existing React application.

State of affairs: Bootstrap 4 vs Foundation 6.3

Posted by Danny Herran on Mar 28, 2016 in Frontend | 56 comments

foundation-vs-bootstrap

Bootstrap 4 and Foundation 6 are the latest versions of the most widely used CSS frameworks out there. Foundation 6 is stable whereas Bootstrap 4 hasn’t been released yet. However, before you wonder why I am comparing a stable framework version vs an alpha one, let me set the record straight by saying that Bootstrap 4 may be very well used as a daily driver. Let us explore the current status of both frameworks, their features, flaws and decide which one is better suited to your needs.

These are the frontend web development tools that you should be using right now

Posted by Danny Herran on Nov 14, 2015 in Frontend | No comments

node-grunt-gulp-bower-npm-sass-browsersync

If you like to be on top of the latest frontend technologies, then this is the right post for you. Let us go through the most widely used frontend tools that will help you boost your productivity by leaving the hard work into their hands. All these tools are console based, so make sure you have at least Windows PowerShell installed if you are not on Linux or MacOS.

Why are frontend web development technologies so broken?

Posted by Danny Herran on Apr 3, 2015 in Frontend | No comments

W3C

If you have worked in frontend web development lately, you probably have realised how messy the whole thing is. From languages that compile on top of other languages to the ridiculous amount of frameworks that are published every day. In fact, you are probably already struggling to keep up; but trust me. you are not alone. Let’s take a look at what is going on and how we got here in the first place.

How to force a cache refresh on CSS and JavaScript files with PHP?

Posted by Danny Herran on Dec 30, 2012 in Backend, Frontend | 1 comment

cache-internet-explorer-ie

There is your client, complaining that they can’t see the changes you just made to their website. You explain them that they need to delete their browser cache in order to properly visualize the modifications. They said they don’t know how, and this is when you lose your patience and decide for a more radical solution. We are developers right? there has to be something easier than explaining the client how to delete their cache. Read on for more.

How is responsive design the answer to mobile web consumption?

Posted by Danny Herran on Feb 13, 2012 in Frontend, Other Stuff | No comments

The number of people perusing the web on mobile devices is huge, nobody can say otherwise. Ericsson reported that in the past year, mobile traffic more than doubled. The number of users in the United States alone who use the internet via a mobile device grew 19% over the past year. The Times of India recently reported that the number of mobile phones in the United Kingdom is now greater than the number of people there; not only that, but 27% of the adult population in Britain now uses a smartphone. It’s becoming clear that mobile browsing isn’t only here to stay, but it’s here to change the way we consume media. What does this mean for content creators and designers? In short, we must adapt and begin thinking about content in a more inclusive fashion.

How to add a Twitter Poll to your website

Posted by Danny Herran on Jun 17, 2011 in Frontend, Social Networking | 1 comment

Twitter is great and with it comes great ideas from everywhere. Today, I decided to try a new kind of poll that I really liked and will boost your Twitter mentions a lot. I am talking about Twitter Polls. If you don’t know what it is, keep reading, you will enjoy it.

Alternate row colors with pure CSS3

Posted by Danny Herran on Apr 29, 2011 in Frontend | 6 comments

Pure CCS3 Alternate Row Colors CSS3 is here. All the modern browsers support it, even the infamous Internet Explorer in its 9th version. In this small article we will learn how to alternate row colors in a table, or any other HTML element with pure CSS3. The best part is that you will be able to do it in just 2 lines. No more PHP hacks or JavaScript chunky chunks.

63% of web video is HTML5 friendly

Posted by Danny Herran on Mar 2, 2011 in Frontend | No comments

63% of web video is HTML5 friendly According to MeFeedia, from all the web videos around the net, 63% of them are HTML5 friendly. For those on iPad or iPhones, it believe this is a very good thing. Flash is a thing of the past for watching videos on your smartphone or personal computer, considering a year ago the percentage of HTML5 compatible videos was just about 10%.

A little dot that made me pull my hair off

Posted by Danny Herran on Oct 15, 2010 in Frontend, Other Stuff | No comments

I was coding a long signup form, a very nice one, with the jQuery Validation Plugin, but it wasn’t working. I started to strip the code, piece by piece so I can identify what was causing the plugin to ignore the form and I came up with the most stupid error you will ever seen in your life (at least I think so).

Yes, a little dot that I don’t even know how to write with my keyboard. I even tried to replicate it and I couldn’t. 2 hours of coding wasted on this little bastard. Can you believe that?…

Element indexes and jQuery

Posted by Danny Herran on Aug 10, 2010 in Frontend | No comments

Once the DOM is structured by the browser, each element in our HTML page has an index relative to its parent. Retrieving an element’s index with jQuery is an easy task, and it is so useful that it can save you a couple of lines of code.

Change selected option by value on select list with jQuery

Posted by Danny Herran on Aug 10, 2010 in Frontend | 3 comments

You have a select element, and you need to “select” one of its options based on one of its values. What you do is use the “selected-selector” of jQuery to do it in a single line.

Lets say I have the following select element and I need to dynamically select the option with a value of 3, which would be the “Peach”.

<select name="myselect" id="myselect">
	<option value="1">Apple</option>
	<option value="2">Pear</option>
	<option value="3">Peach</option>
	<option value="4">Orange</option>
</select>

 

$("#myselect option[value=3]").attr('selected', 'selected');

// Or just...
$("#myselect").val(3);

If you want to get a little bit more technical, make sure you read the official jQuery documentation regarding this subject.

Fix / workaround for the z-index problem on IE7

Posted by Danny Herran on Aug 9, 2010 in Frontend | No comments

IE7 behaves strangely when we talk about z-index. It doesn’t always respect the z-index values of our elements. However, if you come around this weird stuff, just add a higher z-index to the parent of the element you want to put above everything else. Don’t ask me why this works but it does!

Lets take a look at a small example:

<div style="z-index: 3000">
  <div style="position:absolute;z-index:1000;">
    this element will appear above everything else
    <a href="#">Page</a>
        ...
  </div>
</div>