Tailwind CSS with Parcel v2
Getting Tailwind to compile with Parcel v2 is easier than ever. We will leverage the Parcel v2 PostCSS support to automatically compile Tailwind assets with little configuration.
Frontend
HTML5, CSS3 and jQuery tutorials. Also some tools and guides.
Importing Foundation 6.4 ES2016 JS files with your favourite module bundler
With the release of Foundation 6.4, they have moved to a module-based JavaScript architecture. This is great and definitely the way to go. Documentation is a bit lacking in this regard, however. I’ll quickly demonstrate in this article how to set up Foundation with your favourite module-bundler.
Redux or MobX: What I learned after refactoring a medium-sized React app
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
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
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?
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?
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.
Integrating the jQuery Validation plugin with Twitter Bootstrap
Twitter Bootstrap has some nice styling for error messages in forms. Using jQuery form validation could come handy and its actually pretty easy to integrate. The question is, how do we use the Bootstrap styling along with jQuery Validation plugin? Read on for more.
How is responsive design the answer to mobile web consumption?
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
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
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
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
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
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
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.