Software

Welcome back! In part 3 I discussed classes, polymorphism, references and templates, and finally built a source indexer out of basic containers that achieves 60MB/s indexing speed. In this part we continue with further C++ features that you can use to spice up your code ’line by line’, without immediately having to use all 1400 pages of ‘The C++ Programming Language’. There is frequent reference to the indexing example from part 3 so you may want to make sure you know what that is about.

Welkom! Veel bedrijven en scholen in mijn omgeving worstelen op dit moment met het vinden van personeel. Sinds 1999 neem ik mensen aan en help ik bij werving, voor mijn eigen bedrijf & dat van anderen, maar ook voor scholen en instellingen. En als ik eerlijk ben, ik ben er inmiddels best goed in. In ieder geval ben ik onvoorstelbaar trots op de uitstekende mensen die ik heb kunnen overtuigen bij me te werken!

Welcome back! In part 2 I discussed basic classes, threading, atomic operations, smart pointers, resource acquisition and (very briefly) namespaces. In this part we continue with further C++ features that you can use to spice up your code ’line by line’, without immediately having to use all 1400 pages of ‘The C++ Programming Language’. Various code samples discussed here can be found on GitHub. If you have any favorite things you’d like to see discussed or questions, please hit me up on @bert_hu_bert or bert@hubertnet.

Welcome back! In part 1 I discussed how std::string and std::vector interoperate with C, including with the C standard library qsort call. We also discovered that the C++ std::sort is 40% faster than C qsort because C++ is able to inline the comparison function. In this part we continue with further C++ features that you can use to spice up your code ’line by line’, without immediately having to use all 1400 pages of ‘The C++ Programming Language’.

Welcome to part 1 of Modern C++ for C Programmers, please see the introduction for the goals and context of this series. In this part we start with C++ features that you can use to spice up your code ’line by line’, without immediately having to use all 1400 pages of ‘The C++ Programming Language’. Various code samples discussed here can be found on GitHub. Relation between C and C++ C and C++ are actually very close relatives, to the point that many compilers have unified infrastructure for both languages.

Ahhh.. meetings. The one old school company thing that survives in this agile, open-office, ‘remote first’, nomadic worker world. And it is easy to see why: the ‘meeting’ is the last guaranteed way to get everyone to pay attention for an hour, or at least, pretend to. It still is rare for people to fake attending two meetings at the same time in any case. The late great Andrew S. Grove, long time CEO of Intel and overall hero engineer, wrote the massively important book High Output Management.

Comments are very welcome on bert@hubertnet.nl or @bert_hu_bert. Update: several constructive remarks have been used to improve this text. Thanks! In this post I will attempt to fully explain the Spectre and Meltdown vulnerabilities in an accessible way. I decided to write it up after I realised it took me more than a day to figure it out, even though I’ve been doing security related stuff on CPUs for 20 years.

Welcome to Kolmo There are three avenues to learn about Kolmo (GitHub). There are two Youtube videos, one from the most excellent NLNOG 2017, the other from the equally excellent UKNOF 38. These videos explain a lot of the the history and the ‘why’ behind Kolmo. There is also the kolmo.org website, which is ‘self-hosted’ by the ws Kolmo-powered webserver. Finally, there is this post, in which I focus on what Kolmo actually does, without spending much time on the ‘why’ or the history.

Some brief notes on making ethernet cables With thanks to the most excellent NLNOG for a lot of mostly correct advice! Friends will tell you “crimping” ethernet cables is easy. Most of your friends either have overly rosy memories, or have practiced on 200 cables before telling you it is now easy. It is not easy. This page is for if you have a few extra euros/dollars/coins to spare, and don’t want to spend rare hours of concentrated effort to crimp an ethernet cable using unfamiliar equipment and supplies.

By Mark Surman and Cori Zarek

 

