Tag Archives: tech

Tim Cook: “we would never make a seven inch tablet.”

25 Oct

Those who have been paying attention to Apple over the years remembered one thing when the company revealed the iPad mini earlier this week: Steve Jobs’ outspoken criticism of the 7-inch tablet form factor. Current CEO Tim Cook has just addressed those comments, saying on Apple’s earnings call that “we would never make a seven inch tablet.” He continued on to say that “The iPad mini is not a compromised product like the 7-inch tablets on the market.”

As the Apple CEO points out in his comments (audio below), the company took quite a bit of time out of its keynote on Tuesday to compare the Nexus 7 to the iPad mini, with Phil Schiller saying that “The iPad mini has a third larger display area.” That all comes down to the iPad mini’s 7.9-inch display, which Tim Cook clearly believes is significantly different than the seven inches offered by the Nexus 7. That’s a good thing, too: otherwise Apple may have taken Jobs’ advice and “include sandpaper so users can sand their fingers down to a quarter of their size.”

Let me be clear, we would never make a seven inch tablet. We don’t think they’re good products, and we would never make one. Not just because it’s 7-inch, but for many reasons. One of the reasons… is size.

100Feed: How to Safely Photograph Sunday’s Eclipse

17 May

On Sunday, May 20, the western half of the United States will be treated to a spectacular annular eclipse as the sun sets in the western sky.
This 4 1/2-minute-long “ring of fire” as the moon blocks the sun will be visible to observers along a narrow track that stretches from Northern California to the Texas Panhandle.

The last time an annular eclipse was widely visible in the United States was May 10, 1994. After Sunday, the next one to be seen in the country won’t occur until Oct. 14, 2023.

If you’re planning to shoot this weekend’s eclipse with a digital camera, particularly a digital single-lens reflex (DSLR) camera, here are a few pointers to increase your chances of success:

1. Use a proper solar filter: Never look at the sun with your naked eyes, or through a telescope, binocular or camera viewfinder without a safe solar filter. Failure to do so can result in serious eye injury or blindness.

Use a No. 14 welder’s glass filter, or purchase special solar filters from companies such as Thousand Oaks, Kendrick Astro Instruments, or Orion Telescopes & Binoculars, and fit them securely in front of your equipment.

2. Use a telescope or telephoto lens with a focal length of 400 millimeters or more: This helps to get detailed, close-up shots of the eclipse. This will give you a reasonably large image of the sun’s disk in the frame.

3. Use a sturdy tripod or mount: Make sure your tripod and head are strong and stable enough to support your camera gear. Keep your setup as portable, light and easy to assemble as possible in case you need to relocate in a hurry to escape clouds.

4. Set the camera to its highest resolution: To record as much detail and color information as possible, use your camera’s highest-quality (least-compressed) JPEG setting or “lossless” (uncompressed) image formats, such as TIFF or RAW.

5. Use a high ISO setting: Set your camera to ISO 400 (or higher) to keep exposures very short and prevent blurring from vibrations.

6. Switch to manual: Set your camera to “manual” (M) so you’ll be able to control its focus as well as exposure and white-balance settings.

7. Focus carefully: Don’t let poor focus ruin your images. If possible, prefocus your camera the night before the eclipse using a bright star.
Otherwise, focus carefully on the sun’s edge (or on sunspots, if some are visible). Place a piece of adhesive tape on your telephoto’s focus ring (or lock the telescope focuser) to keep it from accidentally being moved during the eclipse. Be sure to recheck your focus as the eclipse progresses and refine it if needed.

8. Minimize vibrations: The mirror slap in DSLRs can cause blurred images. If possible, use the camera’s mirror lock-up feature before each shot to keep vibrations to a minimum. You should also operate the shutter with an electronic cable release to eliminate camera shake. Lastly, choose an observing spot that is shielded from the wind.

