让天下没有难学的编程 |

全部资讯


15 Interesting JavaScript and CSS Libraries for October 2017

Our recommendations for the web dev libraries and frameworks that your should check out this October.
查看全文
作者/Georgi Georgiev
时间/2017-10-16 20:56:12

Getting Nowhere on Job Titles

Last week on ShopTalk, Dave and I spoke with Mandy Michael and Lara Schenck. Mandy had just written the intentionally provocative "Is there any value in people who cannot write JavaScript?" which guided our conversation. Lara is deeply interested in this subject as well, as someone who is a job seeking web worker, but places herself on the spectrum as a non-unicorn. Part of that discussion was about job titles. If there was a ubiquitously accepted and used … Getting Nowhere on Job Titles is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Chris Coyier
时间/2017-10-16 15:37:23

How to Play Sony Playstation Games on OpenEmu

I’ve been having the time of my life playing retro Nintendo64, NES, SNES, and Game Gear games since I discovered OpenEmu.  I bought a few USB Nintendo 64 controllers and I’m like a kid again, even sharing that joy with my two young children.  Using ROMs from cartridge-based games is easy but CD-based consoles, like […] The post How to Play Sony Playstation Games on OpenEmu appeared first on David Walsh Blog. 收起
显示全部文字 查看全文
作者/David Walsh
时间/2017-10-16 10:15:34

A Bit on Buttons

Here's three recent things that have come across my desk in recent days regarding buttons. One, an accessibility flub that needed to be fixed. Two, an article about the fundamental differences between links and buttons but how they can look too similar for our own good. Three, the logical extreme of the button element: never use them outside of forms unless injected with JavaScript. A Bit on Buttons is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Chris Coyier
时间/2017-10-14 22:46:47

Writing Smarter Animation Code

If you've ever coded an animation that's longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded "wall of code". Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be nightmarish. In these videos, I'll show you the techniques that the pros use keep their code clean, manageable, and easy to revise. Scripted animation provides you the opportunity … Writing Smarter Animation Code is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Carl Schooff
时间/2017-10-13 23:02:15

CSS-Tricks Chronicle XXXII

Hey y'all! Time for a quick Chronicle post where I get to touch on and link up some of the happenings around the site that I haven't gotten to elsewhere. Technologically around here, there have been a few small-but-interesting changes. Site search is and has been powered by Algolia the last few months. I started up writing some thoughts about that here, and it got long enough I figured I'd crack it off into it's own blog post, so look … CSS-Tricks Chronicle XXXII is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Chris Coyier
时间/2017-10-13 22:28:12

Let There Be Peace on CSS

Cristiano Rastelli: In the last few months there’s been a growing friction between those who see CSS as an untouchable layer in the “separation of concerns” paradigm, and those who have simply ignored this golden rule and have found different ways to style the UI, typically applying CSS styles via JavaScript. He does a great job of framing the "problem", exploring the history, and pointing to things that make this seem rather war-like, including one of my own! As Cristiano … Let There Be Peace on CSS is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Chris Coyier
时间/2017-10-13 22:16:22

Monthly Web Development Update 10/2017: CSS Grid, CAA Pitfalls, And Image Optimization

    Editor’s Note: Welcome to this month’s web development update. Anselm has summarized the most important happenings in the web community that have taken place over the past few weeks in one handy list for you. Enjoy! As web developers, we’re working in a very diverse environment: We have countless options to specialize in, but it’s impossible to keep up with everything. This week I read an article from a developer who realized that even though he has been building stuff for the web for over seven years, sometimes he just doesn’t understand what’s going on: “I’m slamming my keyboard in frustration as another mysterious error appears in my build script,” he writes.The post Monthly Web Development Update 10/2017: CSS Grid, CAA Pitfalls, And Image Optimization appeared first on Smashing Magazine.收起
显示全部文字 查看全文
作者/Anselm Hannemann
时间/2017-10-13 17:56:11

#356: Setting Up Webpack, Babel and React From Scratch

