让天下没有难学的编程 |

全部资讯


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

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

SVG Sprites

SVG sprites Introduction Image sprites (even in the lowly bitmap format) can save a huge amount of time, and more importantly a whole bunch of annoying individually loaded resources. As cool as that all is, it certainly becomes a little bit less magical anytime you need to create separate sprites for retina screens. If that isn’t enough, a media query for each? Holy no. But this post isn’t just a trip down memory lane, it’s a celebration of that all being in the past. Today, we’ll review some approach options, and implement a scaleable svg sprite design/development process that could minimally save you a ton of money on your car insurance. The Basic’s If coming from a bitmap sprite world, you’re expecting your image to be your sprite. Well, it is but this one opens in your favorite text editor. The basic structure of a svg sprite image: <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="caret" viewBox="0 0 16 16"> <polygon points="3,5 8,11 13,5" /> </symbol> </defs> </svg> For each icon in this sprite a <symbol> should be added (as children to <defs>) with a viewBox and an id attribute. This sprite can be it's own file, or it can be placed right at the top of the page it's used on. If used on the page, you'll ned to hide the sprite from rendering with a display:none or something similar. SVG Sprite Considerations There are a few important points to think through when using svg's in general and the same goes for an svg sprite. The approach you take to building your sprite may depend upon some of the considerations below. Things to consider: Support Svg sprites with an external source won’t work in IE 9, 10, 11 without a polyfill. See SVG for Everybody. Native apps still appear to prefer bitmap images. The Domain Sprite images need to be served from the same domain that’s serving the actual page in order to work. If this isn’t possible you still have a couple (less desirable) options. Use the svg’s inline Add the sprite to the page/component(s) it’s used on Individual <img> tag's for every icon Both of these approaches are going to create more markup that needs to be rendered every time the page loads. This may or may not affect your page’s loading time a bit more than loading a single sprite image once (with an external image). Icon Sizing Keeping icon and viewBox sizes consistent for each icon is going to save you a lot of time, especially with sprites. If you aren’t familiar with these attributes already you can read up on them in this article: How to Scale SVG Color Manipulation Manipulating svg's with CSS is one of my favorite features. Being able to do this means we can change the color on :hover, or we can reuse the same icon in different places with different colors, sizing, or rotation without worrying about pixelation. There are only two ways to manipulate svg’s with CSS currently: Note: svg's referenced with <img> tag's are untouchable. Add the entire svg sprite to the page, or reference an external image Can manipulate fill (or stroke) of any shape that doesn’t have a fixed fill (or stroke). Cannot make fill (or stroke) colors different for only some shapes in a single icon unless they are fixed. Drop each stinkin’ svg icon right on the page where it's needed Can manipulate shapes as long as they can be selected (by the element, class, or id) Can manipulate color of individual elements Can manipulate fill or stroke of any shape that doesn’t have a fixed fill or stroke. Note: Adding a sprite or svg directly to a page can/probably will make it a bit harder to maintain your icons. Putting your sprites into action Sprite image setup Since we can’t manipulate colors for shapes that have fills or strokes on them, we’re going to remove them for every shape or group that we want to change. This is a good time to remove any junk comments, or empty <g> (group) tag’s if they exist. Just be sure you know what you’re removing! Before removal: <symbol id="caret-down" viewBox="0 0 16 16" > <polygon points="3,5 8,11 13,5" fill=”#333333” /> </symbol> After removal: <symbol id="caret-down" viewBox="0 0 16 16" > <polygon points="3,5 8,11 13,5" /> </symbol> Note: if you have an icon with multiple shapes, and you only want to manipulate some you can keep fixed fills (or strokes) on the elements that shouldn’t change. Keep in mind that no matter how much CSS you throw at them, they will not change if they have a fixed color. Consistent icon sizes See an example of mismatched icons below: The Codepen icon is a bit smaller than the Github icon. This isn’t an extreme difference, but if we saw these next to each other, we’d certainly notice it. There are a couple things we can do to make sure they render consistently: First and foremost, try to use icons from the same source to keep them as consistent as possible (Nucleo is amazing). If you can’t do that, throw them all in a Sketch file to be used as a working icon sprite source file. Use separate art boards or symbols for each icon and turn on the grid or create rulers to line them up and resize them. Export individually in the .svg format and copy and paste them into your sprite. Note: most design tools will load the file with comments, and junk code. Sketch is no different, but luckily, the grouping does match the grouping of the elements in your artboard pretty closely. Manipulating sprite icon colors with CSS Now that we’ve removed the fill or stroke the icon’s defined shapes will be black by default. Gross, black doesn’t exist in the real world, plus chances are that’s not what you’re going for anyway. Setting a specific color: .my-icon { fill: rebeccapurple } Setting a dynamic color: .my-icon { fill: currentColor } The currentColor value is the inherited color value (from it’s parents). This is great for auto-magically changing icon colors without writing extra CSS. Note: Despite possibly being the only value that uses camel-case, currentColor is a plain old CSS. It can be used with other properties that use color values. Read more about currentColor on CSS-Tricks. I find it helpful to create two utility classes for my icons sprites. .icon-fill for icons that have fill’s I’d like to manipulate, and .icon-stroke for the stroke-based icons. .icon-fill { fill: currentColor } .icon-stroke { stroke: currentColor } Applying this class to my icon references ensures that I never have to worry about the icon not matching the text color, which easily covers 90% of the use cases. Adding icons to your page Basic SVG reference in markup <svg class="icon-fill"> <use xlink:href="img/sprite_base.svg#caret-down"></use> </svg> If the image exists on the page your referencing them on you can omit the file path and just use #iconName Break a leg We hope you never bitmap unless you need to again! Check out a sample of the code: 收起
显示全部文字 查看全文
作者/Tony Montemorano
时间/2018-02-08 19:16:32