In June, Mozilla launched a new fellowship that brings together policy experts from around the world to advance crucial tech policy efforts. Today, we are excited to announce the appointment of seven advisors to help steer this fellowship into the future. We are also announcing one new fellow, bringing the cohort to 11 fellows from four countries who are already up to great work.

Over the past three months, Mozilla’s Tech Policy Fellows have been digging into their projects to keep the Internet open and freely accessible to all. With most fellows joining directly out of government service, they’re continuing to move forward some of the urgent policy efforts they had been leading, and working to avoid any backsliding that might come with government transitions.

The fellows’ work is focused on protecting net neutrality, advancing policies around artificial intelligence and the Internet of Things, promoting affordable broadband service for vulnerable communities, and more. Amba Kak is our most recent addition, starting this month to work on promoting net neutrality in India.

To advance this work, the fellows are meeting with policymakers inside and outside of government; they’re keynoting major events and giving press interviews about the importance of these topics; and in the coming weeks, they’ll share more about their work with the Mozilla network on our network blog.

To give guidance and support to the fellows, Mozilla formed an Advisory Board comprised of some of the world’s top experts and supporters of a free and open Internet.

These seven individuals living in six different countries bring deep expertise in privacy, net neutrality, intellectual property, and digital inclusion. They will serve as a resource to the fellows as they pursue their individual projects and to Mozilla as we refine and institutionalize this program.

The fellows and advisors will gather next month at MozFest, Mozilla’s annual celebration of the Internet. They will collaborate on the fellows’ work and the fellows will lead sessions on tech policy topics during the weekend-long festival.

The advisors will also work with us to identify the next cohort of Tech Policy Fellows in early 2018 and will advise the program and the fellows for the coming two years. We look forward to bringing them on board and getting to work to continue advancing tech policy around the globe.

Meet the Tech Policy Fellowship Advisory Board:

Celina Beatriz

Celina Beatriz has a Master’s Degree in Human Rights from Harvard University and an Undergraduate Degree in Law from Pontifical Catholic University (PUC-Rio). She is an expert on human rights and technology. She was a researcher at Human Rights Watch in New York and a Supervisor at the Human Rights Clinic in Fundação Getulio Vargas (FGV Rio). Celina was a consultant for the Harvard Human Rights Clinic, a researcher at ISER, and an Associate of the Children’s and Adolescent’s Rights Protection in Rio de Janeiro. Celina is currently developing research in the human rights and technology field. She is Project Director at the Institute for Technology & Society of Rio de Janeiro (ITS Rio).

 

Malavika Jayaram

Malavika Jayaram is the Executive Director of Digital Asia Hub, an independent, non-profit Internet and society research think tank based in Hong Kong, incubated by The Berkman Klein Center for Internet and Society at Harvard University. A practising technology lawyer for over 15 years, she spent eight years in London with global law firm Allen & Overy in the Communications, Media & Technology group, and as Vice President and Technology Counsel at Citigroup. While a partner at Jayaram & Jayaram, India, she was featured in the International Who’s Who of Internet e-Commerce & Data Protection Lawyers, and voted one of India’s leading lawyers.

Malavika taught India’s first course on information technology and law in 1997, and is now Adjunct Faculty at Northwestern University’s Pritzker School of Law, part of the Master of Science in Law program bridging STEM subjects and law. She has been a Fellow with the Centre for Internet & Society, India, since 2009, when she helped start their privacy work. She is on the Advisory Board of the Electronic Privacy Information Center (EPIC), and the Executive Committee of the IEEE Global Initiative for Ethical Considerations in Artificial Intelligence and Autonomous Systems.

 

Ronaldo Lemos