This week's JavaScript news — Read this e-mail on the Web JavaScript Weekly Issue 356 — October 13, 2017 3rd Edition of 'Eloquent JavaScript' Announced Marijn Haverbeke is working on a new edition of the perennially popular JavaScript book, but needs your help to fund it. Marijn Haverbeke Setting Up Webpack, Babel and React From Scratch, Revisited An updated, detailed step-by-step guide for getting set up, following best practices and giving you a solid ground to start from. Stanko Tadić Get FlexGrid, the best JavaScript data grid: Fast, flexible, no dependencies With no dependencies and a small footprint, Wijmo FlexGrid is built for speed and extensibility. You'll get built-in, first-class Angular support, an Excel-like interface, sorting, globalization, filtering, group panels, and row details. GrapeCity Wijmo   Sponsor Taucharts One: A Mature Charting Library with a Simple API Has a lot of features including timeline charts, value highlighting, and a sparkline mode for dense data. Taucraft A JavaScript's Promise That Leaks Memory (and Why) What you can do about memory leaks in recursive loops. Alexandru Nedelcu Nrwl Nx: A Toolkit for Enterprise Angular Applications An opinionated, open-source toolkit for building Angular-based apps using patterns that suit enterprise-style development. Victor Savkin ProseMirror 1.0: A Toolkit for Building Rich Text Editors ProseMirror, which lets you bridge the gap between Markdown-style text editing and classical WYSIWYG editors, has reached a key milestone. Marijn Haverbeke Jobs Senior React Native Engineer, Retail TeamWe're looking for an experienced dev to bring the Casper experience beyond the web and into reality, focusing on building React Native apps. Casper React Native Mobile Developer (Remote, UK-based)Excited about building great products across iOS, Android, and the Web? Join our small remote team - we're agile, funded and growing. YourTradeBase Looking for a job at a company that prioritizes JavaScript?Try Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. Vettery Can't find the right job? Want companies to apply to you? Try Hired.com.-->In Brief Announcing TypeScript 2.6 RC newsMicrosoft Next.js 4 Released: A Framework for Universal React Apps news With performance and styling upgrades.ZEIT Webinar: Build Better React Apps Faster with Kendo UI for React news In this webinar we’ll show you the power of Kendo UI and how easy it is to use it in your React development.Kendo UI  Sponsor Redux Explained in 30 Seconds tutorial About as tight an explanation as you could hope for.Ross Creighton How to Use ES6 Arrow Functions to Make Your Code Easier to Read tutorial Both written and video form, however you prefer to learn.Tyler McGinnis The 2 New Features in ES7 and How They Work tutorialTiago Lopes Ferreira How The JS Event Loop and Async Programming Works tutorial Perfect if single thread/event loop/blocking concepts are new to you.Alexander Zlatkov Step Up Your JavaScript: A Comprehensive Guide to Intermediate JS tutorial Advance your understanding of JavaScript. Be able to answer interview questions that stump many developers.Educative  Sponsor How We Run NPM Packages in the Browser storyMagnus Holm Regexly: A WYSIWYG Regex Playground for JavaScript Developers toolsChipto date-fns: A Modern JavaScript Date Utility Library code It’s essentially ‘lodash for dates’.Lesha Koss et al. ST: JSON Selection and Transformation Methods code Adds methods to the JSON object for powerful JSON filtering or transformation. handorgel: Accessible Web 'Accordion' Widget Written in ES6 codeManuel Sommerhalder Smooth Scrollbar: Customizable, High Performance Scrollbars code If you want more control over your page’s scrolling..Dolphin Wood MapTalks.js: A Light Library to Create Integrated 2D/3D Maps code Play with some examples here. luma.gl: A JS WebGL2 Framework for Data Visualization codeUber Vue-Model: A Model Component for Vue.js code Transform plain data into models with HTTP actions, computed properties, and methods.Aaron Francis A JavaScript Tetris Clone in Under 512 Bytes code Readme/repo here (explains some of the tricks used).Rebecca and JS Codegolf Team JavaScript Telemetry: Black Box Recorder for App Crashes  Rollbar  Sponsor Curated by Peter Cooper and published by Cooperpress. Like this? You may also enjoy: FrontEnd Focus : Node Weekly : React Status Stop getting JavaScript Weekly : Change email address : Read this issue on the Web © Cooperpress Ltd. Fairfield Enterprise Centre, Lincoln Way, Louth, LN11 0LS, UK 收起
显示全部文字 查看全文
作者/
时间/2017-10-13 00:00:00

You can get pretty far in making a slider with just HTML and CSS

A "slider", as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to … You can get pretty far in making a slider with just HTML and CSS is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Chris Coyier
时间/2017-10-12 21:54:04

Wufoo

(This is a sponsored post.) When asked "Why Wufoo?" they say: Because you’re busy and want your form up and running yesterday. Wufoo is a form builder that not only makes it fast and easy to build a form so you really can get it up and running in just minutes, but also has all the power you need. What makes forms hard are things like preventing spam, adding logic, making them mobile friendly, and integrating what you collect … Wufoo is a post from CSS-Tricks收起
显示全部文字 查看全文
作者/Chris Coyier
时间/2017-10-12 21:43:36

