CSS Archives - Falafel Software Blog

Is an 80 Character Code Line Length Still Relevant?

By | C#, CSS, JavaScript, TypeScript, Visual Studio | No Comments

If you’ve spent any time reading about coding standards on the internet, you’ve probably come across the suggestion to limit lines of code to 80 characters and wondered if it’s still relevant today. The advise to limit lines to 80 characters is often connected to the historical limit of 80 characters in terminal windows. But what if your team is not subject to this constraint? Are there still any benefits to adopting this limitation? I tried living with it for a while and here are my takeaways. Growing pains Indentation When I first set out to try this style out,…

Read More

Kendo UI Customization with CSS

By | CSS, HTML5, Kendo UI | One Comment

I’ve been using Kendo UI for many years now and I continue to be impressed with the many ways it can be extended and customized. Recently, I had a client request a Kendo Grid customization that at first glance seemed like it might require some code changes, but in the end, it could all be done purely with CSS. Here is the scenario as a CSS customization example: by default, the Kendo Grid shows the sort icon immediately after the header text and when using the column menu with a filter applied, it highlights the border around the column menu…

Read More

Language Options – An Introduction to Angular2

By | Angular 2, CSS, HTML5, JavaScript, Microsoft, News, Web | One Comment

This is post 2 of 11 in the series “An Introduction to Angular 2” Before you start developing an Angular2 application, there are a few selections that you have to make. One of those choices is the programming language that you want to use with Angular2. While Angular2 is a JavaScript framework at heart, there are nevertheless, a few options to choose from. In this column, we are going to look at the options and examine the differences in syntax, to help you make that choice. Background The JavaScript language specification standard is called ECMAScript, or ES.ECMAScript is standardized by the ECMA International standards organization and…

Read More

Ionic and Material Design, what’s the story?

By | Android, AngularJS, Cordova, CSS, HTML5, Ionic, iOS, JavaScript, Mobile, News | 4 Comments

Ionic is considered one of the most advanced HTML5 Mobile App Development Framework for building hybrid mobile applications. Ionic Apps are based on AngularJS and Cordova, and the framework’s components allow developers to create great looking mobile apps that could match their native counterparts. While Ionic equally supports iOS and Android, the development experience (and issues) slightly diverge between the two platforms. In this article, we are going to focus on Ionic and Material Design. Background Ionic 1.0 was released in May 2015. Since its inception, the platform incorporated the concept of Platform Continuity which translates into Platform-specific styles. This means that developers focus on building beautiful apps which…

Read More

Using Application Insights with Cordova Apps in Visual Studio

By | Azure, Cordova, CSS, Fun, HTML5, iOS, JavaScript, Mobile, News, Tools, Visual Studio | 3 Comments

Abstract When developing a mobile application, native or hybrid, we require a certain way to monitor and track different activities and events in the application. Developers need to detect issues, solve problems and continuously improve the application code. Marketers, on the other hand, want different kind of metrics. For instance, they want to know how many people are using the application on a daily basis, what features they are using and how they are interacting with the application. Background Application Insights is a set of services that provide actionable insight into a production application. It monitors your application to detect issues,…

Read More

Stop the Shake When Adding a Border on Hover

By | CSS, HTML5, Web | 4 Comments

A common scenario on a web page is to add a border around a clickable element when it is given focus.  Unfortunately this can cause a visible “shake” of the element and of any content below it when the border is displayed and when it is removed. Here is an example: Luckily there is an easy fix for this which is to include a transparent border on the element from the start. Here are the resulting CSS classes:

And now hovering over the image doesn’t “shake” the layout at all.

Read More

Custom Skin for Kendo UI DataViz Components

By | Fun, HTML5, JavaScript, Kendo UI, Mobile, MVVM, News, SPA, Web | One Comment