Ronaldo Lemos is an internationally respected Brazilian scholar and commentator on technology, intellectual property, and culture. He is a director of the Institute for Technology & Society of Rio de Janeiro (ITS Rio) and professor of law and innovation at the Rio de Janeiro State University (UERJ). He holds law degrees from University of Sao Paulo Law School and Harvard Law and has published a number of books and journal articles. He is currently a Visiting Professor at Columbia University’s School of International and Public Affairs. He has served as the project lead of Creative Commons Brazil since 2003. He is a non-resident visiting scholar with the MIT Media Lab and was a visiting fellow at Princeton University’s Center for Information Technology Policy (CITP) in 2011 and 2012. Lemos is a founder of Overmundo, for which he received the Prix Ars Electronica Golden Nica in the category of digital communities. Lemos was one of the creators of the Marco Civil, a law enacted in 2014 regulating the Internet in Brazil, protecting civil rights, privacy, and net neutrality. In 2015 he was appointed a Young Global Leader by the World Economic Forum. In 2016 he was appointed a fellow with Ashoka. Lemos serves as a board member in various organizations, such as the Mozilla Foundation and Access Now.

 

Alexander Macgillivray

Alexander Macgillivray, also know as “amac,” is curious about many things including law, policy, government, decision making, the Internet, algorithms, social justice, access to information, and the intersection of all of those. He was United States Deputy Chief Technology Officer for the last two years of the Obama Administration. He was Twitter‘s General Counsel, and head of Corporate Development, Public Policy, Communications, and Trust & Safety. Before that he was Deputy General Counsel at Google and created the Product Counsel team. He has served on the board of the Campaign for the Female Education (CAMFED) USA, was one of the early Berkman Klein Center folks, was certified as a First Grade Teacher by the State of New Jersey, and studied Reasoning & Decision Making as an undergraduate. These days he is doing a bunch of coding, writing, and short burst projects with organizations thinking about what they should be doing next.

 

Bitange Ndemo

Bitange Ndemo is an Associate Professor of Entrepreneurship at the University of Nairobi’s Business School. His research centers on the link between ICTs and small and medium enterprises in Kenya, with an emphasis on how ICTs influence economic development in Kenya.   Prof. Ndemo is an advisor to several organizations including the Better than Cash Alliance, a global initiative under UNCDF dedicated to promotion of cash alternatives; and the I-Hub, a premier innovation hub in Africa. He also sits on the Board of Research ICT Africa based in South Africa. He is a former Permanent Secretary of Kenya’s Ministry of Information and Communication, where he was credited with facilitating many transformative ICT projects. After years of developing the supply-side of broadband, he has now changed gears to demand-side through assisting start-ups in Africa and playing a key role building sustainable models of innovation hubs. Prof. Ndemo holds a PhD in Industrial Economics from the University of Sheffield in the UK, a Bachelor’s degree in Finance from the University of Minnesota, and an MBA from University of St. Thomas. He is an open data and big data evangelist, and dedicated to simplification / visualization of data for ordinary citizens to consume.

 

Rinalia Abdul Rahim

Rinalia Abdul Rahim is Managing Director and Chairman of Compass Rose Sdn Bhd. She has 20 years of experience in international development and ICT policy, where she focuses on the issues of access, empowerment, and governance. She currently serves as a member of the Board of Directors at the Internet Corporation for Assigned Names and Numbers (ICANN). From 2001-2008, she was Executive Director of the Global Knowledge Partnership (GKP), which she successfully positioned as the world’s first and leading multi-stakeholder initiative that promoted knowledge and ICT for Development (ICT4D).

From 1997-2001 she worked with the Malaysian Government in developing national ICT policies, strategies and programmes. Some of the strategies and framework were promoted as best practices by the United Nations Development Programme and were adopted by many developing countries across Asia, Africa, and the Middle East. She has held various advisory positions with international, regional, and national bodies, including agencies of the United Nations. She holds a Master’s in Public Policy from Harvard University and a Bachelor’s Degree in Political Science from Princeton University. She is certified in Corporate Governance by INSEAD. Raised in Malaysia, she has lived in the U.S., Hong Kong, Mainland China, and Singapore. She currently resides in Germany.

 

Nicole Wong

