One thing is for sure: technology continues to progress, but these three interface innovations could completely replace touchscreens for good.

Interface Innovations: 3 Futuristic Devices That Could Replace Touch Screens

While the earliest touchscreen interface was conceived all the way back in 1965, it wouldn't be until 2007 — the year Apple released the first iPhone — that touchscreens would take over and become nearly ubiquitous across mobile phone and tablet devices.

Integration of touchscreen technology in smartphones and tablets has completely revolutionized how companies manufacture many electronics today ... Read the original article on SlashGear. Beef Stroganoff Is Classic Comfort Food That We've Perfected ...

To produce detailed sound, you require a larger footprint than is possible in your ultra-thin TV. What you need is a soundbar and subwoofer combo.

10 Of The Best Soundbar And Subwoofer Combos, Ranked By Price

This is where a soundbar and subwoofer come into play, as the addition of multiple external drivers and a dedicated bass unit significantly improve the listening experience without affecting the TV's compact appearance.

Companies in the Consumer Goods sector have received a lot of coverage today as analysts weigh in on International Flavors & Fragrances (IFF – Research Report) and General Mills (GIS ...

Analysts Offer Insights on Consumer Goods Companies: International Flavors & Fragrances (IFF) and General Mills (GIS)

Emerging Specific segments and regional for Extended Warranty Service for Consumer Electronics Market. An objective valuation of the trajectory of the Market. Recommendations to Top Companies for ...

Future of Extended Warranty Service for Consumer Electronics Market Growth: 2031 Current Trends Analysis

About TCL Electronics TCL Electronics (1070.HK) is a fast-growing consumer electronics company and a leading player in the global TV industry. Founded in 1981, it now operates in over 160 markets ...

TCL Elevates Gaming Entertainment with Increasingly Innovative QD-Mini LED TVs and Features

Image Credit: Virendra Saklani/Gulf News Dubai: It’s advantage shoppers as UAE’s tech and electronics sector sees a major reset of retail (and wholesale) prices on gadgets and appliances ...

Advantage UAE consumers as smartphone, electronics retail prices keep dropping

Slash Gear

slashgear

I recently set up an end-to-end testing stack to make sure I wasn't going to introduce any functional regressions to my blog. With several years of experience using E2E (End to End) testing technologies, I still encountered some difficulties in setting it up. In order to save you time, I have written you a step-by-step tutorial for the installation of the tools necessary to have an efficient test stack in a few minutes. Make it run locally first You need to install some dependencies to your project first. For me, the project was a quite simple Gatsby site, but you could settle it on whatever website you develop that has a file. In this case, I will start from a newly initialised package.json package. Make sure you have a Chromium or Chrome browser installed locally. We are really lucky because teams have developed a CLI topic that does this job for you. WebdriverIo yarn add -D @wdio/cli Then all you need is to trigger the initialisation of a new configuration. The CLI will show you a prompt you should follow. yarn wdio config Here is what you should do for each question: Select first . On my local machine You should definitely use . The Gherkin language is so great that it can . cucumber declare humanly readable user behaviors Choose the compiler you need, I personally use . You could decide if you want to handle Babel or Typescript depending on your habits. No For the I like to use the default value. Where are your feature files located? Same for step definitions, use the default value. Let's see what tests WebdriverIo will autogenerate. I wouldn't use that if it is the first time you’re setting up those kinds of testing stacks, say . Do you want to use page objects ? n You should select reporter here. spec Please select service only. chromedriver Override the base URL with your local context (for example, add the port on which you expose your app locally). Normally the CLI generates some files for you and adds the missing dependencies you need. Here is my package.json {
  "name": "example-wdio",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@wdio/cli": "^7.9.1",
    "@wdio/cucumber-framework": "^7.9.1",
    "@wdio/local-runner": "^7.9.1",
    "@wdio/spec-reporter": "^7.9.0",
    "chromedriver": "^92.0.1",
    "wdio-chromedriver-service": "^7.2.0"
  }
} You should see a file in folder. login.feature ./features/ Feature: The Internet Guinea Pig Website

  Scenario Outline: As a user, I can log into the secure area

    Given I am on the login page
    When I login with <username> and <password>
    Then I should see a flash message saying <message>

    Examples:
      | username | password             | message                        |
      | tomsmith | SuperSecretPassword! | You logged into a secure area! |
      | foobar   | barfoo               | Your username is invalid!      | With the steps definitions in ./step-definitions/steps.js const { Given, When, Then } = require('@cucumber/cucumber')

Given(/^I am on the (\w+) page$/, async (page) => {
  await browser.url(`https://the-internet.herokuapp.com/${page}`)
})