Kendo UI DataViz is a collection of components targeting data visualization such as charts, gauges and diagrams. These elements are indispensable in any application that deals with data aggregation and data presentation. When you develop an application, it is seldom that you are satisfied with the default theme (or the other themes) that Kendo UI offers because oftentimes you need to make your application look and behave like the original mockups that the designers put together. Just like other popular presentation frameworks, Kendo UI offers a Theme Builder that allows you to create your “unique” and custom theme. With a bit of…

Read More

Kendo Grid Hierarchy with Shared Column Headers

By | Kendo UI, Web | 5 Comments

The Kendo Grid is one of the most complex and configurable widgets in the Kendo framework.  One of the options is to use a hierarchical grid which allows you to display data in a master/detail or parent/child configuration.  The default layout will give you an expand/collapse button with a child grid that has its own columns and headers, as displayed in the Hierarchy Grid Demo: But what if your parent and child grids have the same columns and you want to show the child columns in line with the parent row?  Fortunately, we can do this with a little JavaScript and…

Read More

Chrome Developer Tools: FalafelCON Notes and Resources

By | FalafelCON, Web | One Comment

FalafelCON 2014 was an excellent weekend and it was fun presenting on Chrome Developer Tools and walking through all the ways DevTools allows you to inspect, debug, and tune your web sites. If you attended the talk, you know that we spent all of our time in Dev Tools with very few slides, but here is the outline and notes for the talk along with resources that you can use to review all the topics and steps we covered: The Web Developers Toolbox – Chrome Dev Tools Outline

Read More

Loading JavaScript and CSS Resources from Nested ASP.NET Partial Views

By | .NET, ASP.NET, News, Web | One Comment

The Problem When ASP.NET v4 was released, a cool feature from the beta was lost: the AssetsHelper class. Brock Allen has a great blog post explaining it and noting that it doesn’t exist in the RTM version. Basically, this helper class would allow you to emit some scripts and stylesheets from a partial view and have them bubble all the way up the tree of view elements to the layout where they would be displayed with all the other js and css files emitted by other parts of the view. For example, this partial view can render to assets:

And those assets can be…

Read More

Image Sprites made easy with Web Essentials

By | ASP.NET, Web | 2 Comments

In one of my previous posts, I showed you how to keep your Visual Studio Web Essentials settings in sync with the rest of your team. Today I’ll demonstrate one of the hidden gems in this great Visual Studio extension: creating image sprites. Image sprites will allow web browsers to load images dramatically faster and with Web Essentials, they can be created without much effort!

Read More

Best Adobe Brackets IDE Extensions

By | Web | 7 Comments

I’m a big fan of Sublime Text, but the project has become stagnant and fragmented when version 3 was introduced. Its neglect and lack of vision for version 3 stunted its potential. However, the upside is that this forced web developers to pay attention to other, more modern IDE’s, such Atom and Brackets. Brackets has been around for awhile. It is open source, backed by Adobe, and has an active community. The great thing about these modern IDE’s is that they are light and geared towards web development. Things like live HTML development and JavaScript debugging are built right in. Brackets is built…

Read More

Behold, the Kendo Checkbox

By | JavaScript, Kendo UI | One Comment

Telerik’s Kendo UI offers an extensive collection of UI widgets for your HTML5 applications. One widget that seems to be missing is a Kendo Checkbox. Technically, we don’t really need one because we can use Kendo’s MVVM binding on any HTML element, including inputs with type=”checkbox” so we can bind the enabled, checked, and label values. But there is certainly a place for a checkbox widget that is styled the same and offers the ease of Kendo’s declarative initialization. We are going to use a combination of Kendo’s Widget.extend() and CSS to create a custom Kendo Checkbox that has a custom look to match our application.

Read More

Running Cordova Multi-Device Hybrid App from Visual Studio On Android Device

By | .NET, Android, C#, Icenium, JavaScript, Kendo UI, Microsoft, Mobile, MVVM, Telerik, Tools | 15 Comments