Nicole Wong specializes in assisting high-growth technology companies to develop international privacy and regulatory strategies. She previously served as Deputy U.S. Chief Technology Officer in the Obama Administration, focused on internet, privacy, and innovation policy. Prior to her time in government, Nicole was Google’s Vice President and Deputy General Counsel, and Twitter’s Legal Director for Products. She frequently speaks on issues related to law and technology, including five appearances before the U.S. Congress.

Nicole chairs the board of Friends of Global Voices, a non-profit organization dedicated to supporting citizen and online media projects globally. She also sits on the boards of WITNESS, an organization supporting the use of video to advance human rights, and Mozilla. Nicole currently serves as an advisor to the School of Information at the University of California, Berkeley, Harvard Business School Digital Initiative, the Democratic National Committee Cybersecurity Advisory Board, Refactor Capital, and the Albright Stonebridge Group.

The post Adding More Policy Firepower to the Mozilla Network appeared first on The Mozilla Blog.

Across the industry, September is always an exciting month in mobile, and the same is true here at Mozilla.

Today, we’re launching the newest Firefox for iOS alongside an update for the popular Firefox Focus for Android, which we launched in June.

What’s new with Firefox for iOS:

Tracking Protection: Rejoice! For the first time, Firefox users running iOS11 on iPhone and iPad will now have automatic ad and content blocking with Private Browsing mode, as well as the tracking protection option in regular browsing. This feature uses the same ad blocking technology as Firefox Focus for Android and iOS, Firefox for Desktop and Firefox for Android. We’re always looking to bring the latest features to our users, and we’re finally able to deliver it to Firefox for iOS thanks to changes by Apple to enable the option for 3rd party browsers.

Improved Syncing: We’ve offered the ability for users to sync desktop content like passwords, history and bookmarks to mobile, and today we’re enhancing Firefox sync so content on your mobile now syncs back to your desktop.

To get the latest version of Firefox for iOS, on the App Store.

What’s new with Focus for Android:

Multiple Tabs: While simplicity is the name of the game for Firefox Focus, we’ve been listening to you and made the private browsing experience even better with the addition of multitasking support. This means users now have the ability to open multiple web pages at a time and easily switch between tabs in the same session.

You can download Firefox Focus for Android on Google Play.

The post Tracking Protection for Firefox for iOS Plus Multi-Tasking in Focus for Android New Today appeared first on The Mozilla Blog.

Mozilla’s activism website Paperstorm makes standing up for net neutrality simple. All you have to do is click — a lot

 

In the U.S., net neutrality is under attack.

Ajit Pai, current Chairman of the FCC, put it bluntly: “We need to fire up the weed whacker” and remove rules like net neutrality, he said recently.

To keep net neutrality (and a healthy internet) intact, Mozilla is deploying Paperstorm, our activism website developed alongside design studio Moniker.

Over the next several weeks, we’re asking American internet users to send a salvo of tweets to Chairman Pai.  How? Visit Paperstorm.it and start clicking. Each click drops a digital leaflet on the FCC’s headquarters in Washington, D.C. Drop enough leaflets and you can trigger a tweet to Pai.

We’re asking Americans to Paperstorm the FCC

Paperstorm is a tongue-in-cheek website. But from past net neutrality efforts, we know that a loud chorus of voices can make an impact. And we need to make an impact quickly: Pai and the FCC commissioners are expected make a net neutrality decision in late fall or early winter of this year.

A net neutrality refresher

In May of this year, Pai introduced his proposal to undo net neutrality by re-re-classifying Internet Service Providers (ISPs) from Title II to Title I under the Communications Act of 1934.

What this means: Under Pai’s proposal, ISPs would be allowed to block, throttle and prioritize (or deprioritize) internet access for Americans. Companies like Comcast and AT&T could selectively slow down or speed up access to online journalism, blogs, films, apps, and other services. This would undo 2015’s hard-won net neutrality protections that took years of hard work.