When(/^I login with (\w+) and (.+)$/, async (username, password) => {
  await $('#username').setValue(username)
  await $('#password').setValue(password)
  await $('button[type="submit"]').click()
})

Then(/^I should see a flash message saying (.*)$/, async (message) => {
  await expect($('#flash')).toBeExisting()
  await expect($('#flash')).toHaveTextContaining(message)
}) Let's see what those default example tests are doing! For that, you just have to type this in your console and tada 🎉 yarn wdio run wdio.conf.js Here is the log it will generate thanks to the reporter! spec ------------------------------------------------------------------
[chrome 92.0.4515.131 mac os x #0-0] Running: chrome (v92.0.4515.131) on mac os x
[chrome 92.0.4515.131 mac os x #0-0] Session ID: edd73da800a210e7c677c69cd064004f
[chrome 92.0.4515.131 mac os x #0-0]
[chrome 92.0.4515.131 mac os x #0-0] » /features/login.feature
[chrome 92.0.4515.131 mac os x #0-0] The Internet Guinea Pig Website
[chrome 92.0.4515.131 mac os x #0-0] As a user, I can log into the secure area
[chrome 92.0.4515.131 mac os x #0-0]    ✓ Given I am on the login page
[chrome 92.0.4515.131 mac os x #0-0]    ✓ When I login with tomsmith and SuperSecretPassword!
[chrome 92.0.4515.131 mac os x #0-0]    ✓ Then I should see a flash message saying You logged into a secure area!
[chrome 92.0.4515.131 mac os x #0-0]
[chrome 92.0.4515.131 mac os x #0-0] As a user, I can log into the secure area
[chrome 92.0.4515.131 mac os x #0-0]    ✓ Given I am on the login page
[chrome 92.0.4515.131 mac os x #0-0]    ✓ When I login with foobar and barfoo
[chrome 92.0.4515.131 mac os x #0-0]    ✓ Then I should see a flash message saying Your username is invalid!
[chrome 92.0.4515.131 mac os x #0-0]
[chrome 92.0.4515.131 mac os x #0-0] 6 passing (3s) For now, the tests are not testing your application at all. You will find many resources on how to use to write a great test to describe and test your application features. Cucumber JS Configure the Github action workflow Now that we have managed to run E2E tests on our machine, we just need to set up a continuous integration workflow that will automatically check on your Pull Request and on your branch that all the tests are ok. main I use it for most of my projects Github Action and I'm happy with it, so the following example will use this tool. However, the principle also works with Gitlab, Jenkins, or other pipelines. With Github Action you need to set up a Yaml file to describe your workflow. Let's create file in your project! ./.github/workflows/continuous-integration.yml name: Continuous Integration

on:
  push:
    branches:
      - '**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # First you need to install a chromium browser in your runner
      - name: Install Chromium
        run: sudo apt-get install chromium-browser

      # You fetch the current ref
      - uses: actions/checkout@v2

      # Use Node version above 14.x you want to use
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 16.x

      # Install your dependencies (with yarn, npm no matter)
      - run: yarn install
        name: Install dependencies

      # This is where you could build your app
      # You could also start your server process (take a look at https://github.com/Slashgear/slashgear.github.io/blob/source/.github/workflows/continuous-integration.yml)

      # Run your test with the same command you uses locally
      - run: yarn wdio run wdio.conf.js
        name: Running E2E tests Let's try that! 🚀 😭 Sadly you should face a very common error with E2E testing with chrome. [0-0] 2021-08-12T20:34:12.293Z ERROR webdriver: Request failed with status 500 due to unknown error: unknown error: Chrome failed to start: exited abnormally.
[0-0]   (unknown error: DevToolsActivePort file doesn't exist)
[0-0]   (The process started from chrome location /usr/bin/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
[0-0] 2021-08-12T20:34:12.293Z ERROR webdriver: #0 0x5631c488ba63 <unknown> basically means your browser did not succeed to start. The main reason for the issue is the fact that you ask WebdriverIo to start Chrome browser with a Graphic User Interface on a ubuntu runner that doesn't have a screen at all 😅. DevToolsActivePort file doesn't exist We need to create a new configuration of Webdriver specific to GitHub action that extends our basic one. Let's create next to ! wdio-github.conf.js wdio.conf.js const basicConfig = require('./wdio.conf')

exports.config = {
  ...basicConfig.config,
  // We only need to override the Chrome configuration of capabilities
  capabilities: [
    {
      maxInstances: 5,
      browserName: 'chrome',
      acceptInsecureCerts: true,
      // We need to extends some Chrome flags in order to tell Chrome to run headless
      'goog:chromeOptions': {
        args: ['--headless', '--disable-gpu', '--disable-dev-shm-usage'],
      },
    },
  ],
} We now just have to change the command in our Github Workflow YAML file. You just need to push it and GitHub will start it for you! yarn wdio run Setup multi-browser configuration! Chrome is not the only browser, and I hope it never will never be! And I won't show you here what great features you could use with remote running solutions like or directly with WebdriverIo. BrowserStack Saucelabs Let's configure a Firefox locally! Make sure to install a Java JDK 8 on your machine. A small trick for macOS users like me run does the job! brew install adoptopenjdk/openjdk/adoptopenjdk8 Run to install selenium services working with WebdriverIo. yarn add -D @wdio/selenium-standalone-service Make sure you have Firefox installed locally. Now the last thing we need to do is to update our configuration to add firefox capabilities. In , just replace and arrays with this wdio.conf.js capabilities services {
  capabilites: [
    {
        maxInstances: 5,
        browserName: 'chrome',
        acceptInsecureCerts: true,
    },
    {
        maxInstances: 5,
        browserName: 'firefox',
        acceptInsecureCerts: true,
    }
  ],
  services: ['chromedriver', 'selenium-standalone'],
} If you run the command now, it will trigger both tests on Firefox and Chrome and that is completely awesome! yarn wdio run wdio.conf.js The last thing we need to do is to update our Github-specific configuration in order to make it work also in your continuous integration. You need to update too, in order to add Firefox and to make it boot . capabilities Headless In wdio-github.conf.js const basicConfig = require('./wdio.conf')

exports.config = {
  ...basicConfig.config,
  // We only need to override the Chrome configuration of capabilities
  capabilities: [
    {
      maxInstances: 5,
      browserName: 'chrome',
      acceptInsecureCerts: true,
      // We need to extends some Chrome flags in order to tell Chrome to run headless
      'goog:chromeOptions': {
        args: ['--headless', '--disable-gpu', '--disable-dev-shm-usage'],
      },
    },
    {
      maxInstances: 5,
      browserName: 'firefox',
      acceptInsecureCerts: true,
      'moz:firefoxOptions': {
        args: ['-headless'],
      },
    },
  ],
} And that's all folks ! Have fun covering your application with E2E tests! Don't hesitate to @ me on Twitter if this helped you. How to If you need to see the example application I used in this tutorial, take a look at . this example Github repository This article was first published on GitHub

How to Set Up End to End Tests with WebdriverIO on Github Action ?

Heyo Hackers: This Week in Tech

Recently, Gogoro just rolled out on all new electric scooter called the Gogoro 2 Smartscooter along with its plans to add a of more than 500 battery stations to the already existing 350 all over . Looking back, just 2 years ago was when Gogoro revealed itself to the world and was known to the world as the Tesla on two wheels. network Taiwan Gogoro Smartscooters Gogoro is an emission free scooter that runs solely on electricity thanks to the Panasonic Lithium Ion 18650 battery. Gogoro’s existence stems from the hardships of living in a populated city with air pollution, sky rocketing gas prices, and the cram-full roads that brings peaking traffic. Many people who live in densely populated cities resort to scooters as transportation but scooters still run on expensive gas and emit CO2. Given these reasons, Gogoro hopes to be the replacement for scooters and aims to be the perfect transportation in densely populated cities. What makes Gogoro’s Smartscooter so special besides running 100% on electricity is its charging design. Instead of plugging into an outlet to recharge, the Smartscooter runs on swappable batteries. This battery swapping design is well supported by the Gogoro Energy Network. The Gogoro Energy Network is a modular battery swapping infrastructure designed to be deployed everywhere like gas stations. Riders would be able to swap out depleted batteries at this network for a monthly subscription fee. For example, if a rider is running out of battery, he or she could pull up to a battery station and exchange the low battery for a new one, refueling the vehicle in a matter of seconds. Additionally, Gogoro’s smart phone app would provide information on the vehicle’s battery level, the nearest swap stations, and the correct statistics on battery reservations. Gogoro Battery Charging Station Why we need Gogoro? Some of the world’s biggest cities are getting larger. According to the , 54% of the world’s population today lives in urban areas and is expected to increase to 66% by 2050. With so many people cramped in small areas, they will need effective and reliable transportation that doesn’t put weight on the environment. United Nations Gogoro will be the key to solving city pollution and traffic density by providing “a more intelligent and adaptive system for today’s most dynamic cities”. Like Tesla, Gogoro has bigger plans for its batteries and network of charging stations. According to Gogoro, the company now has a GoStation less than every 1.3 kilometer in Taipei. Additionally, Gogoro envisions its batteries to be able to be the power sources for data centers, homes, and offices with the confidence that its low-cost technology can better perform than a traditional lead acid battery. According to Gogoro, a charged battery at 50% to 75% capacity can power a house for an hour, a laptop for 25 hours, a home furnace for an evening, or server rack with 40 servers for 20 minutes. Infamous Gogoro Battery Packs What makes Gogoro an unique hardware startup? In many ways Gogoro is similar to Tesla. Gogoro, though transforming the traditional concept of scooter and transportation, is more of a technology company than a vehicle company. Like Tesla, Gogoro does not sell through dealerships but instead has its own stores that showcase its Gogoro Smartscooters, batteries, phone app, and charging stations. Image by SlashGear Gogoro Smartscooters are not just vehicles for transportation. There are 30 sensors on the scooter including a digital compass, a shock sensor, and a thermal sensor. The Gogoro Smartscooter can analyze riding patterns, optimize energy use, and dim its lights when necessary to maximize energy. Every 10 minutes, the scooter uploads information on its condition online. Riders can also download sound effects and lighting patterns to further customize their scooters. Everything creative and versatile can be done through its smartphone app. The co-founder of Gogoro, Horace Luke, comes from a background of being the chief innovation officer at HTC, a mobile phone and consumer electronics company. Horace Luke had visions of making Gogoro more than just a scooter, putting most things you can find and use on your smartphone on Gogoro as well. Display of Gogoro’s smartphone app. Gogoro’s Tomorrow & Upcoming Challenges. Despite their rapid success, Gogoro and its charging network is now facing the classic chicken and the egg problem. Like Tesla, Gogoro has the problem that people won’t buy scooters if the swap stations aren’t available, but it doesn’t make sense to do a mass rollout of swap stations without potential customers. For Gogoro, each swap station costs less than $10,000, which is a significant advantage over Tesla’s $500,000 cost of a car battery swap station. Gogoro is more likely to be able to afford to do a big rollout and then wait for the customers to come. Gogoro also needs to find cities that are willing to adopt its scooters and charging stations. Horace Luke says that Gogoro is in talks with a number of urban areas and that it has enough capital to launch in one or two big cities. However. cities needs to have the right population density and the population has to recognise electric scooters as the key to a better future. Some cities in Southeast Asia where scooters are already ubiquitous might potentially work in Gogoro’s favour. A smaller city like San Francisco or Amsterdam could also work. However, Gogoro would have to do a lot of work convincing the population that scooters are the most effective means of transportation. In whichever launch cities it chooses, Gogoro will also have to work out the complicated logistics of figuring out where the swap stations go. To sums things up, Gogoro launched a vehicle and powers it with a citywide network of proprietary battery swapping stations. These vehicles have integrated systems that make it them comparable to IoT gadgets. Gogoro’s batteries will be sold for other purposes while combating pollution by reducing smog, balancing power grids, and clearing city traffics. This seems like a lot to do, but to change the world and put it in a better place, maybe this is what you have to offer. is the Co-Founder of , a new age product development and sourcing management firm that focuses on manufacturing and go-to market strategies. Jasper Chou LYNKD

Taiwan Startup Gogoro aka The Scooter of Tesla

Photo courtesy of pixabay.com A prospective founder must ask: is my idea viable? But this question also must be addressed throughout the startup’s life. This story is my cheat sheet for evaluating the viability and strategy of startups. I spent 10 years with (now Pivotal), working with hundreds of startups. Some like TrueCar, TaskRabbbit and Twitter matured and succeeded. Others did not. Now, I am an operating partner at an angel fund, leading two startups and advising others. These experiences have revealed insights and patterns that help me declutter the confusion and distractions common in startups. Pivotal Labs Of course they will come I was sitting in , listening to a founder tell me about her startup. I’ve had these conversations before and they can be challenging. The founder is seeking advice and I want to help. But it can be hard to digest her idea, its obstacles and opportunities, so that I can discover the key questions that’ll lead to a productive discussion. Verve Coffee One day, during a different conversation with a fledgling entrepreneur, I had a thought. This thought became the basis for my cheat sheet. I had been invited to give a talk at a local university entrepreneurs club. While socializing after my talk, a young man described his startup idea with such confidence, I was reminded of a key line in the 1989 film, . “If you build it, they will come.” The young man, despite some glaring holes in his premise, seemed to assume success once he built his vision. Field of Dreams I don’t fault a founder for such conviction; if you don’t believe in your idea, ? why would anyone else But it’s better to be a skeptic and ask, “If we build it, would anyone care?” It’s this question that led to what I call the . why The Field of Dreams Test The Field of Dreams Test The Field of Dreams Test is a diagnostic tool that helps me organize key questions and considerations about a startup. I focus on these three areas: user pain user experience economics User Pain Instead of just describing the primary use case or the user’s problem, I frame it as a “user pain”. People are more likely to seek and accept help for pain than for a use case. What is the frequency and severity of the pain? Can the user live with it? Is it an inconvenience or something they need addressed? What are the root causes? What are the symptoms? Diagnosing a root cause can be difficult, but only addressing symptoms is problematic. A user will abandon a “solution” that addresses a symptom. . Sticky experiences address a root cause For example, understood that a root pain with digital photos is their permanence; users don’t want every photo to exist forever. If Snap only addressed symptoms, they might have offered better sharing permissions and security instead of the expiring photos they’ve become known for. Snap(Chat) User Experience I suggest thinking about instead of defining a . It’s too tempting to dream about the future when designing a solution, detached from the user’s needs. user experience solution Look at any interaction the user will have with a startup’s product, beyond just the application’s user interface (UI). Consider Uber and their approach to hailing and paying for a taxi. The user experience is the main combatant against overcoming inertia. People live with many inconveniences and pains, adopting and relying on workarounds. Have you ever watched bad TV because the remote control was out of reach? Remember that the . user experience needs to be compelling How does the startup address the user’s pain? Is the experience good enough to displace alternatives? How is it different? Is it a joyous experience? For this exercise, I’d avoid detailed designs. Focus on a succinct summary of the user journey and how this resolves the user’s “pain”. Economics A startup should have a hypothesis for economic viability. Before worrying about detailed business plans, a startup needs to assess the basics: cost, growth and success criteria. plausible Costs Are your costs viable? What would make them viable? What is the effort for a user to switch to the product? What is the learning curve? What is the overhead of disrupting existing habits, importing of data or building a new network? What are competitors’ costs? Is it easy for a competitor to copy the startup’s ideas? Growth How might user adoption grow? Is there natural virality or network benefits? (example: photo sharing) Success What defines a win for the user? For the startup? Do these conflict or support each other? The Field of Dreams Test doesn’t determine success or failure. It is a starting point to organize a discussion or a plan. These are not new ideas nor the only ones to consider. But focussing on user pain, user experience and economics can clear your thinking. Applying the Field of Dreams Test I have multiple Google accounts. I use Google Gmail, Drive, Calendar, etc. Sometimes I can’t remember where a piece of information is. Or I want to find all my data on a topic. I’d like to search my data, across all Google products (and ideally, across all my Google accounts). The is clear: why must I search 20 different places for data that is all mine? (I have a lot of Google accounts.) I can imagine a splendid , where I have one search box and I can filter results, quickly locating information across multiple, heterogenous sources. user pain user experience But , specifically costs, the idea. It isn’t my costs of building nor operating such an application, but it is the low cost for Google to add this functionality. economics kill Maybe Google has a good reason for omitting this feature. Maybe it isn’t a priority for them. But any success my service enjoys is market validation that tells Google to add the feature and my startup. end Mailbox: A Mixed Example launched in February of 2013 and Dropbox them in March of 2013. I’ll highlight a few aspects of a Field of Dreams analysis for Mailbox. Mailbox acquired Mailbox observed that people struggled to keep up with email. Furthermore, they often used their email as a todo list, though it was a kludgy tool for such a use case. User Pain: Users loved the UX/UI of Mailbox. (There were by the time of the acquisition.) The app wasn’t just an email client, but a tool optimized to turn email into a todo list and help clear the user’s inbox. User Experience: 1.3MM users on a waiting list MailBox UI, from Slashgear article The insights about the pain of email, combined with the Mailbox approach, users’ emotions regarding email. They went from feeling to and organized. transformed overwhelmed empowered The economics of Mailbox are . Mailbox wasn’t an email host service, but allowed users to use their Google Gmail. This lowered the friction of user adoption, but if Google cloned the Mailbox experience, there would be for users to with Mailbox. Economics: murky little incentive stick Google, in my opinion, did just that. implements many of the ideas of Mailbox. I wonder what would have become of Mailbox if they were not acquired so quickly. Inbox by Gmail The Mailbox example shows that the Field of Dreams Test is a heuristic for assembling evaluation criteria; it isn’t an algorithm that provides a conclusion. How will you use this tool? The Field of Dreams Test is an approach to evaluating problem, solution and effort, in the context of startups. It has guided me when hearing pitches and helped me advise founders. It can be applied to evaluating competitors or alternatives options users may have. If you follow ’s beachhead guidance (segmentation approach), you can apply the Field of Dreams test to the beachhead / segment. Crossing the Chasm The Field of Dreams Test isn’t a one time exercise. It can (and I think should) be used iteratively. It can help founders resolve the see-saw deliberation to start a company or not. And if she did commit to the wild ride, chasing users and investors, and playing whack-a-mole with perpetual crises, it can help her sort through the noise. I encourage you to let me know your thoughts, stories and any tips you might have. Please ♡ this post and follow me for updates — on Medium or on twitter ( ). csepulv

If we build it, why would anyone care?

Not too long ago regular expressions were terrifying to me — to my untrained eye they were nothing more than large strings of gibberish. Unfortunately, I let those strings of ‘gibberish’ scare me for far too long. When I finally decided to make the plunge and learn what regex was all about, I was surprised at how simple the basic concepts were to learn. Don’t make the same mistake I did. Yes, regex can be very complex, but it’s actually pretty easy to learn the basics. So, that’s why I’m here. Jump in and learn basic regex with me… (and don’t forget to follow me on Medium!) In JavaScript, a regular expression is simply a type of object that is used to match character combinations in strings. Make your first Regular Expression There are two ways to construct a regular expression, by using a regular expression literal, or by using the regular expression constructor. Below, you’ll see an example of each of the methods. Each represent the same pattern — the character ‘c’ followed by ‘a’ followed by ‘t’. // Regular Expression Literal - Uses slashes ( / ) to enclose
var option1 = /cat/;

// Regular Expression Constructor
var option2 = new RegExp("cat"); As a general rule, if your regular expression will remain constant, i.e. your expression will not be changing, it is best to use a regex literal. If your regular expression will be changing, or relying on other variables, it is better to use the constructor method. RegExp.prototype.test() Remember when I said a regular expression is an object? This means they have a number of methods we can use. The most basic method is test, which returns a Boolean: True: the string contains a match of the regex pattern False: no match found console.log(/cat/.test(“the cat says meow”));
// true console.log(/cat/.test(“the dog says bark”));
// false Basic Regex Cheat Sheet Honestly, the trick to learning regular expressions is memorizing the common character groups and symbols. I strongly encourage you to take a few hours and memorize the table below, then come back and we’ll continue learning. If you prefer to learn as you read, I’ll still introduce everything as we go, you just may have to refer back here from time to time. Symbols — (period) Matches any single character, except for line breaks. . — Matches the preceding expression 0 or more times. * — Matches the preceding expression 1 or more times. + — Preceding expression is optional (Matches 0 or 1 times). ? — Matches the beginning of the string. ^ — Matches the end of the string. $ Character groups — Matches any single digit character. \d — Matches any word character (alphanumeric & underscore). \w — Character Set: Matches any single character from the character within the brackets. You can also do a range such as [XYZ] [A-Z] — Matches one or more of any of the characters in the set. [XYZ]+ — Inside a character set, the ^ is used for negation. In this example, match anything that is NOT an uppercase letter. [^A-Z] Flags: There are five optional flags. They can be used separately or together and are placed after the closing slash. Example: /[A-Z]/ I’ll only be introducing 2 here. g — Global search g — case insensitive search i Advanced — Capturing Parenthesis: Matches x and remembers it so we can use it later. (x) — Non-capturing Parenthesis: Matches x and does not remembers it. (?:x) — Lookahead: Matches x only if it is followed by y. x(?=y) Test()-ing our Learning: Before jumping into the projects below, lets test some of the above concepts out. Say we want to test a string for any numeric digits. We can use \d to accomplish this. console.log(/\d/.test('12-34'));
// true The above returns true as long as there is at least one numeric digit in the string. What if we want to match the format though? We can use multiple \d characters to define a format: console.log(/\d\d-\d\d/.test('12-34'));
// true

console.log(/\d\d-\d\d/.test('1234'));
// false What happens if we don’t care how may digits are before and after the ‘ - ’ so long as there is at least one? We can use the + to match the \d one or more times: console.log(/\d+-\d+/.test('12-34'));
// true

console.log(/\d+-\d+/.test('1-234'));
// true

console.log(/\d+-\d+/.test('-34'));
// false To simplify things, we can use parenthesis to group expressions together. Lets say we have a cat meowing and we want to match against that meow: console.log(/me+(ow)+w/.test('meeeeowowoww'));
// true Woah. OK. Lets break that down. There’s a lot going on up here. /me+(ow)+w/

m     => matching a single letter 'm'
e+    => matching the letter 'e' one or more times
(ow)+ => matching the letters 'ow' one or more times
w     => matching the letter 'w' once

'm' + 'eeee' +'owowow' + 'w' As you can see above, when operators like + are used immediately after parenthesis, they affect the entire contents of those parenthesis. Last thing we’ll go over before going into the projects. The ? operator. This makes the preceding character optional. As you’ll see below, both test cases return true because the ‘s’s have been deemed optional. console.log(/cats? says?/i.test('the Cat says meow'));
// true

console.log(/cats? says?/i.test('the Cats say meow'));
// true I’ve also thrown in the /i flag above. This makes our search case-insensitive which is why ‘cats’ will still match with ‘Cats’ Considerations & Tips Because regular expressions are wrapped in slashes, if you ever want to search for a slash, you need to escape it with a backslash. The same is true for characters such as question marks which have special meaning. Here’s an example of how to search for each of these: var slashSearch = ///;
var questionSearch = /?/; \d is the same as [0-9]: Each match a digit character \w is the same as [A-Za-z0-9_]: Each matches any single alphanumeric character or underscore Project: Add spaces in CamelCase: In this example we’re growing really, really tired of camelCase and need a way to add spaces between words. Here’s the example: removeCc('camelCase') // => should return 'camel Case' With Regex, there’s a very easy solution. First, we need to search for all capital letters. We can easily do this with a Character set search and a global modifier: This will match the C in 'camelCase'
/[A-Z]/g But now, how do we add a space prior to the ? C We need to use ! Capturing parenthesis allow us to match a value, and remember it, so that we can use it later! Capturing Parenthesis Use capturing parenthesis to remember our matched capital letter
/([A-Z])/

Access the captured value later with
$1 Above, you’ll see we use to access the captured value. As an aside, if we had two sets of capturing parenthesis, we would use and to reference the captured values, and so on for the number of capturing parethesis. $1 $1 $2 Note, if you need to use parenthesis, but don’t need to capture the value, you can use non-capturing parenthesis: In this example, the x is matched, but is not remembered. (?:x) Alright, back to the task at hand. How do we implement the capturing parenthesis? With the String method! As the second argument, we insert It’s important to use quotes here. .replace() '$1' function removeCc(str){
  return str.replace(/([A-Z])/g, '$1');  
} Hmmm, but wait, it doesn't work? Lets look at the code again. We’re capturing our capital letter, then simply replacing it with the same captured letter! We need to add in our space still! Inside our quotes we insert a space followed by our variable The result is a space after each capital letter $1 function removeCc(str){
  return str.replace(/([A-Z])/g, ' $1');  
}

removeCc('camelCase') // 'camel Case'
removeCc('helloWorldItIsMe') // 'hello World It Is Me' Project: Remove Capital Letters: Now we have a string with a bunch of funky capital letters. Can you figure out how to remove them? This one is similar, but a little trickier than the last project. Take a minute and try and figure it out, then read on.. First, we need to select all of the capital letters. This is similar to above, a character set search with the global modifier: /[A-Z]/g We’ll be using the replace method again, but this time how to we make a character lower case? function lowerCase(str){
  return str.replace(/[A-Z]/g, ???);  
} Here’s a hint: With replace() you can specify a function as the second parameter. We’re going to use an arrow function to un-capitalize the matched value. When using a function with replace() the function will be invoked after the match has been performed, and the function’s result will be used as the replacement string. Better yet, if the match is global and multiple matches are found, the function will be invoked for each match that is found. function lowerCase(str){
  return str.replace(/[A-Z]/g, (u) => u.toLowerCase());
}

lowerCase('camel Case') // 'camel case'
lowerCase('hello World It Is Me') // 'hello world it is me' Project: Capitalize First Letter: Alright, you have all the knowledge to do this. Look at the below code snippet and try to solve it yourself before reading on: capitalize('camel case') // => should return 'Camel case' Did you get it? If not, that’s OK! I’ll show you how… Once again we’re going to use an arrow function in our replace() method. This time however, we only need to search for the very first character in our string. Recall that this is what ^ is used for. Let’s look at ^ in depth for a second. Recall this example from earlier: console.log(/cat/.test('the cat says meow'));
// true When we add in the ^ the function no longer returns true due to the fact that ‘cat’ is not at the beginning of the string: console.log(/^cat/.test('the cat says meow'));
// false We want our ^ to apply to any lowercase character at the beginning of our string, so we’ll add it directly before our character set [a-z]. This will target only the first character if it is a lowercase letter. /^[a-z]/ Notice that we’re no longer using the global modifier as we only want one match. Now, we can plug our regular expression into our replace method and add in an arrow function as the second argument: function capitalize(str){
  return str.replace(/^[a-z]/, (u) => u.toUpperCase());
}

capitalize('camel case') // 'Camel case'
capitalize('hello world it is me') // 'Hello world it is me' Project: Keep Learning That’s the end of this article, but keep learning. Some project ideas: Can you combine the prior three functions into one function that turns a camelCase string into a regular sentence? Can you add a period at the end of the string? Reverse everything! Turn a string into a camelCase Hashtag Post your projects and solutions in the comments! And don’t forget, this is merely the beginning of Regular Expressions, there’s so much more you can do with them!

JavaScript: Learn Regular Expressions for Beginners

A Hitchhiker's Guide to Restaking and Its Risks

রিস্ট্যাকিং এবং এর ঝুঁকির জন্য হিচহাইকারস গাইড

Per Anhalter durch die Neuverpfändung und ihre Risiken

Una guía para autoestopistas sobre retomar y sus riesgos

Guide de l'auto-stoppeur sur le reprise et ses risques

एक सहयात्री की रीस्टेकिंग और उसके जोखिमों के बारे में मार्गदर्शिका

再ステーキングとそのリスクに関するヒッチハイカーガイド

재예약과 그 위험에 대한 히치하이커를 위한 가이드

Um guia do mochileiro para reestabelecer e seus riscos

Путешественник автостопом по пересдаче и ее рискам

Bir Otostopçunun Yeniden Seks Yapma Rehberi ve Riskleri

Hướng dẫn cho người quá giang về việc đặt lại và rủi ro của nó

搭便车者指南：重新抵押及其风险

How to Create a 2D Character Controller in Unity: Part 1

কিভাবে ঐক্যে একটি 2D ক্যারেক্টার কন্ট্রোলার তৈরি করবেন: পার্ট 1

So erstellen Sie einen 2D-Charakter-Controller in Unity: Teil 1

Cómo crear un controlador de personajes 2D en Unity: Parte 1

Comment créer un contrôleur de personnage 2D dans Unity : partie 1

यूनिटी में 2D कैरेक्टर कंट्रोलर कैसे बनाएं: भाग 1

Unity で 2D キャラクター コントローラーを作成する方法: パート 1

Unity에서 2D 캐릭터 컨트롤러를 만드는 방법: 1부

Como criar um controlador de personagem 2D no Unity: Parte 1

Как создать контроллер 2D-персонажа в Unity: часть 1

Unity'de 2D Karakter Kontrol Cihazı Nasıl Oluşturulur: Bölüm 1

Cách tạo bộ điều khiển nhân vật 2D trong Unity: Phần 1

如何在 Unity 中创建 2D 角色控制器：第 1 部分

1811 Dictionary in the Vulgar Tongue: Section S

1811 Dictionary in the Vulgar Tongue: Section H

Running own staking nodes has lots of risks and needs a large amount of money to start. It is hard for individuals to maintain a 24/7 online server and not do anything wrong causing penalties. To help individuals easier to stake and earn rewards, there appears staking-as-a-service. Node providers will take care of the infrastructure and users only need to stake their funds. Node providers provide node operation services. They provide service to individuals and liquid staking derivatives. To individuals, node providers charge a monthly node operation fee or commission fee. To liquid staking derivatives, node providers usually get a percentage of the staking rewards. Lido explains how they choose node operators. There are lots of node providers in the market. They differ in the following aspects: Fee Supporting assets Reliability and safety Source: Staking Rewards Big players have already established large user groups, good reputations, and safe operation records. It is hard for new players to take a large market share. : Big market players believe the opportunities for small players are the following Better UX Supporting long-tailed assets Providing services besides staking, like ecosystem updates, simple financial engineer tools, information websites, and data analysis tools Though small players are hard to compete with large players, : large players do face some challenges Risk of centralization Compliance Security and operation risk Decentralization is the key to a network. If several node providers have a major stake in the network, these node providers are a stratum for cartelization. questions this in his passage “ ”. @djrtwo The Risks of LSD To build a decentralized and permissionless product, compliance is a big problem. . fish believes that “due to how staking looks like fixed income in some sense, this could invite regulators to consider validators closer to financial entities than miners. If this occurs, then there would be no way for validators to stay compliant without becoming a fully licensed custodian and guarding delegator access (which again, may technically be impossible to enforce)” in the “ Stake. 2021 staking ecosystem report” Node operators put safety first because the safety incident can cause asset loss. In Jan 2021, ETH2 validators got slashed due to a bug. Here is the recent slashing history for ETH2 validators. Source: beaconcha.in Node providers are trying to increase the stability of the infrastructure with new tech like SSV. The secret shared validator network is a tech that can reach active-active redundancy. All validators in the network actively produce new blocks. The mechanism is like a multi-sig wallet. Source: OBOL Other techs used for slashing prevention are the local slashing protection database which records messages causing slashing, and remote slasher which records all attestations and blocks received. From the , users do care more about reputation than cost, and node providers are trying to improve their reliability in order to build their reputations. Staking Rewards survey Source: Stake Rewards Also published . here

Stories, News & Mentions about SLASHGEAR

Slashgear’s Stories on HackerNoon

Slashgear's News & Mentions