让天下没有难学的编程 |

全部资讯


10 Amazing Web Demos And Experiments for May 2018

In this article we share with you some of the most interesting Web demos for May.
查看全文
作者/Georgi Georgiev
时间/2018-05-09 19:10:06

The State of the Web at Google I/O 2018

The web is a global treasure, and has many strengths we all enjoy. It is a distribution platform like no other, providing people around the world access to a diverse range of content and enabling businesses to reach customers wherever they are. Underpinning the web’s success is its community and a set of fundamentally open standards, which ensures it remains dynamic and available to all.From PageRank to Chromium, Google has been deeply invested in the web’s continued success. This week at Google I/O, our annual developer conference, we gave a State of the Union presentation to catalog some of our recent efforts to help the web continue to thrive and work well for everyone. We recap the key themes below, but encourage you to check out all the talks on YouTube.Service WorkerThe introduction of the Service Worker API is one of the most significant improvements to the web in recent history. It frees developers from the limited lifecycle of pages, working in the background to intercept network requests and handle incoming events to enable web apps to work offline. With service workers your site can receive push notifications, synchronize data in the background, and more. Apple rolled out support for service workers in Safari 11.1 on iOS and MacOS this March and Microsoft Edge shipped service workers just last week — meaning that every major modern browser now supports the standard. Using service workers can be a big change to your architecture, so to make it simpler we created Workbox, which wraps up many common, powerful service worker patterns into an easy-to-use API. We've just released version 3 of this library, built around modules allowing you to use only the features that you need.Progressive Web Apps (PWAs)Service workers provide the backbone for many of the capabilities of a PWA. Companies around the world, in many different industries, have been seeing incredible success building PWAs. Starbucks, who launched their PWA site last year, saw a 2X increase in their daily active users. In fact, across advertising sites that we measured, when a site switches to a PWA they see on average a mobile conversion rate boost of 20%.Many early PWAs were focused on mobile, and the benefits now also extend to desktop. Chrome will soon provide support for users to “install” PWAs to their desktop. The site will get its own icon and launch in a standalone window, while retaining powerful features that one expects in a browser like find in page, shareable URLs, Google Cast support, and more. At I/O we demonstrated how Spotify is deploying their rich media experience as a desktop PWA. “Install” support for desktop PWA’s will be coming to ChromeOS in Chrome 67 in early June, and on Windows and macOS later this year.WebAssemblyWebAssembly enables websites to run high-performance, low-level code written in languages like C or C++, and opens up entirely new classes of content on the web platform. In March, AutoCAD from Autodesk took a 35-year-old-codebase — older than the web itself — and compiled it to run directly inside a browser using WebAssembly. AutoCAD is now just a link away, meaning you can make edits to your CAD drawing directly in a browser, regardless of device or operating system. AutoCAD’s engineering team has a single shared C++ codebase, and when their desktop team makes changes, they are easily integrated into the AutoCAD web app.If you’re interested in learning how to port code or write your own, check out the WebAssembly codelab, demonstrating the interplay between C libraries and the DOM. Whether you’re using a complex library written in C, want to bring a new codec into the web platform, or using an engine such as Unity or Unreal Engine, WebAssembly is here to help.LighthouseLighthouse is a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and guidance for improving your users’ experience. It can be accessed directly from inside Chrome’s DevTools, run from the command-line, or integrated with other development products. In 2018 alone, half a million developers are running Lighthouse against their sites on a regular basis. We know that the web changes fast — Lighthouse can help you stay up-to-date with the latest performance best-practices. Lighthouse 3.0, announced at I/O, will be available to everyone later this week.Lighthouse gives you clarity into your site’s load performance in a controlled environment. However, if you want to see how your site performs for real users in the real world, then check out the Chrome User Experience Report. The report now provides origin-level performance metrics for the four million most visited websites. To learn more about how these and other tools can help you get a complete view of your site’s performance, check out our speed tools infographic.AMPAMP is a web component library and ecosystem for building reliably fast websites with great user experience at scale. There are now over six billion AMP pages from 46 million domains, with a median load time of less than one second from Google Search. Businesses are seeing success with AMP: AliExpress, the global online retail marketplace, recently launched a new mobile site as an AMP-driven Progressive Web App. The new site increased their conversion rate for non-search traffic by an incredible 31%.Content consumption on mobile is changing, with bite-sized, fullscreen storytelling formats becoming increasingly popular. To help meet the needs of web publishers, the AMP project recently announced the development of AMP stories, a rich set of web components built for mobile-first storytelling. The format is under continued development, and we encourage you to experiment with building your own stories and give the AMP team your feedback.Web PackagingWeb Packaging is a set of emerging technologies that we believe will redefine how web content is distributed on the web and shared between users. It allows publishers to bundle their content for distribution by other parties, while keeping the integrity guarantees of HTTPS. As part of exploring the novel use cases enabled by Web Packaging, we realized that there was an interesting opportunity for AMP. Through collaboration with the AMP team and the web community, we were able to design a solution that allows AMP documents to retain the publisher's original URL when served from the AMP cache.As a showcase of our efforts, AMP project collaborators Food Network and Pinterest have built demos of Web Packaging, such as the one below. If you are curious to learn more, the AMP team wrote an article that goes into more detail about how Web Packaging benefits users and publishers. Beyond the AMP application, we are excited about what Web Packaging technologies will enable and are looking forward to refine our thinking with your help.A demo using Web Packaging with an AMP page from Google SearchPolymerPolymer is a JavaScript library that helps you create custom reusable web components to share with other developers or combine to build performant, maintainable apps. At I/O we launched version 3.0 of the library, which makes some significant upgrades to the Polymer ecosystem. We’ve completed support for using npm as the package management system and ES6 modules as the unit of composition, making it easy to use Polymer-based web components alongside your other favorite web development tools and frameworks.We’ve also introduced LitElement, a new web component base-class that combines the expressive power of Lit-HTML with web components to make it even easier to create lightweight, reactive components using a modern and expressive templating syntax.We’re also releasing the PWA Starter Kit, a comprehensive starting point for building web component-driven PWAs that are fast, reliable, responsive, themable, and score top marks in our Lighthouse PWA and performance criteria.AngularAt I/O this year the Angular team gave an overview of the growth of the community, and touched on some of the exciting new capabilities that have landed across the core framework, CLI, and Angular Material library in version 6. Angular is used by millions of developers and has built up a huge amount of momentum and a fantastic ecosystem. New commands released in version 6 like `ng update` and `ng add` will keep your application up to date and help developers move faster as the Angular team continues to balance stability and innovation.The Angular team also gave a sneak peek at some of the improvements they are making under the hood of Angular with Project Ivy. This will make Angular simpler to debug and faster to compile and run, in a way that works with existing applications. The team showed demonstrated the utility of these improvements in the form of a small Hello World application where the Angular features that weren't used were automatically removed from the application's JavaScript bundle.Our mission at Google and in Chrome is to work with the community to create experiences that are fast, integrated, reliable, and engaging. We’re excited by the powerful new capabilities that have come to the open web platform, and the comprehensive set of tools that enable you to rapidly build high quality sites for your users. To stay up to date on the latest advancements in the web, visit our developer portal or check out the talks from this year’s I/O on the Google Developers YouTube channel. And we’d love to see you at the upcoming Chrome Dev Summit later this year.Posted by Malte Ubl and Ben Galbraith收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2018-05-09 09:58:26