Net neutrality may seem like an abstract issue, but its impact is anything but. Without it, the internet becomes less open. No net neutrality means fewer opportunities for startups and entrepreneurs, and a chilling effect on innovation, free expression and choice online.

Mozilla Chief Legal and Business Officer Denelle Dixon gives real-life examples of a web without net neutrality: “In the past, without net neutrality protections, ISPs have imposed limits on who can FaceTime and determined how we stream videos, and also adopted underhanded business practices.”

About Paperstorm

Paperstorm is a digital activism website that urges Pai and the FCC to keep net neutrality intact.

When users visit Paperstorm, they’ll see an aerial view of the FCC headquarters on 12th Street SW in Washington, D.C. With each click of the mouse, users drop a digital leaflet that reads:

A Paperstorm leaflet

What do these leaflets do? When you drop enough, you can generate a tweet to Pai. Alone, you might drop a small stack of leaflets and send a handful of tweets to Pai. But together, we can drop millions of leaflets and launch tens of thousands of tweets.

Paperstorm is a collaboration between Mozilla and the Amsterdam-based, Webby award-winning design studio Moniker. This is the first time Mozilla and Moniker have deployed Paperstorm in the U.S. Earlier this year, Mozilla and Moniker deployed Paperstorm in the EU to demand common-sense copyright reform — we dropped 60,000,000 leaflets and sent 12,000 tweets to lawmakers.

Part of a larger movement

Millions of Americans across party lines support net neutrality. Over the past several months, more than 22 million net neutrality comments have been filed in the FCC’s docket, the vast majority in support of net neutrality.

On July 11, hundreds of organizations banded together in a Day of Action to amplify Americans’ voices. From the ACLU and Amazon to Github and Mozilla, organizations voiced loud support for a free and open internet.

 Read about Mozilla’s past net neutrality advocacy.

The post Stand Up for Net Neutrality: Help Paperstorm the FCC appeared first on The Mozilla Blog.

This week I had the opportunity to share Mozilla’s vision for an Internet that is open and accessible to all with the audience at MWC Americas.

I took this opportunity because we are at a pivotal point in the debate between the FCC, companies, and users over the FCC’s proposal to roll back protections for net neutrality. Net neutrality is a key part of ensuring freedom of choice to access content and services for consumers.

Earlier this week Mozilla’s Heather West wrote a letter to FCC Chairman Ajit Pai highlighting how net neutrality has fueled innovation in Silicon Valley and can do so still across the United States.

The FCC claims these protections hamper investment and are bad for business. And they may vote to end them as early as October. Chairman Pai calls his rule rollback “restoring internet freedom” but that’s really the freedom of the 1% to make decisions that limit the rest of the population.

At Mozilla we believe the current rules provide vital protections to ensure that ISPs don’t act as gatekeepers for online content and services. Millions of people commented on the FCC docket, including those who commented through Mozilla’s portal that removing these core protections will hurt consumers and small businesses alike.

Mozilla is also very much focused on the issues preventing people coming online beyond the United States. Before addressing the situation in the U.S., journalist Rob Pegoraro asked me what we discovered in the research we recently funded in seven other countries into the impact of zero rating on Internet use:

If you happen to be in San Francisco on Monday 18th September please consider joining Mozilla and the Internet Archive for a special night: The Battle to Save Net Neutrality. Tickets are available here.

You’ll be able to watch a discussion featuring former FCC Chairman Tom Wheeler; Representative Ro Khanna; Mozilla Chief Legal and Business Officer Denelle Dixon; Amy Aniobi, Supervising Producer, Insecure (HBO); Luisa Leschin, Co-Executive Producer/Head Writer, Just Add Magic (Amazon); Malkia Cyril, Executive Director of the Center for Media Justice; and Dane Jasper, CEO and Co-Founder of Sonic. The panel will be moderated by Gigi Sohn, Mozilla Tech Policy Fellow and former Counselor to Chairman Wheeler. It will discuss how net neutrality promotes democratic values, social justice and economic opportunity, what the current threats are, and what the public can do to preserve it.