Creating Tesla's Website With Bootstrap 4

We explore some of the new Bootstrap 4 features by building a copy of Tesla's Roadster web page.
查看全文
作者/Danny Markov
时间/2018-02-08 00:02:31

Using Bash Functions To Start A Local Environment Quicker

I can never remember what command(s) to type in Terminal to start my local development environments. Even after a few months on a project, I'm always going back to my documentation after every reboot or update. It's definitely a #firstworldproblem but there has to be a better way than a Google doc and copy/paste. There is. Let's write some bash functions. Open your terminal and type the following to get into your .bash_profile so we can write a function or two: nano ~/.bash_profile Here's a simple example. When I'm working on my company's website, Modea.com, I need to cd into the project repo and then run rails server. This is how I'd do it with one function instead. We're going to create a function named modeaServer and then put each command on its own line. For this basic example, we won't need any parameters. modeaServer () { cd ~/Repos/Modea.com-3.0/ rails server } Once you're happy with what's in your bash_profile, type ^X to save your file and then run the following to load your new changes. source ~/.bash_profile Now whenever I want to start my local instance of Modea.com, I just type "modeaServer" into Terminal and I'll be good to go. What about a more complex example with a parameter? foo() { echo "Parameter #1 is $1" } If I typed "foo bar" into my terminal, I'd get back "Parameter #1 is bar". If I needed a second parameter, I'd write $2 inside my function. You could use parameters in a number of different ways. If you have a number of different sites that are started the same way, you could write one function and make the parameter the directory. start () { cd ~/Repos/$1/ rails server } In this example, you would type start and then the name of your directory. "start site1" would run rails server inside the site1 directory. Side note: .bash_profile isn't the only place you can store these functions. You could also use .bashrc instead depending on your particular needs. While .bash_profile is executed for login shells, .bashrc is executed for interactive non-login shells. I've been a big fan of Panic's Coda 2 for most of my development work. One of the reasons why is that I can have terminal open as a tab along with the rest of my other files. I need to store my functions in .bash_profile for Coda to be able read them. Otherwise, I could use .bashrc instead. Here's an example of typing modeaServer to boot my local environment inside of Coda 2. This obviously is just scratching the surface of what you could do with these functions. You can do a lot more with them than just starting local environments. But if you juggle multiple projects, do yourself a favor and spend 10 minutes setting some functions up!收起
显示全部文字 查看全文
作者/Colin Lord
时间/2018-02-07 14:18:13

How to map user according to his IP and Country, useful for pricing and products based upon global customer-base #DograsWeblog

Article to map/redirect user based on IP/Country: While working on a project, there occured a serious issue. What company need is to show different types of plan rates to different countries and different cost of delivering. Now, we came across how to redirect user based on the country. Going from, sub directories, modal popup and other ways. We then came across a all done work and reference of ip2location. IP2Location™ LITE IP-COUNTRY Database IP2Location™ LITE IP-COUNTRY Database provides a solution to determine the country of origin for any IP address in a few simple steps. First, retrieve the IP address from the networking protocol or server-side variable of the Web server. Next, translate the IP address to an IP number in decimal format to speed up the database query. Lastly, reverse lookup the IP number from the IP2Location™ database to pinpoint the exact geographical location. IP Address Ranges by Country: This page displays the complete IPv4 address ranges organized by country. There are 249 countries listed below, and each link will bring you to a new page containing the respestive IP address ranges. If you are interested to learn more about the ranking of IP addressess allocated for each country, please visit IP Address Reports for details. Since this problem occurred on Drupal too, we have other alternates too. But, the IP2Location work is awesome, thats ready to use. All things deliberately done. Product Features Features: Translates IP address to country. Current Version: February 2018 Database Size: 1.26 MB (81,867 Rows) Database Format: ASCII Text File (Comma Delimited) & Binary (BIN) Refrence for study: https://lite.ip2location.com/database-ip-country https://lite.ip2location.com/ip-address-ranges-by-country https://superbig.co/plugins/country-redirect https://www.drupal.org/project/smart_ip 收起
显示全部文字 查看全文
作者/Nishant Dogra
时间/2018-02-07 05:23:31