How I’m (Not) Using jQuery

Let me begin by saying that this is not yet another post about how you don't need jQuery. In case you haven't noticed, that's already been covered. Roughly 8 million times: I don't want anyone to stop using jQuery. Use it. Love it. Be happy to keep on coding with it! However, as I've moved […] The post How I’m (Not) Using jQuery appeared first on Telerik Developer Network.收起
显示全部文字 查看全文
作者/Raymond Camden
时间/2017-10-12 20:48:27

Don’t Let Your Brain Deceive You: Avoiding Bias In Your UX Feedback

    You know that user feedback is crucial — after all, your users will decide whether your app succeeds or not — but how do you know whether users are being fair and objective in their feedback? We can tell you: They won’t be. All of your users will be giving you biased feedback. They can’t help it.The post Don’t Let Your Brain Deceive You: Avoiding Bias In Your UX Feedback appeared first on Smashing Magazine.收起
显示全部文字 查看全文
作者/Hunter Jensen
时间/2017-10-12 20:34:41

Implementing A Service Worker For Single-Page App WordPress Sites

&nbsp; &nbsp; With so many JavaScript frameworks around, single-page application (SPA) websites seem to be all the rage nowadays. However, an SPA architecture has the drawback of having a slower first-page load than a server-based application, because all of the JavaScript templates used to render the HTML view must be downloaded before the required view can be generated. </figure Enter service workers. Through service workers, all framework and application code to output the HTML view can be precached in the browser, thus speeding up both the first meaningful paint and the time to interact. In this article, I will share my experience with implementing service workers for PoP, an SPA website that runs on WordPress, with the goal of speeding up the loading time and providing offline-first capabilities.The post Implementing A Service Worker For Single-Page App WordPress Sites appeared first on Smashing Magazine.收起
显示全部文字 查看全文
作者/Leonardo Losoviz
时间/2017-10-11 21:47:19

Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.Network Quality Estimator APIThe Network Infomation API has been available in previous versions of Chrome, but has only provided theoretical network speeds given the type of a user's connection. In this release, the API has been expanded to provide developers with network performance metrics as experienced by the client. Using the API, a developer can inspect the current expected round trip time and throughput and be notified of performance changes. To simplify application logic, the API also summarizes measured network performance as the cellular connection type (e.g. 2G) most similar to it, even if the actual connection is WiFi or Ethernet. Using these network quality signals, developers can tailor content to network constraints. For example, on very slow connections, developers can serve a simplified version of the page to improve page load times. &nbsp;These signals will also soon be available as HTTP request headers and enabled via Client Hints.OpenType Variable FontsOpenType Font Variations bring new typographic capabilities to the web. Previously, one font file contained just a single instance of a font family, including only one weight (Regular, Bold, Black…) or one stretch (Normal, Condensed, Expanded…).Figure: Animated Amstelvar and Decovar variable font examples With variable fonts, responsive design on the web now extends to typography. OpenType Variations provide a continuous spectrum of stylistic variations while saving space and bandwidth, since they all load from a single compact font file. Stretch, style, and weight can be adjusted using the respective updated CSS properties which now allow numeric values. Fine tuning of variation axis parameters, such as weight or width, is possible using the font-variation-settings CSS property.Media Capture from DOM ElementsThe W3C Media Capture from DOM Elements API now allows sites to live-capture content in the form of a MediaStream directly from HTMLMediaElements (i.e. &lt;video&gt; and &lt;audio&gt;). By invoking the captureStream() method on HTMLMediaElements, streamed content can be recorded and sent remotely using WebRTC, processed with WebAudio, or manipulated in various other ways.Sorry! Your browser does not support the video element. View animationhere.Figure: A 3D rendering being live-captured and streamed to a peer connection using WebRTC.Other features in this releaseThe Payment Request API is now available on Chrome for iOS.PaymentRequest now supports different prices and line items per payment method with PaymentDetailsModifier.data.DOM interfaces are now supported for the &lt;data&gt; and &lt;time&gt; HTML elements to give developers a native, machine-readable way to store client-side content.The CSS color parser now supports 8- and 4-digit hex colors of the format #RRGGBBAA and #RGBA.Lookbehind assertions are now available in addition to lookaheads, so developers can use regular expressions to ensure that a pattern is or isn’t preceded by another, e.g. matching a dollar amount without capturing the dollar sign.A new WebVR Origin Trial is now available, enabling developers to experiment with building rich Virtual Reality experiences on the web.Following previous announcements, the “Not secure” warning will now be displayed when users enter data on an HTTP page, and on all HTTP pages visited in Incognito mode.The `tabindex` attribute now enables the on-screen keyboard on Chrome for Android to more easily navigate between the next and previous fields within a form, thanks to a contribution from Samsung.Developers can now use the s flag to enable dotAll mode in ECMAScript regular expressions, making “.” match any character, including line terminators.Uploading images on Chrome for Android has an improved user experience and multi-select support that triggers on any site that invokes &lt;input type="file"&gt; with an accept attribute specifying that only images are accepted.Apps using the MediaSource API can now more effectively customize their HTMLMediaElement.seekable range logic using the new Media Source Extensions APIs, setLiveSeekableRange and clearLiveSeekableRange.The new visibility:collapse CSS declaration now hides table rows while preserving their contribution to column widths, rather than treating it like visibility:hidden, which merely skips painting the rows.Media Source Extensions (MSE) now support FLAC, a lossless audio coding format, in ISO-BMFF.Protected media can now be played offline through EME on Chrome for Android.Chrome for Android now supports Widevine L1, allowing sites to play encrypted media in a secure way.Loosened restrictions on escape sequences in template literals unlock new use cases for template tags, such as LaTeX processing.In Android O, sites with notification permissions now appear as a Notification Channel in Android Settings under Chrome, affording users a simpler way to manage permissions.Deprecations and interoperability improvementsFollowing an update to native button appearance on macOS, the appearance of &lt;input&gt; buttons and the &lt;button&gt; element have been similarly changed, affecting the default values for the background-color, &nbsp;border, &nbsp;border-radius, and padding CSS properties.The ability to request permission to show notifications has been removed over HTTP connections and within cross-origin iframes, in line with our policy on restricting powerful features to only HTTPS. To increase accuracy and ensure that users receive content in the language they expect, base language is now added immediately after language+region when generating accept-language headers from language settings.To improve UX and browser consistency, transitional mouse events will now be dispatched, and hover states will now be updated more quickly after the intended layout has been modified. OfflineAudioContext now accepts a dictionary argument, in addition to the existing constructor that takes three separate arguments.In line with other browsers, the getStreamById method on RTCPeerConnection has now been removed. SharedWorker.workerStart has been removed, following its deprecation and removal from other major browsers.To better conform to spec, the default value of &lt;ol&gt;.start has been set to 1.Posted by Ben Greenstein and Tarun Bansal, The Network’s Watch收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2017-10-11 03:47:36

