Tech News - Front-End Web Development

After the recent release of Node 10.0.0, npm have released version 6 in collaboration with node.js. npm v6 is a major update of the popular package manager for the JavaScript runtime environment Node.js. Typically, npm release their newer versions every year around spring time and following this pattern npm v6 was introduced as on April 26, 2018. This update introduces powerful security features for every developer who works with open source code. Built in security features npm v6 is the result of the collaboration between npm and their acquisition of the Node Security Platform. This introduces two new security features: npm registry Every user of the npm v6 Registry will begin receiving automatic warnings if the code used has a known security issue. npm will automatically review install requests against the NSP database and return a warning if the code contains a vulnerability. npm audit npm v6, has a new command, ‘npm audit’, which allows developers to recursively analyze their dependency trees to identify specific insecurities, following which developers can swap in a new version or find a safer alternate dependency. Both these security features are available free of charge to every npm user, with no purchase or registration required. These resources are open sourced to maximize the community benefit. By alerting the entire community to security vulnerabilities within a tool, npm can make JavaScript development safer for everyone. Additional Features Apart from the security features, there are also a large number of other performance updates: npm v6 is up to 17x faster than the npm of one year ago. npm ci is optimized to use npm within the continuous integration/continuous deployment (CI/CD) workflow almost 2x–3x faster. Webhooks are now configurable directly within the npm CLI. Easy verification of package with respect to tampering and corruption, with more visibly integrated metadata. Teams can now more easily share reproducible builds with automatic resolution of lockfile conflicts. Also checkout the release notes for npm v6 release, and the roadmap of the year ahead. Node 10.0.0 released, packed with exciting new features How is Node.js Changing Web Development? How to deploy a Node.js application to the web using Heroku

Bootstrap v4, made an initial appearance around the start of this year, as a major release of the popular front-end web development library. It was followed by 10 new themes built on Bootstrap 4 with its own build tools and customer support. It has been a month since the release of Bootstrap 4 and the version 4.1  is already here. Although, Bootstrap v4.1 is not massive in terms of new features or path-breaking changes, it hosts few smaller updates. Additionally, it has a basketful of fixes, doc updates, and build tool changes. Highlights of Bootstrap v4.1 New custom range form control is added. New .carousel-fade modifier is added to switch carousel from horizontal sliding to crossfade. Includes a new .dropdown-item-text for plaintext dropdown items. New .flex-fill, .flex-grow-*, and .flex-shrink-* utilities are added. New .table-borderless variant for tables added. New .text-monospace utility added. New .text-body (default body color), .text-black-50 (50% opacity black), and .text-white-50 (50% opacity white) utilities added. New .shadow-* utilities added for quickly adding box-shadows. Now you can disable Popper’s positioning in dropdowns. Theming docs are updated so now you will not be able to use CSS variables in media queries. The issue with Chrome rendering CSS columns incorrectly for cards is now fixed. .text-hide is deprecated as it’s a dated and undocumented feature. Dashboard and Offcanvas examples across Firefox and IE are now fixed. Breadcrumbs can now use non-string values as dividers. Find a detailed version of all fixes on the ship list and project board. With the Bootstrap version 4, it moved to a versioned docs setup. This means after each minor release, version 4 will have a new hosted version of Bootstrap docs. This would help developers avoid breaking URLs over the web who are yet to upgrade or want to stick to older versions of Bootstrap. The Bootstrap v4.1 release documentation is available on this new webpage and the older webpage remains the same. The upcoming Bootstrap release v4.1.1 would solve certain bug fixes for input groups and form fields that were missed in Bootstrap v4.1 due to insufficient time. Read More Web Development with React and Bootstrap Bootstrap 4 Objects, Components, Flexbox, and Layout Getting Started with ASP.NET Core and Bootstrap 4  

