Pinboard (hanicker)

Wikipedia Code Challenge

hanicker — 2011-10-28T05:37:03+00:00

Amate Wikipedia alla follia? Da oggi potete partecipare al Wikipedia Code Challenge. Di cosa si tratta? Wikipedia ha organizzato un contest per sviluppatori con tre progetti ben distinti: uno slideshow fotografico HTML5, uno strumento di upload fotografico da cellulari e smartphone e per concludere uno strumento che permetta agli utenti di vedere in tempo reale le modifiche effettuate dagli autori sulle pagine. Il premio? La gloria imperitura, da quel che ho capito. Segui @naponews su twitter! CC BY-NC-SA 2006 - 2011 · Wikipedia Code Challenge

Kendo UI

hanicker — 2011-10-17T10:13:03+00:00

Kendo UI è in fase beta, ma promette benissimo: basato su jQuery è una sorta di "Ext JS" (passatemi il termine) HTML5/CSS3 molto performante e con tutti i component che servono alle webapplication moderne. Date un'occhiata alle demo per una panoramica delle sue potenzialità. Segui @naponews su twitter! CC BY-NC-SA 2006 - 2011 · Kendo UI

La rivincita di position:fixed

hanicker — 2011-09-12T10:09:37+00:00

Parliamoci chiaro, il valore fixed per l'attributo position dei CSS è una figata. .classe { position:fixed; } Portarsi in giro per la pagina menù o widget è comodo e funzionale. Non che il position:fixed sia una novità e non che sia poi questa gran magia da realizzare, ma IE6 non lo supportava nativamente (ecco uno dei trick per emularlo se siete ancora così pazzi da supportare IE6) e in molti non lo usavano. Oggi come oggi invece è utilizzatissimo, specialmente da quei siti web che vogliono mostrare una colonna di contenuti sempre visibile... Con jQuery (o javascript in generale) possiamo addirittura decidere quando un elemento deve essere fisso o scrollare insieme al resto della pagina... jQuery Waypoint è un esempio di quello che è possibile fare oggi, con tanto di callback al passaggio del box in determinati punti della pagina. Sticky scroller è un altro plugin jQuery utilissimo, così come Contained Sticky Scroll: il secondo in particolare scrolla il contenuto del box desiderato senza uscire dai "bordi" del box che lo contiene. Segui @naponews su twitter! CC BY-NC-SA 2006 - 2011 · La rivincita di position:fixed

FromTheFront a Cesena

hanicker — 2011-09-12T06:14:18+00:00

From The Front è una serie di eventi dedicati allo sviluppo front-end, sempre più preponderante nel web di oggi. La prossima edizione si terrà a Cesena il prossimo 29 Settembre: in una giornata ci saranno 6 talk, 3 workshop e 1 party dedicati allo sviluppo front-end. HTML5, CSS3 e JavaScript saranno il cuore dell'evento. Di rilievo internazionale i relatori che parteciperanno, tra cui anche Fullo, che molti lettori sicuramente conoscono già. Il prezzo? 10€, più che abbordabile, se siete interessati! Segui @naponews su twitter! CC BY-NC-SA 2006 - 2011 · FromTheFront a Cesena

Bootstrap, grazie a twitter

hanicker — 2011-08-31T05:55:22+00:00

Bootstrap è un interessantissimo progetto opensource (lo trovate su github, con licenza Apache v2.0) creato da Twitter. Di cosa si tratta? Bootstrap è appunto un "punto di partenza" per la creazione di front-end per applicazioni web. Basato su Less mette a disposizione degli sviluppatori un pacchetto di html/css già "fatti" per la creazione di tabelle, layout, moduli, messaggi in finestre modali, griglie, ecc... Volete capire cosa fa di preciso? Guardatelo in azione sul sito linkato ad inizio post. CC BY-NC-SA 2006 - 2011 · Bootstrap, grazie a twitter

Unicode monster is back this time eating chrome

hanicker — 2011-08-15T09:28:43+00:00

It appears this unicode monster keeps chomping away at JavaScript parsers, this time it’s chrome. There was an excellent post from jack masa about JavaScript comments. In it he describes how chrome allows any character which ends in 2a or 2f \uxx2a+\u002f to be used as a “*” or “/”. Pretty crazy I’m sure you’ll agree but nice. So I thought maybe Chrome has the same problems as Opera when parsing unicode escapes. Of course it does. uuuu=alert;\u\u\u\u(1) Yuk I don’t want backslashes in my variables thanks. So does it go deeper? Of course it does. eval("Object.defineProperty(window,'u661',{get:function(){alert(1)}});\\u61"); Here I think the parser moves back a character and outputs the 6 twice. Tested on 15.0.849.0 dev-m