The post Busting the myth that net neutrality hampers investment appeared first on The Mozilla Blog.

I modified a script for tree view of vue, it works but i have a problem when i do click over the parent li, beacuse it is opened all li elements of the same level and i need to open only the li who i clicked.

on the original script is added a children elements when you clicked two times, but in the modified script is not required.

i dont know who is the problem with the script, i tryed to open the element of the list by index but it is not working

Original script:

// demo data var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'child folder', children: [ { name: 'hello' }, { name: 'wat' } ] }, { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'hello' }, { name: 'wat' } ] } ] } ] } // define the item component Vue.component('item', { template: '#item-template', props: { model: Object }, data: function () { return { open: false } }, computed: { isFolder: function () { return this.model.children && this.model.children.length } }, methods: { toggle: function () { if (this.isFolder) { this.open = !this.open } }, changeType: function () { if (!this.isFolder) { Vue.set(this.model, 'children', []) this.addChild() this.open = true } }, addChild: function () { this.model.children.push({ name: 'new stuff' }) } } }) // boot up the demo var demo = new Vue({ el: '#demo', data: { treeData: data } }) body { font-family: Menlo, Consolas, monospace; color: #444; } .item { cursor: pointer; } .bold { font-weight: bold; } ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; } <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script> <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <ul v-show="open" v-if="isFolder"> <item class="item" v-for="model in model.children" :model="model"> </item> <li class="add" @click="addChild">+</li> </ul> </li> </script> <p>(You can double click on an item to turn it into a folder.)</p> <!-- the demo root element --> <ul id="demo"> <item class="item" :model="treeData"> </item> </ul>

Modified Tree View:

// demo data var data = [ { "id":"{module:1}", "title":"Almacenes", "children":[ { "id":1, "title":"demox", "children":[ { "id":2, "title":"aaaa" } ] }, { "id":2, "title":"Compras" }, { "id":3, "title":"Bancos" }, { "id":4, "title":"Contabilidad" }, { "id":5, "title":"Gestion de Ventas" } ] }, { "id":"{module:2}", "title":"Inicio", "children":[ { "id":7, "title":"Punto de Venta" } ] } ] // define the item component Vue.component('item', { template: '#item-template', props: { model: {} }, data: function () { return { open: false } }, methods: { isFolder: function (key) { return this.model[key].children && this.model[key].children.length }, toggle: function (key) { console.log(key); if (this.isFolder(key)) { console.log(this); this.open = !this.open; //this.$children[key].open = !this.$children[key].open; //console.log(this.$children[key].open); } }, changeType: function (key) { if (!this.isFolder(key)) { Vue.set(this.model[key], 'children', []) this.addChild() this.open = true } }, addChild: function (key) { this.model[key].children.push({ name: 'new stuff' }) } } }) // boot up the demo var demo = new Vue({ el: '#demo', data: { treeData: data } }) body { font-family: Menlo, Consolas, monospace; color: #444; } ul{ list-style-type: none; } .item { cursor: pointer; } .bold { font-weight: bold; } ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; } <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script> <!-- item template --> <script type="text/x-template" id="item-template"> <ul> <li v-for="(item, index) in model" :key="index"> <div :class="{bold: isFolder(index)}" @click="toggle(index)" >{{ item.title }} <span v-if="isFolder(index)">[{{open ? '-' : '+'}}]</span> </div> <ul v-show="open" v-if="isFolder(index)"> <item class="item" :model="item.children"> </item> <li class="add" @click="addChild(index)">+</li> </ul> </li> </ul> </script> <p>(You can double click on an item to turn it into a folder.)</p> <!-- the demo root element --> <div id="demo"> <item class="item" :model="treeData"> </item> </div>

full error;