ECMAScript 2018 -  also known as ES9 - is now complete with lots of features. Since the major features released with ECMAScript 2015 the language has matured with yearly update releases. After multiple draft submissions and completion of the 5-stage process, the TC39 committee has finalized the set of features that will be rolled out in June. The full list of proposals that were submitted to TC39 committee can be viewed in Github repository. What are the key features of ECMAScript 2018? Let’s have a quick look at the key ES9 features and how it is going to add value to web developers. Lifting template literal restriction Template literals generally allow the embedding of languages such as DSLs. However, restrictions on escape sequences make this quite complicated. Removing the restriction will create difficulty in handling cooked template values containing illegal escape sequences. The proposed feature will redefine the cooked value for illegal escape sequences to “undefined”. This lifting of restriction will allow illegal values like \xerxes and makes embedding of language simpler. The detailed proposal with templates can be viewed at Github. Asynchronous iterators The newer version will provide syntactic support for asynchronous iteration with both AsyncIterable and AsyncIterator protocols. The syntactic support will help in reading lines of text from HTTP connection easily. In my opinion, this is one of the most important and useful features which make the code looks simpler. It introduces a new IterationStatement, for-await-of, and also adds syntax which can create async generator functions. The detailed proposal can be viewed at Github. Promise.prototype.finally library As you are aware promise make execution of callback functions easy. Many promise libraries have a "finally" method through which you can run code no matter how the Promise provides resolution. It works by registering a callback which gets invoked when a promise gets fulfilled or denied. Bluebird, Q, and when are some examples. The detailed proposal can be viewed at Github. Unicode property escapes in regular expressions The ECMAScript 2018 version will have addition of Unicode property escapes `\p{…}` and `\P{…}` to regular expressions. These are a new and unique type of escape sequences with u flag set. With this feature, one can create Unicode-aware regular expressions with utmost ease. These escapes are easily readable, compact and get updated automatically from ECMAScript engine. The detailed proposal can be viewed at Github. RegExp lookbehind assertions Assertions are regular expressions which consist of anchors and lookarounds that either succeeds or fails based on the match found. ECMAScript has extended assertion, that does lookaround in forward direction, with lookbehind assertions that does in backward direction. This assertion will be helpful in instances like validating a dollar amount without capturing the dollar sign where a pattern/design is or is not preceded by another. The detailed proposal can be viewed at Github. Object Rest/spread properties The earlier version of ECMAScript includes rest and spread properties for array literals. Likewise, the newer version would be introducing rest and so read elements for object literals. Both these operations for Object would help in extracting properties which we want along with removing unwanted ones. The detailed proposal can be viewed at Github. RegExp named capture groups Capture Groups is another RegExp feature, similar to so called “named Groups” in Java and Python. With this, you can write RegExp to provide names in a format viz. (?<name>...) for different parts of the group. This allows you to use that name and grab whichever group you need in a simplistic way. The detailed proposal can be viewed at Github. s ‘dotAll’ flag for regular expressions In regular expression patterns, the earlier version allows dot (.) to match any character but with astral and line terminator characters like \n \f etc, creating regex was complicated. The newer version proposes addition of a new s flag which can match any character, including astral and line terminators. The detailed proposal can be viewed at Github. When will ECMAScript 2018 be available? All of the features above are expected to be implemented and available in browsers this year. It's in the name after all. But there are likely to be even more new features and capabilities in the 2019 release. Read this to get a clearer picture of what’s likely to feature in the 2019 release.