Decoding non-alphanumeric code with Hackvertor

hanicker — 2011-08-03T12:53:47+00:00

I saw this post from Thomas Stig Jacobsen. He uses eval to decompile the code, I thought there has to be a better way so in literally about 30 minutes I managed to do it after a few tweaks to the JSReg code base. What does non-alphanumeric JavaScript look like? $=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$_$_+(![]+"")[$._$_]+$.$$$_+"\\"+$.__$+$.$$_+$._$_+$.__+"(\\\"\\"+$.__$+$.__$+$.___+$.$$$_+(![]+"")[$._$_]+(![]+"")[$._$_]+$._$+",\\"+$.$__+$.___+"\\"+$.__$+$.__$+$._$_+$.$_$_+"\\"+$.__$+$.$$_+$.$$_+$.$_$_+"\\"+$.__$+$._$_+$._$$+$.$$__+"\\"+$.__$+$.$$_+$._$_+"\\"+$.__$+$.$_$+$.__$+"\\"+$.__$+$.$$_+$.___+$.__+"\\\"\\"+$.$__+$.___+")"+"\"")())(); Produced by my friend Yosuke Hasegawa using his JJEncode. How the hell do you decode that Gareth? (I hear you say). Quite easily actually. First off I extend the Hackvertor environment to allow sandboxed code to call the JSReg parser. parser.extendWindow("$sandbox$", function(code){}); This makes “sandbox” a global function within each tag, I need to do this because I want to listen for any calls to “Function” and instead of eval’ing the results I simply want to return the string generated. To do this I add more code to the “sandbox” function to create an instance of JSReg and execute the code:- parser.extendWindow("$sandbox$", function(code){ var js = JSReg.create(), result; js.setDebugObjects({doNotFunctionEval:true,functionCode: function(code) { code = code.replace("J.F();var $arguments$=J.A(arguments);",''); result = code; }}); try { js.eval(code); } catch(e){ return e; } return result; }); So as you can see the magic happens in the debug objects of JSReg, I use the “doNotFunctionEval” to listen to Function but not eval the code sent. Then I use another listener to “functionCode” to intercept the results. The final Hackvertor tag is dead simple:- (function(){ return sandbox(code); })(); The final results can be seen here:- Decode non-alpha please feel free to go whoa now. That’s sandboxed code calling a unsandboxed function, sending a non-alpha string, sandboxing it, listening to the results and returning the decoded code. In the blink of an eye Credits as always to Lever one and Jonas Magazinius for testing JSReg and making this possible.

Google Chrome e gli XSS

hanicker — 2011-06-28T07:56:46+00:00

Me ne accorgo solo ora, ma direi che è un enorme passo avanti nella lotta agli XSS, anche se prevenire è sempre meglio che curare, ricordatevelo! Cosa? Chrome (dalla versione 8.0) è abbastanza furbo da capire se il codice sorgente del javascript che sta andando ad eseguire gli è arrivato in GET (o in POST) e non lo esegue... In console vi ritroverete un messaggio abbastanza eloquente. "Refused to execute a JavaScript script. Source code of script found within request." Firefox, invece non fa una piega, esegue tutto. Vi chiederete IE come si comporti... Blocca gli XSS anche lui (e a leggere in giro è stato proprio il primo browser ad introdurre un controllo del genere) P.s. Niente demo, fatevela da soli CC BY-NC-SA 2006 - 2011 · Google Chrome e gli XSS

Speed Tracer Google

hanicker — 2011-06-20T07:38:49+00:00

Speed Tracer è un'estensione per Google Chrome che permette di identificare e risolvere eventuali problemi di performance delle vostre applicazioni web. Speed Tracer visualizza le metriche relative alle pagine web visualizzate andando a "pescare" i dati a livello di motore di rendering del browser e li analizza nello stesso istante in cui l'applicazione viene eseguita. Utilizzando Speed Tracer si è in grado di ottenere un quadro migliore delle performance delle vostre applicazioni, individuando punti di latenza o eventuali problemi. Come si installa? Per prima cosa dovete utilizzare Chrome in versione DEV. Installate Speed Tracer scaricandola da qui Bisogna poi avviare Chrome con l'opzione --enable-extension-timeline-api Trovate invece qui una piccola guida su come iniziare ad usare l'estensione. CC BY-NC-SA 2006 - 2011 · Speed Tracer Google