[Vue warn]: Error compiling template: Navbar - Component template requires a root element, rather than just text. found in ---> <Navbar> <Home> at C:\Users\admin\Documents\Coding\Websites\Total- Response\src\components\Home.vue <App> at C:\Users\admin\Documents\Coding\Websites\Total- Response\src\App.vue <Root>

It's not rendering any content on screen though the vue in browser tool detects the Navbar custom component. I think it might be something with how I'm declaring my component but i'm still fairly new at vue. I've looked all over for solutions but to no avail, so any help would be greatly appreciated!
code;
-main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import Navbar from './components/Navbar' import router from './router' Vue.config.productionTip = false Vue.component('Navbar', { template: 'Navbar', name: 'Navbar' }) /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App, Navbar } })

-app.vue

<template> <div id="app"> <header> </header> <main> <router-view></router-view> </main> </div> </template> <script> export default { name: 'app' } </script> <style lang="less"></style>

-home.vue

<template> <div> <navbar></navbar> </div> </template> <script> export default { name: 'home' } </script> <style lang="less"> </style>

-navbar.vue

<template name="Navbar"> <div id="Navbar" class="nav"> <a href="index.html"><div class="logo"></div></a> <div class="navButton"> <center><div class="navButtonIcon"></div></center> </div> <div class="navpane"> <center> <a href="portfolio.html"><div class="navtile">Portfolio</div></a> <a href="packages.html"><div class="navtile">Packages</div></a> <a href="contact.html"><div class="navtile">Contact Us</div></a> <a href="login.html"><div class="navtile">Login</div></a> </center> </div> </div> </template> <script> export default { name: 'Navbar' } </script> <style lang="less"> @backgroundColor: #355477; @secondaryColor: #23374c; @textColor: #000; @baseFontSize: 1em; .nav { position: fixed; top: 0; left: 0; width: 100vw; height: 150px; background-color: @backgroundColor; display: grid; grid-template-columns: 20px repeat(7, 1fr) 10px; z-index: 2; } .logo { background-image: url("../assets/TotalResponseLogo.png"); background-repeat: no-repeat; margin-left: 20px; grid-column-start: 2; grid-column-end: 4; height: 150px; width: 250px; } .navButton { grid-column-start: 8; grid-column-end: 9; width: 150px; height: 150px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .navButtonIcon { width: 80px; height: 80px; padding: 10px 0; background: url("../assets/navbuttonAnimation.svg"); background-position: 0px; background-repeat: no-repeat; } .navpane { position: absolute; top: -2000px; width: 100%; z-index: -1; } .navtile { width: 90%; height: 80px; border-radius: 5px; margin: 10px 0; padding-top: 18px; background-color: @secondaryColor; text-align: center; font-size: @baseFontSize + 1em; text-decoration: none; color: @textColor; z-index: -1; } @keyframes activateNav { from {top: -2000px;} to {top: 100px;} } @keyframes activateNavtiles { 0% {margin: 10px 0;} 40% {margin: 14px 0;} 80% {margin: 26px 0;} 100% {margin: 12px 0;} } @keyframes deactivateNav { 0% {top: 80px;} 99% {top: 2000px;} 100% {top: 2000px; display: none;} } @keyframes deactivateNavtiles { 0% {margin: 12px 0;} 50% {margin: 18px 0;} 100% {margin: 26px 0;} } @keyframes navButtonAnimation { 100% {background-position: -1440px;} } @keyframes navButtonAnimationReverse { 0% {background-position: -1440px;} 100% {background-position: 0px;} } .navpaneAnimation { animation-name: activateNav; animation-duration: .7s; animation-iteration-count: 1; animation-fill-mode: forwards; display: inline; } .navtileAnimaton { animation-name: activateNavtiles; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .navpaneAnimationExit { animation-name: deactivateNav; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .navtileAnimatonExit { animation-name: deactivateNavtiles; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .navButtonAnimation { animation: navButtonAnimation .4s steps(18); animation-iteration-count: 1; animation-fill-mode: forwards; } .navButtonAnimationExit { animation: navButtonAnimationReverse .5s steps(18); animation-iteration-count: 1; animation-fill-mode: forwards; } a { text-decoration: none; } </style>