After the successful conference at Amsterdam, Vuejs recently conducted the first ever VueConf.US in New Orleans on March 26th-28th 2018. The conference congregated hundreds of Vuejs developers from around the world and the VueJS Core team and featured workshops and talks from members of the Vuejs community and Vue experts. It also witnessed new releases and project processes. The conference commenced with an inaugural keynote by Evan You, the creator of Vue. He talked about the growth of Vue since 2016, also highlighting new developments coming soon. In his keynote, You said that “Vue will be moving to a standardized release cycle with new minor releases every three months and a minimum six-month notice prior to major releases.” They will also be shifting from a single release channel to four separated release channels. The VueConf.US conference covered 4 major workshops by Vuejs experts. In the first workshop, Evan You talked about building simple versions of libraries for features such as routing, state management, form validation and i18n using basic Vue features. Chris Fritz, conducted a second workshop on the basics of building world-class Vue applications. Topics included configuring Webpack for single-file components, setting up the most advanced workflows currently possible, and more. Sarah Drasner organized a workshop on animation in Vue to creating complex effects in performant and visually stunning patterns. Rachel Nabors, presented a talk, "Vue In Motion", on implementing animations and transitions in Vue. In the fourth workshop, Blake Newman presented his views on Vuex, a state management pattern. The VueConf.US conference also featured multiple presentations by key Vue experts. Daniel Rosenwasser, Program Manager on TypeScript at Microsoft, presented his views on making TypeScript and Vue seamless to make sure that JavaScript users of all communities can use Typescript. In another interesting presentation, Jen Looper talked about creating an Engaging Native Mobile App with Vue and NativeScript all the while retaining shared code between the Vue created website and mobile app. Edd Yerburgh, Vue core team member and author of "vue-test-utils", spoke about testing Vue applications. He presented an adapted the testing pyramid for the front end, consisting of end-to-end tests, snapshot tests, and unit tests. In a talk, “Vue & SSR: The best practices”, Sebastien Chopin talks about common problems with server-side rendering and how to deal with them. He also shows Nuxt.js as a possible solution to most of these problems. Community support was the highlight of the VueConf.US conference with a large number of talks mentioning the importance of Vue community support. The attendees were extremely positive about the conference and stated how comfortable and welcoming the community was. Each attendee shared a similar level of excitement about the platform and its possibilities and was excited about meeting the wide variety of developers and to know their experiences. All talks were recorded and will be posted soon on VueMastery.