9. “Bracket” your exposures: It’s a challenge to determine the correct exposure beforehand, so shoot the eclipse at various shutter speeds.
10. Use a fresh battery: DSLRs can easily drain their batteries, especially if you use the LCD screen continuously. Make sure you have a fully charged battery right before the eclipse begins, and have a spare one handy, just in case.

11. Test your imaging setup: Be sure to try out your actual setup before the eclipse. This will reveal any potential problems with focusing and vibrations, as well as internal reflections or vignetting in the optics. Take some test shots of the sun to give you an idea of what exposure to use with your solar filter.

12. Try to shoot the sun in hydrogen-alpha: Unlike “white light,” the plain, visible light from the sun, H-alpha is the red light given off by hydrogen atoms in the sun’s atmosphere. A portable H-alpha telescope offers a wealth of stunning details of the sun at a wavelength of 656.3 nanometers.

13. Process your images: Since the camera’s output is already in digital format, it’s easy to enhance the images’ brightness, contrast, sharpness and color balance using image-editing software such as Adobe Photoshop. You can also “stitch” the frames together to create a movie.
Shooting the Eclipse with Video

As with digital cameras, you need a proper solar filter over your camcorder when recording the sun.

Today’s camcorders have zoom lenses with up to 40x (or more) optical magnification. To videotape the eclipse, simply mount the camcorder on a tripod and zoom in on the filtered sun to the lens’s highest power. (Hand-holding the camcorder can result in shaky footage.) High-end camcorders have manual controls for adjusting the gain, f-stop and shutter speed so you don’t overexpose the sun’s disk.

Again, it is best to test your setup before the eclipse. On the day of the event, be sure to use a fully charged battery and bring a spare one as backup. Take two- to three-second clips every two to five minutes to produce a time-lapse sequence that compresses the eclipse’s hourlong partial phase into just under a minute.

High-end DSLRs are capable of shooting HD video. (Check your camera manual.) In a pinch, you also can use your cell phone camera to shoot video (or still images) through a filtered telescope. Low-cost webcams can also be useful.

Good luck on E-Day!

100Feed: The New Invisible Television

16 May

From Yahoo!

If the allure of having a flat-panel display mounted to your wall just isn’t enough anymore, the completely transparent Loewe Invisio might be just what you’re looking for. Designed by Michael Friebe, the transparent television made a big splash in the 2011 iF Concept Design competition, and if we’re lucky we may soon see it in our own homes.

Loewe is well known in Europe for its high-end televisions and audio hardware. In fact, the company is said to be in talks with Apple about a possible acquisition. This would give Apple a huge head start if the company decides to release a long-rumored Apple-branded HDTV, and would mean products like the futuristic Invisio could arrive stateside sooner rather than later.

The Invsio looks absolutely stunning — well, as stunning as a see-through television can look. The clear LCD technology allows the display to pop to life when you hit the power button, but then disappear the instant you shut it off. The bottom portion of the set houses all the important bits, and the entire unit can be mounted on a wall if you’re not a fan of the shiny silver tabletop stand.

Without a border or frame of any kind, the screen is meant to blend in seamlessly with its surroundings when not in use. The Invisio is clearly meant for TV lovers who want their living rooms to have an air of sophistication on nights when must-see-TV isn’t a priority. Of course, if the rear of your entertainment center is littered with cords, you’re going to want to clean them up before showing off a new transparent TV.

But don’t start saving for this futuristic display just yet — the Invisio isn’t yet a Loewe’s retail offering, and because it’s still considered a concept, it may never be. Of course, one look at the company’s plans for other future products — including a TV with two screens and a mirror with built-in social displays (pictured below) — should be enough to tell you that the Invisio may very well see the light of day.

If the Inviso concept sounds like something out of science fiction, don’t forget that transparent LCD technology has been around for a while now. Samsung has already shown off its own see-through “Smart Window” technology which allows users to interact with apps, or even pull down a set of virtual shades to dim the daylight. The Invisio would likely work in a similar fashion, though without the addition of touchscreen controls.