NADCAST.15 live recorded at React.NotAConf

Episode #15 of NADCAST was live recorded at ReactNotAConf conference in Sofia on 28th of April. After every presentation we\'ve made a panel with the speaker and ask topic related questions. So, if you listen the whole episode you\'ll get a pretty good overview of what the conference was about.收起
显示全部文字 查看全文
作者/
时间/2018-05-09 05:00:00

Implementing an async queue in 23 lines of code

Recently we had an interesting task at work. The user makes a selection of items and clicks a button. Then for every selected item we have to make a request to our API. The thing is that the user may click as many items as he/she wants. In order to speed up the process up we decided to handle four requests in parallel and once some of them is finished we pull the next one. If you ask why exactly four requests in parallel read this paper.收起
显示全部文字 查看全文
作者/
时间/2018-05-07 05:00:00

15 Interesting JavaScript and CSS Libraries for May 2018

We share with you a collection of our favorite resources for May, packed with some powerful JS frameworks, awesome date and time libraries, and much more.
查看全文
作者/Georgi Georgiev
时间/2018-05-03 21:04:13

Retro Games Challenge

When the latest Codepen Challenge turned up with a retro gaming theme I took the opportunity to combine some of my hobbies and get hands on with the latest web technologies by submitting an entry to each week of the challenge. Here's what happened next... Week 1: Pacman I eased in with a fairly simple pen by taking a slightly different perspective on the pie shaped hero's struggle and considering the psychological effects of being trapped in a maze with a bunch of ghosts for nearly 40 years. What dreams may come to this tortured soul? More interestingly perhaps, what web technology would be best to render those fevered dreams. In order to do a basic performance comparison I used Mr Doob's fantastic stats.js library to show a frame count for each experiment. I started off with the brilliant Pixi.js. This of course led to a buttery smooth render pinned to 60fps on all the devices I tested on. Next I recreated the scene using simple DOM elements. This version struggled to keep up with the Pixi version and stuttered on some older devices - pretty much as expected. That said I was impressed with the level of performance available via simple DOM manipulation and suspect that even better performance could be achieved via hardware accelerated CSS 3D transforms. Finally I did a version with plain canvas and vanilla JS. This one kept up pretty well with Pixi, maybe just a frame or two behind on some devices. Also as you can see there's not much difference in code size. What I took from this experiment is that while the underlying technology selection is a critical factor in performance for simple scenes like this a library is very likely overkill. Of course, as scene complexity increases with multiple layers and different objects to track and animate, a library like Pixi that performs non-trivial rendering optimizations will really come into its own. Week 2: Donkey Kong I used the Donkey Kong challenge to play with some visual styling techniques. I started off with CSS and an example from The Shapes of CSS. This technique worked well for the basic shape but fell down when combining different techniques to give a more sophisticated overall style. As you can see, at different zoom levels the joins between the different styled pseudo elements can break the overall effect somewhat. The next step was to mask regular DOM element content using an SVG clip path. This seemed promising at first but proved tricky to get right, particularly when trying to implement a scalable view. I didn't embed these examples as they seem to have developed a type of shyness where they won't render at 100% zoom anymore. ¯\(ツ)/¯ See the full collection of the week 2 experiments here. My next approach was to put all content in SVG and apply a mix of SVG and CSS styling. This provided the best combination for this pen as the result scaled nicely and achieved the desired graphical style - or at least would with some more tweaking. The major trade-off in this approach is the loss of HTML for content so this approach should only be chosen with consideration the content to be displayed in mind. I was able to use the approach from the last experiment to implement a scalable version of the iconic Donkey Kong high scores screen rendered more or less with the desired CRT tube effect. I also added some background music using the excellent tone.js in an embedded pen which was also new for me but worked perfectly. I didn't embed the resulting pen as the audio plays automatically but you can check it out here. Week 3: Paperboy For Paperboy I decided to recreate the classic's pseudo 3D isometric style using DOM and CSS. My first attempt was a fork of @rukh's magnificent CSS 3D house pen that basically just duplicated a number of instances of the house and added some random animation to the doors open and closing. This gave me the idea that maybe the paperboy is late and the street's residents are looking out for him. I wasn't happy with this approach as the 3D effect was a little too realistic with a proper perspective that didn't reflect the original paperboy scene. I probably could have achieved the correct isometric perspective using the 3D transforms in this pen but I decided to use a faked 3D style with 2D transforms for a slightly more authentic aesthetic. To finish off I added a cyclist blithely passing by the streets residents in a looping animation. Is this the paperboy? Why is he taunting the residents? Who can say... There was nothing really significant that was new to me technology-wise in this week's experiments so it was mostly CSS practice but I did get to try out some of the new DOM manipulation convenience methods to replicate the houses on the street. These are not yet available on all browsers so if you see an empty street that's why. I look forward to the residents arrival in Edge 17 when it lands on my PC in an upcoming OS update. Week 4: Pong Ok, so I'll admit it - I went a little off the rails on this one. Truth be told, I started this at the beginning of the month in the hopes that my favorite genre, the retro space shooter would be represented in the months challenges. Alas it was not to be so some quick tweaks later and my pen was tailored to fit in seamlessly (ahem...) with the Pong theme. For this experiment I wanted to use a combination of canvas and DOM in a layered, parallax view to create another pseudo 3D effect on mouse hover or device tilt. This brought a number of challenges in terms of the technologies to be combined and resulted in the most JS heavy of the month's experiments which was great as it allowed me to play with many of the recent language enhancements. In order to tie in more with the Pong theme I named the pilot "Major Pong" and gave her a script which either pops up in a comic style dialog or can be read aloud by the browser using the Web Speech API when audio is enabled via the provided control. Speech synthesis turned out to be surprisingly natural and fit well with the experiment. My favorite part of the experiment however is the subtle CSS filter blur effect on the foreground elements when the Major hyperspaces between sectors. Check it out. Wrap I'm glad I took the time out to do some creative coding and test drive some of the latest tech the web has to offer. Not only did I learn a bunch of stuff but had a lot of fun too. Codepen is a great resource for this and I would encourage anyone interested in the web to try it out and share your creation with the community. If you enjoyed these experiments or just like retro gaming, check out my homage to Galaxians from last year's Github GameOff on Glitch, Itch or Github. 收起
显示全部文字 查看全文
作者/Joe Gaffey
时间/2018-05-01 03:40:35