The SurveyJS team have announced in a post on Hackernoon that it is now out of beta. The JavaScript library for building surveys features a number of updates and improvements that JavaScript developers tasked with developing surveys will love. First released to the public back in September 2015, SurveyJS 1.0 showcases a JavaScript library that has has been developed with a close attention to the needs and interests of its community of users. New SurveyJS features Here are some of the new features announced: Panels let developers put questions into a conditionally visible panel (so you don't just have to be a new page). Dynamic panels to tackle some of the problems with dealing with lists. Custom widgets held in a dedicated GitHub repository. The ability to create timed quizzes. SurveyJS themes and Bootstrap 4 support - although the team were planning on waiting for Bootstrap 4 to be officially released to integrate it, the team note in the post that the amount of interest in Bootstrap 4 from the SurveyJS community was so great that they went ahead anyway. The team have also added support for Web Content Accessibility Guidelines 2.0. This move underlines the growing popularity of the project and the need for it to respond to the needs of increasingly professionalized use within the corporate and enterprise world. What is SurveyJS? In case your scratching your head and wondering what SurveyJS is, here's a quick primer. it's essentially a JavaScript library that lets you develop, run, and analyze surveys. There are three different components: The survey library - allows you to build an integrate a survey into a webpage on your site The survey builder - a tool for developing the survey UI. The survey service - pieces together the survey UI and data collection making it easier for you to process and analyze data.  Go to the the SurveyJS project site to find out more.

D3.js, the popular javascript library is now available in version 5.0. This version D3 5.0, introduces only a few non-backward-compatible changes. D3.js is a JavaScript library for manipulating documents based on data. D3 combines powerful visualization components and a data-driven approach to DOM manipulation. It helps bring data to life using HTML, SVG, and CSS without restriction to a proprietary framework. Here are the most notable changes available in D3 5.0: D3 5.0 now uses Promises instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support async and await. D3 now also uses the Fetch API instead of XMLHttpRequest where the d3-request module has been replaced by d3-fetch. D3 5.0 also deprecates and removes the d3-queue module. Developers can use Promise.all to run a batch of asynchronous tasks in parallel, or a helper library such as p-queue to control concurrency. D3 no longer provides the d3.schemeCategory20 categorical color schemes. It now includes d3-scale-chromatic, which implements excellent schemes from ColorBrewer, including categorical, diverging, sequential single-hue and sequential multi-hue schemes. It also provides implementations of marching squares and density estimation via d3-contour. There are two new d3-selection methods: selection.clone for inserting clones of the selected nodes, and d3.create for creating detached elements. In addition, D3’s package.json no longer pins exact versions of the dependent D3 modules. This fixes an issue with duplicate installs of D3 modules. As a developer you can be assured that the API has been very stable since the release of 4.0. The only significant breakage will be in adopting modern asynchronous patterns i.e. promises and Fetch. You can download the latest version from d3.zip. The latest release can also be linked directly by copying this snippet: <script src="https://d3js.org/d3.v5.min.js"></script> The list of entire changes and code files are available in the release notes.

So you want to get into web development - but where do you even start to begin? The world of web development has never been more important. Last year was the first time that the majority of purchases were made on the web rather than visiting a brick and mortar store. Web apps now offer fantastic ease of use for business clients or shoppers, and a poorly built or optimized app is often all it takes for your customers to choose to leave your ideas behind and go somewhere else. Luckily, we've got tons of free eBooks for you to get started with if you’re looking to enter this wide world of web development with as best a foot forward as possible. And beyond that, when you’ve got the basics down and are ready to start developing your skills in new and interesting ways with frameworks, coding paradigms, and optimization then we’ve got you covered too with our entire web development range of titles to buy too! Here are our current top free learning resources we think you'll find perfect to get started. With how important web development is right now starting here for free might just be the smartest investment you make today! All you need to do is click the links below, log in, and you’ll find the eBook in your account. You'll then be able to download the free machine learning guides as PDFs which you can keep forever. It's that simple. Thinking in HTML For anyone who wants to understand the web and how it works, HTML is an essential place to start. If you need somewhere to start your journey into HTML then this free eBook provides you with everything you need to know to get to grips with the code and to begin building your own web pages. Inside you’ll explore everything from how HTML code structures a web page, to formatting pages and including essential things like hyperlinks and images, to creating your own forms you’ll have the perfect foundation to build upon all your future work. Download and read Thinking in HTML for free now. Thinking in CSS CSS is intrinsic to the modern web, and if you want to become a true web developer it’s a must have to know inside and out. Thinking in CSS is your gateway to the ins and outs of the language. This title gives you the crash course on the ins and outs the structure of CSS, how to use selectors to locate elements to restyle your webpage, and shows you how CSS interacts with the web pages you see every day. With this book by your side you’ll be able to cut through CSS without breaking a sweat - letting you focus on simply making your web pages look great without getting lost in the language! Download and read Thinking in CSS for free now. What you need to know about JavaScript JavaScript and the web go hand in hand, and as a web developer you need to have a great handle on the language to ensure you're creating the best apps you can. From the absolute basics of JS syntax to combining ECMAScript 6 and Visual Studio Code this primer is the perfect resource for a JavaScript Master-in-the-Making! Download and read What you need to know about JavaScript for free now. What you need to know about Angular 2 Angular was one of the biggest development revolutions of the decade, and you owe it to yourself to see just why Angular 2 is going to be just as big - and this title will show you how. Giving you everything you need to build your first basic Angular app this is the ideal place to start for any Angular initiate looking to start their journey. Download and read What you need to know about Angular 2 for free now. Mastering JavaScript High Performance So, you’ve got the basics of web development down - where do you go from there? Why not try making sure your JS code's performance is as good as possible with this title! Inside this 208 page guide you’ll find a whole host of easy to copy tips, tricks, and best practices you can bring to your web dev world going forward. With a few simple tricks you can rest easy knowing your web or mobile apps run faster and better for both you and your customers; meaning your competitors don’t leave you in the dust. Download and read Mastering JavaScript High Performance for free now. There we go - 5 titles to give you the start (and a bit more when you’re ready to dig deeper too!) you need to start creating your very own web apps. So what are you waiting for? Get downloading, get reading, and then get creating!

What do you need to know to get ahead in web dev in 2015? We surveyed 6,000 web dev pros for Skill Up to find out what the essential tech skills were to earn the top salaries. Which industry pays the most to its web developers? Is AngularJS going to be the one big thing that everyone needs to know? Has JavaScript finally left PHP in the dust, or are pros still finding new ways to put the classics to use? Skill Up has the answers - discover the state of modern web dev by watching our Skill Up results animation, and find out what you need to know to upgrade your career. View the full report here: www.packtpub.com/skillup/web-dev-salary-report