JSReg bypasses

hanicker — 2010-10-31T14:54:27+00:00

I set a cool Hackvertor challenge on slackers. The idea was to call the function defined in window. There is a perfectly legitimate way of doing this as I discovered the method when I was testing it, instead of fixing it I created the challenge. Stefano Di Paola of course figured it out, nice work however something happened that I wasn’t expecting, Soroush Dalili solved the challenge by breaking the sandbox instead! Not just once may I add but twice. This was really awesome on a number of levels and so I awarded him 2000 HV points. I was impressed. Bypass 1 – RegEx rewrite error ; b=1/alert('Soroush Dalili Bypass! \n'+window.document.location);alert(window.parent.execTag()) // So here Soroush cleverly exploits two errors in JSReg, first is the failure to strip the single line comment which then fools the regex rule into thinking that the code is a regex object and not function calls. The patch for this is displayed here I change the regex not to work in multi-line mode which successfully removes the single line comment. It isn’t an ideal fix as the regex rule still shouldn’t have matched it as a regex object but it will work in the short term until I revise the regex code. Bypass 2 – eval object type hack b='x='+String([eval])+';window.parent.execTag();' y=eval([b]); Another clever trick, the string is placed inside of an array and when the eval function is called it used to check the object type if it was a string then it rewrote the code if not it was assumed to be a already rewritten string however I didn’t expect an array to be used in this context so this would effectively bypass the sandbox. The fix for this one was to check specifically for a function object or rewrite the string. I challenged many security researchers to break this sandbox and only a few have succeeded, I admire their skill and dedication. I would like to thank Soroush Dalili for taking the time to break JSReg and show some obvious excellent js sandbox skills.

CarouFredSel: Creare Slider Animati Orizzontali e Verticali

hanicker — 2010-10-21T10:00:05+00:00

CarouFredSel è un interessante Plugin jQuery che permette in modo semplice e intuitivo di creare slider orizzontali e verticali di determinati contenuti HTML. Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo. Vediamo insieme come installare e utilizzare questo slider. Installazione jQuery Prima di tutto andiamo a richiamare tra e la libreria jQuery e il cuore del Plugin. Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare. Come vedete il div che faremo animare dovrà avere ID = item1. Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto. Per le immagini

Per una paginazione

Per un contenuto HTML

Infinity

A concept that in many fields refers to a quantity without bound or end.

Circular journey

An excursion in which the final destination is the same as the starting point.

jQuery

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.

Carousel

A carousel is an amusement ride consisting of a rotating circular platform with seats.

Caratteristiche Ecco alcune caratteristiche fondamentali di questo Plugin jQuery. Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale. Scorre uno o più oggetti contemporaneamente. Scorre automaticamente o con l’interazione dell’utente. Ridimensiona automaticamente larghezza e altezza. Ottimizzato per navigazione da tastiera. Disponibili eventi personalizzati, metodi e molte opzioni. Compatibile con i più diffusi (jQuery) lightbox-plugins. GET e (re) SET opzioni di configurazione dopo l’esecuzione. Esempi Extra Inoltre vi segnalo questi esempi e metodi di implementazione dello slider. Slider Base Slider con diversi contenuti Slider con interazione utente Uso di funzioni Callback Uso di eventi personalizzabili Slider con diverse dimensioni di contenuto Slider personalizzato da eventi Slider + Lightbox Uso di 15 Slider simultanei Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum. Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico. Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.

Can all mozilla people look away now please

hanicker — 2010-06-09T13:36:13+00:00

Custom setters syntax are being removed from Firefox in the next version.. boo I here you say well at least some of you. If you don’t know Firefox decided it would create it’s own setter syntax (I love it when you do that you know) ages ago and it looked something like this:- a setter=alert,a=1//calls alert(1) Whacky indeed. They decided to remove it. So I was messing with JavaScript like I do near enough every day and I stumbled upon this:- Object.prototype.__noSuchMethod__=function(s){ alert(s); }; 1..*(1) What was surprising was that “alert” returned “*” not 1 as you would expect. The crazyness then continued:- Object.prototype.__noSuchMethod__=function(s){ eval(s); };1.['alert(1)']() Not looking at MDC and still not understanding why this was happening Mario pointed out “oh it’s sending the name of the function via the noSuchMethod” then big doh moment oh yeah. But then that means…..we have a new setter syntax!!!! //existing code function x(s) { eval(s); } //our evil injection Object.prototype.__noSuchMethod__=x;new/a/['alert(1)'] If you work at Mozilla please look away now because I like this crazy syntax so don’t fix it.