#371: ECMAScript 2018 feature set finalized, V8 6.5 and TypeScript 2.7 arrives

This week's JavaScript news — Read this e-mail on the Web JavaScript Weekly Issue 371 — February 2, 2018 The Final Feature Set of ECMAScript 2018 The feature set of ES2018, the next formal version of the underlying language that we eventually call JavaScript, was finalized at the latest TC39 meeting. Here's another code-driven roundup. Dr. Axel Rauschmayer Debugging JavaScript with the New Firefox JS Debugger Firefox’s new JS debugger is pretty powerful, and will help you write fast, bug-free code. Smashing Magazine Understanding Cross-Origin Resource Sharing (CORS) CORS is a mechanism that allows cross-origin HTTP requests (such as using XMLHTTPRequest or the Fetch API) using special server-side HTTP headers. Bartosz Szczeciński Planning a React Application: Whitepaper Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy. Progress   Sponsor Stimulus 1.0: A JS Framework for HTML You Already Have We linked to the code a few weeks ago but now the CTO of Basecamp and creator of Ruby on Rails shares his vision for an alternative to single-page client-side MVC apps. David Heinemeier Hansson AngularJS's Plan for Stability and Long Term Support AngularJS (yes, not the more modern Angular) will get one more significant release, 1.7, and enter a 3 year LTS period on July 1. Pete Bacon Darwin V8 Release v6.5: Performance Turned Up to 11 Now in beta, the latest V8 (as will be in Chrome 65) supports streaming compilation for WebAssembly and has many array-oriented perf improvements that have a major impact. Mathias Bynens TypeScript 2.7 Released A key release packed with tweaks and new features, if you prefer your JavaScript with optional static types. Microsoft Jobs JavaScript Developer at Econify (New York, NY)We are looking for a React and Node.js developer to work alongside our team on an exciting high profile project. Apply today. econify Front-End Developer/UI DesignerDesign for social impact. We’re seeking a UI Designer to work across ideation, prototyping coding for international development. Catalpa International 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 How ECMAScript Regular Expressions Are Getting Better news A look at new regex features both in ES2018 and being discussed at TC39 right now.Mathias Bynens Data Visualizations with InfluxDB: Integrating plotly.js tutorial Visualize data with InfluxDB plotly.js, a JavaScript graphing library built on top of d3.js stack.gl.InfluxData  Sponsor Ways to Make Your Code Cleaner and Easier-to-Read with ES6 tutorialSam Williams Optimizing Hash Tables: Hiding The Hash Code tutorial A look at the recent improvements in how V8 v6.3+ stores the keys in hash tables.Sathya Gunasekaran Building a Modal Component with Vue.js tutorialFilipa Lacerda Asynchronous Reduce in JavaScript tutorialSeva Zaikov Airbnb's Extensive JavaScript Style Guide opinion Not new, but continues to get updates and stars a-plenty.Airbnb Why You Should Choose Luxon for Date Wrangling in JavaScript opinionRad Devon 10 Things I Love About Vue opinionDuncan Grant Build a Modern Image Gallery with Vanilla ES6 videoBrad Traversy A Much Faster Way to Debug Code Than with Breakpoints or Console.log Scratchpad/REPL right in your editor, running your code as you type (community edition is free as in beer).Wallaby.js  Sponsor React Scope: Visualize Your React Components Live tools A Chrome extension for visualizing components, state and props.Tiffany Lin React Scope: Visualize Your React Components Live toolsTiffany Lin Glow: Make Flow's Errors Pretty-Printed and Syntax Highlighted toolsJames Kyle Save Time with the Best, Fastest Angular Spreadsheets & UI Components  GrapeCity JavaScript Solutions  Sponsor Sockette: A Tiny WebSocket Wrapper code A 339 byte wrapper around WebSocket that auto reconnects if the connection drops.Luke Edwards xcell: A Libary to Manage Reactive Spreadsheet-Like Calculations code ijk: Transforms Arrays Into Virtual DOM Trees code If you prefer the Lisp approach of data as code..Luke Jackson 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-02 00:00:00