Detect Supported Audio Formats with JavaScript

As streaming becomes our main entertainment source and vendors fight to create the best video format, it&#8217;s going to be more and more important that we detect device and browser video support before posting videos on our websites.  We think less about audio but the same principle applies:  detect whether or not a given audio format [&#8230;] The post Detect Supported Audio Formats with JavaScript appeared first on David Walsh Blog. 收起
显示全部文字 查看全文
作者/David Walsh
时间/2017-10-10 20:33:00

Post-transpilation or what is the real face of your code

If you write JavaScript today you probably use some sort of a transpilation tool. A tool that reads your hipster code and convert it to code that works in the browser. In this article we are going to see what is actually send to the browser and how exactly libraries like Babel polyfill some of the ES6 features.收起
显示全部文字 查看全文
作者/
时间/2017-10-10 05:00:00

React Redux and Retrospectives

On this episode of Eat Sleep Code, guest Margaret James shares her retrospective of web technologies leading up to modern front-end development using React. Margaret talks about her experience as a developer joining the industry two years ago and what it&#8217;s like to look back on previous generations of JavaScript technology. Margaret James Margaret James [&#8230;] The post React Redux and Retrospectives appeared first on Telerik Developer Network.收起
显示全部文字 查看全文
作者/Ed Charbeneau
时间/2017-10-10 01:21:37

5 Node.js Alternatives To WordPress

A quick look into the state of Node.js content management platforms in 2017.
查看全文
作者/Georgi Georgiev
时间/2017-10-09 22:11:06

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

&nbsp; &nbsp; Editor's Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article. Today, there are nearly 30,000 U.S. federal websites with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained.The post Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study) appeared first on Smashing Magazine.收起
显示全部文字 查看全文
作者/Maya Benari
时间/2017-10-09 20:42:32