Today, I make Caldera Forms export to Excel.
Category: Programming
Coding
Making a website look good on all devices
N.b. Be sure to read this.
Responsive design is actually pretty straight forward. Use standard practices and don’t overcomplicate your html. But when we start to tweak something here or there, you quickly find yourself having to make sure that the code has adjustments for various devices. What does this mean to your programmer? Basically having to make changes to all of these:
/*********** Phones and handhelds ***********/
/*********** iPhones ***********/
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/*********** Galaxy Phones ***********/
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/*********** HTC Phones ***********/
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/*********** Tablets ***********/
/*********** iPads ***********/
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/*********** Galaxy Tablets ***********/
/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/*********** Nexus Tablets ***********/
/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/*********** Kindle Fire ***********/
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/*********** Laptops ***********/
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
/*********** Wearables ***********/
/*********** Apple Watch ***********/
/* ----------- Apple Watch ----------- */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
}
/*********** Moto 360 Watch ***********/
/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
Confessions of a programmer
My job does not pay me enough to afford the quantity of alcohol required to do my job. #coap
Robert De Niro is inside my head
Confessions of a programmer
Sometimes I think, "adult diapers probably aren’t that bad." #coap
Confessions of a programmer
Coffee is my fuel. #coap
Confessions of a programmer
Sometimes we program; other times, we guess. #coaj
Programmers
Use the error message, Luke.
Programmers
Terrified of buses; fascinated with rabbit holes.
You might be a programmer
You might be a programmer if…
…you’ve ever sat at your desk, computer in one hand, pot of coffee in the other, and considered wearing an adult diaper.
Calling SQL gurus – Is there a way to programmaticly prove data accuracy?
Say I have an existing MS SQL database with many tables. Now I’m going to import many more records. From a quality assurance standpoint, I’d like to be able to confirm that the existing data prior to the import was not inadvertently altered during the import of the new data (since the import includes some manipulation of the new data).
Is there a magical way to do this. I’m stuck on comparing record counts but that does really tell me if the existing data was altered during the import process.
Conceptually, I’d like to be able to essentially do something like a hash of the complete dataset before the import. Then after the import, query for all the old records, rehash and compare the two hashes.
Thoughts?
No, I won’t use your CMS
So I’m doing some ColdFusion research (the Adobe kind not the physics kind) and thought it might be time to bring CFNinja.com back to life (not that it ever had much of a life). I hesitate to turn CFNinja.com into a WordPress site since CFNinja originally started with the intent to be a central location for ColdFusion developers to collaborate and it seems silly to use a PHP driven application for a CF site. The recommendations for a CF CMS seems to be Content Box. I figured I would install it real quickly and compile some of my research using Contentbox on CFNinja. First, the online documentation goes to a 404 page:
Not good for a content management system to not be able to find its own documentation. Even the older docs 404. Ah! Just went to reproduce the problem and found another path to the docs. Hmm. Maybe I’ll do this afterall.
Any other alternatives for ColdFusion CMS systems?
SQL Query Conundrum
Here’s a interesting SQL challenge:
Say you have a query returning a result set that in some cases one row cancels out another. For example, let’s say there are 5 columns: A B C D E. One result possibility is: row 1- A B C 4 E with row 2- Z Y X 9 E Naturally those are completely separate data elements. But when row 1 is A B C 4 E and row 2 is A B C -4 E row two is a data correction to row 1 (think double entry accounting) and row 1 and row 2 need to be excluded from the result set. So, right now if the result set returned 20 rows and had the situation above, we really only want to be returning 18 rows. What’s a good approach to this?
Here’s a better representation of the problem:
Row Name Account Rank Value Status
- G H I 5 J
- A B C 4 E
- A B C -4 E
- Z Y C 4 E
- A B C 7 E
- Z Y C 22 E
We really want to return rows 1, 4, 5, and 6.
Query of queries reports runtime error
So are you pulling your hair out because your query of queries is returning an error "Query Of Queries runtime error."? The solution is rather simple. In your query that is feeding your QoQ, you probably have a column that is of datatype nchar. Cast that to a varchar and life will be good. Do the cast in the source query not the QoQ. eg. "CAST(foo AS varchar) AS bar" You’re welcome.
p.s. Yes, you can cast it to the same column name eg. "CAST(foo as varchar) AS bar" Case doesn’t matter.
jqGrid so powerful!
I am loving working with jqGrid. My latest discovery is the ease at which elements on the grid can be changed. For instance, if you want to change the default "View 1 – 10 of 98" you can do it in either the language file or simply by adding a parameter to the grid:
recordtext: "View {0} – {1} of {2} addwhateveryourwant",