Regular expression sandboxing

hanicker — 2010-05-05T13:15:20+00:00

Birth of the regex sandbox I decided today to do a proper blog post to explain my reasons for creating regex sandboxes. I don’t often write a lot of words on this blog partly because I’m not very good a making long meaningful sentences and partly because I think the point can often be made in less words. Hopefully this will be useful for someone writing filters. First off a quote “You can’t parse [X]HTML with regex. Because HTML can’t be parsed by regex. Regex is not a tool that can be used to correctly parse HTML” from (stackoverflow). I agree with the comment it isn’t possible to fully parse HTML with regexes but my goal wasn’t to do that, I wanted to parse a safe form of HTML. I also have a uncontrollable urge to do something that people say can’t be done. Now we have that out of the way, how did this all begin? Well I was building a char by char JavaScript parser inside JavaScript to allow untrusted code to be executed. Every time I wrote a simple string matching function I found myself making shortcuts and using regexes instead. For example why loop through all characters when you can whitelist the desired ones? I soon found that I had a great advantage of using regexes instead of parsing every character, because I could use the native JavaScript engine to help me. This lead me to develop JSReg [1], at first it seemed very easy to match JavaScript, the numbers were pretty easy and strings but I then encountered one of the first problems of regex sandboxes. It is very difficult to match something that is matching itself, for example an array can contain pretty much any JavaScript statement and itself but if you are defining it how can you match it? I didn’t really have an answer to this, one of my solutions to this problem was to create a recursive regex that created a second compiler to match inside the first match and so on. But this was slow and because JavaScript doesn’t have lookbehind previous matches would eat characters in the next match (I’ll talk more about this in the design). My other idea was to use backreferences but these are very difficult to track when using multiple regexes and they only return a successful match in my tests it wasn’t possible to produce a perfect array match using backreferences. I could be wrong of course I know I’m not perfect. The design My basis of my design was to not rely on 3rd party code were possible that means no jquery etc, in addition I should employ multiple layers of security wherever possible. These were good design decisions. Throughout initial testing the multiple layers proved difficult to break down. For JSReg the first layer was an iframe, the iframe was created each time of execution enabling fresh prototypes and a throw away box once execution had finished. Then I whitelisted the entire JavaScript objects/properties, this was done by forcing all methods to use suffix/prefix of “$”. Each variable assignment was then localized using var to force local variables. Each object was also checked to ensure it didn’t contain a window reference. Javascript arrays proved tricky as mentioned earlier because of the amount of code that can be included within them, initially I decided to try and match them and their contents. But there were several performance problems of matching all that code and JavaScript regex limitations. For example I use one regex with a replace function to globally match each sequence using groups, the idea is to match all the valid objects first. In the instance of an array you’d first match all regex objects, strings etc because they can contain a “[" and "]” then once all valid objects have been enumerated by the regex engine it will encounter the first “[" of our array. This works well in practice for every object apart from arrays. In JavaScript the array literal shares the same syntax as the object accessor. Therefore you have to identify the difference between an array or object. Sounds easy? [][0[0,0[0]]]; +[][0[0,0[0]]]; {}['I am an array'] ~{a:0}['I am a object accessor'] As you can see with the samples above, you’d have to match the entire js syntax before the opening “[". Then if you don't match the entire sequence inside the array you won't know if the ending "]” is part of an array sequence or object. This problem was unsolved for a long time. The main reason was in order to protect against window references I rewrite object accessors like obj['abc'] to obj[JSREG_FUNC.gp('abc')] so the function returns a safe string which uses the prefix/suffix of $ e.g. abc becomes $abc$. Because a string is returned of the expression it would break an array if it wasn’t detected. Detecting an array or object was difficult because of the design too, you see if a regex object is matched like /abc/ and is followed by a object accessor like /abc/['source'] the previous expression is eaten by the parser so the next match is effectively ['source'] which JSReg understandably thinks is an array. A simple way round this would be to lookbehind to see if a whitelist of characters make the opening “[" an array or not. But JavaScript doesn't support lookbehinds! The simple workaround was to use Array(1,2,3) instead for arrays and assume all "[" and "]” were not arrays. This worked but it breaks existing code. Finally after many attempts I think I’ve come up with a solution. I store a list of previous matches and rewrite all array literals and object accessors into a function or method. This means I no longer need to detect the ending of the array as they both have a “)” instead of a “]”. Easily demonstrated with a code example:- [1,2,3] //becomes:- A(Number(1),Number(2),Number(3)) window['x']//becomes:- $window$.JSREG_PROP('x') Finally as part of the design I check the JavaScript syntax before and after conversion this provides another layer of security if the rewrite fails at any part of matching the code. The code JavaScript is difficult to match but I found HTML/CSS easier. At first I started the code for HTMLReg [2] and CSSReg [3] in a similar way to JSReg. Then I realized when hacking my own code how I could make it better to defend against attack. First off I employed a strict whitelist to remove any partial open HTML attacks and evil attributes that were obvious attacks. This means I didn’t stick to the HTML specification, I don’t allow any junk in attributes. For example if you want to include “<" or ">” inside a title attribute then you have to encode it. I may allow them in future if it can be proven safe but I’d rather not fight something I can’t win. You may disagree with what I’ve just said but your filter is probably being pwnd right now. Once I had my whitelist of tags and attributes I constructed RegExes for any individual parts I wanted to match. For example text nodes, invalid tags and valid attributes, these would be nicely chained together in one big regex. Then each part is grouped so that you can match each expression and validate it. Here is how it works:- html.replace(mainRegExp, function($0, $styleTag, $tag, $text, $invalidTags) {} Notice how I use the replace function, I don’t do html = html.replace because I only want to match the text in my regexes. I prefer to use replace because I have a nice reference to each group like this automatically with local variables. This was a lesson I learned from developing JSReg as if the replace fails it will return your plain code rather than rewrite it. Inside the function I include a couple of things in each block I’ll use the text node as an example:- if($text !== undefined && $text.length) { output += $text; parseTree+='text('+$text+')\n'; } Here if the text node is matched it adds it to the output. Parse tree is a nice way of keeping track of what you’ve matched. It’s a useful debugging reference. The if statement is required because of browser inconsistencies when matching groups. In the case of HTMLReg for performance reasons I have a whitelist to match a general tag, then inspect it further so I’m only matching a smaller amount of text. You can see that with the following code:- if($tag !== undefined && $tag.length) { if(!new RegExp('^<\\\/?'+allowedTags.source+'[\\s>]','i').test($tag)) { return ''; } parseTree+='tag('+$tag+')\n'; if(!/^<\/?[a-z0-9]+>$/i.test($tag)) { $tag = parseAttrValues($tag); } output += $tag; } Once my tag has been matched I then start to parse attributes, I do this by creating a hidden div and reading it’s contents. This is cool for a number of reasons, we can read what the browser reads and our code automatically gets formatted. Because we then use the DOM it means our entities will be decoded for us. While testing I found that JavaScript won’t be executed using innerHTML without certain tags or attributes, if I whitelist the tags and attributes then I can use the innerHTML safely without having to worry about execution. I have a backup plan if this fails, I could be more strict with certain attributes if it’s possible to execute code. Onto CSSReg! It didn’t exist nor did I think it was needed as I thought I could rely on the browser to ensure multiple CSS rules didn’t cross over from single CSS dom rules. I was wrong. It was proven by many talented researchers (mentioned in the thanks section) that it wasn’t possible to get the browsers to rewrite CSS safely. I had to write another regex sandbox. This time it wasn’t as tricky as first appeared. As long as I didn’t try to follow the madness of the specification again I should be able to produce some CSS that was safe from malicious code yet is useful enough to use. First off I gathered a list of properties and identifiers, I removed crappy browser specific extensions yeah they are bad. ALL OF THEM. Then I used the same method of HTMLReg to match each part, the trickiest part this time was urls. There are so many ways to escape a css url in every browser, you have to handle backslash escapes, entities, new lines and backslash hex escapes. The best way I came up with was to whitelist the url first, match everything in-between () and then decode and escape every character that didn’t match the whitelist. This made it pretty safe across multiple browsers. But there was a problem, some browsers decoded the CSS even when it was sandboxed correctly e.g. one attack I found was to triple encode the character and the browser would decode the entities and escapes until it produced it’s mangled version of CSS which broke the sandbox. To get round this I created a custom attribute which didn’t match my whitelist “sandbox-style” this allowed CSSReg to store it’s correctly sandboxed style, I used a custom attribute outside of the whitelist to prevent injections of sandbox-style. Once my CSS was stored correctly I could then match it again and rename it back to style which was then returned correctly. All this trouble was because I wanted the browser to handle invalid HTML for me, any unclosed HTML tags would be automatically closed by the browser engine for me Finally in order to handle selectors I stuck to very simple syntax, either #someid or .someclass and allowed multiple like .someclass1, someclass2 {} this prevents CSS injection based attacks and well as making it easy to parse. Once each selector was matched I restrict which tags are allowed and prefix a application ID to prevent HTML/CSS crossing across sandboxes. I then check if a selector is matched before opening or closing one. I hope you’ve enjoyed this post as it’s a break from what I normally do but I thought it would be worth the effort to get together as I’ve found some of the concepts the best way to code a solution and hopefully you’ll find it useful. Thanks I would like to thank Dave Ross as I was heavily inspired by him especially with the multiple regex references chained together. Eduardo Vela aka “sirdarckcat” for his awesome (?:HTML|JS|CSS)Reg hacks. Juriy Zaytsev aka “kangax” for his excellent input in detecting parsing flaws with JSReg. Kyo for breaking things without even trying. Theharmonyguy for breaking HTMLReg classes and spotting comical spelling mistakes by me. LeverOne for breaking HTMLReg and CSSReg with some quite simply awesome and evil vectors. Mario Heiderich aka “.mario” for making regex objects look insane and provide great input for JSReg and breaking HTMLReg. David Lindsay aka “Thornmaker” finding JSReg parsing errors with ternary operators. Stefano Di Paola for smashing the JSReg stack and proving that non-mortals exist. Achim Hoffmann for providing valuable JSReg input and everyone else who has helped me test and develop JSReg & others. [1] JSReg [2] HTMLReg [3] CSSReg

jStackmenu: Menu Dock stile Mac in CSS + JavaScript

hanicker — 2010-05-05T06:00:39+00:00

jStackmenu è un piccolo file JavaScript + CSS che permette di trasformare una qualsiasti lista in HTML in un menu in stile Dock Mac. Abbiamo la possibilità di provare una demo, scaricare i file sorgenti e leggere una ricca documentazione all’uso. Tramite questo piccolo script potremo facilmente controllare l’apertura e chiusura, la direzione, la dimensione e il tempo dell’animazione. Questo script sarà sicuramente utile per creare dei menu a cascata originali e fuori dagli schemi ottimizzando lo spazio. Ottimo esempio di come creare un menu accattivante con un pò di JavaScript e CSS.

HTMLReg

hanicker — 2010-04-15T10:34:07+00:00

Yeah you knew it was coming. This was easier than JavaScript parsing because I can use both the HTML and CSS renderers of the browser to make sure I can parse the code safely. So really this is CSS/HTML reg, I don’t support the style tag yet but that shouldn’t be difficult as I can just write a RegExp to match the style and contents then parse each rule. How did I do it? With very little code of course, I use a restrictive RegEx to get the actual tags and attributes then using the DOM I make the browser render the attributes and read each one and delete the actual attributes and styles, then I put each rule and attribute back using a whitelist. I remove any nodes that aren’t legal or malicious, the text portion of the node uses a whitelist of allowed characters and does not allow “<" or ">” this stops partial HTML attacks. Finally to clean up I let the browser render the HTML code for me and rewrite some make it prettier than others. HTMLReg demo Remember real men use JavaScript.

Ext Designer

hanicker — 2010-02-23T09:44:00+00:00

Ext Designer è un’applicazione (basata su Adobe AIR a naso) che promette di realizzare il sogno di ogni sviluppatore Ext JS: realizzare interfacce complesse con Ext JS tramite drag&drop. Ext Designer si occuperà di generare tutto il codice necessario (interfaccia e link ai dati) per utilizzarlo poi nelle nostre applicazioni. Unico difetto: il prezzo. 150$ sono già tanti e si tratta di un’offerta speciale con il 50% di sconto…

Ext JS 3.1.1

hanicker — 2010-02-09T08:09:22+00:00

Il framework Ext JS si aggiorna, arrivando alla versione 3.1.1. Numerosi i bugfix e i miglioramenti, che potete leggere nell’esauriente release note. C’è qualcuno là fuori che usa questo framework oltre al sottoscritto?