I'm trying to create a chat in which users can create 1 on 1 conversations or even group conversations. I'm using Laravel 5.5 and Vue.js

From what I read from the documentation to join a chat, with a wild card is trough:

Echo.join('chat.'{roomId}) //.here() //.joining() //.leaving() .listen('MessagePosted', (e) => { //Some action }); });

and in routes/channels.php I should use

Broadcast::channel('chat.{roomId}', function ($user, $roomId) { //some form of authentication });

But where should I place the Echo function?

I'm creating the Vue app through

const app = new Vue({ el: '#app', data: { //Some arrays }, methods: { //some methods }, created() { //some axios functions to happen when it is created Echo.join('chatroom') //.here() //.joining() //.leaving() .listen('MessagePosted', (e) => { console.log(e); this.messages.push({ message: e.message.message, user: e.user }); }); }

});

As you can see I used to create a general channel in which every instance created of #app would join but I want to change that to join just a certain channel.

Did anyone of you integrate PouchDB / vue-pouch-db within your Vue.js app? I got an error when defining PouchDB database.

I had used below definitions:

import PouchDB from 'pouchDB' or import PouchDB from 'vue-pouch-db' or const PouchDB = require('vue-pouch-db') const db = new PouchDB('database_name') or const db = PouchDB('database_name')

None of them works for me.

Errors:

• when declaring new PouchDB = > PouchDB is not a constructor
• when declaring PouchDB = > PouchDB is not a function

What is the proper way to initialize PouchDB in Vue ?? Thanks a lot !

I want to separate the styles in a Vue.js component in modules. Each style module will have far more than just a class, and new classes will be added regularly. So, it will be hard to change the entire component's template. So, I'm looking for a more practical solution.

I came with the idea of, using a v-if in the styles, but not exactly sure how it should be implemented or if such thing is possible after all.

It will be way more practical, if just depending on the name sent with props, the entire styles changes.

<template> <div class="color-text"> Text in the color of the class with just the name </div> </template> <script> export default { name: 'comp', props: ['name'] } </script> <!-- General styles --> <style scoped> div{ float: right; } </style> <!-- red styles --> <style module v-if="name === 'red'"> .color-text{ color: red; } </style> <!-- blue styles --> <style module v-if="name === 'blue'"> .color-text{ color: blue; } </style> <!-- green styles --> <style module v-if="name === 'green'"> .color-text{ color: green; } </style>

Very new to Vuejs 2. Have a question on how to enumerate through a dynamic set of data that has a dynamic key? Take this data for instance (this is from a 3rd party -- so unable to change data -- and shortened for readability):

{ "143": { "account_id": 1, "name": "Account 1", "groups": [ { "1610": { "name": "Group 1610", "meetings": [ { "20170816": [ { "id": 10755, "name": "Untitled" } ] } ] } } ] } }

Then I have a .vue file that has a template that does this:

<div v-for="(account, accountKey) in accounts"> <div>{{ account.name }} ({{ accountKey }})</div> <div v-for="(group, groupKey) in groups"> <div>{{ group.name }} ({{ groupKey }})</div> <div v-for="(meeting, meetingKey) in meetings"> <div>{{ meeting.name }} ({{ meetingKey }})</div> </div> </div> </div>

This doesn't render anything. There are several things I need to here, but not sure how to accomplish in Vuejs.

1. Need to be able to pull the key (as it's the identifier) for each of the records.
2. Need to be able to access the individual data on record, of course.

Anyone come across something similar that can help with?

Thanks!

I am trying multiple ajax calls and I need syn call of ajax, how to set up in vue resource for sync ajax call.