Regardless of whether or not it ever becomes a reality, the fact that we have the technology available to make see-through televisions is enough to make us feel like we’re living in the future. And if the rumored Apple acquisition does indeed take place, who knows what other ridiculously cool concepts could eventually emerge from the deal.

Article by Mike Wehner

100Feed: 100 Tips and Tricks for CSS Coding

25 Apr

CSS logo

1 It’s critical when working with CSS to be aware of the various properties at your disposal and how to use them correctly.

2 Using a good editor can increase productivity. Syntax highlighting and auto-complete functionality (plus validation and code references) make life easy. Check out Notepad++, Coda, and don’t discount Dreamweaver CS’s code view until you try it.

3 In many ways, experimentation is the mother of innovation. Give yourself time to play; trial and error will help you learn and memorize techniques quickly. Check out these CSS3 experiments, for inspiration: How to Create Inset Typography with CSS3, Semantic CSS3 Lightboxes, and 10 Interesting CSS3 Experiments and Demos.

4 Enable Gzip compression server-side whenever possible; it shrinks the size of files such as CSS and JavaScript without removing any of the content.

5 Caching will conserve bandwidth for visitors and account for much faster speeds. Take advantage of it whenever you can. Learn about optimizing browser caching.

6 Whitespace is important for CSS readability. Using whitespace to format your stylesheet adds bytes to the file size, but it’s made up for in increased readability.

7 Avoid using inline code (in either elements using the style attribute or in the HTML document within tags), and put them instead in your external stylesheets. It’ll be easier to maintain and also takes advantage of browser caching.

8 Whatever method you use to lay code out, be consistent. You’ll avoid potential problems such as misinterpretation.

9 Conditional comments can help you target versions of Internet Explorer for style. Filtering vendor-specific code isn’t ideal, and comments are safer than ugly hacks.

10 This tip is slightly controversial, but I recommend using a single stylesheet rather than multiple ones. It reduces the number of HTTP requests and improves maintainability, giving your site a performance gain. This is a tip supported by Google Page Speed guidelines.

11 When there are conflicting style rules, style rules that are later down the stylesheet supersedes the ones that come before it. Thus, put mission-critical declarations at the end, where they won’t be in danger of being overridden by other styles.

12 If you encounter a bug and can’t determine its cause, disable CSS (using something like Firebug or the Web Developer add-on) or simply comment out all of the styles, and then bring selectors back one by one until the fault is replicated (and thus identified).

13 Make sure your code works in various browsers. Check it against the latest versions of the top five: Internet Explorer, Firefox, Chrome, Safari and Opera.

14 Additionally, ensure that your code will degrade gracefully when CSS is disabled in the user’s browser. To test this, either turn styles off in every browser or use a text browser such as Lynx.

15 Ensuring that your code degrades gracefully is obviously important, but many people forget that some visitors will have a dodgy browser or have styles turned off, so check that your fallbacks work.

16 Every browser has a built-in debugger. In IE and Firefox you can get to the inspector by hitting F12; for Chrome, Safari and Opera, press Ctrl + Shift + I.

17 Browser emulators can’t replace the real thing, so use a real or virtualized edition of a browser or device.

18 Did you know that PHP code can create dynamic CSS files? Here’s a tutorial on that. Just give the file a .php extension and ensure that the file declares the document header with a text/css content type.

19 Naming CSS files can be tricky. One of the best ways to approach the task is to keep file names short and descriptive, like screen.css, styles.css or print.css.

20 Any code or process you create is valuable, and recycling what you’ve produced for other projects is not a bad thing: pre-existing code is a great timesaver, and this is how JavaScript and CSS frameworks are born.

21 While comments in CSS files can assist other people who read or maintain them, avoid writing comments unless they are required. Comments consume bandwidth. Write CSS in a self-explanatory manner by organizing them intuitively and using good naming conventions.

22 If you’re struggling to remember what’s available in CSS (or even CSS3), get some cheat sheets. They’re simple and can help you get used to the syntax. Here are some excellent CSS cheat sheets: CSS Cheat Sheet (Added Bytes), CSS Shorthand Cheat Sheet (Michael Leigeber), CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) (Smashing Magazine).