Chrome 67 Beta: WebXR Origin Trial, Generic Sensors

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 67 on ChromeStatus.com.Generic SensorsSensor data is used in many native applications to enable experiences like immersive gaming, fitness tracking, and augmented or virtual reality. This data is now available to web applications using the Generic Sensor API. The API consists of a base Sensor interface with a set of concrete sensor classes built on top. Here are links to the sensor specs and examples of how they might be used.Accelerometer: Use the motion of the device to move around in a 3D video.Gyroscope: Use the orientation of the device to implement a table-top maze.Orientation Sensor: This is what's called a fusion sensor meaning it combines readings from two or more sensors, in this case the accelerometer and the gyroscope. Whereas a maze implemented using only the gyroscope might only move the location marker in two dimensions, one implemented with the orientation sensor could require the user to physically turn the device to turn a corner. Motion Sensors: This is a fusion sensor that includes a magnetometer as well as the accelerometer and the gyroscope. The most obvious use case for this as a virtual compass.Accelerometer sensor measurements provide the movement speed of the device in terms of x, y, and z coordinates.Intel has a website devoted to demonstrations of the sensor APIs with sample code available for download. The article published at the start of the origin trial has been updated.WebXR Device API Origin TrialThe WebXR Device API enables the creation of virtual and augmented reality experiences on mobile devices and desktops - unifying experiences across AR enabled mobile devices, mobile-based VR headsets like Google Daydream View and Samsung Gear VR, as well as desktop-hosted headsets like Oculus Rift, HTC Vive, and Windows Mixed Reality Headsets. The new API is available as an origin trial (explainer, sign-up form). You can find samples and documentation in the Immersive Web Community Group GitHub repos. There's also a polyfill available that supports browsers with WebVR 1.1 support, browsers without support, and "magic window" on mobile devices.Watching a video in virtual realityVirtual and augmented reality experiences enabled by this API include games as well as other "long tail" applications, such as:Immersive 360° videosTraditional 2D (or 3D) videos presented in immersive surroundingsData visualizationHome shoppingArtNote: If you are participating in the WebVR origin Trial that has been available in Chrome since version 62, you cannot use your existing token for the WebXR origin Trial. The WebVR origin Trial (the old one) will end on July 24, 2018.Other Features in this ReleaseSVGSVG2 requires <foreignObject> to be a stacking context. Making <foreignObject> a stacking context allows developers to place HTML content underneath a <foreignObject> without confusion. DOMThe DOM specification was updated so that DOMTokenList.replace() returns a boolean value indicating whether a replacement occurred. This is useful for code that takes different paths depending on whether a replacement occurred, avoiding the need for an extra condition using contains(). Chrome now follows the specification.HTML > CustomElementsAuthors can now create custom elements that inherit from the semantics of native, built-in elements. This saves developers from reimplementing built-in functionality such as accessibility, semantics, JavaScript methods/properties.InputWeb pages can now process mouse events (mousedown, auxclick, mouseup) for back and forward buttons on mice with five or more buttons. This allows back and forward mouse buttons to be prevented by applications such as games that wish to override them. On Windows the right-hand Alt key serves as AltGraph (ISO-Level-3-Shift) on some layouts, such as many European language layouts, to allow generating additional printable-characters. Internally the key generates Ctrl+Alt modifiers, so that Chrome reports all of Control, Alt and AltGraph in the flags for these keys. In this change, Chrome distinguishes AltGraph from Ctrl+Alt under Windows for consistency with these modifiers on other platforms.For developers this removes an edge-case from keyboard event modifier handling. If an app handles keydown/keypress/keyup to implement shortcuts, it will no longer need workarounds to cope with certain (mainly European) keyboard layouts. For example, if an app uses Ctrl+# as a shortcut (as GMail did) then previously the app would need to check for both Ctrl, and for AltGraph, otherwise French users would not be able to use it.This change applies to Windows only.JavaScriptJavaScript now has a numeric primitive that provides support for arbitrary precision integers. Previously, numbers in JavaScript were represented as double-precision floats, giving them limited precision. Using the BigInt() function and 'n' suffix on numeric literals you can safely store and operate on large integers even beyond the safe integer limit for numbers.LayoutFormatting contexts will now behave exactly like floats do when they are positioned. In other words, they no longer look at the shape-outside property of the float for positioning and instead are positioned according to their margin box. The new behavior may be seen in this example by changing the height of the flex class. This also affects how new formatting contexts are sized and positioned.LoaderClient Hints enable origins to receive device-specific preferences in the HTTP request headers. Accept-CH-Lifetime adds a client hint that allow origins to persist their opt-in policy for a specified period so they can receive client hints on navigation requests. Additionally, on the first page load, this feature provides hints for all subresources of the page.Network > Streams APITransformStream is part of the Streams API, which is used for creating, composing, and consuming streams of data. It enables transforming data in stream form. It is typically used in a pipe between a ReadableStream and a WritableStream. The following example uses TransformStream to decode text received in a streaming response body.function textDecodeTransform() { const decoder = new TextDecoder(); return new TransformStream({ transform(chunk, controller) { controller.enqueue(decoder.decode(chunk, { stream: true })); } });}fetch(url).then(response => { // response.body is a stream of Uint8Array chunks. // But if we want chunks of text: const stream = response.body.pipeThrough(textDecodeTransform()); // …});Shadow DOMThe <slot> element can now participate in a flat layout tree, with UA style display: contents. Before this change, applying a CSS selector to a <slot> element had no effect. Not only is this fixed, but when selectors are applied to a <slot> element, its children inherit its styles.Deprecations and Interoperability ImprovementsChrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes. Deprecate HTTP-Based Public Key PinningHTTP-Based Public Key Pinning (HPKP) was intended to allow websites to send an HTTP header that pins one or more of the public keys present in the site's certificate chain. It has very low adoption, and although it provides security against certificate mis-issuance, it also creates risks of denial of service and hostile pinning. To defend against certificate misissuance, web developers should use the Expect-CT header, including its reporting function. Expect-CT is safer than HPKP due to the flexibility it gives site operators to recover from configuration errors, and due to the built-in support offered by a number of CAs.We expect to remove this in Chrome 69.Deprecate AppCache on Non-secure ContextsAppCache over HTTPS is deprecated. AppCache is a powerful feature that allows offline and persistent access to an origin. Allowing AppCache to be used over non-secure contexts makes it an attack vector for cross-site scripting hacks. Removal is expected in Chrome 69.LayoutSeveral Webkit-prefixed CSS properties will be removed in this release. -webkit-box-flex-group: This property has minimal usage based on the UseCounter in stable. Percent (%) values for -webkit-line-clamp: There is interest in finding a standards-based solution to the number values use case, but we haven't seen demand for the %-based values.-webkit-box-lines: This property was never fully implemented. It was originally intended such that a "vertical"/"horizontal" -webkit-box could have multiple rows/columns.收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2018-05-01 02:29:58

