This document provides instructions and code snippets for building a mobile Scrabble-like word game app using only web technologies like HTML, CSS, JavaScript, and jQuery. It discusses using CSS grid layout for the game board, dragging and dropping letter tiles, checking if words are valid, storing game data locally, and optimizing performance for mobile by reducing payload size and enabling offline use.
Empowering End-users to Find Point-of-interests with a Public DisplayTetsuo Yamabe
Tetsuo Yamabe, Yasuyuki Washio, Sota Matsuzawa, Tatsuo Nakajima, Empowering End-users to Find Point-of-interests with a Public Display. In Proceedings of the 2010 International Conference on Pervasive Services (ICPS’10, full paper)
This talk recaps some features and practices that are best to avoid in good jQuery pages and apps. Following these rules will improve performance and maintainability, and may prevent your co-workers from coming after you with sharp objects.
Presented at FITC's Web Unleashed 2016 in Toronto
by Alicia Sedlock, Society of Grownups
FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc
Overview
We’ve seen front-end technologies advance in ways that have opened a world of possibilities for building websites and applications. But what happens when we take these technologies and use them for something different – something like building games?
Most developers are focusing on using canvas to build games, but let’s think outside of that box for a bit. How can we leverage the latest and greatest of CSS3, along with with a powerful tool like a CSS-preprocessor, to build games using nothing more than CSS, JS, and HTML? And why would you even want to do that? This talk will walk through how to utilize different parts of the web development stack to make their own games, as well as discuss why it’s important to bring games to the web.
Objective
To teach front-end developers how to twist their skills, and see how the browser stack is a game development playground.
Target Audience
Those who are interested in how to apply their technical knowledge to something more creative and interactive.
Assumed Audience Knowledge
Comfortable use using CSS pre-processors and writing intermediate-level CSS and JS.
Five Things Audience Members Will Learn
The history of gaming on the web
Why the browser is a great platform for games
How to use CSS3 properties to animate gameplay
How to map out separation of gaming concerns while developing games in the browser
The limits of game development when done in this manner
One of the most time consuming tasks as a red teamer is diving into filesystems and shares, attempting to identify any potentially sensitive information. Genneraly users store credentials and other sensitive information in local filesystems and this talk has the purpose of explaining how to use the carnivorall as a means to speed up the task of searching important files using several vectors. I will present some proof of concepts, comparisons between tools and my recent success cases in red teaming engagements."
Empowering End-users to Find Point-of-interests with a Public DisplayTetsuo Yamabe
Tetsuo Yamabe, Yasuyuki Washio, Sota Matsuzawa, Tatsuo Nakajima, Empowering End-users to Find Point-of-interests with a Public Display. In Proceedings of the 2010 International Conference on Pervasive Services (ICPS’10, full paper)
This talk recaps some features and practices that are best to avoid in good jQuery pages and apps. Following these rules will improve performance and maintainability, and may prevent your co-workers from coming after you with sharp objects.
Presented at FITC's Web Unleashed 2016 in Toronto
by Alicia Sedlock, Society of Grownups
FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc
Overview
We’ve seen front-end technologies advance in ways that have opened a world of possibilities for building websites and applications. But what happens when we take these technologies and use them for something different – something like building games?
Most developers are focusing on using canvas to build games, but let’s think outside of that box for a bit. How can we leverage the latest and greatest of CSS3, along with with a powerful tool like a CSS-preprocessor, to build games using nothing more than CSS, JS, and HTML? And why would you even want to do that? This talk will walk through how to utilize different parts of the web development stack to make their own games, as well as discuss why it’s important to bring games to the web.
Objective
To teach front-end developers how to twist their skills, and see how the browser stack is a game development playground.
Target Audience
Those who are interested in how to apply their technical knowledge to something more creative and interactive.
Assumed Audience Knowledge
Comfortable use using CSS pre-processors and writing intermediate-level CSS and JS.
Five Things Audience Members Will Learn
The history of gaming on the web
Why the browser is a great platform for games
How to use CSS3 properties to animate gameplay
How to map out separation of gaming concerns while developing games in the browser
The limits of game development when done in this manner
One of the most time consuming tasks as a red teamer is diving into filesystems and shares, attempting to identify any potentially sensitive information. Genneraly users store credentials and other sensitive information in local filesystems and this talk has the purpose of explaining how to use the carnivorall as a means to speed up the task of searching important files using several vectors. I will present some proof of concepts, comparisons between tools and my recent success cases in red teaming engagements."
Illuminated Hacks -- Where 2.0 101 Tutorialmikel_maron
Some of my favorite hacks
for the pleasure of your hacking sensibility
with the hopeful outcome of illuminating
best practices of putting your website on the geoweb
and hinting at the means
to get exactly what you need.
cause I likes the hacks.
hacks are rad.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
36. // if previously placed on a board tile, clear the last positionvarp = ui.helper.data('prevloc');if (ui.helper.data('prevloc')) {varp = ui.helper.data('prevloc'); SHK.board[p[0]][p[1]] = '’;}// set the new positionui.helper.data('prevloc', [row, col]);
37. <td id=”r9b"><div class="it"></div></td>var row = id.substring(1, 2); // 9varcol = id.substring(2, 3); // bb = 11, so need to convert from hex to decimalconvert to decimal this way:parseInt(row, 16);
40. rc = 0 or rc = 1, depending on checking for row or column vart = false; for (vari in SHK.inplay) { if (i && SHK.inplay[i]) { if (t) { if (t != SHK.inplay[i][rc]) { return false; } } else {t = SHK.inplay[i][rc]; } } }
43. // See if the property we want is pre-cached in localStorage if ( window.localStorage !== null && window.localStorage.shkrubbeldict ) {var words = window.localStorage.shkrubbeldict.split(""); for ( vari = 0; i < words.length; i++ ) {SHK.dict[words[i]] = true; }… http://diveintohtml5.org/storage.html
44. // easy check now… if (SHK.dict[word.toLowerCase()]) { // we have a word!}
45. did I mention, don’t do this?read these instead:http://ejohn.org/blog/dictionary-lookups-in-javascript/http://ejohn.org/blog/javascript-trie-performance-analysis/http://ejohn.org/blog/revised-javascript-dictionary-search/
47. for (vari = 0; i < 7; i++) { // we're using this in several places, so store in varvart = $('#t' + i); // move the tile back to its starting spott.animate({'top': '0px', 'left' : '0px'}); // clear the inplay tiles from the boardSHK.inplay[i] = false; // clear the tile from the board varp = t.data('prevloc'); if (p) { SHK.board[p[0]][p[1]] = '';t.data(‘prevloc’) = ‘’; } }
A few months I went to a web tech workshop, expecting not much other than a day of head nodding and thoughts of, "yeah, I know that." To my delight, I walked out with pages of notes, tips and new topics to look up, and I thought to myself, next tech talk I do, I'm so way going to try for that. So, my hope is that you leave this talk with a spring in your step and more than a few inspirations on your next project.
My inspiration for this particular project was a conversation I had with Jonathan Snook*, who gives a number of talks* about HTML5 and CSS3 and javascript and mobile stuff. He commented that a number of the apps available in the Apple App Store could be done as web applications, and went on to build a number of them* and tweet* about them.
One of the applications he wanted to do was Words With Friends*, and I thought, eh, why not? It'll make a great walk through in creating a mobile application, because the hard part is done: figuring out WHAT you want to make, making it is the easy part.So, let's start out, with a Scrabble or Words with Friends board. That's easy, you need a grid for the board, a tray for the tiles, a few buttons for actions and a few extra elements for the game details like score and who's playing.
A board.Can even something as simple as a board have options?Yeah.
You can do a grid with a specified width and height and float them all to the left, clearing the floats on the last element. Need to make sure the row and board have widths, though.
Another option is { display: grid; } grid is a propose option for the display attribute that creates a layout grid much as tables were used for page layouts. You can have grid columns and rows and the equivalent of spans, and everything just lays out nicely. Unfortunately, unless your browser is IE 10, and pretty much no one's is quite yet, { display: grid; } isn't available. But sometimes "soon" we can use the { display: grid; } on our elements and have the browser generate the grid for us.
As a toss up between floating divs and using a table for the grid layout, I used the table. Floating divs have the advantage of fewer elements to get the rounded corners, as you can't style rounded corners on a table cell, but you add a div and style that inside the table data element.
Okay, so, the board. Technically, the board can be any number of tiles across that we want. Using both Scrabble and Words with Friends as inspiration, we'll have a 15 by 15 board. If you're inspiring younger players, fewer board spaces might be less intimidating.Now, how do we style the background?
We could style it exactly as we want it, we can do fun and exciting things with the background image, we can get pixel perfect across every single browser that supports background images, which is nominally all of them.
This approach has some disadvantages: you'll need to update your image when your colors change, or have multiple images for different board sizes, and you'll need to have different images for every screen resolution, including some of those that don't yet exist. If you decide to add a feature that the background won't support (in this case, say, random placement of the Double and Triple Words and Letters), you'll need new background images for the "random" boards.While the single background image isn't terribly flexible, but IS the correct solution for some applications. A side scrolling game with multiple repeating backgrounds sliding at different rates to fake parallax, for example, could be served with background images.
Okay, other than the single background image, we could still use images to style the individual tiles, also using background images. If you do this, you'll want to use sprites, merging all of your tile images together into one image. The round trip HTTP request for multiple images is more of a performance hit on mobile than it is on the desktop, though it is on the desktop also: better to have one big image than 110 small images each with its own request.
This technique has some of the issues of the previous image technique: having less flexibility, needing to scale the images or having differing images altogether for different screen resolutions, but you don't have the variable board size issue.
So, what are the characteristics of a tile? Well, it has rounded edges. We can get rounded corners with CSS with no effort these days:
So, what are the characteristics of a tile? Well, it has rounded edges. We can get rounded corners with CSS with no effort these days:<pre>-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;</pre>
It also has texture. Okay, for texture, one of the easiest ways to get the texture is to use a patterned, tiling background. Want a site for such patterns? http://tileabl.es/ is a good one.
We can, however, use javascript to generate a random noise for a background. https://github.com/DanielRapp/Noisy
Okay, so we have the background, we have the colors, what about the big part staring at us in the face?The font face.
A quick search and we see that a consensus is that the font is "News Gothic". Now, this isn't one of the supported-by-default browser fonts. While we can choose another font that looks very similar, or use the background image technique we decided against earlier, we can use @font-face to render new fonts in the browser.And designers everywhere had a field day.Okay, so we download our new font from the 'net, and look at it.http://www.fontyukle.net/en/DownLoad-News+Gothic+Std+Medium.ttfIt's a True Type Font. We can go through the process of converting the font to the different formats, eot: embedded open type, .woff: web open font format, or we can do what Snook suggested, just use Font Squirrel.
Font Squirrel's font face generator gives a fantastic interface for converting various font formats to font-face web embeddable fonts. Be sure you have the right to distribute your font before creating and using a font on your site.There are font services available, use one of them if you are unsure:http://fontsquirrel.com/http://fontspring.com/http://typekit.com/http://www.google.com/webfonts
Okay, so, we have our basic page done, we're happy with the layout, we have the board, we have the tray, we have our starting buttons for the game.
Our default tile.<div class="tile"><span class="letter">O</span><span class="val">1</span></div></td>Let's start making it work!First thing we want to do, is start dragging the tiles from the tray to the board. Time to load in the javascript. Following the thought that many eyes make all bugs shallow, and idea of standing on the shoulders of giants, and the realization that there are some darn smart people who have worked on this stuff before me, instead of using the native HTML5 Drag and Drop or reinventing the wheel, I'm going to use a javascript library. For me, that means jQuery.For mobile apps, there are a number of framework options available, depending on what development style, approach and feature requirements, the big ones being jQTouch, Sencha Touch, jquery mobile, and phonegap. I'm a big believer in using the tools you're comfortable with, the ones you know, but continue to expand your knowledge. If you can't decide when starting out, use the ones that have the best documentation (and how do you define best? Can _you_ understand it? Great! Choose that.)In this case, we need drag and drop, and submit capabilities, and not much else: no location, no accelerometer, no GPS, no camera, which makes things considerably simpler.So, starting out, added jQuery to the document.
First thing we want to do, is start dragging the tiles from the tray to the board. Time to load in the javascript. Following the thought that many eyes make all bugs shallow, and idea of standing on the shoulders of giants, and the realization that there are some darn smart people who have worked on this stuff before me, instead of using the native HTML5 Drag and Drop or reinventing the wheel, I'm going to use a javascript library. For me, that means jQuery.For mobile apps, there are a number of framework options available, depending on what development style, approach and feature requirements, the big ones being jQTouch, Sencha Touch, jquery mobile, and phonegap. I'm a big believer in using the tools you're comfortable with, the ones you know, but continue to expand your knowledge. If you can't decide when starting out, use the ones that have the best documentation (and how do you define best? Can _you_ understand it? Great! Choose that.)In this case, we need drag and drop, and submit capabilities, and not much else: no location, no accelerometer, no GPS, no camera, which makes things considerably simpler.So, starting out, added jQuery to the document.Also added jQuery UI, which has drag and drop functionality with it. While I was at it, I also moved the CSS into an external style sheet, and created a new javascript file for the project. All of them included at the top of the page, along with the !DOCTYPE. Love that new doctype.
Preliminaries in, let's start dragging tiles, by adding draggable to the letters:
That's great!Except our letters are now floating out in the middle of nowhere. With no styling of their own, the letters appear to float.
Need to add opacity so that we see the board background, and a tile background color so that we can actually see it.
We want the letters to drop on the board tiles, not just randomly. jQuery UI makes it Easy enough to snap to the board squares:$(".tile").draggable( { snap: "#board td" });
Now, there are draggable objects in jQuery along with items that can be used as containers to receive the dropped elements, appropriately called "droppables": HTML elements that can have draggables dropped on them. We'll limit the tiles being dropped on the board for the moment, and give it red border around it so that we can see it dropped.
We need to keep track of of the changes to the board that we're making. We can let the board be the canonical source, extracting the data from the DOM (which can be slow) or we can keep track of the state elsewhere.Advantage of the board is that what is displayed is what we have, we don't have to keep two different sources. The disadvantage of that is that we're mixing our data with our view.
When a tile is dropped we can save its state this board array.This works fine with tiles from the tray, but not the board to board.But wait, if a tile is moved from one space to another, we need to remove its previous state from our board array. Do we need to keep track of every tray tile's placement? How do we identify which of the tray tiles we're playing?While we can use an extra div to store information, and just hide it:<div class="tilenum">14</div>.tilenum { display: none;}I
When a tile is dropped we can save its state this board array.This works fine with tiles from the tray, but not the board to board.But wait, if a tile is moved from one space to another, we need to remove its previous state from our board array. Do we need to keep track of every tray tile's placement? How do we identify which of the tray tiles we're playing?While we can use an extra div to store information, and just hide it:<div class="tilenum">14</div>.tilenum { display: none;}I
"Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements."http://html5doctor.com/html5-custom-data-attributes/We can store the previous location in the tile itself, just as we store the tile number. A tile in the tray has no previous board location. Once a tile is dropped on the board, we can save its location.
data- attributes can be used for all sorts of things, just don't use them for things that should be public, like microformats, or an existing attribute.
SidenoteThe board space divs are named with an id of r followed by two hexadecimal numbers. The first is the row number, the second is the column number. Recalling we're in hex, we need to convert to decimal for storing into our array (okay, no, but it made it easier earlier):<td id="r9b"><div class="it"></div></td>var row = id.substring(1, 2); // 9varcol = id.substring(2, 3); // bb = 11, so need to convert from hex to decimalDo it this way:parseInt(row, 16);
Okay, so, we've dragged tiles to the board. As soon as we've dragged a tile, we can submit it to the server, right? Sure!A quick adjustment to the button to change it from a pass to a play link and we're good to go.// submit the board$('#bp').attr('href', (SHK.inplaycount()) ? 'go/play':'go/pass');$('#bp').html((SHK.inplaycount()) ? 'submit' : 'pass');Or, maybe not.
While dropping a tile on the board means we can submit the board, we should really verify all tiles are placed legally. In particular, we need to check the tiles are all in a row, and that they are all contiguous with the all letters on the board.
To check if all the placed letters are in a line, we can loop through the positions of the placed tiles and check that the row is the same for all the placed tiles or the column is the same. When only one tile is placed, we'll have both cases being true.To check if the tiles were placed contiguously, using whichever direction the line of letters were placed (up/down or left/right, as previously determined), find the minimum index on the board (so if the tiles were all placed on row 4, find the lowest indexed tile in row 4), then find the maximum index of all tiles onthe board in that same line, then loop through the line and check there are no gaps, by incrementing by one from the minimum to the maximum in that line.
At this point, we have a board, the player has played a word, how do we know it's a valid word? Can we submit the board now?In traditional scrabble games, one player plays a word and the other player challenges the word if she believes the word played isn't a valid word. At this point, however, not only do we want to demo more of the HTML5 features, but I also told you we were going to download a dictionary and store it in HTML5 local storage, so we're going to go the Words with Friends route: instead of challenge, we're going to check the word is valid before sending it to the server.To do that, though, we need to first get the dictionary. The uncompressed dictionary I have is just under 2MB in size. That is not going to fit into our 4K cookie space allotted.
Seriously, this is NOT the way to build a highly scalable multi-player application. Having users download 1.9MB of dictionary? Yeah, don't do that.There's another dictionary that we're going to go with, it's only 620kB, so let's download that, but do it only once so that people don't start throwing fits
// See if the property that we want is pre-cached in the localStorage if ( window.localStorage !== null && window.localStorage.shkrubbeldict ) {var words = window.localStorage.shkrubbeldict.split("\\n"); for ( vari = 0; i &lt; words.length; i++ ) {SHK.dict[words[i]] = true; } } ... // Cache the dictionary, if possible if ( window.localStorage !== null ) {window.localStorage.shkrubbeldict = txt; }See: http://diveintohtml5.org/storage.html
Once we have it loaded into our dictionary array (did I mention don't do this?), we can check if the word is valid with a simple check:if (SHK.dict[word.toLowerCase()]) { // we have a word!}
Did I mention don't do this? There are more efficient ways of storing large dictionaries. http://ejohn.org/blog/dictionary-lookups-in-javascript/http://ejohn.org/blog/javascript-trie-performance-analysis/http://ejohn.org/blog/revised-javascript-dictionary-search/
While we're here, and I'm taking a breather, let's just implement that recall button...1. move the tiles back to the tray2. clear our inplay tiles3. clear their spots out of the board, using data prevloc as beforeAnd the resign button, that one's easy, too.
While we're here, and I'm taking a breather, let's just implement that recall button...1. move the tiles back to the tray2. clear our inplay tiles3. clear their spots out of the board, using data prevloc as beforeAnd the resign button, that one's easy, too.
Wait a second... you know what's been missing from this entire process?
Yeah, we should test this on an actual mobile device, eh?
First time I brought this up on an ipad and went to drag the tile, and the whole window dragged. While that happened to be a pretty simple issue to fix, and this project doesn't require a lot of interaction from the server, that isn't always the case
When testing across multiple devices, or on mobile devices in a non-test environments, when I need remote debugging, yeah, "winery" for the win: http://phonegap.github.com/weinre/While testing, wow, remember that part where I said don't do this? When you have a desktop or even laptop computer with a fast connection and lots of member, even running an emulator doesn't seem too bad or slow. You can fake the connection by having a proxy that can slow things down.http://www.charlesproxy.com/
This isn't a big application, but as the features and code base grow, we're going to need to start paying attention to performance, as well as loading time. One way to reduce loading time is, well, not to load resources you don't need. If we had gone with the background images, for example, wow, what a pain in the download to fetch that large background image, only not to use it.
Blech.So, downloading and handling those extra files, how do we avoid them?
Well, we *could* do browser detection, but have you seen the list of User-Agent strings (which is what you use to detect the browser)? The list grows,
Well, we *could* do browser detection, but have you seen the list of User-Agent strings (which is what you use to detect the browser)? The list grows,
People now do browser feature detection: what can the browser support?
Easiest way is with Modernizr, which includes yepnope.js. yepnope lets you choose which files are downloaded based on browser support (yep) and lack of browser support (nope).Depending on which features you need for your application, you can follow Modernizr's links for libraries and tools that fill in the missing pieces so that you can fake the features.
In this case, though, we can use media queries to adjust the CSS3 that we load.As long as we've been using the link element, we've pretty much been using the media attribute. Used to be, you'd see them for only print style sheets.&lt;linkrel="stylesheet" type="text/css" href="theme.css" />&lt;linkrel="stylesheet" type="text/css" href="print.css" media="print"/>
ut now with media queries in CSS3, we can be more selective based on browser information and our specified links./* iphone portrait */@media screen and {max-width: 320px) { ...}/* iphone landscape */@media screen and {min-width: 321px) and (max-width: 480px) { ...}See how that’s for only for iphone and ipad? Yeah, don’t do that either.
Alternately, we can use Adapt.js to dynamically load different style sheets based on changing browser size.Though, really, except for rotating between portrait and landscape, no one changes their browser sizes except designers.
Reduce the image sizes, using compression or different image formats depending on your need (JPG is not always the smallest image). Use Smush.it or Image Optimizer to reduce image sizes.http://developer.yahoo.com/yslow/smushit/http://www.imageoptimizer.net/Pages/Home.aspxSprite your images when you can, reducing the number of calls for resources. Combine your CSS files into one cached version and send that over. On the server, gzip the files and send the compressed version to the browser. Remove unneeded whitespace when compressing: in production, white space is overrated.
Save the round trip for the HTTP requestWon’t have any 404s
If you can, maybe use Data URIs for images.http://css-tricks.com/5970-data-uris/
So, all of this is great, but I don't want to be connected to the internet in order to play. I'd like to have all of my games loaded up so that I can think about the game as I'm swinging in my hammock.First step, is back to localStorage. When saving the game to the server, we can save the game locally also, and on successful submit of a word, update the game's local copy with the new tray letters.
To be able to save to the device, however, we need to generate and deliver a MANIFESThttp://diveintohtml5.org/offline.htmlhttp://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.htmleasier way:https://github.com/jamesgpearce/confess
Tell the mobile browser (well, apple anyway) that the app is available:&lt;meta name="apple-mobile-web-app-capable" content="yes" />&lt;linkrel="apple-touch-icon" href="icon.png" />&lt;linkrel="apple-touch-startup-image" href="home.png" />
Push notificationsOkay, so I've played my game, and now it's time for "not kitt" to play her turn. With native applications, you have the ability to send notifications to other people for installed applications.Web applications are missing a number of these core features, but using web technologies doesn't mean your left out. Recall that point before about a lot of really smart people doing really cool shit?Yeah. http://www.phonegap.com/http://www.appcelerator.com/It's possible to access the phone features with other kits, if those are needed. Alternately, you could create a native application that wraps the application in a, say, UIWebView (for iPhone) so that the user sees the web app, but you can register for push notifications.Or just go with the smart guys.
So, what's next?I can think of a giant list of features that I'd like to put in.http://caniuse.com/#feat=dragndropI'm still trying to figure out how to get canvas or video into the application in a meaningful way.