As the name suggests, in this column I am going to show you how to run and debug your hybrid application from Visual Studio on your Android device. We will not be covering iOS here but in a later post. If you haven’t started developing Multi-Device Hybrid applications in Visual Studio then I suggest that you take a look at my previous post. If you have attempted to run your application on your Android device and you were not successful, read on. First of all, to run your application on your device, you need to select the “Device” mode in Visual…

Read More

Include CSS and JavaScript Resources in Sitefinity MVC Widgets

By | Sitefinity | 3 Comments

When Sitefinity added MVC in version 5.1, it was a real pleasure to create widgets the “new way” via MVC. What made it so unique is that Web Forms was still offered in the platform for developers to use as an alternative or hybrid approach, so you can mix Web Form and MVC controls on the same page. After the honeymoon stage was over, the community started to realize there was some serious limitations to the MVC implementation that made it nearly impossible to create pure MVC pages in the real world. Some examples were not being able to use your own…

Read More

Embedding Youtube Videos responsively

By | Sitefinity, Web | One Comment

Embedding external content into your website is one of the most common scenarios now a days. In this post, I will walk you through how you can embed Youtube URLs responsively. Step 1: Get the youtube embed source To get the Youtube embed source, simply go to Youtube.com and browse to your video and click share and embed. You will see embed code, typically, in an iframe like below Copy that code and paste in your HTML. Step 2: Wrap the iframe with a div Now lets wrap the iframe code we pasted in step 1 with a div so…

Read More

srcset – HTML5’s Extension for Adaptive Images

By | ASP.NET, JavaScript, Mobile, Tools, Web, WebUI | One Comment

Abstract  A few days ago, Chrome announced support for the srcset attribute through the release of Chrome 34 on their beta channel. So, why is that so important? Introduction First let me introduce the srcset attribute. The srcset attribute, which is a proposed attribute for the  <img /> element, allows authors to provide a set of images to handle graphical displays of varying dimensions and pixel densities. When authors of websites care so much about the resolution and the presentation of images, they can know use the attribute to create adaptive experiences so that the browser knows which image to serve…

Read More

Don’t let those fixed position headers bother you

By | Sitefinity, Web | No Comments

What are fixed position headers? A common navigation paradigm now a days, thanks to Bootstrap, is “fixed navigation headers”. In this paradigm the navigation elements of the website are in a fixed position generally fixed to the top of the browser screen. See below for an illustration – See the header above and the content starts after that. And when you scroll to see more content The content scrolls but header stays where it is. Why is it a problem in Sitefinity’s context? Now this presents a tricky problem when dealing with templates in Sitefinity. If I were use this…

Read More

Getting Started with Web Components

By | Uncategorized | 4 Comments

If you’re a web developer, have I got a treat for you! What if I told you that copying & pasting large chunks of HTML to your page or mutating the DOM via jQuery plugins is a thing of the past? What if I told you that those techniques are nothing but web hacks we have been programmed to accept for all these years? I imagine that right now you’re feeling a bit like Alice. Tumbling down the rabbit hole? “You felt it your entire life. That there’s something wrong with the web. You don’t know what it is, but it’s…

Read More

Add Page Names as HTML Classes

By | Uncategorized | One Comment

Wouldn’t it be great if you can specify different styles per page all from the stylesheet? For example, your home page may have a larger header section than the rest of your pages. The solution would be to add a different class on each page so you can do something like this: .header {   height: 30px; }   .home .header {   height: 100px; } Only problem with this is most of the time your pages are generated by a content management system or web application. That means, you would have to hook into the page lifecycle and add the page…

Read More

Fluid Column Layout with HTML and CSS

By | Web | No Comments

I recently needed to lay out content in columns that had variable height, yet still have every row line up evenly.  While it is possible to achieve this using display: table-cell; but I am building my content dynamically and I don’t necessarily know how many items will be displayed. The best solution for this is typically to use float: left; on each element that needs to be placed in columns and while I could set a specific width to have uniform columns, if the height of one of the cells was different, the items would start to stack on top…

Read More