让天下没有难学的编程 |

全部资讯


Oscar Pool 2018

Every year I do some sort of digital Oscar Pool with friends. I used to rely on websites that featured a lot of advertising and spotty updates on the actual night of the Oscars, so I took it upon myself to build a little something last year using a Google form and my front-end skillz. I ended up spending more time than I wanted to this year trying to get everything working since Google seems to have greatly improved its forms since I first started this project awhile back. I'm using this gist to retrieve the data as json from the Google Doc. As one of the comments notes, the gist limits the results for some reason by cutting off the last two rows. To adjust, I entered data in the first cell of each of the two rows after my data. I tried to deploy my own version, but I was having issues. After refactoring, I was able to make a few front end improvements Updated the Oscar count by each user name to be inside a tiny statue (super important). Changed the category order to match the broadcast order. Froze the left column. Updated the hover states on each prediction to include the category and winner. Made it responsive-ish-er. Upgraded to the newest version of Google form so I can add trailers. Wish I hadn't done this, but better off for the future. I almost hooked the "winners" entry that marks your predictions as correct or incorrect into a universal spreadsheet controlled by me, but I don't want to be responsible for ruining your leader board if I accidentally fall asleep during the broadcast. You TOO can have an Oscar pool with your friends in 8 easy steps Fork the pen. Copy this form and send the link to your friends. Send the form responses to a spreadsheet (you can do this before people are done responding). You can also turn off responses on this screen of the form before the broadcast begins Set the spreadsheet to public (click the "share" button in the upper right corner then click "done") Update the URL of the spreadsheet in the body tag of your forked pen. Name the first sheet of the workbook "pool" Take a look at my data workbook. The first sheet was generated by the form with the exception of the last three rows. Add a second sheet/tab to your Google Doc and copy into it the data from my second spreadsheet. Next, copy the last three rows from your second sheet over to the end of your first sheet. Now you will be able to update the winner in each category as it is announced. Share the full page view of the pen with your friends. Extra fun Invite the participants to a chat (Google hangout, slack, what have you) when you close down submissions (you'll have their email addresses). I don't like to reward people who don't participate, so I wouldn't send out the chat invite to the same list you invited to the form... only the addresses who submitted predictions. If we can't make fun of your misguided picks, you can't make fun of ours. I'm planning on updating the form every year, so bookmark this page and bug me for the new form link in the comments if I forget to post it. I might also turn it into a little app if I can. Anyone want to help do that for next year? Super Extra fun My other Google Docs pens 收起
显示全部文字 查看全文
作者/Catherine
时间/2018-03-01 11:03:40

rAF Internals & Node Debugging Guide

I’ve published a few articles on Medium that may interest the reader here: requestAnimationFrame Scheduling For Nerds Understand how rAF callbacks are scheduled and why its very reasonable to have multiple callbacks execute within the same frame. Debugging Node.js with Chrome DevTools The canonical guide to using the Chrome DevTools UI for debugging Node.js. It definitely beats console.log. ;) Aside from that, I’ve been busy working on Lighthouse, performance metrics, tooling, and DevTools.收起
显示全部文字 查看全文
作者/Paul Irish
时间/2018-03-01 04:33:00

10 Amazing CodePen Demos for March 2018

We share with you a collection of some of the most interesting CodePen demos for March.
查看全文
作者/Georgi Georgiev
时间/2018-03-01 00:16:50

The inception of ESLint

If you're like me, you probably use a lot of open source tools every day without thinking about how they got started. Few projects share the "why" of their creation: the actual problem they were trying to solve and when they first came across that problem. You can, of course, benefit from open source projects...收起
显示全部文字 查看全文
作者/Nicholas C. Zakas
时间/2018-02-27 08:00:00

NADCAST.11 с Мариан Игнев и Павел Иванов

Първия епизод за 2018 е с Мариан и Павел. Поговорихме си за Sashido.io, инфраструктури, наемане на хора и още нещо :)
查看全文
作者/
时间/2018-02-23 06:00:00

Freebie: 2 Beautiful Checkout Forms

We present you two free Bootstrap 4 checkout forms that are easy to set up and use, and will save you a lot of time.
查看全文
作者/Georgi Georgiev
时间/2018-02-21 00:20:13

Freebie: 2 Beautiful Checkout Forms with Bootstrap 4

We present you two free Bootstrap 4 checkout forms that are easy to set up and use, and will save you a lot of time.
查看全文
作者/Georgi Georgiev
时间/2018-02-21 00:20:13

Proud to be a Unicorn

