uncleflo
Registered since September 28th, 2017
Has a total of 4246 bookmarks.
Showing top Tags within 165 bookmarks
howto information development guide reference administration design website software solution service product online business uk tool company linux code server system application web list video marine create data experience description tutorial explanation technology build blog article learn world project boat download windows security lookup free performance javascript technical network control beautiful support london tools course file research purchase library programming image youtube example php construction html opensource quality install community computer profile feature power browser music platform mobile work user process database share manage hardware professional buy industry internet dance advice installation developer 3d search material access customer travel camera test standard review documentation css money engineering develop webdesign engine device photography digital api speed source management program phone discussion question event client story simple water marketing yacht app content setup package fast idea interface account communication cheap compare script study market live easy google resource operation startup monitor training
Tag selected: javascript.
Looking up javascript tag. Showing 165 results. Clear
Animate Anything Along an SVG Path | Codrops
Saved by uncleflo on November 14th, 2022.
Learn how to code creative animations using SVG paths and the getPointAtLength() function. SVG is a very neat format to display any illustration, icon or logo on a website. Furthermore, they can be animated in CSS or JavaScript to make them more attractive. But SVG can also be used for their data only, without the visual! Let me explain… An SVG is a vector image format, which means it is not made of coloured pixels, but math functions that, once interpreted, can be rendered on screen. Since the browser must convert the file from functions to actual pixels, it also let us access a wide variety of methods to either manipulate, or retrieve data from the math. In today’s article, we will explore the function getPointAtLength() and see how we can use the data of an SVG path for creative use cases such as the demo below.
animating animate path setup predictive browser particles analyze animation bounce geometry dots animated vector illustration element circle beautiful svg path function format logo website css javascript image development howto demonstrate
Chart.js | Open source HTML5 Charts for your website
Saved by uncleflo on February 12th, 2022.
Layout boxes can be stacked and weighted in groups. A secondary title plugin with all the same options as main title Line segments can be styled by any user defined criteria. Transitions of every property in every element can be configured individually and independently. Numerous performance enhancements have been introduced. This example has 1M (2x500k) points with the new decimation plugin enabled. Mix and match bar and line charts to provide a clear visual distinction between datasets. Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. Out of the box stunning transitions when changing data, updating colours and adding datasets. Chart.js is a community maintained project, contributions welcome! Visualize your data in 8 different ways; each of them animated and customisable.
logarithmic stack sparse style render individual scale independent layout animate mix element visual entire maintain chart way define box clear plot complex property number data display how show explain enhance create development javascript howto user view plugin graph opensource website online
I built the same app 10 times // Which JS Framework is best? - YouTube
Saved by uncleflo on January 16th, 2022.
I built a simple app with 10 different JavaScript frameworks... Learn the pros and cons of each JS framework before building your next app. Notably, Angular didn't really stand out here, and I want to explain why. It is not geared towards simplicity for singular developers. It is engineered to be maintainable in large and complex projects, and to optimize the hell out of the app. When it's all said and done, Angular is a great framework for large apps with multiple developers working on it due to it's structured layout and intentionally opinionated setup. I started using Svelte the other night and was blown away with how lightweight and easy it was. I've always loved Vue and Svelte feels like an even more lightweight version of Vue.
javascript framework demonstration list comparison js build app angular vue node project svelte lightweight layout explanation howto developer development simple optimize maintanance compare video youtube instruction
Three.js – JavaScript 3D Library
Saved by uncleflo on January 16th, 2022.
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples. The recommended format for importing and exporting assets is glTF (GL Transmission Format). Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. three.js provides loaders for many other popular formats like FBX, Collada or OBJ as well. Nevertheless, you should always try to establish a glTF based workflow in your projects first. For more information, see loading 3D models.
three project cross-browser general library build webgl opengl gpu svg css3d renderer html javascript transmit workflow example beautiful impressive browser develop web development administration import howto information developer game
Themestr.app - Bootstrap Theme Builder and Customizer
Saved by uncleflo on January 13th, 2022.
The whole idea of Themestr.app is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. For most users it's designed to be point-and-click. Advanced users can delve into the SASS as desired. It's a 4-step process... There are many, many variables. The variable names are self-explanatory, and the more relevant ones are displayed first. The SASS is automatically generated by Themestr.app. The SASS input is sent to a server-side SASS processor, which outputs the custom CSS theme. Save the CSS output as a .css file such as `theme.css`. To keep the theme file separate and smaller in size, the Bootstrap grid classes are not included in the CSS output. This means you'll need to reference the Bootstrap CSS as usual, and then reference the generated custom `theme.css` after the `bootstrap.css` in the HTML. This allows the `theme.css` to override the `bootstrap.css` with the appropriate classes as defined in the custom theme.
bootstrap sass explain explanation theme font default tool generate recommend server styling website webdevelopment easy display html customize online generator output javascript css visualization
Create a React app with zero configuration using Parcel | blog.jakoblind.no
Saved by uncleflo on May 15th, 2021.
We have all experienced the pain of getting started with React. You spend hours to configure webpack before you can start actual coding. Create React App was created to make it easier and quicker to get started. The problem with create react app is that it hides the webpack config. When your app grows and you need something a bit more advanced, you have to eject and then you get a huge webpack config. And then you are back to the problem that you need to learn webpack anyway. I tried it on a large code base, and it worked out-of-the-box! It even gave me a bundle that was optimized. I have spent days optimizing that bundle using webpack. I think this tool has potential. Let’s look at how to create a React app from scratch!
react parcel code administration package tool experience app config startup configure github download install setup webdevelopment javascript html library
Intl - JavaScript | MDN
Saved by uncleflo on May 11th, 2021.
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions. The internationalization constructors as well as several language sensitive methods of other constructors (listed under See also) use a common pattern for identifying locales and determining the one they will actually use: they all accept locales and options arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the options.localeMatcher property. The locales argument is used to determine the locale used in a given operation. The JavaScript implementation examines locales, and then computes a locale it understands that comes closest to satisfying the expressed preference.
locale internationalization registry algorithm browser universal support comparison compare list javascript api formatting functionality method website development webdevelopment technical code howto information internet web coding
Create a New React App – React
Saved by uncleflo on May 11th, 2021.
This page describes a few popular React toolchains which help with tasks. The toolchains recommended on this page don’t require configuration to get started. If you don’t experience the problems described above or don’t feel comfortable using JavaScript tools yet, consider adding React as a plain <script> tag on an HTML page, optionally with JSX. This is also the easiest way to integrate React into an existing website. You can always add a larger toolchain if you find it helpful! Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
react deploy recommend scratch developer lightweight server guide learn build create configuration package application development webdevelopment environment script javascript tool coding
HTML5 Video Player | JW Player
Saved by uncleflo on April 10th, 2021.
Deliver a buffer-free experience for your viewers using HLS and DASH adaptive streaming. Set up your custom video gallery quickly with our turnkey Showcase solution. Create unique experiences to engage users by streaming 360 videos across devices. Optimize your business strategy with valuable insights from our video intelligence. Our player delivers what you need: speed, quality, and flexibility. Configure your video player to create fully branded experiences using CSS customization and APIs. Adjust color, speed, thumbnails and more to deliver a viewing experience that's on brand.
monetize streaming deliver adaptive flexible productive experience engage gallery revenue video player strategy solution device development play administration web website tool javascript js interface
React JS Crash Course 2021 - YouTube
Saved by uncleflo on April 10th, 2021.
Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more.
react javascript course guide api crash youtube video start development howto information tutorial
Windy: Wind map & weather forecast
Saved by uncleflo on October 11th, 2019.
I am an addicted kiter, helicopter and jet pilot who seeks the wind, waves, METARs and powder snow almost constantly. Since programming is my passion, I coded Windyty.com in 2014 as my pet project. The original version was highly inspired by the products from the Swiss company Meteoblue and other project called "Earth", that displayed animated wind particles on the globe. I have completely rewrote open source codes of Earth and also made an agreement with Meteoblue to use some of their products that time. And thus Windyty was born (renamed to Windy a few years later). My goal is to keep Windy small and fast to be accessible in the most remote locations.
windy meteorology meteo wind wave snow programming earth animation particle glove opensource code remote location weather how marine javascript beautiful nice data global
Bricks.js
Saved by uncleflo on July 24th, 2019.
Current masonry solutions lack performance, and are bloated with unnecessary features. In addition, they: Bricks capitalizes on batched reading of layout properties for blazing fast packing time, no matter how many items.
website development javascript code develop create beautiful interact feature solution performance layout fast speed item masonry look feel
FREE and Simple Cookie Script
Saved by uncleflo on October 23rd, 2018.
Cookie Info Script is an easy solution to comply with the European Cookie Law. Make your own cookie information banner. No programming skills required. And yes, it is totally free. Cookie Info Script is a lightweight JavaScript for alerting users about the use of cookies on your website. It is designed to help you and your website to comply with the EU Cookie Law. Cookie Info Script is free, fast and painless.
cookie comply solution european law information programming skill development integrate administration free lightweight javascript user design europea painless script fast small eu software require
Github - yui / yuicompressor - YUI Compressor - The Yahoo! JavaScript and CSS Compressor
Saved by uncleflo on June 1st, 2018.
The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as 'eval' or 'with' (although the compression is not optimal in those cases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)
yahoo compressor javascript js remove comment minify compress css commercial recommended development code administration
Quora - What is the best JS, CSS, HTML, and PHP minifier?
Saved by uncleflo on June 1st, 2018.
JavaScript: I’d rate Google’s Closure Compiler as the best, and UglifyJS second. There isn’t much data out there comparing them, especially the current or recent versions of them, but Closure gets lots of attention from talented people and its minification is guided by smart optimizations. In that sense, it’s a true compiler, doing things like dead code elimination and some restructuring. CSS: CSSO and CSS Nano are both good. CSSO was created by Yandex, and I’m generally impressed with Yandex’s talent. (They’re the Google of Russia, sort of.). HTML: As far as I know, there isn’t a good HTML minifier right now. WebMarkupMin might be good, but it’s new and I haven’t tested it. The most popular is HTML Minifier, but it’s buggy, poorly documented, and unsafe – it can easily break your website, and they’re strangely unwilling to fix their bugs (see this bug). A golang minifier deletes the `<html>` and `<head>` tags, which is fascinating. For some reason HTML minifiers seem to be in the hands of people who are willing to take alarming risks with HTML – it’s a weird bubble in the universe. We could really use a focused project to build a reference HTML minifier, and I’ve asked Cloudflare to open-source theirs (but I have no idea if they will).
javascript css html minify optimize howto performance compare lookup document quora discussion article list reference development
Google Developers - Closure Compiler
Saved by uncleflo on June 1st, 2018.
The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
google compiler javascript js compile opensource language analyse remove code rewrite minimize syntax reference
GoJS - Interactive JavaScript Diagrams in HTML
Saved by uncleflo on May 19th, 2018.
GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers and platforms. GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts. GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, in-place text editing, tooltips, context menus, automatic layouts, templates, data binding and models, transactional state and undo management, palettes, overviews, event handlers, commands, and an extensible tool system for custom operations. GoJS is pure JavaScript, so users get interactivity without requiring round-trips to servers and without plugins. GoJS normally runs completely in the browser, rendering to an HTML5 Canvas element or SVG without any server-side requirements. GoJS does not depend on any JavaScript libraries or frameworks, so it should work with any HTML or JavaScript framework or with no framework at all. Build custom modeling environments and domain-specific visual languages using the powerful features of GoJS. Provide both a system editor and a read-only status monitor using shared code and templates. Simultaneously show alternative visualizations of the same data in different diagrams. Implement drill-down using expansion of subtrees and subgraphs or a detailed view in another diagram. Yet GoJS is remarkably simple for such a powerful and flexible system. Our thorough documentation introduces the basic concepts and demonstrate typical features that most apps want to offer. Nodes and links can be arbitrarily detailed according to the needs of the application. The API consists of only a few dozen important classes which encapsulate many useful features that interact with each other. There are many properties that permit simple customizations; some methods may be overridden for more complicated customizations.
gojs feature javascript library browser development diagram graphic interactive visualize platform construct node template layout html framework operation manage customize render
Fiddle to experiment with browser element offsets/sizes
Saved by uncleflo on May 9th, 2018.
Note how the browser reserves some space to the right of this paragraph, just enough to fit a scrollbar. This happens even though there is a decent amount of padding-right.
development code fiddle js jquery padding browser scroll javascript preview realtime tool margin element experiment crossbrowser compatible size position
You Might Not Need jQuery
Saved by uncleflo on May 9th, 2018.
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with. At the very least, make sure you know what jQuery is doing for you, and what it's not. Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty easy to deal with on their own.
jquery why reason javascript howto alternative development code browser library bandwidth dependency incompatible utility requirement advice server application speed execution
Stackoverflow - offsetTop vs. jQuery.offset().top
Saved by uncleflo on May 9th, 2018.
I have read that offsetLeft and offsetTop do not work properly in all browsers. jQuery.offset() is supposed to provide an abstraction for this to provide the correct value xbrowser. What I am trying to do is get the coordinates of where an element was clicked relative to the top-left of the element. Problem is that jQuery.offset().top is actually giving me a decimal value in FFX 3.6 (in IE and Chrome, the two values match). http://jsfiddle.net/htCPp/ exhibits the issue. If you click the bottom image, jQuery.offset().top returns 327.5, but offsetTop returns 328. I would like to think that offset() is returning the correct value and I should use it because it will work across browsers. However, people obviously cannot click decimals of pixels. Is the proper way to determine the true offset to Math.Round() the offset that jQuery is returning? Should I use offsetTop instead, or some other method entirely?
offset top left position development code abstract browser coordinate element jquery js javascript pixel chrome ie firefox crossbrowser stackoverflow problem solution
How to adjust an iframe element’s height to fit its content
Saved by uncleflo on April 20th, 2018.
In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options. Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.
display website iframe scrollbar howto code development js javascript content fit adjust element
www.crockford.com - jsmin.c
Saved by uncleflo on April 12th, 2018.
JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation. What JSMin Does: JSMin is a filter that omits or modifies some characters. This does not change the behavior of the program that it is minifying. The result may be harder to debug. It will definitely be harder to read. JSMin first replaces carriage returns ('\r') with linefeeds ('\n'). It replaces all other control characters (including tab) with spaces. It replaces comments in the // form with linefeeds. It replaces comments in the /* */ form with spaces. All runs of spaces are replaced with a single space. All runs of linefeeds are replaced with a single linefeed.
javascript js compression compressor study program software c c++ development compile programming download minify replace
Class patterns
Saved by uncleflo on April 8th, 2018.
There’s a special syntax construct and a keyword class in JavaScript. But before studying it, we should consider that the term “class” comes from the theory of object-oriented programming. The definition is cited above, and it’s language-independent. In JavaScript there are several well-known programming patterns to make classes even without using the class keyword. And here we’ll talk about them first. The class construct will be described in the next chapter, but in JavaScript it’s a “syntax sugar” and an extension of one of the patterns that we’ll study here.
syntax class oop programming development howto tutorial example reference code object instance pattern discussion article learn course js javascript
3 ways to define a JavaScript class
Saved by uncleflo on April 8th, 2018.
JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people's code. It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an object. And when it comes to inheritance, objects inherit from objects, not classes from classes as in the "class"-ical languages.
javascript js oop object oriented programming development howto class object language description reference instance inherit code blog article beautiful website
Creating and triggering events
Saved by uncleflo on April 7th, 2018.
This article demonstrates how to create and dispatch DOM events. Such events are commonly called synthetic events, as opposed to the events fired by the browser itself.
modern js javascript anti dom event browser demo development howto brief tutorial documentation mozilla dispatch
