210 lines
16 KiB
HTML
210 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="p:domain_verify" content="75966d6efb7a5147e222671bd554749c"/>
|
|
<title>Page not found | TechSlides</title>
|
|
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
|
|
<link rel='stylesheet' id='simple-style-css' href='http://techslides.com/wp-content/themes/minimalist/style.css?ver=3.8.29' type='text/css' media='all' />
|
|
|
|
<script type="text/javascript">
|
|
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-941940-28']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
|
|
</script>
|
|
|
|
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({
|
|
google_ad_client: "ca-pub-6963340308218331",
|
|
enable_page_level_ads: true
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body class="error404">
|
|
<header>
|
|
|
|
|
|
<div id="logo"><a href="http://techslides.com">TechSlides</a></div>
|
|
<div class="clear"></div>
|
|
<p>Data, Maps, Usability, and Performance</p>
|
|
|
|
|
|
|
|
<div class="topad">
|
|
<!--<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
|
|
<ins class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="ca-pub-6963340308218331"
|
|
data-ad-slot="8309515439"
|
|
data-ad-format="auto"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
|
|
<div id="search">
|
|
<a href="http://addthis.com/bookmark.php?s=facebook&source=tbx32nj-1.0&pubid=ra-4eea158d06720720&title=TechSlides | APIs, Maps, Usability, and Performance" target="_blank"><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="Facebook"></a>
|
|
<a href="http://addthis.com/bookmark.php?s=twitter&source=tbx32nj-1.0&pubid=ra-4eea158d06720720&title=TechSlides | APIs, Maps, Usability, and Performance" target="_blank"><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/twitter.png" border="0" alt="Twitter"></a>
|
|
<a href="http://www.addthis.com/bookmark.php?v=300&pubid=ra-4eea158d06720720&title=TechSlides | APIs, Maps, Usability, and Performance" target="_blank"><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/more.png" border="0" alt="More..."></a>
|
|
<form role="search" method="get" id="searchform" class="searchform" action="http://techslides.com/" >
|
|
<input type="text" value="" name="s" placeholder="Search..." id="s" />
|
|
<input type="submit" id="searchsubmit" value="" />
|
|
</form> </div>
|
|
|
|
</header>
|
|
|
|
<div id="tagcloud"><a href='http://techslides.com/tag/api' class='tag-link-13' title='30 topics' style='font-size: 20.084507042254pt;'>API</a>
|
|
<a href='http://techslides.com/tag/canvas' class='tag-link-22' title='16 topics' style='font-size: 14.957746478873pt;'>canvas</a>
|
|
<a href='http://techslides.com/tag/d3' class='tag-link-27' title='23 topics' style='font-size: 17.915492957746pt;'>d3</a>
|
|
<a href='http://techslides.com/tag/data' class='tag-link-28' title='15 topics' style='font-size: 14.366197183099pt;'>data</a>
|
|
<a href='http://techslides.com/tag/geo' class='tag-link-39' title='31 topics' style='font-size: 20.478873239437pt;'>geo</a>
|
|
<a href='http://techslides.com/tag/geojson' class='tag-link-40' title='11 topics' style='font-size: 12pt;'>GeoJSON</a>
|
|
<a href='http://techslides.com/tag/html5' class='tag-link-45' title='41 topics' style='font-size: 22.647887323944pt;'>html5</a>
|
|
<a href='http://techslides.com/tag/image' class='tag-link-47' title='15 topics' style='font-size: 14.366197183099pt;'>image</a>
|
|
<a href='http://techslides.com/tag/javascript' class='tag-link-48' title='60 topics' style='font-size: 26pt;'>JavaScript</a>
|
|
<a href='http://techslides.com/tag/json' class='tag-link-52' title='15 topics' style='font-size: 14.366197183099pt;'>json</a>
|
|
<a href='http://techslides.com/tag/maps' class='tag-link-59' title='36 topics' style='font-size: 21.661971830986pt;'>maps</a>
|
|
<a href='http://techslides.com/tag/mysql' class='tag-link-64' title='11 topics' style='font-size: 12pt;'>mysql</a>
|
|
<a href='http://techslides.com/tag/php' class='tag-link-71' title='25 topics' style='font-size: 18.507042253521pt;'>PHP</a>
|
|
<a href='http://techslides.com/tag/wordpress' class='tag-link-99' title='17 topics' style='font-size: 15.549295774648pt;'>WordPress</a></div>
|
|
|
|
<main>
|
|
|
|
|
|
<div class="topad">
|
|
<!--<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
|
|
<ins class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="ca-pub-6963340308218331"
|
|
data-ad-slot="8309515439"
|
|
data-ad-format="auto"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
|
|
<article><h2><a href="http://techslides.com/mockup-generator-in-html5-with-matrix3d-transforms">Mockup Generator in HTML5 with Matrix3D Transforms</a></h2><p><img src="http://i.imgur.com/rLHDZ4o.jpg" alt="free mockup generator"/></p>
|
|
<p>A while ago, I played around with a cool <a href="http://bl.ocks.org/mbostock/10571478">Perspective Transformation</a> using SVG and matrix3d CSS transform. It made sense to turn it into a mockup generator like <a href="http://magicmockups.com/">Magic Mockups</a> or <a href="https://placeit.net">PLaceIt</a>. But, I ran into some issues when overlaying an SVG with matrix3d transforms on HTML5 canvas. I found an <a href="http://jsfiddle.net/mrbendel/6rbtde5t/1/">JSfiddle example</a> of just using HTML5 CANVAS and transformed it into a full mockup generator.<br />
|
|
<a class="more-link" href="http://techslides.com/mockup-generator-in-html5-with-matrix3d-transforms">Read more</a></p>
|
|
</article>
|
|
|
|
|
|
<div class="topad">
|
|
<!--<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
|
|
<ins class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="ca-pub-6963340308218331"
|
|
data-ad-slot="8309515439"
|
|
data-ad-format="auto"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<article><h2><a href="http://techslides.com/rediscover-great-content-with-internet-archive">Rediscover Great Content with Internet Archive</a></h2><p><img src="http://i.imgur.com/OPPCb8b.png" alt="internet archive js10k links" style="border:1px solid #000"/></p>
|
|
<p>Sometimes I go to my saved links and the website is no longer there or it has been parked, sold, or transformed into another project. This has recently happened when I wanted to revisit a neat air traffic controller game called <a href="https://web.archive.org/web/20150416194018/http://10k.aneventapart.com/2/Uploads/541/">Air Strike</a> (notice the link goes to Wayback Machine). This game was submitted to the 10K Apart competition where participants show off some amazing web experiences written in under 10k of JavaScript code. It looks like the competition is <a href="https://a-k-apart.com/">happening again</a> but the old demos are all gone. </p>
|
|
<p>Thanks to the Internet Archive, you can find a lot of static content that once existed and today I want to show 20 amazing JavaScript projects from the older JS10k competition that you can still check out (Some of these require clicking “Load Unsafe Scripts”):<br />
|
|
<a class="more-link" href="http://techslides.com/rediscover-great-content-with-internet-archive">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/sort-wordpress-posts-by-modified-date-using-a-url-param">Sort WordPress Posts by Modified Date using a URL Param</a></h2><p><img src="http://i.imgur.com/DjsrkQs.png" alt="List Posts by Recently Updated in WordPress"/></p>
|
|
<p>After updating a few older articles on this blog I have realized that it would be useful to provide a display where all my posts are sorted by last modified date instead of created date. I imagine it would just be a link that someone can click and it would change the WP query so that recently updated posts are displayed in descending order. Everything else stays the same. You can see it in action on my homepage and today I will cover how you can do that with two simple WordPress functions.<br />
|
|
<a class="more-link" href="http://techslides.com/sort-wordpress-posts-by-modified-date-using-a-url-param">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/adding-new-fields-for-wp-users">Managing and Displaying New Fields for WordPress Users</a></h2><p><img src="http://i.imgur.com/jPCayJ5.jpg" alt="how to add new attributes to wordpress users"/></p>
|
|
<p>WordPress provides a lot of different hooks that allow you to expand on user management capabilities. You can easily add a new field or attribute for any user and make it editable in the user profile. You can restrict the edit mode to only Administrators and you can visualize any of these new user data points in the main Admin Users table. </p>
|
|
<p>So, today, I will write a quick WP Plugin that adds a new user field called credits to all users, which can be updated by Admins in the user profile. The WordPress plugin will also display that field in the Users table along with a new read only field that captures users last login date and time.<br />
|
|
<a class="more-link" href="http://techslides.com/adding-new-fields-for-wp-users">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/wordpress-plugin-with-background-process-queue-and-debugging">WordPress Plugin with Background Process, Queue, and Debugging</a></h2><p><img src="http://i.imgur.com/lcu0SXK.jpg" alt="background processing sample WP plugin for async tasks" style="border:1px solid #000;"/></p>
|
|
<p>WordPress Plugins are often used to run a large process in the background like importing, exporting, bringing data from other APIs, pushing data out, and other tasks that should run asynchronously. How do you do that? TechCrunch came out with <a href="https://github.com/techcrunch/wp-async-task">wp-async-task</a> and <a href="https://github.com/A5hleyRich/wp-background-processing">WP Background Processing</a> extended that by adding the ability to queue tasks. The author already included a good <a href="https://github.com/A5hleyRich/wp-background-processing-example">sample plugin</a> and <a href="https://deliciousbrains.com/background-processing-wordpress/">article</a> but I wanted to see if I can write a more basic example. So, today, I will create a WordPress plugin that uses WP Background Process to queue and run PHP tasks in the background.<br />
|
|
<a class="more-link" href="http://techslides.com/wordpress-plugin-with-background-process-queue-and-debugging">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/how-to-insert-or-update-multiple-items-in-mysql-and-wordpress">How to insert or update multiple items in MySQL and WordPress?</a></h2><p><img src="http://i.imgur.com/9Z6vwaL.png" alt="replace into versus insert on duplicate key update"/></p>
|
|
<p>You have a table with some data, lets say it is user information with emails, names, ages, etc. Now you need to insert 10 more rows of data but you don’t know if the 10 new rows are for new users or if they are attributes for users you already have in the database. This is a very common scenario where you need to figure out if you should update or insert.<br />
|
|
<a class="more-link" href="http://techslides.com/how-to-insert-or-update-multiple-items-in-mysql-and-wordpress">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/world-map-with-d3-microlibraries-and-rotated-to-contain-russia">World Map with D3 Microlibraries and rotated to contain Russia</a></h2><p><img src="http://i.imgur.com/F31auyO.png?2" alt="World Map D3 v4 Microlibraries and Russia Alaska not split"/></p>
|
|
<p>It has been a while since I released the <a href="http://techslides.com/d3-map-starter-kit">D3 Map Starter Kit</a> and a lot has changed. The <a href="https://github.com/d3/d3/blob/master/CHANGES.md">4.0 version of D3</a> is modular, decentralized, and split into small libraries that you can use independently. It has changed some of the APIs so I have updated the <a href="http://techslides.com/demos/d3/worldmap-template-d3v4.html">World Map Template to work with D3 version 4</a>, but how do we build a map with just the D3.js micro-libraries?<br />
|
|
<a class="more-link" href="http://techslides.com/world-map-with-d3-microlibraries-and-rotated-to-contain-russia">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/how-to-convert-a-bookmarklet-to-a-chrome-extension">How to Convert a Bookmarklet to a Chrome Extension</a></h2><p><img src="http://i.imgur.com/QLNHFRe.png" alt="Converting Bookmarklet to Chrome Extension"/></p>
|
|
<p>Bookmarklets, or the ability to execute your own JavaScript code on any page, allows you to customize your browsing experience in many ways. A while ago I wrote some JS code that would simply remove all content from any page and only show images with zoom on click functionality. It works well as a bookmarklet but I wanted to see how easy it is to package this into a Chrome Extension. I am doing this for fun but there are some strong reasons like access to cross domain resources, access to network requests, and ability to share with others via the Chrome Store.</p>
|
|
<p>Here are some simple steps that show how to convert JavaScript code into a Chrome Extension<br />
|
|
<a class="more-link" href="http://techslides.com/how-to-convert-a-bookmarklet-to-a-chrome-extension">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/using-max-and-case-to-pivot-mysql-data-stored-in-eav-model">Using MAX and CASE to pivot MySQL data stored in EAV Model</a></h2><p><img src="http://i.imgur.com/WTkS1fN.png" alt="EAV to relational model pivot with mysql query"/></p>
|
|
<p>Last week, I covered pivoting tabular data in JavaScript. But, often times, data is not stored like a CSV or excel sheet in a database. When flexibility is needed to cover potential future changes, like adding many new columns or removing old ones, we often see the <a href="https://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value_model">EAV model</a> being used to store data. </p>
|
|
<p>Consider the previous example of storing car data in rows with columns: id, make, color, and age. If you are just adding more rows, this works well. But, if you will be adding an uncertain number of new columns in the future (model, size, etc), or removing columns, it might make sense to use the EAV model.<br />
|
|
<a class="more-link" href="http://techslides.com/using-max-and-case-to-pivot-mysql-data-stored-in-eav-model">Read more</a></p>
|
|
</article><article><h2><a href="http://techslides.com/fastpivot-process-and-shift-json-data-with-javascript">FastPivot – Process and Shift JSON data with JavaScript</a></h2><p><img src="http://i.imgur.com/FBqftO7.png" alt="FastPivot, pivot data with JavaScript"/></p>
|
|
<p>Imagine a table of data, perhaps car data with columns: ID, Model, Make, Color, Age, etc. How do you process this data so that you can answer some simple questions or visualize it with <a href="http://techslides.com/50-javascript-charting-and-graphics-libraries">JavaScript charts</a>? Some questions, like “how many cars are red?” can be processed by looking at a count of rows that meet your criteria (rows where column color is red). </p>
|
|
<p>Other questions, like “what is the distribution of colors in your data set?”, requires shifting or pivoting the data, as you want to evaluate a specific column instead of rows. Charting will often need this data pivot and doing it optimally is crucial if you are working with a large amount of data on the client side.<br />
|
|
<a class="more-link" href="http://techslides.com/fastpivot-process-and-shift-json-data-with-javascript">Read more</a></p>
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pagination">
|
|
<a href="http://techslides.com/demos/samples/sample.xsl/page/2" >Next Page »</a> </div>
|
|
|
|
<div class="topad">
|
|
<!--<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
|
|
<ins class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="ca-pub-6963340308218331"
|
|
data-ad-slot="8309515439"
|
|
data-ad-format="auto"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
<div id="copyright"><p>Copyright ©2016 TechSlides, All Rights Reserved</p></div> </footer>
|
|
|
|
</main>
|
|
|
|
|
|
</body>
|
|
</html> |