Along with my transition to a new decade in my life (I’m 40, who said age crisis?!) and along with finishing a JS course, I started wondering how to define myself. Not in the spiritual / genderal / religious manner, but in the professional one. Over the years I have undergone quite a few transformations. Some were very natural and kind of “by the book”, like becoming an Art Director after several years of being a web designer, while others were a little less natural like becoming a front-end programmer. I find myself thinking more and more about my unique situation: I'm a web designer but I haven’t designed a website or an interface in almost six years. I know my way around the ux world - challenge me with a brainstorming session to solve a user experience challenge and you’ve made my day! - but I don’t even want to think about doing user research or creating a prototype in Axure or in any other prototyping tool. I'm a front-end programmer who knows html and css pretty well, but am not so brilliant in JavaScript. To be honest, just let me write only css or scss and I'll be thrilled. Yuval Kershtcher wrote a post: The Ultimate Guide To Full Stack Design. The post presents his opinion as to what the designer's area of ​​responsibility and professionality should be. In his post Yuval claims that a good designer is one whose knowledge encapsulates both ux (ie: doing user research, analyzing data, and of course creating interface prototypes) and front end development (ie: html, css, and js), as well as ui design. The one whose knowledge spans the three corners of this triangle will be the ultimate fed designer. I think Yuval's approach is a bit problematic. I agree with the call for designers to know user experience basics, and to know code (such as what the html structure is, what css is, and how to check elements in a browser), but they don't have to be experts in these areas. It's always good to know a bit beyond your specific area - it makes you a better professional - but you can’t specialize in all of the areas. Dividing these three areas into 3 different professions - ux design, ui design and code - is the right way as I see it. I believe that the approach by which one person can do it all is an invention of employers who want to save on manpower. So what am I? Apparently, I’m not alone in the dilemma of who and what I am, or to put it more accurately - what my job title is. Two years ago Lara Schenck wrote a post on css-tricks about the job-title problem. Lara protested the inaccurate definitions of employers because they seemingly turn her into a "Unicorn" - a miraculous creature that doesn't exist. I identified deeply with Lara in her post. Like her, I, too, have a background in design, I, too, know html + css well, and just a little JavaScript. Two years later, Lara published a repo on Github for creating a definition for front-end jobs. She still defines herself somewhere on the axis between knowledge of html + css on one side and js on the other. For further reading of Lara’s posts I warmly recommend reading Chris Coir’s post Getting Nowhere on Job Titles. Lara also created a nice Myers-Briggs for Web People. As you can see - I'm totally not back-end, and not really JS. Her repo has several links on the subject. One of them is: Is there any value in people who cannot write JavaScript? By Mandy Kerr. When reading the post I strongly identified with what was said, and it reflected so correctly my feeling about Front End in general, and in Israel in particular: I understand the desire to have people who can do a lot of things. What I don’t understand is why it’s okay if you can “just write JS”, but somehow you’re not good enough if you “just write HTML and CSS”. I posted a link to that post for discussion on the css-masters Israel group on facebook, and to my great disappointment there were too many responses against it, claiming that there is no justification for coding only html + css, and too many claims that someone who doesn’t know js has no place in the industry. In my opinion, we were too few holding the post writer’s opinion. Just before I finished writing my post, Lara released another post about her hardships in job searches. I’m adding it because it is totally part of the series of all her insights. What if I don’t feel like js? Last July I completed a 'HTML5 Cross Platform Mobile Applications' course at HIT, which was given by Life Michael. The course was mostly js - vanilla and other flavors (like Type-script, Angular, etc.). Needless to say that the HTML, css, and bootstrap parts were my favorite, but I also learned not to be afraid of variables, loops, functions, and if-else statements. I sometimes even read js code snippets and pretend to understand them. I do know js but it's totally not my proficiency. I managed to finish the course, and had one very clear conclusion: I really, but really love css. I will dare testify about myself that as much as I’m not so good at js, I’m very good at css. I love the challenge of implementing design and thinking about which implementation is best. I like reading posts about new and not-so-new features. The fact that every time I use display: flex on a large scale I still discover something new, makes me happy. I enjoy answering questions in the css-masters Israel group. Unlike Lara who describes herself as a "Non-Unicorn", I actually feel the opposite. I feel like I am a Unicorn, and that being that makes me special. I have extensive knowledge in, and deep understanding of, ux. I have a design background and I understand the importance of making a website look just as the designer intended it to be. I see every stubborn pixel that doesn’t sit exactly where it should. I feel comfortable enough to make up for design gaps between resolutions if if there are, because I have the knowledge and experience. On the other hand, I feel comfortable opening a PHP or .NET file to add a class or to change something in the html within it. I feel that I’m exactly on the border between design and programming, having all of the advantages of both sides. Not afraid of code and not threatened by design :) All Unicorns of the world unite - we do awesome work! I thank Lea Cohen for refining my English in the post.收起
显示全部文字 查看全文
作者/Rachel Bratt Tannenbaum
时间/2018-02-20 03:12:12

How I construct a pen on CodePen