CSS Grid: More flexibility with minmax()

One of the things that can put people off trying out CSS Grid is there’s so much choice when it comes to defining your grid layout and placing your content, so it can be hard to know until you’ve been using it a while which is going to to be the best option for a particular layout. It’s only recently that I got around to fully appreciating the power of minmax() and how it can be such a huge helper when coding many of the layouts I’m required to build, so I’d like to share one way in which it’s been beneficial to me. minmax() is a function that can be used in your grid-template-columns or grid-template-rows property to size your grid tracks. It takes (you guessed it) a minimum value and a maximum value, which can be a length (pixels, ems, etc.), a percentage, a flexible fr unit or a keyword. Here’s a good article explaining it in depth. Jen Simmons also discusses minmax() and the future of layout in an episode of her Layout Land channel. There are lots of ways that minmax() can be useful, but I want to demonstrate one way in particular. A lot of common layouts feature a “wrapper” grid that needs to fill the viewport (with some padding) up to a certain breakpoint (say, 1200px) and then grow no bigger. Content needs to occasionally bleed to the edge of the viewport, but in most cases align to this wrapper. In terms of building a grid, what we need is: 12 equal-width columns that take up a percentage of the available space, up to a maximum value (1200px (minus any gutters) divided by 12 (the number of columns)). One flexible “padding” column either side with a minimum value of 20px, which after our arbitrary breakpoint will expand to fill the remaining space. Up until recently the way I’ve been coding these layouts is to set a breakpoint of just slightly over the wrapper width (plus padding columns) at which I change the values in my layout: .grid { display: grid; grid-template-columns: 20px repeat(12, 1fr) 20px; @media (min-width: 1200px) { grid-template-columns: 1fr repeat(12, $col) 1fr; } } Before the breakpoint our layout consists on 12 flexible columns (using the fr unit) and two fixed “padding” columns. At a min-width breakpoint of 1200px I’m redefining the layout to have 12 fixed-width columns and two flexible padding columns. I could make this code more maintainable with CSS Variables (as I’ve written elsewhere), but in fact I’m not using CSS Grid to it’s full potential. This also has some drawbacks: If I update any of my values, I need to make sure I adjust everything else accordingly. Plus if any of my calculations are slightly off, I get some undesirable effects happening around the breakpoint, where my grid columns actually take up more space than is available. So now I realise that I’ve been creating unnecessary work for myself, what can I do about it? By using minmax() smartly, I can actually do away with the media query altogether. I’ve tried to use minmax() to do a similar thing in the past, but without fully understanding that when I need my central columns (“tracks” in grid terminology) to be flexible, my outer columns need to be fixed, and vice versa. The key with a layout like this is to be explicit with when you want columns to be flexible and others to be fixed. Example 1 This first example our columns grow flexibly (using the fr unit) but aren’t constrained by a maximum width, so they keep growing, no matter how wide the viewport gets. All of our columns are equal width, including the two padding columns: .grid { display: grid; grid-template-columns: repeat(14, 1fr); grid-gap: 10px; } Example 2 Here I’m introducing minmax() to size our central grid tracks. By setting minimum of auto I can ensure the columns are wide enough for the content – empty columns will collapse ahead of ones that have content in: .grid { display: grid; grid-template-columns: 1fr repeat(12, minmax(auto, $col)) 1fr; grid-gap: 10px; } Auto vs. Zero One thing to note is there is a difference between setting a min value of auto and a min value of 0. In the following demo, while it may not be obvious at large viewport sizes, if you resize your browser you’ll see in the first of the two grids all of the columns collapse at the same rate, while in the second grid the first column remains wide enough to fit the content. Back to Example 2, if you resize the window you can see our padding tracks collapse to nothing. We want to maintain a minimum width for these columns so we need minmax() here too. Example 3 This is the layout we want: Here we’re specifying a minimum value of 20px for our padding columns and allowing them to grow (using the flexible fr unit) when space allows. At the same time we’re doing the opposite with our central columns, specifying that we want them to be flexible right up until they reach our calculated $col value, and then grow no larger. .grid { display: grid; grid-template-columns: minmax(20px, 1fr) repeat(12, minmax(auto, $col)) minmax(20px, 1fr); } When I realised this was a much simpler way of coding the layouts I’ve been building I definitely had a “d’oh” moment! But CSS Grid is so new and different to anything we’ve had in CSS before, and offers so much choice for constructing layout, that it really takes a lot of people using it in the real world to fully understand what is possible. I hope I can help make it simpler for others to use CSS Grid today! 收起
显示全部文字 查看全文
作者/Michelle Barker
时间/2018-04-30 11:57:10

