Tutoriale de programare web

  • JavaScript map Vs forEach: When to Use Each One
    by Sajal Soni on 26 septembrie 2021 at 13:11

    In this article, we’ll discuss the map and forEach methods in JavaScript, and we’ll also go through the differences between them to understand when to use each one. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development. As a part of your day-to-day JavaScript development, you often need to work with arrays. And when you’re working with arrays, you often need to process array elements, and thus you need a way to loop through each element of an array. In JavaScript, forEach and map are two of the most popular methods to work with arrays. The primary purpose of both these methods is to iterate through arrays. Although they may look almost identical, there are certain differences between them. map is used to transform each element of an array, while forEach is used to run a function on each element without changing the array. In this post, we’ll discuss both these methods along with a couple of real-world examples. At the end, we’ll also discuss differences between both these methods. By the end, you’ll understand better when to use each one. The forEach Method The forEach method allows you to execute a function by iterating through each element of an array. It’s important to note that the forEach method doesn’t return anything, and thus, if you try to get the return value of the forEach method, you would get undefined. Instead, it allows you to modify the values of an existing array by applying the callback function on each element of an array. Since it allows you to modify the source array itself, it’s a mutator method. Let’s have a quick look at the following example to understand how the forEach method works. As you can see, we’re calculating the square of all elements of an array. The forEach method is called with each element and we log its square. The return value of this helper method is ignored and the original array doesn’t change. The return value of forEach is always undefined. The map Method The map method which is very similar to the forEach method—it allows you to execute a function for each element of an array. But the difference is that the map method creates a new array using the return values of this function. map creates a new array by applying the callback function on each element of the source array. Since map doesn’t change the source array, we can say that it’s immutable method. Let’s revise the example which we’ve just discussed in the previous section with the map counterpart. As you can see, the numberArray array remains unchanged but return value of the map is a new array which is built by applying the square function to each element of the array. A great thing about the map function is that it’s chainable. This means you can call a number of map operations in a row. Here’s an example of chaining where we multiply each number by 2, convert them to strings, and then put a dollar sign on each one. Chaining map  Differences Between the map Vs forEach Methods The main difference between map and forEach is that the map method returns a new array by applying the callback function on each element of an array, while the forEach method doesn’t return anything. You can use the forEach method to mutate the source array, but this isn’t really the way it’s meant to be used. Instead, it’s great for when you need to do some action with each element of the array. On the other hand, the map method is used for creating a new array, and thus, it’s chainable. You can call a number of map operations one after the other. The forEach method doesn’t return anything, so you can’t chain it with any other methods—it’s not chainable. Which One Should I Use, map or forEach? Now, it boils down to this question, how to decide whether you should use the map or forEach method? If you’re planning to alter the array elements by applying some function, you should use the map method, since it doesn’t modify the original array and returns a new array. In this way, the original array it kept intact. On the other hand, if you want to loop through all the elements of an array and don’t need a returned array,  use the forEach method. Apart from this, the functions are very similar. Conclusion Today, we discussed two useful methods in JavaScript: map and forEach. We went through the differences between them along with a couple of real-world examples.

  • 8 Best Free and Open Source JavaScript Game Engines and Libraries
    by Monty Shokeen on 26 septembrie 2021 at 4:13

    Web browsers have come a long way over the last two decades. The introduction of continually improving web standards and developers who implement them in a variety of browsers now allows us to do things directly inside browsers that were either not possible or very hard to achieve earlier. When combined with all the features and processing power that now come with modern smartphones and computers, it is now possible for us to create games that can run directly inside a user’s browser. While browser-based games still can’t compete head-on with natively developed games, we can run moderately complex games in a browser without requiring any installation. Developing a game is a humongous task, luckily there are a lot of JavaScript-based game engines and libraries around to help you cover the basics without needing to implement common features like collision detection yourself. In this tutorial, we will introduce you to some of the best free and open source JavaScript game engines and libraries that you can use in your own projects. PixiJS PixiJS is one of the most popular libraries out there that you can use to create stunning graphics for your games. The library uses WebGL for rendering and automatically fallbacks to canvas on older platforms so you don’t have to worry about anything. There are enough features in the library to make a compelling argument that you should give it at least one try. The following CodePen demo by Omar Shehata shows how you can create this smokey effect using PixiJS. With PixiJS you have support for sprite sheets with features that include trimming and rotational packing. There is also an asset loader to help you load and manage things like graphics, fonts and animation data. The multi-touch input and tracking allows you to implement user interactions like panning and pinch-to-scale. The library also offers a variety of WebGL filters, tinting and blend modes as well as advanced text rendering to help you deliver a high-quality visual experience. One of the easiest ways to learn more about the library and find out what it has to offer is to go through the long list of examples that demonstrate its capabilities. Phaser Phaser is yet another library that you can use to quickly create HTML5 based games for mobiles as well as desktop browsers. There are a lot of similarities as well as some difference in terms of offered features. For example, Phaser also allows you to render graphics using WebGL and canvas. The following CodePen demo by Aaron Buchanan shows how you can implement core functionality of the popular Fruit Ninja game in Phaser. The core framework of the library is free for commercial use but you can get extra features and functionality using paid plugins. You can develop your own games either in JavaScript or TypeScript. Phaser has a lot of interesting features such as advanced multi-camera support. This basically allows you to create extra cameras that can be placed anywhere on the screen. The cameras are scrollable and come with effects like shake, flash and fade. Images, sounds, sprite sheets and other assets can be loaded and managed easily into the game with the help of a built-in preloader in the library. One of the things that you will like about Phaser is that it was created with mobile in mind. This basically means that the developers took extra care that any feature they add to the core library performs well on mobile devices. Stage.js The Stage.js library is ideal for people who want to develop simple 2D games that won’t need complicated features. The games are rendered using the canvas element in HTML5. Here is an implementation of a simple Tic-Tac-Toe game by creotip using stage.js. You can find some more advanced examples on the website’s homepage. While the HTML5 canvas element can be used to create graphics and animations, it has some limitations that make game development a little more difficult. The Stage.js library gets around this limitation by implementing its own DOM like structure for the elements that you draw on canvas. It also handles and properly propagates different mouse and touch events across different objects for you. The library comes with a built-in game loop as well as other features that you need to quickly create basic 2D games. This includes manipulating the size, position and transparency of different elements as well as listening to and handling different mouse and touch events. MelonJS MelonJS is a free JavaScript based game engine that is easy to learn and powerful enough to create simple platformer games. It is a lightweight and dependency free gaming library so there is no need to load anything else to make it work. All you need is a capable HTML5 browser. MelonJS uses a WebGL renderer with canvas fallback just like our first two libraries. It comes with its own lightweight physics implementation to ensure low CPU requirements. It also offers support for sprite sheets and textures along with animation management. You have access to mouse and touch events as well as system and bitmap fonts. Detection of device motion, orientation and accelerometer is also supported. Once you have developed your game, you can use Corodova to turn it into a hybrid mobile app. The game engine also provides native integration for many other 3rd party plugins as well. BabylonJS The libraries and engines that we have discussed so far are all meant for creating 2D games. What if you are looking for a rendering engine that will help you create 3D games? BabylonJS is going to be a great help in that case. Here is a simple forest created using the BabylonJS library by Pavel Starý. You can move around in it by pressing arrow keys. There are a lot of features in the rendering engine that make it worth a try. There are a lot of editors to help you save time and create basic effects. This includes a particle editor to quickly create and configure particle systems as well as a node material editor etc. The library offers a lot of special effects like fog, depth of field, lens flares, and sharpening. There is also a lot of optimization involving hardware accelerated instances along with offscreen canvases etc. Three.js The name of popular library Three.js is bound to come up whenever we are discussing anything related to 3D graphics or visualizations in the browser. It is a very general purpose 3D rendering library that you can use for a lot of things. This means that it can also be used to render graphics for your 3D games as well. Here is a CodePen demo by Lisa Kobrazova that creates a Saturn-like planet using Three.js to show what you can do with the library. The library offers support for scenes, animations, cameras and objects. You can also add light to a scene while making it appear ambient, directional or coming from a point. Similarly, you can create a variety of geometrical shapes such as a cube, sphere, torus and 3D text. The Three.js library has a huge active community to help you along the way during your learning process. The detailed documentation and this examples page can help you learn and explore what you can do with the library. Matter.js Now that we have talked about full fledged 2D gaming libraries and 3D render engines, it is time to include some physics engines in the discussion as well. Matter.js is a feature-rich physics engine for 2D rigid bodies that you can incorporate in your games. You can use it to go beyond basic collision detection in any 2D games that you develop. It allows you to specify values for physical properties like mass and density for different objects. Here is an example I created to show you how Matter.js can be used to apply forces on any rigid body. There are a lot of things that you can simulate with the library like gravity, friction and elastic or inelastic collisions. We have also written a series of tutorials on this topic to help you get started with Matter.js. Cannon.js The Cannon.js library is a light weight 3D physics engine for the web. This physics engine comes with a variety of features like collision detection, support for different body shapes, and friction as well as constraints like hinges. These capabilities of the physics engine can be combined with a 3D rendering library like Three.js to create some 3D games like the popular stack game shown in the CodePen below, created by Hunor Marton Borbely. You can also use some other alternative 3D physics engines like Oimo.js depending on how you would like to develop different features in a game. The Oimo.js library feels similar to Matter.js in some aspects so learning it might be a bit easier if you already have some experience with Matter.js. It is also relatively newer in comparison to Cannon.js. Final Thoughts It is exciting to think that we have come so far in terms of web development that it is possible to create and run games inside browsers. However, you should remember that game development is a very demanding task even with all these advancements and libraries to help you out. This is especially true for 3D games. My advice for you would be to start small and learn about different aspects and features of these gaming engines and libraries before diving straight into a big project. This will prevent you from getting overwhelmed and discouraged while learning new things along the way. JavaScript 8 Best Free and Open-Source Drawing Libraries in JavaScript Monty Shokeen JavaScript Best Free JavaScript Chart Libraries Monty Shokeen JavaScript Best Free and Open-Source JavaScript Animation Libraries Monty Shokeen

  • Scrape Search Engine Result Pages in Real Time With Zenserp
    by Monty Shokeen on 21 septembrie 2021 at 22:51

    In one of my previous posts, I talked about using Zenscrape to extract data at scale. Their API makes it incredibly easy for you to make a lot of requests to scrape webpages from different websites. Zenscrape took care of a lot of things for us, like localization and JavaScript rendering. All this makes it possible for you to extract content from any webpage that you need. What if you want to scrape search engine result pages? You can certainly do that with Zenscrape, but there is a more specialized service created by the same team of developers called Zenserp that will help you do it more efficiently. Advantages of Using Zenserp I will begin the tutorial by listing some of the advantages offered by Zenserp when it comes to extracting real-time data from search engine result pages. Coverage of All Available Snippets I am sure you have noticed during your own Google searches that not all search pages show the same kinds of search results. Users get a mixed set of content, depending on the search terms they used. Besides including regular organic search results, these search engine result pages (SERPs) can contain snippets for other types of content such as news results, paid results including all kinds of Google ads, related questions, knowledge graphs, and some image or video results. Filtering through all that content to find what you are looking for can be difficult. However, Zenserp takes care of sorting through all this data for you automatically. It also regularly updates the API to include any new type of content added to the SERPs. Support for Multiple Platforms It is no secret that Google dominates the search engine market. Keeping this in mind, the Zenserp API provides multiple endpoints specific to Google-based search results. For example, you can send a request for a regular SERP in Google or you can be more specific and get search results from the Images, Videos, Maps, News, or Shopping tabs. The Zenserp API also has endpoints to give you search results from YouTube, Bing, Yandex and DuckDuckGo. They also intend to keep adding new endpoints to the API when the need arises. These and many other features help you save valuable time to focus on your core business idea instead of spending time figuring out how to extract information from SERPs. Scraping SERPs Using the Zenserp API Now, it’s time to learn how we can take advantage of the Zenserp API to extract valuable SERP data in real time. You should start by creating a free account on Zenserp. Signing up for a free plan will give you a quota of 50 API requests per month. This will make it easier for you to follow this tutorial while allowing you to run your own tests with the API. Zenserp also personalizes the code snippets in the documentation by filling in your API keys once you have logged in successfully. The API keys are also useful for executing all your requests in the Zenserp playground. You can simply select the API endpoint from the dropdown and fill out any other blank fields that you like before executing the request. Getting SERP Data From a Regular Google Search Let’s begin with one of the most common search scenarios: people type something in the search bar and get the search results. You can get the search results by making a request to /api/v2/search in the API with the appropriate parameters. We will use the search term „Gift Ideas” in our case. As I mentioned earlier, you can either run this request through the Zenserp playground or get back some data from the API endpoint programmatically. Both these will cost you one credit each. The only required query parameter here is the search term, and it is denoted by q. You are also likely to get different search results depending on your location and the type of device you are using. However, those are optional parameters. The following PHP code with the Zenserp API will help us get Google SERP data as if we were running a search query from New York. Please note that we have decoded the response as an associative array using the json_decode() function to navigate through key-value pairs. <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HEADER, false); $data = [ „q” => „Gift Ideas”, „location” => „New York,New York,United States”, ]; curl_setopt($ch, CURLOPT_URL, „https://app.zenserp.com/api/v2/search?” . http_build_query($data)); curl_setopt($ch, CURLOPT_HTTPHEADER, array( „Content-Type: application/json”, „apikey: YOUR_API_KEY”, )); $response = curl_exec($ch); curl_close($ch); $json = json_decode($response, true); ?> Zenserp also shows you what the SERP for the above request actually looks like. You can see that the JSON text response included below matches whatever we see visually. Here is part of the JSON response that we get back while executing the above API request. We can now write some code to extract the data we need by taking advantage of this neatly structured JSON. { „query”: { „q”: „Gift Ideas”, „location”: „New York,New York,United States”, „apikey”: „011951b0-177b-11ec-9490-872985f6948b”, „url”: „https://www.google.com/search?q=Gift+Ideas&oq=Gift+Ideas&uule=w+CAIQICIfTmV3IFlvcmssTmV3IFlvcmssVW5pdGVkIFN0YXRlcw&hl=en&gl=us&sourceid=chrome&ie=UTF-8” }, „organic”: [ { „position”: 1, „title”: „Gift Ideas – Target”, „url”: „https://www.target.com/c/gift-ideas/-/N-96d2i”, „destination”: „https://www.target.com › gift-ideas”, „description”: „Target/Gift Ideas (4149)‎. Find the perfect gift. for every person, budget and occasion (even if it’s just because). Who are you shopping for?”, „isAmp”: false }, { „position”: 2, „questions”: [ { „question”: „What are some thoughtful gifts?” }, { „question”: „What should I buy for Christmas 2020?” }, { „question”: „What is the best gift to give anyone?” }, { „question”: „What to give a person who has everything?” } ] }, { „position”: 3, „title”: „Amazon.com Gift Ideas: The most popular items ordered as …”, „url”: „https://www.amazon.com/gp/most-gifted”, „destination”: „https://www.amazon.com › most-gifted”, „description”: „Discover birthday gifts ideas, anniversary gift ideas and wedding gifts. Save time by browsing only the best gifts, including tablets, books, music, video games …”, „isAmp”: false }, … MORE SUCH JSON DATA Let’s say we want to know the questions that people usually ask when they are looking for „Gift Ideas”. This means that we will be searching for the questions key in the organic results. We can then loop through the organic results, assuming that we don’t know where the questions will be located and don’t want to provide a hard-coded value. Here’s the code that will give us a list of all the „People also ask” questions: <?php $organic_results = $json[‘organic’]; foreach($organic_results as $result) { if(isset($result[‘questions’])) { $questions_asked = $result[‘questions’]; break; } } foreach($questions_asked as $question) { echo $question[‘question’].”\n”; } /* Output What are some thoughtful gifts? What should I buy for Christmas 2020? What is the best gift to give anyone? What to give a person who has everything? */ ?> Using More Specific Google Search Endpoints As I mentioned earlier, the Zenserp API also provides some more specific endpoints if you want to find just images, videos, shopping results, etc., for a particular query. This is done with the help of the tbm parameter. It can have one of the following values: Parameter Value Search Type isch Image Search vid Video Search nws News Search shop Shopping Search Since we are interested in limiting our search to image results, I will set it to isch for our example. The search query this time will be „Apollo 11”. Here is the PHP code to execute the Zenserp API request and get the image search data. <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HEADER, false); $data = [ „q” => „Apollo 11”, „tbm” => „isch”, „location” => „New York,New York,United States”, ]; curl_setopt($ch, CURLOPT_URL, „https://app.zenserp.com/api/v2/search?” . http_build_query($data)); curl_setopt($ch, CURLOPT_HTTPHEADER, array( „Content-Type: application/json”, „apikey: YOUR_API_KEY”, )); $response = curl_exec($ch); curl_close($ch); $json = json_decode($response, true); ?> As you can see, we didn’t have to change much to turn our regular Google search query into an image search for Zenserp. All we did was add a tbm parameter and update the query parameter q. The JSON response that you get back from the API will look similar to the one below. { „query”: { „q”: „Apollo 11”, „tbm”: „isch”, „location”: „New York,New York,United States”, „apikey”: „011951b0-177b-11ec-9490-872985f6948b”, „url”: „https://www.google.com/search?q=Apollo+11&oq=Apollo+11&uule=w+CAIQICIfTmV3IFlvcmssTmV3IFlvcmssVW5pdGVkIFN0YXRlcw&tbm=isch&ijn=0&asearch=ichunk&async=_id%3Arg_s%2C_pms%3As%2C_fmt%3Apc&hl=en&gl=us&sourceid=chrome&ie=UTF-8” }, „related_searches”: [], „image_results”: [ { „position”: 1, „thumbnail”: „https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVlm-i3gu5nFHus9kJJgDsno6u1oL40g_G46kZT7Qa_WeuoAvC&s”, „sourceUrl”: „https://cdn.britannica.com/92/118692-050-194A0468/Neil-Armstrong-Apollo-11-Michael-Collins-Edwin.jpg”, „title”: „Apollo 11 | History, Mission, Landing, Astronauts, Pictures …”, „link”: „https://www.britannica.com/topic/Apollo-11”, „source”: „www.britannica.com” }, { „position”: 2, „thumbnail”: „https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyYKlOtsEOKWggUXrUkjjVChdxprUU5WJcqTUeZbUeE-UmRCpk&s”, „sourceUrl”: „https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Aldrin_Apollo_11_original.jpg/1200px-Aldrin_Apollo_11_original.jpg”, „title”: „Apollo 11 – Wikipedia”, „link”: „https://en.wikipedia.org/wiki/Apollo_11”, „source”: „en.wikipedia.org” }, …MORE SUCH JSON DATA We can use the following PHP code to iterate through all the image results returned by Zenserp and easily extract the required information from the data. In our case, we just want the sourceUrl, title, and link. <?php $image_results = $json[‘image_results’]; foreach($image_results as $result) { $source = $result[‘sourceUrl’]; $title = $result[‘title’]; $link = $result[‘link’]; echo ‘<figure> <img src=”‘.$source.'”> <figcaption><a href=”‘.$link.'”>’.$title.'</a></figcaption> </figure>’; } ?> You can use it to do many things, like downloading all those images or determining how many of the top 100 images are shown from your or some other website. For this example, we output all the information as part of figure tags on a webpage. Get Bing SERP Data Using Zenserp The Zenserp API also has endpoints to help you get data from the search results of other popular search engines like Bing, Yandex, and DuckDuckGo. The code to get back a JSON response for a query is very similar to what we have been doing so far. The PHP code below will give you the search results for the query „Mangoes” on Bing. I should mention that Zenserp generates all these snippets for you automatically in its playground. <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HEADER, false); $data = [ „q” => „Mangoes”, „search_engine” => „bing.com”, ]; curl_setopt($ch, CURLOPT_URL, „https://app.zenserp.com/api/v2/search?” . http_build_query($data)); curl_setopt($ch, CURLOPT_HTTPHEADER, array( „Content-Type: application/json”, „apikey: YOUR_API_KEY”, )); $response = curl_exec($ch); curl_close($ch); $json = json_decode($response, true); ?> Running the above code will give you a JSON response that looks similar to the one below. { „query”: { „q”: „Mangoes”, „search_engine”: „bing.com”, „apikey”: „011951b0-177b-11ec-9490-872985f6948b”, „url”: „https://www.bing.com/search?q=Mangoes” }, „navigation_tabs”: [ { „link”: „https://www.bing.com/search?q=mango+fruit&filters=dtbk:\”MCFvdmVydmlldyFvdmVydmlldyE1MTEyNWI1Yi0xNTNlLWJlM2YtZTRhYS0xYTQ1MzFkMzE4N2M%3d\”+sid:\”51125b5b-153e-be3f-e4aa-1a4531d3187c\”+tphint:\”f\”&FORM=DEPNAV”, „title”: „Mango”, „subtitle”: „Stone Fruit”, „is_primary”: true, „is_active”: false, „image”: „data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYGBgYHBgcICAcKCwoLCg8ODAwODxYQERAREBYiFRkVFRkVIh4kHhweJB42KiYmKjY+NDI0PkxERExfWl98fKcBBgYGBgcGBwgIBwoLCgsKDw4MDA4PFhAREBEQFiIVGRUVGRUiHiQeHB4kHjYqJiYqNj40MjQ+TERETF9aX3x8p//CABEIACgAKAMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAHBggFA//aAAgBAQAAAAAGtb89neMjaZEi3waWLu5UDmZjv85i1GsUwR//xAAZAQEAAwEBAAAAAAAAAAAAAAAGAgQFAAP/2gAKAgIQAxAAAAA/0bftWyrJHffk9KQVEnNf/8QAKhAAAgIBBAAGAgEFAAAAAAAAAQIDBAUABhESExQhMUJRMkEHIiNxgaH/2gAIAQEAAT8AOXs2q8OOktuuPSVXdF4PHp05A+wPQDWfGSn3GtCLG9LUVZVSoOPD6og6uWB5LcerawUFvblVLctcZCe1JG7xx8EI03IkKhvgg4BOs/LQfOOlPC3IOUnNihPw6LGV5EyFfbWPStDdxyCM27clPuqlPC6ScE9OT6OCuo8ZDAiPJHZMrAlWhKsB9cKeDr+LMXJezM9pDZRE5WezKR35PwQcHk/fOo9pYKesI3a2SsbxpJ5hu6K7Bz1/2ARrd/8AEV+hehv1c3ZnpSyCGZpB2ngV/T1K/kh0EzWNzcFqa1WnWhMFWOWdSeg/WsXvKrj4GSXb1SzKwBErMQRraGb85Vq3jUhrG4ZGdIhwvcP15/yQNY607ALpkjtwz1p17QyxtG6/auODrHbIrVtw2MaMQ0yxyslmzaJ8IIjfkoHuToRr5lVhH5yAIHI/Z9A2tjSt5W7Qdh/anYxAHnqfmAf+jW3clLIGjlflkbjnVGwWcDt7nW+942sbmMnDistA5tyTib5eF2PXprFS4uKPIpZpy2JpYOtXr8GPyOsBvSfC458YaMfpN4nc89+R8dYHdGKmkWeCynSQf1xMwWSM/TKdZPfNGjXkSjIbFtkPURDnwh7Fzz7kfoa27Qwj7tdZrTtR6MS06CN5G9+pGv/EACQRAQACAAUDBQEAAAAAAAAAAAECAwAEERIhBTFBBhMVIlGx/9oACAECAQE/AMzRWQbqZ1BCE9Iy4Gck5UxXWRk3FpsKkQV868Bi2NNm1lGE3b4l2/mPUHTssZSVtUWM2Qyd0n69uy46f1a/KZj2LpKswHxo4hU3xLGSa/qmLMvVbKyFgyjM1RXxxjM9FyXyEh3pW8C99P3GYfuDzpA5cf/EACERAAIBBAEFAQAAAAAAAAAAAAECAAMEERIFFSEiMVFx/9oACAEDAQE/ALWmajaUiGB9D8+y42WmqaYCwAThVoW9/uEGXUrL21By6jsRHqaOVyBiJlSGBIOZdchX6YKgCbEfIj5B8RP/2Q==”, „image_alt”: „Mango”, „image_base64”: „data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYGBgYHBgcICAcKCwoLCg8ODAwODxYQERAREBYiFRkVFRkVIh4kHhweJB42KiYmKjY+NDI0PkxERExfWl98fKcBBgYGBgcGBwgIBwoLCgsKDw4MDA4PFhAREBEQFiIVGRUVGRUiHiQeHB4kHjYqJiYqNj40MjQ+TERETF9aX3x8p//CABEIACgAKAMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAHBggFA//aAAgBAQAAAAAGtb89neMjaZEi3waWLu5UDmZjv85i1GsUwR//xAAZAQEAAwEBAAAAAAAAAAAAAAAGAgQFAAP/2gAKAgIQAxAAAAA/0bftWyrJHffk9KQVEnNf/8QAKhAAAgIBBAAGAgEFAAAAAAAAAQIDBAUABhESExQhMUJRMkEHIiNxgaH/2gAIAQEAAT8AOXs2q8OOktuuPSVXdF4PHp05A+wPQDWfGSn3GtCLG9LUVZVSoOPD6og6uWB5LcerawUFvblVLctcZCe1JG7xx8EI03IkKhvgg4BOs/LQfOOlPC3IOUnNihPw6LGV5EyFfbWPStDdxyCM27clPuqlPC6ScE9OT6OCuo8ZDAiPJHZMrAlWhKsB9cKeDr+LMXJezM9pDZRE5WezKR35PwQcHk/fOo9pYKesI3a2SsbxpJ5hu6K7Bz1/2ARrd/8AEV+hehv1c3ZnpSyCGZpB2ngV/T1K/kh0EzWNzcFqa1WnWhMFWOWdSeg/WsXvKrj4GSXb1SzKwBErMQRraGb85Vq3jUhrG4ZGdIhwvcP15/yQNY607ALpkjtwz1p17QyxtG6/auODrHbIrVtw2MaMQ0yxyslmzaJ8IIjfkoHuToRr5lVhH5yAIHI/Z9A2tjSt5W7Qdh/anYxAHnqfmAf+jW3clLIGjlflkbjnVGwWcDt7nW+942sbmMnDistA5tyTib5eF2PXprFS4uKPIpZpy2JpYOtXr8GPyOsBvSfC458YaMfpN4nc89+R8dYHdGKmkWeCynSQf1xMwWSM/TKdZPfNGjXkSjIbFtkPURDnwh7Fzz7kfoa27Qwj7tdZrTtR6MS06CN5G9+pGv/EACQRAQACAAUDBQEAAAAAAAAAAAECAwAEERIhBTFBBhMVIlGx/9oACAECAQE/AMzRWQbqZ1BCE9Iy4Gck5UxXWRk3FpsKkQV868Bi2NNm1lGE3b4l2/mPUHTssZSVtUWM2Qyd0n69uy46f1a/KZj2LpKswHxo4hU3xLGSa/qmLMvVbKyFgyjM1RXxxjM9FyXyEh3pW8C99P3GYfuDzpA5cf/EACERAAIBBAEFAQAAAAAAAAAAAAECAAMEERIFFSEiMVFx/9oACAEDAQE/ALWmajaUiGB9D8+y42WmqaYCwAThVoW9/uEGXUrL21By6jsRHqaOVyBiJlSGBIOZdchX6YKgCbEfIj5B8RP/2Q==”, „rank”: 1, „global_rank”: 1 }, { „link”: „https://www.bing.com/search?q=mango+fruit+nutrition+facts&filters=dtbk:\”MCFvdmVydmlldyFrZ192M19udXRyaXRpb25fZmFjdHMhNTExMjViNWItMTUzZS1iZTNmLWU0YWEtMWE0NTMxZDMxODdj\”&FORM=DEPNAV”, „title”: „Nutrition facts”, „is_primary”: false, „is_active”: false, „rank”: 2, „global_rank”: 2 }, { „link”: „https://www.bing.com/search?q=mango+fruit+uses&filters=dtbk:\”MCFvdmVydmlldyFrZ192M191c2VzITUxMTI1YjViLTE1M2UtYmUzZi1lNGFhLTFhNDUzMWQzMTg3Yw%3d%3d\”&FORM=DEPNAV”, „title”: „Uses”, „is_primary”: false, „is_active”: false, „rank”: 3, „global_rank”: 3 }, … MORE SUCH JSON DATA Just like the Google SERP in our first example, Zenserp provides a visual representation of the results for direct comparison. We can now extract whatever information we like from the JSON response. In this example, I chose to create a list of organic search results as well as the related searches. Here is my code to do that. <?php $organic_results = $json[‘organic’]; $related_searches = $json[‘related’]; echo ‘<h2>Organic Search Results</h2>’; foreach($organic_results as $result) { $link = $result[‘link’]; $title = $result[‘title’]; echo ‘<h3><a href=”‘.$link.'”>’.$title.'</a></h3>’; } echo ‘<h2>Related Searches</h2>’; echo ‘<ol>’; foreach($related_searches as $related) { echo ‘<li>’.$related[‘text’].'</li>’; } echo ‘</ol>’; ?> The following image shows the end result after using a little bit of CSS. Final Thoughts Zenserp is a great tool for extracting useful information from the result pages of different search engines. If you have ever tried to create a tool to scrape information from SERPs, you will start to truly appreciate the amount of time and effort it saves by giving access to all that data with a very simple API. You no longer need to worry about creating sophisticated scrapers and then constantly updating your parser for the ever-changing markup of those search result pages to get back some useful data. The best part is that you don’t have to pay anything upfront to test Zenserp. You can create a free account in a couple of minutes and get 50 API requests free each month to see if it meets your project needs.

  • How to Hash and Decrypt With MD5 in JavaScript
    by Sajal Soni on 18 septembrie 2021 at 11:57

    In this article, we’ll discuss how you can use JavaScript to create an MD5 hash of a string, salt it, validate it, and decrypt it. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development. As a JavaScript developer, sometimes you need to convert a string into an MD5 hash. There are many open-source libraries that allow you to do this in your JavaScript projects. Some of them are available as NPM packages, and there are a few others that you can use as standalone JavaScript libraries by just including them in your HTML pages. In this article, we’ll explore a couple of popular MD5 JavaScript libraries to understand how you can use them in your projects. We’ll also discuss how you can decrypt an MD5 hash in JavaScript. Although it’s theoretically not possible to decrypt an MD5 hash into the original string, you can sometimes accomplish this with the help of lookup services. Of course, there’s no guarantee that it will work in every case. You’ll only be able to decrypt words that are already stored in the look-up databases. However, these are giant databases that contain over a billion hashes, so there’s a strong possibility that they contain the most common words and combinations of symbols. How to Create an MD5 Hash in JavaScript In this section, we’ll explore a few libraries that allow you to create MD5 hashes. We’ll start with one of the most popular libraries: blueimp/JavaScript-MD5. It’s really easy to integrate the blueimp/JavaScript-MD5 library in your projects, since you just need to include the source JavaScript file in a script tag. It’s also compatible with server-side environments like Node.js. Apart from that, it also supports module loaders like RequireJS and webpack, and it works in all major web browsers. As it supports Node.js, you can quickly install it with NPM, as shown in the following snippet. npm install blueimp-md5 If you are not using NPM in your projects, you can instead download the source file from GitHub. To start using it in your projects, you just need to include the following snippet in the <head> section of your HTML pages. <script src=”js/md5.min.js”></script> Once you’ve included the md5.min.js file in your projects, you’re ready to use the features provided by this library! Let’s go through the following example to see how you can use it to create MD5 hashes. <script type=”text/javascript” src=”md5.min.js”></script> <script> window.addEventListener(‘load’, function() { var strHash = md5(‘tutsplus’); alert(‘The MD5 hash of the tutsplus string is:’ + strHash); }); </script> As you can see, it’s pretty straightforward to use. The blueimp/JavaScript-MD5 library provides the md5 function, which you can use to generate MD5 hashes. Next, we’ll look at another library, which is also a quick way to generate MD5 hashes. You can download it from the creators’ website. Once you’ve downloaded it, you can use it as shown in the following snippet. <script type=”text/javascript” src=”md5.js”></script> <script> window.addEventListener(‘load’, function() { var strHash = md5(‘tutsplus’); alert(‘The MD5 hash of the tutsplus string is:’ + strHash); }); </script> So that’s how to generate MD5 hashes in JavaScript. In the next section, we’ll explore how you can decrypt MD5 hashes in JavaScript. How to Decrypt an MD5 Hash in JavaScript First of all, let’s understand that there’s no native way in JavaScript to decrypt MD5 hashes. Since MD5 hashing is a one-way algorithm, theoretically it’s not possible to reverse MD5 hashes. There are a couple of workarounds that you can use to crack MD5 hashes, but they are not foolproof, so there’s no guarantee that they will always work. One thing that makes it possible to sometimes decrypt hashes is that the MD5 algorithm always generates the same result for a string. Thus, if you have a database which contains mapping of all popular words, you can use it as a lookup service—sometimes called a rainbow table—to find the original string of the MD5 hash. If the string that created the hash is in the database, you’ll be able to find it just by supplying the hash. This is why a secure login system will always „salt” the passwords. This means adding some extra characters to the string to be hashed—something like the current time in milliseconds or a random string of 32 characters, for example. That way, the string will have an unpredictable element and will not be found in the rainbow table.   How to Validate an MD5 Hash in JavaScript If you just want to check if a hash is correct for a string, it’s easy. Just hash the string with the MD5 algorithm and see if it matches the hash code you are testing. If the result of the algorithm matches the hash code you are testing, you have a match and the original hash code is valid.  If you’re validating a salted hash for a login system, you’ll need to include the salt string as well. Normally the salt string is stored in the login system’s database table along with the username and hashed password. That way, you can easily combine the salt with whatever password the user enters to log in, and test the resulting hash against the one found in the database.  Conclusion Today, we discussed how you can convert strings into MD5 hashes in JavaScript. Although it’s theoretically impossible to decrypt MD5 hashes, since hashing is a one-way algorithm, we discussed how you can try cracking MD5 hashes with the help of external APIs.

  • 25 Best Android App Mockup Generators
    by Franc Lucas on 18 septembrie 2021 at 3:47

    The best promotions succeed because they make the audience see themselves in everyday situations with your app or website. This is where these mobile app mockups come in. Mockups are customizable templates with placeholder images. You just need to replace the placeholder image on the mockup with your own. They are used for promoting apps, devices, websites, or any kind of product. On Envato marketplace, you will find mockups on Envato Elements, GraphicRiver, and Placeit.  In this post, we will look at Android mockups on Placeit. Android mockups show users how the app or website is going to look on their Android devices. Start using Placeit today and create amazing visuals that will amaze your customers! How to Use an Android App Mockup Generator  To customize an Android mockup template to make it your own, you just need to add your own photos of mobile app screenshots or your website content, and Placeit generates images of your app or website running on a certain kind of device. 1. Select an Android Phone Mockup Template To pick a mockup template, go to Placeit.net and choose Mockups > Android > Phone from the menu. From a wide selection of templates, you can choose the one you like most. This will take you to the Android mockup generator.  2. Upload Your Design Upload your selected image or URL, and it will display in the Android mockup template you selected. You can add your text, and a logo too if you have one.  3. Select Your Background  You can choose a background of your liking from the choices on the right-hand side. 4. Download Your Android Phone Mockup for a Small Fee When you’re satisfied with your Android phone mockup, you can download it for a small fee. And just like that, you’ve got a realistic iPhone mockup to use as you choose.  With these few easy steps, you can make your Android phone mockup.  But you can take it a step further and enjoy all the benefits Placeit has to offer with unlimited downloads for an affordable monthly subscription.  Placeit: Download Unlimited Mockups With One Subscription Get a Placeit subscription to download as many Android mockups as you want and promote your apps or websites.  Product Mockup What Is a Mockup? Andrei Stefan Now let’s take a look at the 25 best Android mockup templates to be found at Placeit. In this post, the mockups are organized into the following categories: Android phone mockups Android tablet mockups multiple Android device mockups Android watch mockups Android phone mockups 1. Android Screenshot Mockup Featuring a Samsung Phone Promote your app or website with this custom Android smartphone mockup of a Samsung Galaxy S9+ against a custom background with text. Upload your image and text, select a fun background, and introduce your app to the world!  2. Screenshot Mockup of a Floating Samsung Galaxy in Portrait Position Focus all attention on your app or website when you place it on this beautiful Samsung Galaxy S7 screen template in a portrait position against an attractive, colorful background. All you need to do is upload your own screenshot image, customize the text, and even change the background and its colors if you want.  3. Mockup of a Black Angled Samsung Galaxy with a Customizable Background If you want to give your audience an up-close look at the features of your app or the categories section of your website, why not do it with this Android phone mockup of a black angled Samsung Galaxy? Simply upload your screenshot and customize the text on the image.  4. Mockup of Two Samsung Galaxy S10 in Portrait Position Against a Plain Backdrop Simplicity always works best. Avoid all distractions and focus all attention on your app by selecting this mockup featuring two smartphones floating against a simple colored backdrop. All you need to do is upload two screenshots of your app, and that’s it!  5. 3 Black Android Phones Mockup in Portrait Position Over a Transparent Background Does your responsive app fit smoothly in the screens on all Android devices? Show it to your audience with this mockup of three phones in portrait position over a transparent background. You just need to add your content over the placeholders, and you’re ready to download and promote your app.  6. Mockup Featuring Three Android Phones in Portrait Position Over a Transparent Background Users will access your app or website from devices with varying screen sizes: smartphones of all kinds, tablets of all types, and desktops. This mockup is perfect for showing the most important feature of your app: compatibility with any device. 7. Sony Xperia Android Phones Lined Up in Angled Position Mockup This Android mockup template of three Sony Xperia phones in angled portrait positions will make your app or website come alive. Add your own image and watch users connect with your app.  8. Samsung Galaxy Mockup of Woman Holding Galaxy S5 While Drinking Wine In this great mockup for your Android app, the ambient setting is a wine bar or a restaurant where this woman is enjoying a glass of wine while browsing your website, chatting, reading, or checking out your Android app on her Samsung Galaxy S5. Drop in a screenshot from your app and place it right onto the Android’s screen! 9. Minimal Mockup of Two Samsung Galaxy S10 Placed Against a Solid Color Backdrop In this Samsung Galaxy mockup, the solid backdrop avoids any distractions and keeps the focus on your app or website. Just replace the image and text, and change the color of the background if you want. 10. Samsung S5 Mockup of a Girl Shopping for Shoes This Android mockup of a young woman showing the high-heeled boots she’s about to buy is perfect for your online store mobile website or app. Input a URL or drop an image of 1080×1900 px and you’re all set to go.  11. Samsung Galaxy S5 Mockup Girl Reflection on Mirror This Android phone mockup, which can be used to display a screenshot of your app, captures what most of us do daily: take a quick look in the mirror before you step out the door. It draws the audience in because of this familiar action.  12. White Samsung Galaxy Note 4 on Wood Table Next to Some Candles This Android mockup template showing an Android phone on a rustic table next to three beautifully crafted candle holders will give some shine to your accessories store app. Just upload your URL or photo, and you’ll be ready to market it to the world.  13. Android Mockup of a Teenager Scanning a QR Code Perfect for a millennial and Gen Z audience, this Android mockup template lets users of your app imagine themselves scanning QR codes at restaurants, stores, cinemas, and so on.  Multiple Android Device Mockups 14. Asus Laptop and Sony Xperia Mockup Featuring a Man Multitasking with People in the Background Working across different devices is the order of the day. What better way to show that your app works across multiple devices than with this Android mockup of a man holding a laptop and a tablet. See what happens when you drop your app photos on the two screens and go live on the Google Play Store.  15. Multiple Device Mockup of a Monitor, Android Phone, MS Surface and an Android Tablet Your app reaches far and wide, seamlessly fitting all screens on different devices. Say it all with this Android mockup template with a Samsung tablet, a monitor, Windows Surface, and an Android phone in portrait and landscape position over a transparent background. 16. Android Galaxy Tablet with Android Phone Responsive Mockup Over a Transparent Background With this Android mockup featuring an Android phone and tablet over a transparent background, you skip all the bells and whistles and show your app by adding your image over the placeholders. You can add any type of background.  Android Tablet Mockups 17. Samsung Galaxy A Tab Mockup with Hexagonal Prisms Let your app or responsive website stand out with this colorful and amazing Android mockup of a Samsung Galaxy A Tablet. Muted solid colors allow the image of your app or website to grab attention.  18. Android Mockup of Girl Using Nexus at Staircase This Android mockup of a young woman chilling on the stairs or on the stoop is the best way to showcase how enjoyable your content is to users of your app or website visitors. 19. Over Shoulder Mockup Featuring a Woman Using a Nexus 7 We use our tablets in waiting rooms, public spaces, buses, trains, and so on. This Nexus 7 mockup template will work best for websites that want people in casual and relaxed settings to enjoy their content.   20. Mockup of an Android Tablet Placed in Landscape Position over a Desk This all-purpose mockup template shows your app being used in business settings, on community tables at cafes, and even in private workspaces in users’ homes. The soft blurry background quiets the noise so users can pay attention to what is on the screen.  21. Couple Using Nexus on a Romantic Date Android Mockup Template This mockup will appeal to a wide audience because of the warmth captured in the photo: the smiling couple in the glow of warm restaurant lights looking at your app or reading the content of your website. 22. Nexus 7 Mockup Featuring a Woman at a Bistro This mockup template is perfect for showcasing food apps and foodie websites and blogs.  Android Watch Mockup Promote your amazing smartwatch designs with Placeit’s digital mockups! Our mockups are super customizable, so you can change the background and make the image your own. Try it out—it’s amazingly fast. Edit your smartwatch mockup now. 23. Mockup of a Samsung Galaxy Gear 2 over an Agenda Does this mockup remind you of something? It makes me nostalgic for days my desk used to be so organized and everything was in its proper place. There you have it! An audience that can be reached with this mockup for a Samsung Galaxy Gear 2 app!  24. Mockup of a Samsung Galaxy Gear 2 on a Man’s Arm This image of a smartwatch on the arm of a person about to click a button on its side connects with your audience because it’s so modern and everyday. It is what makes this mockup ideal for introducing your Samsung Galaxy Gear 2 app.  25. Mockup of a Man Wearing a Samsung Galaxy Gear 2 Who wouldn’t want to download your app or visit your website after seeing this mockup of a person writing on a notebook while wearing a smartwatch. That’s what makes this smartwatch mockup perfect for promoting your app or website. Just drop your 320×320 pixel image and see your downloads skyrocket!  In addition to Placeit, you can find more Android mockup templates on Envato Elements. An Envato Elements subscription allows you to download all the digital assets you want, including unlimited Android mockup templates of all kinds, so you can focus on your creative projects! The items on Envato Elements are super-high quality, and the licensing is straightforward, so you can focus on your creative projects without worries.  Test Drive an Android Screen Mockup Today! There are thousands of Android device mockups that you can try at Placeit. Why not sign up for free and see for yourself.  And if you’re interested in other kinds of mockups, here are a few posts to get you started:  Product Mockup 21 Best Smartwatch Mockups (Using an Android and Apple Watch Mockup Generator) Nona Blackman Mac 21 Best MacBook & Laptop Mockup Templates (Including iMac & MacBook Pro PNG Mockups) Nona Blackman Product Mockup 30 Best iPad Mockup Templates (PSD & PNG) With Realistic Results Nona Blackman Mobile App 20 Best Mobile App Promo Video Templates Franc Lucas