Why I love coding out my ideas Many of the pens I construct here on CodePen comes out of an idea where I want to see the effect of playing around with known methods. I kind of like science, and love to watch Discovery alike tv shows about clever guys doing science to discover new effects or rules. I see the internet as a great place to play around with browser and language features. One my prefered playgrounds is SVG. It is Scalable Vector Graphics, which in practice means that you can draw something in the browser using some tags, some stying and some code. How cool is that? Compared with a piece of paper and a pen you can go crazy and the result is generated instantly as you change the elements of your playground in your pen on CodePen. I have an idea Every time I see someone sharing a new "discovery" in the area of web technology my mind goes crazy, asking lots of questions related to the discovery. I guess that it is kind of the same feeling science guys get: whenever a new path shows they want to jump into the way of the path curious about what is in that path. I want to follow an idea I got watching someone else sharing something related to the idea I have: I want to create a way to auto generate corners on a SVG object. A method which can add custom corners to (any) SVG objects. I have made a drawing which should give you some idea of what is inside my head:  The algorytm could be broken down into these parts: Add an object (A) to the SVG Add a new SVG path (B) Find the points (here 4 corner points) of the elements A Generate two points between each pair of two point in the element Draw lines (and bezier curves) between each point Add the path to the SVG Convert a SVG mask element from the generated path Apply the mask to original element That is roughly the tasks of constructing a custom corner which I now needs to do... The pen boilerplate and task 1-2 I have made many pens on CodePen and I sometimes use the same boilerplate. I could create a (CodePen template)[https://blog.codepen.io/documentation/api/templates/] so that I do not have to type in the same bits of code every time. My boilerplate template has this description: This boilerplate contains a SVG which fills the whole view of the page. It also has javascript code which automatically discovers elements with "_" prefixed classnames and creates global references to them which will be the same as the class name but prefixed with yet another "underscore". For instance the SVG element have a class "_svg" and can be referred to from javascript through "__svg". You should be able to fork my template "Boilerplate SVG with auto creation of global vars". This is an easy way to get autogenerated global references to some elements. You simply add a class name starting with underscore and the element can be accessed in javascript with the classname prefixed with yet another underscore. Now task 1 and 2. The template contains a SVG element which contains a path drawing a stroked rectangle on the the screen. I have also added a path stroked in orange. Finding the points of a path I have searched many times for a simple API which gives me the points of a SVG element. I have not found it yet, so I have to find them by deconstructing the D attribute of the path. Its a pity, but for now I have to rely on that method, knowing that it is not at all perfect. A SVG path has some drawing primitives. It has its roots in PostScript (which is a scripting language created by Adobe for prepress industry. It is also used today in the PDF). The drawing primitives lets you controle a "pen" which moves from coordinate to coordinate leaving a trace which is the path - the stroke you see on the screen. The simple path in this pen consists of only two drawing primitives: M - move and L - line. It is important that the primitives are written in CAPITAL LETTERS, as this will result in the coordinates being specified in absolute coordinate values. The drawing primitives can also be written in lower case in which case the coordinates will be relative coordinates. Looking at the SVG element I can easily see the drawing primitives in the d attribute of the path: M 200 100 L 400 100 400 300 200 300 200 100 Which means: Move to (200,100) Line to (400,100) and then to (400,300), (200,300) and finally (200,100) Now we need to convert this into an array of coordinates using javascript. Here is what I want to do: 13 function getPointsFromString(dp) { 14 const _dp = dp.replace(/[MLZCQ]/ig,'').trim(); 15 const points = _dp.split(' ') 16 .filter(coor => coor.trim()!==''); // Removing empty coordinates 17 return points 18 .map(coor => parseFloat(coor)); // Converting to float 19 } 20 21 const d = __rect.getAttribute('d'); 22 let drawPri = getPointsFromString(d); I have a function which will get the points from path D string. I does that by first removing draw primitives and unwanted spaces. Splitting the sting using a space gives me an array of coordinates. In line 21 I find the value of the D attribute, which I in line 22 pass to my function getPointsFromString and get an array of x,y values. Lets add a group of blue circles on each coordinate, using the coordinates in drawPri. SVG has its own namespace Before we start creating the circles, we need to find the namespace of the SVG element. SVG is not a native part of HTML, and it lives inside its own domain or namespace. It is easy to find the namespace of any DOM element: 24 const svgNS = __svg.namespaceURI; // http://www.w3.org/2000/svg Now we can start dynamically adding circles. First I add a g (group) to the SVG, as it is easier to add circles to the SVG in this way. You can see the group element as a DIV in HTML: it can be used as a container for related elements. My group I have given a class _circles and my boilerplate/template will therefore already have created a global javascript reference to the group (__circles): 26 for(var i=0; i<drawPri.length-1; i+=2) { 27 const circle = document.createElementNS(svgNS, 'circle'); 28 circle.setAttribute('cx', drawPri[i]); 29 circle.setAttribute('cy', drawPri[i+1]); 30 circle.setAttribute('fill', 'blue'); 31 circle.setAttribute('r', '10'); 32 circle.setAttribute('opacity', '.5'); 33 __circles.appendChild(circle); 34 }; I loop through the drawPri which contains the coordinates. Each point requires two points, so I step with 2 and get cx at offset i and cy at offset i+1. I create a namespaced element which I use appendChild method to append to the group elemenent __circles. We now have: 4. Generate two points between each pair of two point in the element We now need to add two points between each of the found points. This is where it starts to get fun. I have an idea to do something like this: 200 100 xP0 yP0 xP1 yP1 400 100 I want to do this by calculating the distance between both X and Y of the two points. Then I want to place the first X and Y of each point at 35% and at 65% of the length. This is not the final solution I need, but it will get me started and will also let me view the effect on the page, hopefully giving me a new clue as how I need to calculate the final placement. I intend to loop through the known points and then create an new Array, which I set on the D attribute of the orange path. Lets try it! 36 let path = []; 37 for(var i=0; i<drawPri.length-1; i+=2) { 38 // 39 const nextI = (i+2>drawPri.length-1) ? 0 : i+2; 40 const lenX = drawPri[nextI]-drawPri[i], 41 lenY = drawPri[nextI+1]-drawPri[i+1] 42 path.push({x:drawPri[i]+lenX*.35, y:drawPri[i+1]+lenY*.35}); 43 path.push({x:drawPri[i]+lenX*.65, y:drawPri[i+1]+lenY*.65}); 44 } 45 46 var D = ''; 47 for(var i=0; i<path.length; i++) { 48 const {x,y} = path[i]; 49 const pre = (i===0) ? 'M ' : '', 50 post = (i===1) ? ' L' : ''; 51 D += `${pre}${x} ${y}${post} `; 52 } 53 D+='Z'; 54 __path.setAttribute('d', D); In the loop from line 37 to 44 I iterate through the known coordinates. For each one I calculate the length between current coordinate X an Y. If it is the last coordinate, I use first point as next coordinate. I then add two new points (one at 25% and one at 75%) and push the points to the new path array. In lines 47 to 54 I generate the D attribute for the path. It contains three draw primitives: M for the first point, L for the rest of the points and finally I close the path using the Z primitive. You may have asked, why do I only add L one time? Well, you instruct the path to use a given primitive, and it will keep using that primitive until you give it instructions to use a new draw primitive. It saves some bytes :-). This results in this result: Can you see what has changed? The orange path now lays on top of the rectangle. Not what I have as my goal, but we are getting there! We need to do some math now. First let me put words on what we need to do: Each point in the path (b) should be "pushed" out from the center of the points. We need to calculate the current radius for each point and then move it away, say, 35% from the center of the points. Not so hard to describe, but how do we do that? First lets calculate the center of the rectangle: 56 let minX = Infinity, maxX = -Infinity, 57 minY = Infinity, maxY = -Infinity, 58 count = 0; 59 for(var i=0; i<drawPri.length-1; i+=2) { 60 const x = drawPri[i], 61 y = drawPri[i+1]; 62 minX = (x<minX) ? x : minX; 63 maxX = (x>maxX) ? x : maxX; 64 minY = (y<minY) ? y : minY; 65 maxY = (y>maxY) ? y : maxY; 66 } 67 const cx = (maxX-minX)/2+minX, 68 cy = (maxY-minY)/2+minY; 69 var center = document.createElementNS(svgNS, 'path'); 70 center.setAttribute('stroke', 'black'); 71 center.setAttribute('d', `M ${cx-5} ${cy-5} L ${cx+5} ${cy+5} M ${cx-5} ${cy+5} ${cx+5} ${cy-5}`); 72 __svg.appendChild(center); I simply find the minimum and maximum of points and calculate the center. I then added a cross at that point using a path. Actually I changed my mind - I wanted to use a simpler method for calculating the placement of each point. I simple extend the distance of each point in x and y direction, based on current distance to the center. Here you go: path = path.map(point => { var {x,y} = point; x = cx - (cx-x)*1.2; y = cy - (cy-y)*1.2; return {x,y} }) After that is done the pen now looks like this: Now to convert it to a mask I will change the SVG a bit. I will add a defs area with a mask element. I will add the path inside that mask, and use it on my main object (B). Also I need to draw a big rectangle in the mask to mask out the inner part of the figure. I needed to add a fill-rule="evenodd" and some other small brushing up in the code (now that is common as I do a pen!). The final result looks like this: Going further in the playground mode Ofcause many part of the "final" pen could be improved, modified and optimized. Just to show you that I have made some extra things and also added some sliders (range sliders) for dynam ic changing the mask. See here and have fun constructing your ideas on CodePen! :-) 收起
显示全部文字 查看全文
作者/Sten Hougaard
时间/2018-02-19 08:20:44

Headless Raspberry Pi setup

The following information is scattered around the web and it's taken me a few times to find it each time, so I'm putting it here for safe keeping. As much as I love the Raspberry Pi's, I rarely have a mouse and keyboard handy for setup, and nearly all concessions, I want to run the Pi in headless mode (and ssh into the machine). This guide is a bullet point tick list to getting the Pi accessible on the network.收起
显示全部文字 查看全文
作者/
时间/2018-02-18 17:53:11

Avoiding chaos when using Flexbox 'order'

A recent Twitter flurry provoked me to finally build a Flexbox demo I've been meaning to create since I first started playing around with CSS flex properties. Roma Komarov posted an exploration of using CSS Flexbox and the order property to create a CSS-only table sorting effect. Some other CSS mavens quickly warned that this was not recommended practice, and was even directly contrary to the spec. Roma acknowledged the criticism and added a warning to the blog post: just an experiment, don't use in production! But in the Twitter discussion, a few people asked a question that has come up again and again: What is `order` supposed to be for, then? If its use case is “visual order differs from source” why can’t that be true in other media?— Seth A. Roby (@TALlama) February 16, 2018 To begin, let's review how you're not supposed to use order, and why. Compelling visual order does not always reflect underlying meaning. Photo by Juhan Sonin via Wikimedia Commons. The Flexbox specs warn: Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming. It's pretty rare for CSS specs to order web authors around. Most of their "musts" are reserved for browser developers. So you know that this order about order is serious business. Keyboard users and screen reader users rely on a consistent order of elements in the DOM, and keyboard or assistive tech users who can see the screen need that order to match the logical order of the elements they see. Yes, floated layout columns also allowed you (or sometimes forced you) to use source order that didn't match up nicely with the visual order. But that's why we're trying to get away from using floats for layout! Flexbox & CSS grid are supposed to make it easier to use a sensible markup structure—not make it easier to pretend that markup structure doesn't matter. If you want to reorder the DOM, use DOM methods to move elements around, not CSS methods that only affect layout. So why does order exist? Why have an order property in CSS, if you're not supposed to use CSS to reorder content? Because sometimes the logical order of a layout cannot be described by Flexbox's normal flow options of left-to-right, right-to-left, top-to-bottom, and bottom-to-top. The order property is for these cases: to create a visual ordering that does match the logical order, for the design that you're using. Or in the slightly more elegant words of Flexbox spec editor Elika Etemad (AKA fantasai): Visual perception doesn't follow coordinate system order. It's affected by things like the gestalt principles, and it has a simultaneity that e.g. speech cannot represent. So we order the source by reading order, and allow visual layout more freedom to move elements around.— fantasai (@fantasai) February 16, 2018 The Olympic podium in this pen is my favourite example of an unusual layout order that is nonetheless universally recognized. This is the demo that I've been meaning to make for two years. (Convenient that I finally got to it during the Olympics!) The height of the elements—and cultural familiarity with the podium structure—communicates the rankings, not left-to-right reading order. The source order matches the logical 1, 2, 3 order of the rankings, but the order property creates the correct layout. I used a similar center-first order for navigations in the supplementary website for the Using SVG book. My header nav list consists of three items: Chapter List Previous Chapter Next Chapter When written as a single list, that's the logical order. But the logical layout is to have "previous" on the far left and "next" on the far right, with the table of contents link in between. Flexbox lets me do that without fussing with floats and extra wrapper divs. The order adjustment on that site is applied in a min-width media query. On narrower screens, the table of contents link takes up the full first row of the Flexbox layout, and the next/previous wrap to a separate row (or two rows, if the screen is very narrow relative to the font size). Similarly, I have a max-width media query in my podium pen to remove order on narrow screens (among other style tweaks) and revert to the normal order of the list for a single-column layout.收起
显示全部文字 查看全文
作者/Amelia Bellamy-Royds
时间/2018-02-17 21:33:39

15 Interesting JavaScript and CSS Libraries for February 2018

The list of hot new resources this February includes awesome open source galleries, libraries for handling HTTP with Promises, WYSIWYG editors and more!
查看全文
作者/Georgi Georgiev
时间/2018-02-16 01:11:41

#373: Bye jQuery, hi Vue.js, and what's going on with Babel 7.0?

This week's JavaScript news — Read this e-mail on the Web JavaScript Weekly Issue 373 — February 16, 2018 Replacing jQuery With Vue.js: No Build Step Needed Some developers shy away from build tools for quick projects and they’re not mandatory, as we see here. Here’s how to use Vue.js in a similar way to how you might use jQuery now. Sarah Drasner Babel 7.0 Is Nearly Here: A Big Update If you’re a Babel user, this is a must-read ‘state of the union’ type post from its creator. If you’re not? You’ll get to learn what it is, too. Henry Zhu Choosing the Right JavaScript Framework: Whitepaper How do you choose one JavaScript framework over another for your next web application? Learn about the current state of the Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now. Progress   Sponsor Hyperapp for Redux Refugees An explanation and comparison of Hyperapp vs Redux for managing state, with a neat side-by-side code comparison showing how much simpler Hyperapp code can be. Wolfgang Wedemeyer Coming to ES2018: Rest/Spread Properties Dr. Axel wrote up some notes on the rest/spread property proposal back in 2016 but it’s now reached stage 4 and will be in ECMAScript 2018, so it’s worth revisiting. Dr. Axel Rauschmayer A Guide to Web Performance Optimization with Webpack A guide to using the popular asset bundling tool to make pages smaller to download and quicker to use. Google Developers Creating and Publishing Web Components with Stencil Stencil is a tool for compiling modern, standards-compliant Web Components. Dominik Kundel SweetAlert2: Responsive, Customizable and Accessible Popup Boxes An attractive and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes with zero dependencies. SweetAlert2 Jobs JavaScript Developer at X-Team (Remote)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. X-Team Software Engineer at Detective.io (Chicago)We're hiring our 5th engineer to help build our platform of automation based sales tools. We use React, Redux, and Rails. Detective.io 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 CityJSConf 2018: A JS Conference in the City of London news Takes place March 26 and features a debate between Kyle Simpson and Dylan Schiemann.CityJSConf MongoDB 4.0 Will Support Multi-Document, ACID Transactions news Sign up for the beta for access to development releases of MongoDB 4.0.MONGODB  Sponsor Ember 3.0 Released news No new functionality, but removes deprecated APIs and legacy support.Matthew Beale Building a Text-Based Adventure with Vue.js tutorial An unconventional but interesting odyssey for Vue.js.Raymond Camden Using Prettier to Format Your JavaScript Code tutorialSaransh Kataria Using Source Maps to Debug Production tutorial Debug errors w/ source maps, and quickly make sense of minified JavaScript.ROLLBAR  Sponsor Testing React with Enzyme and Jest: A Video Series video First five episodes are free.Jack Franklin Promises Are Not Neutral Enough opinion “Even though they fulfill their purpose, Promises are an opinionated primitive that introduce a lot of weirdness.”André Staltz Choosing a JavaScript Build Tool: To Config or Not Config opinionBrian Douglas There’s a Bug in Your JavaScript Code. Fix It toolsSentry  Sponsor Thanks: Give Thanks to Open Source Maintainers You Depend On tools node Run npx thanks in your project and see who is seeking donations.Feross Aboukhadijeh face-verify.js: Monitoring Who's Physically Looking at a Site tools A possible way to add more security to a webapp with facial recognition?Mat Ryer Blotter.js: An API to Draw Unconventional Text Effects on the Web codeBradley Griffith Vuetify 1.0: A Material Design Component Framework for Vue codeJohn Leider Phaser 3.0: The 2D HTML5 Game Framework code A fast 2D game framework supporting Canvas and WebGL rendering.Richard Davey Objection.js 1.0: An SQL-Friendly ORM for Node code nodeVincit Assembler.js: An x86-64 Assembler Built in JavaScript codeVa Da 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 收起
显示全部文字 查看全文
作者/
时间/2018-02-16 00:00:00

Under the hood: How Chrome's ad filtering works

While most advertising on the web is respectful of user experience, over the years we've increasingly heard from our users that some advertising can be particularly intrusive. As we announced last June, Chrome will tackle this issue by removing ads from sites that do not follow the Better Ads Standards. We've previously discussed some of the details surrounding how Chrome protects users from intrusive ads, but as we approach the launch date of February 15, we wanted to go under the hood and discuss how this feature works in more detail.What are the Better Ads Standards?The Better Ads Standards are the result of public consumer research by the Coalition for Better Ads, an industry group focused on improving users' experience with online advertising. Over 40,000 internet users in North America and Europe participated in surveys where they were shown common ad experiences and asked to evaluate how intrusive the experiences were. The most intrusive ad experiences include prestitial ads (those full-page ads that block you from seeing the content on the page) and flashing animated ads. More details about the research and methodology can be found on the Coalition's website.Although a few of the ad experiences that violate the Better Ads Standards are problems in the advertisement itself, the majority of problematic ad experiences are controlled by the site owner — such as high ad density or prestitial ads with countdown. This result led to the approach Chrome takes to protect users from many of the intrusive ad experiences identified by the Better Ads Standards: evaluate how well sites comply with the Better Ads Standards, inform sites of any issues encountered, provide the opportunity for sites to address identified issues, and remove ads from sites that continue to maintain a problematic ads experience.Today, the Better Ads Standards consists of 12 ad experiences that research found to be particularly annoying to users. Image Source: Coalition for Better AdsEvaluating sites for violationsSites are evaluated by examining a sample of pages from the site. Depending on how many violations of the Better Ads Standards are found, the site will be evaluated as having a status of Passing, Warning, or Failing. The evaluation status of sites can be accessed via the Ad Experience Report API. Site owners can also see more detailed results, such as the specific violations of the Better Ads Standards that were found, via the Ad Experience Report in Google’s Search Console. From the Report site owners can also request that their site be re-reviewed after they have addressed the non-compliant ad experiences.The Ad Experience Report in Google's Search Console allows site owners to see their overall site evaluation status, as well as the specifics of any violations identified on their site.Filtering on sites at the network levelAt a technical level, when a Chrome user navigates to a page, Chrome’s ad filter first checks if that page belongs to a site that fails the Better Ads Standards. If so, network requests on the page — such as those for JavaScript or images — are checked against a list of known ad-related URL patterns. If there is a match, Chrome will block the request, preventing the ad from displaying on the page. This set of patterns is based on the public EasyList filter rules, and includes patterns matching many ad providers including Google’s own ad platforms, AdSense and DoubleClick.What this looks like in ChromeChrome will automatically block ads on sites that fail the Better Ads Standards, using the approach described above. When at least one network request has been blocked, Chrome will show the user a message indicating that ad blocking has occurred as well as an option to disable this setting by selecting “allow ads on this site.” For desktop users, the notification in Chrome's address bar will look similar to Chrome's existing pop-up blocker. Android users will see message in a small infobar at the bottom of their screen, and can tap on “details” to see more information and override the default setting.Chrome will automatically block intrusive ads on sites that have been found to violate the Better Ads Standards, but users have the option to disable the feature by selecting “allow ads on this site.” Early results show positive progress for usersWhile the result of this action is that Chrome users will not see ads on sites that consistently violate the Better Ads Standards, our goal is not to filter any ads at all but to improve the experience for all web users. As of February 12, 42% of sites which were failing the Better Ads Standards have resolved their issues and are now passing. This is the outcome we are were hoping for — that sites would take steps to fix intrusive ads experiences themselves and benefit all web users. However, if a site continues to maintain non-compliant ad experiences 30 days after being notified of violations, Chrome will begin to block ads on that site.We're encouraged by early results showing industry shifts away from intrusive ad experiences, and look forwarding to continued collaboration with the industry toward a future where Chrome's ad filtering technology will not be needed.Posted by Chris Bentzel, Engineering Manager 收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2018-02-14 20:02:18

Meet Evala - your terminal in the browser

On my machine I have four applications always open - VSCode, Chrome, iTerm and Slack. I spend most of my time in Chrome and VSCode. My editor is full with awesome extensions and I feel pretty good there. What I am doing for the browser is making sure that I have fewer tabs open and install only extensions that I really use. One thing though I can achieve so far. I can\'t find the perfect new tab extension.收起
显示全部文字 查看全文
作者/
时间/2018-02-14 06:00:00

RPG Character Sheet: Front page components

Character Details The first component I worked on was the Character Details section of the character sheet. It is the bit at the top where you put your name and fill the more generic descriptions of your character. Race, class, name, eye colour, etc. As simple as it looks (and is), it took me a very long time to get it working right. Why? Is it not just text next to the logo? Well... It was before I accepted the fact that sometimes you want to use flexbox, other times you want to use CSS Grids. I was also trying to not have media queries. I have this OCD-like thing of trying to have as little code as possible. As wonderful as it sounds, at certain level, it is detrimental. I spend too much time rattling my brain trying to find a way to do away with industry standard ways of doing certain things simply because I feel it could be done with less code. (spoiler alert: More often than not I am wrong). There is a ton of talented people out there who know what they are doing. There is a reason why an industry standard is an industry standard. It's because the majority of people agree that's the best current solution. Note the current there. Times change, standards change. Make sure you are up to date with standards and make sure you embrace change. Holding on to tradition for the sake of tradition has a history of being detrimental to everybody. Anyway, enough with the philosophical rant. Once I realized Flex was the technique to use, the rest fell into place. The reason flex is the tool for this job, is because flex elements do not have to align in the same tracks when wrapping into new lines or rows. While with CSS grid, each element will sit within its designed row/column track so the gaps between all child elements will always align. Attributes The second component I tackled was the attributes. This one has a little bit of JavaScript logic in it as I wanted to test calculating the bonus derived by the attribute itself. Those bonus are quite important as they are used in many sections of the character sheet. When it comes to building the whole sheet as one piece, I will probably need to change how I am storing this data so all components can access it. On this component I used CSS grid. The way the data is structured and needs to be displayed makes it perfect for it. The total opposite to the character details above. Saving Throws This component posed an interesting challenge when viewed in the mobile. In the source character sheet one can see that the saving throws are organized in a neat table, with some labels on top. No different than the attributes except, that the saving throws table is much wider than the attributes one. The attributes component did fit quite nicely and snugly on a mobile screen, the saving throws didn't. To get around that issue on small screens, I decided to only show the saving throw name, the total modifier and the temporary modifier. We need the name and the total for obvious reasons and the temporary because it is the one that is likely to be changing frequently. No values can be changed currently as all I am focusing on at the moment is adapting the layout to work on different screen resolutions. I also move the location of the conditional modifiers box according to the size of the screen for better use of the space. Attacks Next down on the character sheet would be Base Attack Bonus, Spell Resistance and Grapple but I'll quickly skip those smaller sections to go over the larger one. Later on I'll go over them all. Here's the Attack component I made. At one point I intent to also have a printable version of this sheet(to-do: get the link once ready) so I will have to work out how to render more copies of this component, even if empty, in order to fill the front of the sheet as it is in the paper version. For now, in the digital version, I will only be rendering the component if there is data to display. Layout wise, there isn't anything different from the previous components. If anything, I am getting better as this didn't feel hard to think and plan. I am using a flex container for info/details of the attack type and CSS grid for the ammunition. Speaking of the ammunition, it posed an interesting question as how to handle it. In the paper version, we have a maximum ammunition load, with space to write some extra notes and some thirty checkboxes for the player to keep track of how many has been used. Using Vue was rather trivial to create the checkboxes, with a default of thirty disabled checkboxes rendered if no ammunition present (for presentation's sake), and hook them up to the total ammunition. Now if one is to tick a checkbox, the ammunition count decreases accordingly. Adding the notes next to the ammunition amount was also trivial. Finally, a little bit of conditional rendering and Array manipulation with the checkedBoxes yields a very convenient reset button for all checkboxes. Skills Skills may not look it but it is a rather complicated component when you break it down to the individual parts it is made of. It pulls in data from several points - The character attributes, class, level, race, user input... For now we won't be tackling any of that. Let us only set the layout and leave all skills in. Later on, when building the whole sheet, we will have an easier access to all different data sources and will be able to put it all together. Even when focusing only on the CSS layout, there is still plenty of details to consider when styling this component. First, refer again to the source character sheet. Right out of the bat we can see there is a plenty of information crammed there. No biggie when on desktop or large tablets. Mobiles: a different kettle of fish. As a whole, this component follows the same mix-and-match CSS Grid and Flexbox party that has been going on so far with some notable points. The heading proved an interesting challenge that I, initially, thought I would not be able to overcome. Except that I did, and was actually super simple. The name of the component SKILLS is to be placed in the middle of the horizontal axis of the whole component. Given the fact that the Max ranks box sits to the right of it, I puzzled over how to calculate its position for hours without success. Only the following morning, while washing the dishes, it occurred to me that all I needed was a dummy element to the left of the SKILLS word to make it happen. Flex it horizontally and make each take a third of the space then, on mobile, flex is vertically. Duh! When I started tackling this layout, I had the labels part of the component display as flexbox and the skills list as CSS grid. They would not line up no matter how much I cursed at it. Eventually I got the point they had to be styled using the same set of rules. So I created a skills-columns class, applied to the relevant elements, and the issue went away. Finally, To accommodate for the lack of real screen estate in the mobile view, I am hiding some of the non-critical columns to free up some space in order to the remaining columns be readable. That allows this component to be as little as 280 pixels wide and still be readable. I have also removed some elements that are present in the paper version as it was causing far more headaches than the benefits they would bring had I left them in. Miscellaneous Components By now, I am starting to get a bit sharp with this CSS grid and Flexbox. Things make a bit more sense and these components are becoming easier to style. Worth of note in this defences component is how I am setting a couple of the grid items to span more than one tracks and making sure the HP and AC headers both start in the very first column in all screens. Some of the other components can be grouped up nicely as one single set for simplicity sake. Same here, we group a few more little components together and, at last, we are done with the front page of the character sheet. Phew. That took some time. Several days working on and off. I write this here because if you have read this far you deserve to know that it wasn't easy. I did struggle plenty and gone back several times to refactor the code, tidy it up and so on. I hope this goes and inspires others not to give up and to let you, dear reader, know that you should persevere, work on your problem, it takes time but you will get there. As for me. I carry on. This is only step one of four... Notes While working on this components, I have come across text-overflow: elipse. Very handy when you have long words and not enough space. The gotcha with this property is that it does not work on flex-children or grid-elements so, one has to convert the actual node containing the text into a block (or inline-block) element. Lots of this text have been re-written after publishing. And probably will be re-written again. Prologue Chapter I - The first sprint Chapter II - Front Page Components Chapter III - Back Page Components 收起
显示全部文字 查看全文
作者/Pedro Tavares
时间/2018-02-10 13:51:55

Quadratic to cubic Bézier in SVG

This is a vey short blog post to show how to change a quadratic Bézier to a cubic Bézier curve. I'm doing this in SVG. What I want to achieve is taking something like this: <path d="M50,230 Q130,20 250,175"></path> And code it like this: <path d="M50,230 C103.333,90 170,71.667 250,175"></path> In the next pen you can see juxtaposed a quadratic Bézier curve (wider, linen stroke ) and a cubic Bézier curve (red stroke), and their corresponding control points. The starting and the end points of the cubic Bézier are the same as the quadratic's. C_start = Q_start C_end = Q_end To calculate the control points of the cubic curve you need to know that they are located at: 2/3 distance between the starting point (start) and the control point (Q_cp) of the quadratic Bézier and at 2/3 distance between the end point and the control point (Q_cp) of the quadratic Bézier. C_cp1 = Q_start + 2/3 *(Q_cp – Q_start) // first control point of the cubic curve C_cp2 = Q_end + 2/3 *(Q_cp – Q_end); // second ontrol point of the cubic curve I've putted all this in a function. The function takes 2 arguments: The first argument is the previous command splitted into an array. In the example above previous = ["M",50,230]; The second argument is the quadratic Bézier command, also splitted into an array. In the example above command = ["Q",130,20,225,175]; function Q2C_helper(previous,command){ // previous = ["M",50,230]; // command = ["Q",130,20,225,175]; for(let i = 1; i< previous.length; i++){previous[i] = parseFloat(previous[i])} for(let i = 1; i< command.length; i++){command[i] = parseFloat(command[i])} let Q = [[previous[previous.length-2],//x previous[previous.length-1] //y ], command]; let cp1 = {} let cp2 = {} cp1.x = Number(Q[0][0] + 2/3 * (Q[1][1] - Q[0][0])); cp1.y = Number(Q[0][1] + 2/3 * (Q[1][2] - Q[0][1])); cp2.x = Number(Q[1][3] + 2/3 * (Q[1][1] - Q[1][3])); cp2.y = Number(Q[1][4] + 2/3 * (Q[1][2] - Q[1][4])); return (["C",cp1.x,cp1.y,cp2.x,cp2.y,Number(command[3]),Number(command[4])]) } Where would you use this? For example when you intent to morph one SVG shape into another, you need two shapes with the same number of points and the same commands. I prefer them in C (all cubic Bézier).收起
显示全部文字 查看全文
作者/Gabi
时间/2018-02-10 12:08:36

From Smooth Cubic Bézier to Cubic Bézier in SVG

This is a small post in which I want to explain how to transform a smooth cubic Bézier curve (S) into a cubic Bézier (C). This may be useful if you want to tackle SVG morphing. In code a smooth cubic Bézier is always preceded by another cubic Bézier or another smooth cubic Bézier curve, and looks like this: <path d="M10,95 C25,15 75,10 125,95 S225,185 240,95" /> The code for the smooth cubic Bézier begins with the command S. The first pair of values (225,185) represents the second control point of the curve, and the second pair of values (240,95) represents the ending point. The first control point is calculated as a reflection of the second control point (75,10) of the previous curve (C25,15 75,10 125,95). reflected_x = (2*joiningPoint.x - cp2.x); reflected_y = (2*joiningPoint.y - cp2.y); I've putted all this in a function. The function takes 2 arguments: The first argument is the previous command splitted into an array. In the example above previous = ["C",25,15, 75,10, 125,95]; The second argument is the smooth cubic Bézier command, also splitted into an array. In the example above command = ["S",225,185, 240,95]; function S2C_helper(previous,command){ // previous = ["C",25,15, 75,10, 125,95] // command = ["S",225,185,240,95] let x2 = Number((previous[previous.length - 4]));//cp2 x let y2 = Number((previous[previous.length - 3]));//cp2 y let x3 = Number((previous[previous.length - 2]));//joining point x let y3 = Number((previous[previous.length - 1]));//joining point y /////////////////////////////////////// // the reflected control point let reflected_x = (2*x3 - x2); let reflected_y = (2*y3 - y2); /////////////////////////////////////// return ["C",reflected_x,reflected_y,command[1],command[2],command[3],command[4]] } The function returns an array containing the information required to code a cubic Bézier curve. In this example the returned value is ["C", 175, 180, 225, 185, 240, 95] This translated in SVG looks like this: <path d="M10,95 C25,15 75,10 125,95 C175,180 225,185 240,95" /> 收起
显示全部文字 查看全文
作者/Gabi
时间/2018-02-10 12:08:21

Chrome 65 Beta: CSS Paint API and the ServerTiming API

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.CSS Paint APIThe CSS Paint API, also known as “CSS Custom Paint”, allows developers to programmatically generate an image whenever a CSS property expects one. Instead of referencing an image resource, developers can now use the new paint() function to reference a paint worklet that will draw the image. This API can be used for many things, including making the DOM tree smaller and transferring significantly less data compared to an image.<style>  textarea {    background-image: paint(checkerboard);  }</style><textarea></textarea><script>  CSS.paintWorklet.addModule('checkerboard.js');</script>To see the paint worklet in action, check out our explainer and the video demo below. In this example, the CSS Paint API is used to programmatically create a checkerboard image. Server Timing APIDevelopers interested in measuring the performance of their web applications have been able to use the Navigation Timing and Resource Timing APIs to request timing data for the document and its resources. Until now, there has been no way for the server to send any details about its response time to the client. The new Server Timing API allows web servers to pass performance timing information via HTTP headers to browsers. This new API provides developers a more complete performance picture that includes the speed of both the client and the server. For example, Chrome Developer Tools now shows server timing performance information via the Server Timing API.Screenshot of the Chrome Developer Tools integration of the ServerTiming API.Other features in this releaseBlink > CSSDevelopers can now use the :any-link pseudo-selector to apply CSS properties to all unvisited or visited hyperlink elements.The syntax for specifying HSL/HSLA and RGB/RGBA coordinates for the color property now match the CSS Color 4 spec.Developers can use display:contents to generate boxes for an element’s children and pseudo-elements without generating the parent box.Blink > DOMTo complement assignedNodes(), the <slot> element now has an assignedElements() method, which returns only the element nodes assigned to a given slot.Chrome now supports the HTMLAnchorElement.relList property to indicate the relationship between the resource represented by the <a> element and the current document. Thanks to Samsung for this contribution!Blink > Feature PolicyDevelopers can now use the sync-xhr feature policy to selectively enable and disable the use of Synchronous XMLHttpRequest.Blink > NetworkTo match compatibility with the TLS spec, Chrome now supports the draft-23 version of the TLS 1.3 protocol.Developers can use Request.destination to evaluate which resource their service worker is fetching.Blink > Performance APIsAs WebIDL was deprecated, PerformanceResourceTiming, PerformanceLongTaskTiming, and TaskAttributionTiming now support the toJSON method to convert objects to JSON.Blink > SecurityTo protect users against cross-origin information leakage, Chrome will ignore the presence of the download attribute on anchor elements with cross-origin attributes.Deprecations and interoperability improvementsBlink > BindingsTo match compatibility with the HTML spec, document.all is no longer overwritable.Blink > NetworkAs previously announced, Chrome 65 will not trust certificates issued from Symantec’s Legacy PKI after December 1st, 2017, and will result in interstitials. This will only affect site operators who explicitly opted-out of the transition from Symantec’s Legacy PKI to DigiCert’s new PKI, and does not apply to the previously disclosed independent sub-CAs from this infrastructure.For a complete list of all features (including experimental features) in this release, see the Chrome 65 milestone hotlist.Posted by Ian Kilpatrick, Patiently Painting Engineer收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2018-02-09 04:10:28

A secure web is here to stay

For the past several years, we’ve moved toward a more secure web by strongly advocating that sites adopt HTTPS encryption. And within the last year, we’ve also helped users understand that HTTP sites are not secure by gradually marking a larger subset of HTTP pages as “not secure”. Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.In Chrome 68, the omnibox will display “Not secure” for all HTTP pages.Developers have been transitioning their sites to HTTPS and making the web safer for everyone. Progress last year was incredible, and it’s continued since then:Over 68% of Chrome traffic on both Android and Windows is now protectedOver 78% of Chrome traffic on both Chrome OS and Mac is now protected81 of the top 100 sites on the web use HTTPS by defaultChrome is dedicated to making it as easy as possible to set up HTTPS. Mixed content audits are now available to help developers migrate their sites to HTTPS in the latest Node CLI version of Lighthouse, an automated tool for improving web pages. The new audit in Lighthouse helps developers find which resources a site loads using HTTP, and which of those are ready to be upgraded to HTTPS simply by changing the subresource reference to the HTTPS version.Lighthouse is an automated developer tool for improving web pages.Chrome’s new interface will help users understand that all HTTP sites are not secure, and continue to move the web towards a secure HTTPS web by default. HTTPS is easier and cheaper than ever before, and it unlocks both performance improvements and powerful new features that are too sensitive for HTTP. Developers, check out our set-up guides to get started.Posted by Emily Schechter, Chrome Security Product Manager收起
显示全部文字 查看全文
作者/Chrome Blog
时间/2018-02-09 02:00:05