CodePen Chicago: April 23rd, 2018 @ Shiftgig

Educational Edition Featuring education was a suggestion by Arelia and it was a great idea so during the event we highlighted CodePen's pedagogically uses. Majority of the presenters circled back to their pens as a means to teach others. Presenters: Arelia Jones Arelia led the event with a collection of pens for CoderSpace, an organization she co-founded that teaches 14-17 year olds how to code, collaborate on local client projects and develop leadership skills for a digital world. Arelia covered some projects she has the students fork and complete, a media query Beyonce example and a CSS example of an animating play button. CodePen Tech Ed collection Melanie Sumner Melanie, an Ember.js core team member, showed how she's teaching the Ember team about accessibility and it's importance when integrating it into their projects plus how CodePen is great at settling debates! Checkout her A11Y collection. A11Y collection Dave Cohen Dave showed off a music generator that printed out chord progressions, melodies, rythms and meters. He then showed the finished product that generated a *.midi file and played the generated music. See the Pen scraggo's music tools - random generators (JavaScript) by scraggo (@scraggo) on CodePen. Random Music Generators Jeremy Kahn Jeremy showed a Pokedex React app he built as a learning tool for him getting into React. The app includes over 700 Pokemon in the pokedex. See the Pen React Pokedex by Jeremy Kahn (@jeremyckahn) on CodePen. Kevin Lesht Kevin engaged the audience with an anonymous quiz from the Stack Overflow survey of developer habbits. The app was built in Vue using Firebase anonymous authentication to keep track of who is taking the quiz. See the Pen VueJS / Firebase Quiz App by Kevin Lesht (@klesht) on CodePen. Jake Albaugh Jake built an audio player used a canvas element that was rendered at 4x4 pixels and outputs audio based on the color values of the canvas. The rendered image uses the device's camera and the canvas reduces that down in a much smaller image and maintaining it's pixelation with CSS. Video Music Kenneth Watkins Kenneth presented an augmented reality(AR) project that used Hiro images to attach a 3D model of the earth. You can move the Hiro image and the AR library will track the 3D model with the image position. World AR Animated Austin Andrews Austin prototyped an example of github issues visualized for contributers to track :thumbsup: emoji for issues to determine what to address first for Material Design Icon. See the Pen MDI GitHub Issues by Austin Andrews (@templarian) on CodePen. Brian Haferkamp Brian H prototyped his news app, Skmmr, to pull in multiple news' sources and filtering the results to keep updated on daily events. Quick and easy to consume with filtering options, feel free to check it out! See the Pen skmmr // Mobile App by Brian Haferkamp (@brianhaferkamp) on CodePen. Brian Montana I, Brian, decided to show off my CSS animations that focused on the 12 principles of animations that will be included in a future talk on animation. Next I showed an older example of a 3D SVG that rotated with mousemove and deviceorientation events, you can see the final product included on my website. See the Pen Animation Principles CSS by Brian Montana (@brianmontanaweb) on CodePen. See the Pen 3D Logo SVG and deviceorientation by Brian Montana (@brianmontanaweb) on CodePen. Sean Mann Sean talked about the blurring and contrast filter effects to render goey effects. He explained and brought up a canvas particle effect that used the same filtering techniques with user input controls. See the Pen ink by Sean Codes (@sean_codes) on CodePen. Photo gallery: CodePen @ Shiftgig Thank you for attending! Thank you to Austin for getting the space, food and bartender all sponsored by Shiftgig. Thanks to Arelia for leading the presenters and showing all the ways she uses CodePen for education. Always thankful for Marvin Cespedes for documenting the presenters and photographing the event! If you have any suggestions, feel free to reach out on Twitter or email :D收起
显示全部文字 查看全文
作者/Brian Montana
时间/2018-04-29 12:03:42