23 Bad code breaks more websites than anything else. Validate your code by using the free, web-based W3C CSS Validation Service to reduce potential faults.

24 Vendor-specific CSS won’t validate under the current W3C specifications (CSS2.1), but could give your design some useful enhancements. Plus, if you’d like to use some CSS3 for progressive enhancement, there’s no way around using them in some instances. For example, the -webkit-transform and -moz-transform property was used to progressively enhance these CSS3-animated cards for users using Safari, Chrome, and Mozilla Firefox.

25 Keep multiple CSS files in a single directory, with an intuitive name such as css/. If your website has hundreds of pages, maintainability and information architecture are vital.

26 Be careful when using the media attribute in your HTML declaration for an external CSS file. You might be unable to use media queries to better provide pre-cached alternative visuals.

27 If you find elements that use the same properties and values, group them together by using a comma (,) to separate each selector. This will save you from repetition. For example, if you have the following:
h1 { color:#000; }
h2 { color:#000; }
Combine them as such: h1, h2 { color:#000; }

28 Printer-friendly stylesheets are very important if you want to save your visitors’ ink and paper. Use the @media print at-rule, and remove anything that isn’t necessary on the printed page.

29 Accessibility also has to do with how the written word is spoken. The aural (now deprecated in CSS) and speech media queries can improve usability for screen readers.

30 Unfortunately, the handheld media query in CSS isn’t widely supported. If you want your website to work on mobile devices, don’t depend on it to serve the correct visuals to mobile devices.

31 Take the time to eliminate duplicate references and conflicts in your CSS. It will take some time, but you’ll get a more streamlined render and fewer bytes in your files.

32 When working with mouse hover events, deal with the (1) :link pseudo-class, then (2) :visited, then (3) :hover and finally (4) :active — in that order. This is necessary because of the cascade.

33 Making a website work well on Apple iOS devices is straightforward: to scale your design, just use CSS3 media queries with the appropriate min-width and max-width values. Here’s a tutorial for that.

34 Make the most of CSS inheritance by applying required styles to parent elements before applying them to the children. You could hit several birds with one stone.

35 You can apply multiple classes to an element with space separation, which is great if you want to share properties with numerous elements without overwriting other styles.

36 If you don’t want to deal with IE6′s conditional comment quirks–they require a separate CSS file–then you can use the star hack (* html) selector, which is clean and validates.

37 HTML tooltips are fine for plain text, but the :hover pseudo-class for CSS tooltips gives you more options for showing styled content. Check out this tutorial on how to create CSS-only tooltips.

38 Using attribute selectors, you can add icons or unique styles depending on the file type you link to in an anchor. Here’s an example with which you can add style to a PDF link: a[href$=’.pdf].

39 You can also use attribute selectors to target a specific pseudo-protocol such as mailto or skype: [href^=”skype:”].

40 Rendering CSS takes time, and listing selectors adds bytes. Reduce the workload of a renderer by using only the selectors you require (an id is better than many child references).

41 Not everyone will agree with this, but I recommend writing every “custom” selector down as a class (before making it an id) to help eliminate duplicate entries.

42 When structuring your CSS file by selectors, the convention is to list elements, then classes (for common components) and finally any ids (for specific, unique styles).

43 Naming conventions for selectors are important. Never use names that describe physical attributes (such as redLink), because changing the value later could render the name inappropriate.

44 Case sensitivity relates to naming conventions. Some people use dashes (e.g. content wrapper) or underscores (i.e. content_wrapper), but I highly recommend using camel case (e.g. contentWrapper) for simplicity.

45 The universal selector (*) is used widely in CSS reset mechanisms to apply specific properties to everything. Avoid it if you can; it increases the rendering load.

46 With CSS3 media queries, you can easily target the orientation of a viewport with portrait or landscape mode. This way, handheld devices make the most of their display area.

47 Apple’s devices are unique in that they support a tag, which has stylistic value attached to it. You can use this to force the screen to zoom at a fixed rate of 100%.

48 The two CSS3 pseudo-elements, :target and :checked have great potential. They apply their designated style only to certain events and can be useful as hover event alternatives.

49 Embedding content in CSS is a unique way to give anchor links some description in printer-friendly stylesheets. Try them with the ::before or ::after pseudo-elements.

50 IDs can serve a dual purpose in CSS. They can be used to apply styling to a single element and to act as an anchoring fragment identifier to a particular point on the page.

51 Many designs are focused on grids and the rectangular regions of the viewport. Instead, create the illusion of breaking out of the box for added effect.

52 If margin: auto; on the left and right sides isn’t getting you the central point you desire, try using left: 50%; position: absolute; and a negative margin half the width of the item.

53 Remember that the width of an item constitutes the specified width as well as the border width and any padding and margins.

54 Don’t use CSS resets. They are generally not needed if you take the time to code well.

55 A CSS framework such as Blueprint or YUI Grids CSS might assist you speed up development time. It’s a bit of extra code for the user to download, but it can save you time.

56 Remember that Internet Explorer 6 does not support fixed positioning. If you want a menu (or something else) to be sticky, it will require some hacks or hasLayout trickery.

57 Whitespace in web designs is amazing; don’t forget it. Use margins and padding to give your layout and its content some breathing room. You’ll create a better user experience.

58 If one thing over-complicates the task of scaling a design the way you want, it’s using inconsistent measurements. Standardize the way you style.

59 Different browsers have different implementations; visually impaired users may want to zoom in, for example. Give your layout a quick zoom-test in web browsers to ensure the style doesn’t break! 60 Most browsers can use box-shadow without extra HTML. IE can do the same with filter:
progid:DXImageTransform.Microsoft.Shadow(color=’#CCCCCC’, Direction=135, Strength=5);

61 Rounded corners aren’t as difficult to make as they used to be. CSS3 lets you use the border-radius property to declare the curvature of each corner without surplus mark-up and the use of images.

62 One disadvantage of liquid layouts is that viewing on a large screen makes content spill across the viewport. Retain your desired layout and its limits by using min-width and max-width.

63 WebKit animations and transitions might work only in Safari and Chrome, but they do add a few extra unique, graceful flourishes worthy of inclusion in interactive content.

64 If you want to layer certain elements over one another, use the z-index property; the index you assign will pull an element to the front or push it behind an item with a higher value.

65 Viewport sizes aren’t a matter of resolution. Your visitors may have any number of toolbars, sidebars or window sizes (e.g. they don’t use their browsers maximized) that alter the amount of available space.

66 Removing clutter from an interface using display:none might seem like a good idea, but screen-reader users won’t be able to read the content at all.

67 Be careful with the overflow CSS property when catering to touch-screen mobile devices. The iPhone, for example, requires two fingers (not one) to scroll an overflowed region, which can be tricky.

68 Have you ever come across CSS expressions? They were Microsoft’s proprietary method of inserting DOM scripts into CSS. Don’t bother with them now; they’re totally deprecated.

69 While the CSS cursor property can be useful in certain circumstances, don’t manipulate it in such a way as to make finding the cursor on the screen more difficult.

70 Horizontal scrolling might seem like a unique way to position and style content, but most people aren’t used to it. Decide carefully when such conventions should be used.

71 Until Internet Explorer 9 is final, CSS3 will have some critical compatibility issues. Don’t rely too heavily on it for stable layouts. Use progressive enhancement concepts.

72 CSS makes it possible to provide information on demand. If you can give people information in small chunks, they’ll be more likely to read it.

73 When showcasing a menu in CSS, be consistent in implementation. People want to know about the relationship between objects, and it’s important to avoid dissonance.

74 CSS isn’t a solution to all of your layout woes–it’s a tool to aid your visual journey. Whatever you produce should be usable and logically designed for users (not search engines).

75 Once your layout is marked up with CSS, get feedback on how usable it really is; ask friends, family, co-workers, visitors or strangers for their opinions.

76 Squeezing content too close together can decrease overall readability. Use the line-height property to space lines of text appropriately.

77 Be cautious about letter-spacing: too much space and words will become illegible, too little and the letters will overlap.

78 Unless you have good reason, don’t uppercase (i.e. text-transform:uppercase; ) long passages of text. People hate reading what comes off as shouting.

79 Accessible websites have good contrasting colors. Tools exist to measure foreground colors against background colors and give you a contrast ratio. Check out this list of tools for checking your design’s colors. Be sure your text is legible.

80 Remember that default styles might differ greatly from browser to browser. If you want stylistic flourish, reinforce the behavior in the stylesheet.

81 In the old days, the number of colors that a screen could display was rather limited. Some people still use old monitors, but the need for web-safe colors has drastically reduced.

82 Building a font stack is essential when making a design degrade gracefully. Make sure that fallback typefaces exist in case the one you request isn’t available.

83 With Vista, Windows 7 and MS Office 07–10 (and their free viewers), a number of cool new web-safe fonts have become available, such as Candara, Calibri and Constantina. Read about Windows fonts.

84 Plenty of smartphone apps can boost your ability to build a stylesheet, but Typefaces for the iPhone and other iOS4 devices is particularly useful because it shows you every font installed.

85 Web-safe fonts are no guarantee; people could quite possibly uninstall a font even as ubiquitous as Arial (or Comic Sans!). Then their browsers wouldn’t be able to render it.

86 Avoid underlining content with the text-decoration property unless it’s a real link. People associate underlined text with hyperlinks, and an underlined word could give the impression that a link is broken.

87 Avoid the temptation to use symbolic typefaces like Wingdings or Webdings in the layout. It might save KBs on imagery, but it’ll serve nonsensical letters to screen-reader users.

88 Remember that @font-face has different file format requirements depending on which browser the user is on, such as EOT, WOFF, TTF and OTF (as you would find on a PC). Serve the appropriate format to each browser.

89 The outline property is seriously underused as an aid to web accessibility. Rather than leaving it set to the default value, use border styles to enhance an active event’s visibility.

90 Smartphones do not have the same level of core support for web typography that desktop browsers do, which means fewer web-safe fonts and no conventional @font-face embedding.

91 Cross-browser opacity that degrades gracefully can be applied using the -ms-, -moz-, -khtml- vendor prefixes and the filter: alpha(opacity=75); property for Internet Explorer.

92 You can make background-image bullets by using list-style-type:none;, adding a padding-left indent and positioning the background-image to the left (with the required pixel offset).

93 Helping users identify an input box is easy; just add a background image of the name (like “Search” or “Password”) and set it so that the image disappears when the box is clicked on by using the :focus pseudo-class and then setting the background property to none.

94 Large and visible click regions enhance the usefulness and usability of anchor links, which in turn guide people among pages. Be attentive when you style these.

95 Remember that background images do not replace textual content. If a negative indent is applied, for example, and images are disabled, then the title will be invisible.

96 Navigation items need to be labeled appropriately. If you use a call-to-action button or an image-based toolbar, make sure a textual description is available for screen readers.

97 If the idea of applying opacity with a bunch of proprietary elements doesn’t appeal to you, try RGBA transparency (in CSS3) instead of background-color: rgba(0,0,0,0.5);.

98 If your visitors use IE6, avoid using px as the unit of measurement for text. IE6 users have no zoom functionality; they rely on text resizing, which doesn’t work with px. Use a relative unit instead, such as em.

99 Providing alternative stylesheets for supported browsers such as Firefox and Opera can enhance readability, as in the case of high-contrast alternatives.

100 If you find choosing colors difficult, web-based tools like Adobe Kuler, desktop tools like ColorSchemer Studio and mobile apps like Palettes Pro might help.