Intro to Isomer.JS

Introduction Isomer.js allows you to draw isometric graphics with ease. var Shape = Isomer.Shape; var Point = Isomer.Point; iso.add(Shape.Prism(new Point(0, 0, 0))); The above example will show you just how easy it is to declare isometric shapes. Getting Started To start using Isomer, you first need to include a small (7kb minified) script wherever you see fit: <script src="/path/to/isomer.min.js"></script> Than you'll have to place a canvas on your document: <canvas width="800" height="600" id="art"></canvas> Now we can finally initiate a isomer object: var iso = new Isomer(document.getElementById("art")); The Grid In the example below, you can see the grid that isomer.js uses for the placement of isometric shapes. The blue grid is the x,y plane while the red line is the z-axis. Putting 2 && 2 Together By now you've probably realized that the (0,0,0) is the x,y,z coordinates when we are adding the Prism shape to the scene. We can also specify width, length and height of our prism by doing: iso.add(Shape.Prism(Point.ORIGIN, 2,1,3)); Conclusion I know this was a short introduction to Isomer.js but that is about all you need to know to get started! The best way to learn is to jump right into the code and start experimenting yourself. I hope that this helped to get you started. Until next time!收起
显示全部文字 查看全文
作者/Conner
时间/2018-04-27 10:15:42

Intro to Matter.JS Library

Welcome to a new series where I will be introducting interesting js libraries, how to implement and use them. What is it? Matter.js is a 2D physics engine for the web How to Implement It Implementing matter.js is the same as any other library, all you need to do is cite the source in your html document like so: <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js" type="text/javascript"></script> Once this step is done, you should be all set to start using matter.js library! Things to know Here are some things you should know to help get you started with matter.js Matter.js is built differently compared to other Javascript libraries. The way the code is written out, and the way it is formatted is simple compared to other libraries. Getting Started To start a matter.js document you firstly need to establish your module aliases like so: var Engine = Matter.Engine, Render = Matter.Render, World = Matter.World, Bodies = Matter.Bodies, Next you need to create your engine that you have just established in your module aliases var Engine = Engine.create(); Now we need to create our Renderer like so var render = Render.create({ element: document.body, engine: engine }); Now we are going to create our elements/bodies (circles, squares, rectangles, walls, floors, etc..) var boxA = Bodies.rectangle(450, 50, 80, 80); var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true }); Almost there... Now we are going to add all of the bodies/elements to the world World.add(engine.world, [boxA, boxB, ground]); To run the program all we need to do is run the Engine and the Render Engine.run(engine); Render.run(render); Now to ensure that you got everything here is the code compiled into one: // module aliases var Engine = Matter.Engine, Render = Matter.Render, World = Matter.World, Bodies = Matter.Bodies; // create an engine var engine = Engine.create(); // create a renderer var render = Render.create({ element: document.body, engine: engine }); // create two boxes and a ground var boxA = Bodies.rectangle(400, 200, 80, 80); var boxB = Bodies.rectangle(450, 50, 80, 80); var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true }); // add all of the bodies to the world World.add(engine.world, [boxA, boxB, ground]); // run the engine Engine.run(engine); // run the renderer Render.run(render); Conclusion I hope that this little tutorial/intro has helped you to get started with using matter.js and will inspire you to continue onward with exploring this amazing library! Enjoy!收起
显示全部文字 查看全文
作者/Conner
时间/2018-04-26 17:01:02

Freebie: Beautiful CV Template with Bootstrap

We present you a free Bootstrap 4 CV template with amazing and responsive design.
查看全文
作者/Georgi Georgiev
时间/2018-04-25 00:22:08

DDoS Protection by Incapsula (Sponsored)

DDoS protection is an incredibly important protection for sites that require dependability, regardless of the service your site provides.  Whether your online product or service is for managing money, buying or selling crypto, or simply sharing your tech nerdery (like this blog), there’s always a chance your site could be attacked.  This blog, for example, […] The post DDoS Protection by Incapsula (Sponsored) appeared first on David Walsh Blog. 收起
显示全部文字 查看全文
作者/David Walsh
时间/2018-04-25 00:07:42

Using pseudo-elements with CSS Grid

This week I’ve had a couple of scenarios where I’ve needed to build a hero section with a full-width image, a large heading and a translucent sidebar overlaying the image – where the sidebar bleeds to the edge of the viewport but (crucially) the content of the sidebar aligns to what I like to call the “wrapper” grid columns – i.e. the columns of the grid where we actually want to place our content. (I have a whole other post almost written on this!) This seems to be a fairly common occurrence with the designs that are coming my way these days, and it seems like a prime case for using pseudo-elements (::before or ::after) as child items of the grid. The markup for my grid looks like this: <div class="grid"> <div class="grid__fig"> </div> <div class="grid__heading"> <h1>CSS Layout News</h1> </div> <div class="grid__btn"> <a href="#0">Subscribe</a> </div> <aside class="grid__sidebar"> <ul class="sidebar__list"> <li class="sidebar__item">...</li> <li class="sidebar__item">...</li> <li class="sidebar__item">...</li> </ul> </aside> </div> The div with a class of .grid is, unsurprisingly, our parent grid container, which we need to give the property attribute display: grid. .grid { @media (min-width: 800px) { display: grid; grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(8, var(--col)) [sidebar-start] repeat(4, var(--col)) [wrapper-end] minmax(20px, 1fr) [end]; grid-template-rows: minmax(3em, 1fr) auto minmax(auto, 1fr); grid-gap: var(--gutter); min-height: 100vh; } } Here I’m using CSS Variables to make the code more flexible and maintainable – if you need a primer I wrote a bit about them here. I’m also naming my grid lines to make it easy to place my items. We have three direct children of the grid container: The background image (.grid__fig), the heading and the sidebar, which can all be placed on the grid. The grid line wrapper-end is where I want the content of the sidebar to end, but the sidebar background needs to end at the the very edge of the viewport – the end grid line. Rather than placing the sidebar like this: .grid__sidebar { grid-column: sidebar-start / end; } I can place it where I want the content to go: .grid__sidebar { grid-column: span 3 / wrapper-end; } (Rather than adding another named grid line, which might make the grid-template-columns property start to get a bit long-winded and confusing – particularly if we have even more items we want to place – I’m just using span 3 to indicate I want it to always span 3 columns, and wrapper-end as the line where I want it to end. It’s really useful to be able to switch the syntax around this way.) Now I just need to create a pseudo-element for the sidebar background and place it on the grid. In order to act as a grid child item it needs to be a pseudo-element of the grid container, not of a grid child: .grid::after { content: ''; display: block; grid-column: sidebar-start / end; grid-row: 1 / 4; background-color: rgba(#f405ed, 0.5); } The sidebar background is now in front of the sidebar content, so we just need to tweak the z-index a little: .grid__sidebar { grid-column: span 3 / wrapper-end; ... z-index: 1; } Here’s the end result (a homage to the magnificent CSS Layout News!): Resources As always, there are super smart people who have written about this stuff in-depth: Faux Grid Tracks by Eric Meyer Styling Empty Cells with Generated Content by Rachel Andrew 收起
显示全部文字 查看全文
作者/Michelle Barker
时间/2018-04-20 12:37:25

Our 20 Favorite Web Dev Comics of All Time

Brighten up your day at the office with these fun programming comics.
查看全文
作者/Georgi Georgiev
时间/2018-04-19 19:12:57

NADCAST.14 със Стефан Кънев и Димитър Димитров

Стефан и Митьо споделиха солидни практики и опит в менторирането на по-начинаещи програмисти. Надявам се този 14-ти епизод да ви бъде полезен независимо на какво ниво сте. MP3: http://nadcast.krasimirtsonev.com/StefanKanev_DimitarDimitrov.mp3收起
显示全部文字 查看全文
作者/
时间/2018-04-19 05:00:00

Introduction to CSS

Introduction Welcome, I'm assuming you're here because you want to get started using CSS. Great Choice! Assuming you have already read my article on getting starting with HTML, than lets get started. If not here is a link to it, you might want to read that before continuing. Lets start. Basics How might do I even link a CSS file to my HTML file? Its very simple, assuming you name the .css file "style" here is an example: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> </html> How do I format CSS? CSS can be a little intimidating to a beginning developer but with some practice it will get easier. Here's an example of a simple div format in a .css file: .div { } As you can see CSS uses braces {} unlike HTML where you would use carrots <>. Everything between the carrots and braces will be included in the element. To take it a step further, we are going to discuss the difference between id and class selectors. <!DOCTYPE html> <html> <div id="example"></div> <div class="example2"></div> </html> #example { } .example2 { } Above you can see the difference when using a id and class selectors. When importing a id selector into a .css file use a # before the name of the element. When importing a class selector into a .css file use a . before the name of the element. Now, you may be wondering what the difference between id and class are, well the difference between an id and a class is that an id can be used to identify one element, whereas a class can be used to identify more than one. Inheritance When it comes to CSS there are a few things you need to know in order to actually make quality content. Inheritance is very important when it comes to complex shapes and elements of a webpage. Inheritance is exactly what it sounds like, an element will inherit a trait from it's parent element. Here is an example grabbed from: (https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) <!DOCTYPE html> <html> <body> <p class="better">This is a paragraph.</p> <p class="better" id="winning">One selector to rule them all!</p> </body> </html> #winning { background-color: red; border: 1px solid black; } .better { background-color: gray; border: none !important; } p { background-color: blue; color: white; padding: 5px; } Fonts So what's so important about fonts? Well, fonts give the website character, if you visited a website with the default text you would not be turned on and probably would not want to return to the site because of the asthetic of the webpage. Fonts make the page POP. Here is how you can use fun fonts on your website. A great website to use to get fonts fast and free is: https://fonts.google.com simply click the font you want from the list given, this is what you will see: Copy the first box and paste it into the head of your HTML document. After, copy and paste the second box into your id or class that you used for your paragraph. <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> </head> <p class="main"></p> </html> .main { font-family: 'Pacifico', cursive; } Congratulations, you've implemented your font! Shapes Shapes are essential when it comes to learning CSS. In order to truly design a website you need to understand the fundamentals of what shapes consist of. In the example below I will show you a square made using pure CSS. I will explain what everything means in due time. As you can see, if you tried to read the CSS than you could see that you can adjust the height and width of the shape as well as the color. Simple. Now, where it says position: relative this is how you can position a shape on the page. It can either be relative or absolute to the page. Where it says top, bottom, left, right this is how far from the sides the shape is. So if you wanted to move the shape left 200px than you would say: position: relative; right: 200px; As you can see I used the opposite side, in this case, right to move the shape left. Closing Remarks Now hopefully I have enlightened you in the art of CSS and you will go on with your journey and explore the endless opportunities that it offers. To leave you with something influential and inspiring here is a Pen to show how CSS can make anything beautiful! Enjoy! 收起
显示全部文字 查看全文
作者/Conner
时间/2018-04-18 16:33:50

Protecting WebView with Safe Browsing

Since 2007, Google Safe Browsing has been protecting users across the web from phishing and malware attacks. It protects over three billion devices from an increasing number of threats, now also including unwanted software across desktop and mobile platforms. Today, we’re announcing that Google Play Protect is bringing Safe Browsing to WebView by default, starting in April 2018 with the release of WebView 66.Developers of Android apps using WebView no longer have to make any changes to benefit from this protection. Safe Browsing in WebView has been available since Android 8.0 (API level 26), using the same underlying technology as Chrome on Android. When Safe Browsing is triggered, the app will present a warning and receive a network error. Apps built for API level 27 and above can customize this behavior with new APIs for Safe Browsing.An example of a warning shown when Safe Browsing detects a dangerous site. The style and content of the warning will vary depending on the size of the WebView.You can learn more about customizing and controlling Safe Browsing in the Android API documentation, and you can test your application today by visiting the Safe Browsing test URL (chrome://safe-browsing/match?type=malware) while using the current WebView beta.Posted by Nate Fischer, Software Engineer收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2018-04-18 00:00:08

A Common Principle of Boolean Algebra as Stated in George Boole's 'Mathematical Analysis of Logic':

A Common Principle of Boolean Algebra: xy = y Figure 1:  I am, at present reading Boole's Mathematical Analysis of Logic. Statement of the Common Principle: Should: x = U or, in other words: x = 1 Then, in Boolean Notation : xy = y Or, in formal-logic notation: x ∧ y = y . e.g. 1: Let: x = 1 . Let: y = 0 . Hence: xy = y Or, in formal-logic notation: x ∧ y = y , because: 1 × 0 = 0 , or: 1(0) = 0 , or, in formal-logic notation: 1 ∧ 0 = 0 . e.g. 2: Let: x = 1 . Let: y = 1 . Hence: xy = y Or, in formal-logic notation: x ∧ y = y , because: 1 × 1 = 1 , or: 1(1) = 1 , or, in formal-logic notation: 1 ∧ 1 = 1 . Addendum: You may read George Boole's Mathematical Analysis of Logic, for free at Project Gutenberg收起
显示全部文字 查看全文
作者/Ciaran Mc Ardle
时间/2018-04-16 21:14:54

Quick tip for node modules

When writing my node modules, I've come to really quite enjoy using Jest for testing (I've written about how I used tap and it's quite similar). Sometimes however, being able to execute the module on the command line and passing some arbitrary data can be pretty handy, and I've used the following technique on a growing handful of modules I've written.收起
显示全部文字 查看全文
作者/
时间/2018-04-12 19:43:50